WNT-Technology-20170306
Technology

デザイン通りに実装するだけじゃない!フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜

デザイン通りに実装するだけじゃない!フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜

Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。
しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。
そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。
そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。
今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思います。

目次


デザインテイストにあわせたホバー表現について考えよう

それではデザインテイストにあわせた表現について考えていきましょう。
ホバーアニメーションの一番の目的としては「クリック可能であると分かる」ことですので、全ての要素が.hoge:hover {opacity: .7;}だとしても問題はないのですが、サイトの世界観に合わせてアニメーションを設定していくことで、よりまとまりのある魅力的なサイトにしていくことができます。
また、アニメーションの種類や速さなどによって与える印象は異なってきますので、その辺りを把握しておくことでデザインテイストに沿った表現が作りやすくなります。

全て同じアニメーションにする必要はありませんが、同じサイト内では似た雰囲気のアニメーションを使用したほうがまとまりは出やすいです。

いくつか例を挙げていきます。

物体感のある表現

例えば絵本っぽいデザインや手書き風のデザインのように、実際に物体があるかのようなデザインのときに有効です。
そのような場合には要素の「移動」や「変形・回転」などのような実際の物体でもありえるアニメーションの相性がよいでしょう。また「拡大・縮小」なども合いそうです。

デジタルっぽさやSFっぽさがある表現

こちらは物体感がある場合とは逆に、「フェードイン・アウト」や「色の変化」など実際の物体では無いような表現の相性がよいでしょう。
canvasやsvgなどを使用した凝った表現も多く見るようになってきました。
また、透過やshadowをうまく使用して「グロー(光彩)」を表現するのも良さそうです。

ポップな表現

キャラクターもののキャンペーンサイトなど、賑やかで目を引くようなデザインに有効です。
ポップさを出すコツとしては、アニメーションを一定の速度にするのではなく、「加速・減速」や、「反動」などをうまく利用するとより雰囲気がでます。

柔らかな表現

より親しみやすい印象になります。
アニメーションを「長め」にしたり、「変化を小さめ」にすると良さそうです。
グラデーション」なども有効かと思います。

かっちりとした表現

コーポレートサイトなど、真面目で安定した雰囲気を出したい時に有効です。
ポップなイメージとは逆に、「直線的なアニメーション」だと統一感が出ます。
全体的にアニメーションを「短め・速め」に設定すると良さそうです。

おわりに

今回は一例としてホバーアニメーションについて考えてみましたが、Webサイトには他にもクリック、フォーカス、マウスムーブ、スクロール、ウィンドウサイズの変化、時間経過などなどいろいろと見た目を変更したりアニメーションをさせる場面があり、これらの考えは様々な場面で適用させることができるものかと思います。

エンジニアとしては凝ったアニメーションにしたくなったり、いろいろなアニメーションを使いたくなることもありますが、サイト全体のバランスや世界観を考慮し、デザイナーやディレクターともチームとしてお互いの職域に敬意を持ちつつ、歩みよる姿勢がよりよいクリエイティブを生み出すのではないでしょうか。

それでは今日はこの辺で!

01

記事が気に入ったらシェアしよう

この記事を書いたメンバー

丸山 佳郎 エンジニア/ディレクター

山と技術を愛するアウトドア系エンジニア。
フロントエンドをメインにしつつ、バックエンドもインフラも対応します。
好きな食べ物はライチと白米。

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 乙女座
  • 天秤座
  • 蠍座