2017年要注目！2016年に人気となったWebデザイントレンド6個まとめ

海外サイト WebDesignerWall で公開された Design Trends in 2016 & What to Expect in 2017 by Nick La より許可をもらい、翻訳転載しています。

Webデザインの世界は、幅広いSVGのサポートやCSSでできる新しいことも増えるなど、今後ますますエキサイティングなものとなるでしょう。2016年のデザイントレンドを振り返りながら、今年のデザイン動向と2017年に向けた新しいデザインアイデアをまとめてご紹介します。

コンテンツ目次

1. 高解像度のビジュアル
2. インタラクティブ・ナビメニュー
3. スプリットスクリーン・レイアウト
4. レトロスタイル
5. より複雑なレイアウト
6. アニメーション&マイクロインタクラション
7. 2017年に期待できるものとは

高解像度のビジュアル英: High-Definition Visuals

ヒーローイメージやフルスクリーンを利用したトレンドは、ビデオ動画や高画質なイメージ写真などさまざまな要素と組み合わせることで、今後もまだまだ続くでしょう。もはや鮮やかな写真イメージはポートフォリオサイトだけでなく、オンラインストアから旅行サイトまで幅広い分野に利用されるようになりました。

フルスクリーンで展開するイントロは、ページを開くと同時にブランドイメージを表現でき、認知力アップにもつながります。2016年は、ナビゲーションメニュー要素を持たないウェブサイトなど、UIデザインが分かりづらいケースも増えたことで、イメージ写真のストーリー性がより重要になりました。

フルスクリーン版のヒーローイメージやヘッダーのトレンドは、シネマグラフやわずかなアニメーション、ビデオ動画などを活用することでより面白くなっていくでしょう。

インタラクティブ・ナビメニュー英: Interactive Navigation

モバイルユーザー向けのデザインの全体的な意向によって、2016年には最小限のユーザーインターフェースを利用したデザインが広がりを見せました。ハンバーガーメニューも定番となりましたが、すぐに消えてしまう流行だろうと、嫌っていたUXデザイナーもいるでしょう。今後も引き続き利用されますが、2016年は垂直方向の文字テキストやページスクロールに合わせて動く固定メニュー、これまでにはないインタラクティブなスタイルなど、新しいナビメニューのスタイルが登場した年でもありました。

スプリットスクリーン・レイアウト英: Split Screen Layout

ここ数年、ポートフォリオやブログサイトを中心に、カード型レイアウトの人気はますます高まっています。2016年は典型的なランディングページにひねりを加えた、ページを二分割した（英: Duo）レイアウトが登場しました。この分割レイアウトによって、ユーザーに新しい選択肢を提供でき、よりユニークなイメージスライダー、ヒーローヘッダーを作り出すことができるようになりました。

WP用テーマ Themify Split を利用すれば以下のようなページを手軽に作成することができます。

レトロスタイル英: Retro

ここ数年のあいだ、ビンテージで素朴なデザインが人気でしたが、70〜80年代を代表するキラキラ感の強いフラッシュデザインにトレンドは移りはじめています。デュオ・トーンや幾何学スタイル、鮮やかな配色とフォントの組み合わせによって、説得力のあるデザインに仕上げることができるでしょう。

より複雑なレイアウト英: Abstraction

CSS グリッドはページの構造を作成する強力なツールですが、レイアウトがボックス型に戻ることを考えると、一度じっくり検討する価値があると言えます。Webデザインのレイアウトはこれまで以上に柔軟になっており、2016年は印刷デザインで活用されるレイアウトテクニックがウェブでも活用された年となりました。

アニメーション&マイクロインタクラション英: Animation & Microinteractions

2016年の素晴らしいWebデザインの多くは、これまでに紹介したトレンドを組み合わせていますが、どれもアニメーションやインタラクションを含んでいるでしょう。より細部に注目した、優雅なホバーエフェクトやナビゲーションメニューなど、細部に注目したものが多く、どれもユーザーエスクペリエンスを高め、好奇心を掻き立てるものとなっています。

アニメーション自体は特に目新しいものではないですが、より良いパフォーマンスの実現やコンテンツの邪魔にならない実装方法をたびたび見かけるようになりました。