Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。
しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。
そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。
そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。
今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思います。
それではデザインテイストにあわせた表現について考えていきましょう。
ホバーアニメーションの一番の目的としては「クリック可能であると分かる」ことですので、全ての要素が.hoge:hover {opacity: .7;}だとしても問題はないのですが、サイトの世界観に合わせてアニメーションを設定していくことで、よりまとまりのある魅力的なサイトにしていくことができます。
また、アニメーションの種類や速さなどによって与える印象は異なってきますので、その辺りを把握しておくことでデザインテイストに沿った表現が作りやすくなります。
全て同じアニメーションにする必要はありませんが、同じサイト内では似た雰囲気のアニメーションを使用したほうがまとまりは出やすいです。
いくつか例を挙げていきます。
例えば絵本っぽいデザインや手書き風のデザインのように、実際に物体があるかのようなデザインのときに有効です。
そのような場合には要素の「移動」や「変形・回転」などのような実際の物体でもありえるアニメーションの相性がよいでしょう。また「拡大・縮小」なども合いそうです。
こちらは物体感がある場合とは逆に、「フェードイン・アウト」や「色の変化」など実際の物体では無いような表現の相性がよいでしょう。
canvasやsvgなどを使用した凝った表現も多く見るようになってきました。
また、透過やshadowをうまく使用して「グロー（光彩）」を表現するのも良さそうです。
キャラクターもののキャンペーンサイトなど、賑やかで目を引くようなデザインに有効です。
ポップさを出すコツとしては、アニメーションを一定の速度にするのではなく、「加速・減速」や、「反動」などをうまく利用するとより雰囲気がでます。
より親しみやすい印象になります。
アニメーションを「長め」にしたり、「変化を小さめ」にすると良さそうです。
「グラデーション」なども有効かと思います。
コーポレートサイトなど、真面目で安定した雰囲気を出したい時に有効です。
ポップなイメージとは逆に、「直線的なアニメーション」だと統一感が出ます。
全体的にアニメーションを「短め・速め」に設定すると良さそうです。
今回は一例としてホバーアニメーションについて考えてみましたが、Webサイトには他にもクリック、フォーカス、マウスムーブ、スクロール、ウィンドウサイズの変化、時間経過などなどいろいろと見た目を変更したりアニメーションをさせる場面があり、これらの考えは様々な場面で適用させることができるものかと思います。
エンジニアとしては凝ったアニメーションにしたくなったり、いろいろなアニメーションを使いたくなることもありますが、サイト全体のバランスや世界観を考慮し、デザイナーやディレクターともチームとしてお互いの職域に敬意を持ちつつ、歩みよる姿勢がよりよいクリエイティブを生み出すのではないでしょうか。
それでは今日はこの辺で！
記事を読んで興味を持った方、
ビーワークスの考え方に共感した方、
一緒に新しいデザイン、創りませんか？
日々、制作実績を更新中！
ビーワークスの多様な実績をぜひご覧ください。
