2016年、ミニマリストとフラットデザインがウェブの世界を支配した。
2016年もそろそろ終わりに近づき、2017年にどんなデザイントレンドがウェブの世界を支配するのが気になり、色々な記事を読むことにした。
そのトレンドに関する記事を共有したいと思います。
1. Parallax Effects
近年、フラットデザインが最も使われたデザインであった。
一方で、2年前にGoogleがMaterial Designを紹介してから、深みがあるフラットデザインがよく使用されるように変化して来た。
そんな中、Parallax Scrollingは背景画像を前景画像よりも遅く動かすことで、深みの錯覚を作り出すデザインであることから注目されている。これは、主にコンピュータグラフィックスで使用されており、Webデザインの世界のトレンドになりつつある。
http://www.awwwards.com/websites/parallax/
2. More Focus on Animation
GIFは、静止画の代わりにウェブサイトの中で特定の何かを目立たせるために使用されている。例えば、ベストセラーの商品を注目させるためなどである。
一方で、GIFを多用するとウェブサイトを乱雑にするだけでなく、ユーザーを混乱させることになりかねない。この問題を、cinemagraphを利用することで解決できる。
Cinemagraphは、画像とビデオのクロスオーバーで、微妙な動きがあり、ウェブサイトに人生を与えることができるのだ。
GIF形式で提供される。
http://www.hongkiat.com/blog/cinemagraph/
3. Big Bold Typography
近年、大きいタイポグラフィがよく使われている。以前タイポグラフィのルールは非常に厳しいものでしたが、現在ではウェブデザイナーの多くがタイポグラフィを使い自由に創造性を発揮している。
「大きく」と「太字」は必ずしもフォントの重厚さを指すとは限りません！
むしろ、「単一」で「シンプル」でありながらウェブサイト全体を包括的に捉えることが可能なステートメントに専念させることが重要である。
これらのステートメントは、一目見て明らかであり、メインメッセージを分かりやすくユーザに伝えることが可能である。
4. Go Edgy, Use Bright Colors
ミニマリストとフラットなデザインの傾向は、しばらくの間継続し、すぐにこのトレンドが去ることはないであろう。
しかし、ウェブ世界のトレンドには、ポップなカラーが登場してくることが考えられる。
なぜなら、ミニマリズムの動きが広まった時、デザイナーは、シンプルなデザインを創ることを余儀なくされた。そんなトレンドの中、個性を活かしたデザイン作業を創造する方法を模索しているからだ。
今では、カラフルで明るい色のデザインが戻りつつある。 しかし、このトレンドがあなたのビジネスのアイデンティティと一致するかどうかを判断することが重要だ。
5．Layouts that let the Contents Shine
ビジネスにおけるデザインの役割は、大きな変化があった。以前、デザインは開発全体のうち、後期の段階でしか考えられていなかった。
しかし最近では、デザインでコンテンツをどうやって見せるのかが重要になってきた。
世界中のデザイナーは、ユーザがコンテンツのためにウェブサイトを訪れることに気づき始めたからだ。これからは、コンテンツがもっとも分かりやすく伝わるレイアウトやデザインを考えることに注力していく必要がありそうだ。
6. Complex Layouts
FlexboxとCSS Grid(来年3月)が登場するため、Webデザインのレイアウトは、CSSの制限を受けなくなった。
Flexboxは比較的新しい「CSS」レイアウトモジュールでありながら、機能性も優れており、驚異的なレスポンスを実現している。
これを使うことで、ページレイアウトが異なる画面サイズと異なる表示デバイスに対応しなければならないときに、要素を予測し最適化を行うことが可能だ。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Gridはレイアウトの問題を解決するために特別に作成された最初のCSSモジュールである。
https://css-tricks.com/snippets/css/complete-guide-grid/
レスポンシブデザインでこれらの新しいレイアウト方法がどのように機能するかを理解すべきだ。
特にFlexboxとGridをどのように併用可能かを理解しなければならないだろう。
7. More SVGs over Traditional JPG, PNG
SVGはrasterまたはpixelベースではなく、vectorで構成されている。そのため、SVGは解像度に依存せず、どのサイズのデバイスでも見た目を良くすることが可能だ。
SVGを学ぶことで、Retina-readyに向けて何か特別な準備をしなければ・・・と心配する必要はなさそうである。
また、それだけではなく SVGはHTTPリクエストが必要ない！
さらに、アニメートすることもできるのだ！
8. More Focus on Conversation (Bots, AIs)
2016年は、ボット関連の打ち上げが急増した年だった。
また、2017年には会話インタフェースがさらに増えると想定される。現在のフォームから会話に移行することも可能だろう。
ボットやAIへのこのようなトレンドが、私たちの会話をよりよく理解できる技術を向上させることを願うばかりだ。