【webデザイン制作の参考に】ワンランク上のデザインに!シンプルで取り入れやすいアニメーションをまとめてみた!

アニメーション①一部のイラストを動かす

こちらのサイトにはページ全体に複数可愛らしいイラストが配置されているのですが、

そのイラストたちが定期的に動きを見せてくれます。

動きはとてもシンプルですし、特別なアニメーションではないのですが、うるさすぎないので主張が激しくないし、でも目に留まるという点から取り入れてみたいと思いました。

TOSACO | おいしい高知の、おいしいビール。
地域原料・地域循環・クラフトマンシップをポリシーに、 高知県土佐山田町でクラフトビールを造っている「高知カンパーニュブルワリー」のウェブサイトです。


アニメーション②スクロールと同時に文字が動く

こちらのサイトでは背景にテキストを配置しており、スクロールするとテキストも連動して動くアニメーションを取り入れています。

今まで画像を背景に配置してパララックスを取り入れたサイトは作ったことがありますが、なかなか文字は思い付きませんでした。

文字で背景をオシャレに見せるのって素敵ですよね。

こういったデザインを作った時にはぜひ取り入れてみたいと思います。

PLATFORM
PLATFORMは、飲食店のためのモバイルオーダー運用ソリューションです。お客様一人ひとりの注文に紐づく、あらゆる情報を蓄積し、資産にしていきます。


アニメーション③画像に回転を入れながら表示させる

配置している画像を表示させる時、「ここまでスクロールしたら表示させる」という指定ができますよね。

下からフワッと出すか、横から出すか…など色々ありますが、こちらのサイトのアニメーションは今まで見たことがないな〜と思ったのでピックアップしてみました。

言葉だと上手く言い表せませんが、簡単に言えば画像を「くるっと」少し斜めに回転を入れながら表示させています。

TRAIL HEADS 5TH ANNIVERSARY
トレイルヘッズ5周年の軌跡|実績とこれからのビジョン


まとめ

今回はシンプルで取り入れやすそうなアニメーションをまとめてみました。

自分から「ここにはこういうアニメーションを」…と指定したことがないかったので、

これからはそういう部分にも凝っていきたいのですが、とはいえいきなり凝ったアニメーションを選ぶと、同時にデザインにも時間がかかってしまいそう…と思い、取り入れやすそうなものをピックアップしてみました。

これからは自分の意思・目的を持ってアニメーションを決め、「見進めたい」と思ってもらえるサイト作りに力を入れていきたいです。

コメント

タイトルとURLをコピーしました