Webサイトの表情〜2017年のトレンド〜

第1回はアニメーションやデザインガイドライン、第2回はタイポグラフィを紹介しました。第3回は2017年のトレンドを踏まえながら、3つのデザインの観点でWEBサイトの表情を考えていきます。

●スクロールに対応するアニメーション

Mac Pro(http://www.apple.com/mac-pro/)コンテンツの公開自体は少し前ですが、スクロールに対応するアニメーションとして非常に強いコンテンツだと思います。紙の媒体や、いままでのウェブサイトのページ送りとも違う体験で、自ら読み解いていくような体験ができます。ストーリーが重要ではありますが、アニメーションも介して理解促進、興味喚起につながるのではと思います。

web3_1

参)apple.com/mac-pro/

●マイクロインタラクション

ユーザーに必要なフィードバック(反応)をすることで、何が進行中なのかを伝えるアクションを指しています。このアクションはサイトに対し好感を持つ1つのポイントだと思っています。人と人のコミュニケーションも同様ですが、リアクションがないと話は弾みません。些細な部分ではありますが、非常に人間味のあるところです。

001b

参)dribbble.com

●シネマグラフ

シネマグラフとは、画像の一部にだけ動きを取り入れたアニメーション(GIF)のことで、昨年から増加しています。一部がアニメーションしているという不思議な感覚の画像で、見ていて飽きず、逆に想像を掻き立てられます。BGMや音声がないのに脳内補完してしまうようなアニメーションです。ファッションや食べ物、情緒的なシーンで有効な手法だと思います。また、映像よりも容量が少ないのもポイントです。

参)https://flixel.com

●カラー

最後になりますが、カラーについてご紹介します。
マテリアルデザインをベースに色をシンプルにするのは依然として続いていくと思います。そんななか、PANTONEから2017年のカラーが紹介されていました。映像もありますので是非ご覧下さい(pantone.com)。

web3_2

参)pantone.com

GREENERY(15-0343)自然味のある美しいグリーンが今年のカラーとして紹介されています。生命力、若さを感じる心地よいカラーです。シンプルな配色のアクセントとしても良さそうです。

マテリアルデザイン、タイポグラフィなど2017年のウェブサイトが、どのように変わっていくのか非常に楽しみです。


[筆者プロフィール]
太田 健一郎 株式会社TCD チーフデザイナー
WEBデザインを中心に、グラフィック、映像など幅広い業務に業務に従事。
イヤイヤ期真っ最中の2歳児を持つ自称イクメン。