Advertisement

2016trends-2

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

 

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

 

 

 

コンテンツ目次

 

 

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

 

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

 

 

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

 

design-trend-2016-what-to-expect-2017-1

design-trend-2016-what-to-expect-2017-2

design-trend-2016-what-to-expect-2017-3

design-trend-2016-what-to-expect-2017-4

 

 

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

 

design-trend-2016-what-to-expect-2017-5

design-trend-2016-what-to-expect-2017-6

 

 

 

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

 

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

 

design-trend-2016-what-to-expect-2017-7

design-trend-2016-what-to-expect-2017-8

design-trend-2016-what-to-expect-2017-9

design-trend-2016-what-to-expect-2017-10

design-trend-2016-what-to-expect-2017-11

design-trend-2016-what-to-expect-2017-12

 

 

 

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

 

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

 

design-trend-2016-what-to-expect-2017-13

design-trend-2016-what-to-expect-2017-14design-trend-2016-what-to-expect-2017-15

design-trend-2016-what-to-expect-2017-16

design-trend-2016-what-to-expect-2017-17

design-trend-2016-what-to-expect-2017-18

design-trend-2016-what-to-expect-2017-19

 

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

 

design-trend-2016-what-to-expect-2017-20

 

 

 

レトロスタイル 英: Retro

 

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

 

design-trend-2016-what-to-expect-2017-21

design-trend-2016-what-to-expect-2017-22

design-trend-2016-what-to-expect-2017-23

design-trend-2016-what-to-expect-2017-24

design-trend-2016-what-to-expect-2017-25

design-trend-2016-what-to-expect-2017-26

design-trend-2016-what-to-expect-2017-27

 

 

 

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

 

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

 

design-trend-2016-what-to-expect-2017-28

design-trend-2016-what-to-expect-2017-29

design-trend-2016-what-to-expect-2017-30

design-trend-2016-what-to-expect-2017-31

design-trend-2016-what-to-expect-2017-32

design-trend-2016-what-to-expect-2017-33

 

 

 

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

 

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

 

 

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

 

design-trend-2016-what-to-expect-2017-34

design-trend-2016-what-to-expect-2017-35

design-trend-2016-what-to-expect-2017-36

design-trend-2016-what-to-expect-2017-37

design-trend-2016-what-to-expect-2017-38

design-trend-2016-what-to-expect-2017-39

 

 

 

2017年に期待できるものとは

 

モバイル端末での閲覧に適し、インパクトのある文字テキストや余白スペース、鮮やかな配色などを利用した、縦方向への長いスクロールは今後も利用されていくでしょう。

 

Gifアニメーションやシネマグラフ、ビデオ動画は、より幅広い方法で活用されるSVGやコミュニケーションツールとしても増えていくでしょう。またグラデーションや巨大な文字テキストを利用したデザイントレンドも戻ってくることで、デュオトーンや写真を利用したデザインスタイルも期待できます。

 

フロントエンド開発の世界では、2017年には、AI機能によるウェブサイトビルダーの増加や、SassやLESSなど新しいCSSが普及したり、より高速なWebpサポートのためにプッシュ通知の促進が考えられます。

 

ますます進化するWebデザインの世界、2017年はどんな技術やテクニックで驚かしてくるでしょう。これからが楽しみです。

 

 

参照元リンク: Design Trends in 2016 & What to Expect in 2017 – WebDesignerWall