まとめ記事

【エムハンドのデザインチームが選ぶ2016年 Webデザイントレンドリスト】

shimada

2016年最後のTECHNICAL BLOGは、エムハンドデザインチームが選んだ「2016年Webデザイントレンド」です。
企業のホームページなどのWebサイトは、おおよそ3年くらいのスパンで作り替えるところが多いのですが、近ごろはそのスパンがずっと短くなっているように思います。

先月の本ブログ【エムハンドのエンジニアチームが選ぶ2016年10大ニュース】でも採り上げたように、Web技術の進化の速度が速く、次々と新しいテクニックが現れて、それまでの主流に取って替わるようなことが多々あることとも大いに関連しているのでしょう。

流動するWebデザインの世界で、デザイナーが肌で感じた今年のトレンドはどんなものがあったのか、デザイナーの面々がピックアップした参考サイトとコメントで見ていきます。

印象的なタイポグラフィー

シンプル・フラット・ミニマルなデザインが増えるにつれ、そうしたデザインと親和性の高い大胆なタイポグラフィー使いが目立つようになってきました。こうした傾向は来年もさらに加速化していく傾向にあるようです。
日本のサイトでは日本語ならではの“縦書き”にも注目が集まり、実際に取り入れたサイトも数多く現れました。

typho

●メインビジュアルだけでなく、コンテンツ内にも印象的な(ダイナミックな)タイポグラフィーを取り入れるサイトが増えて来ている印象です。レスポンシブなどにも活かし易い演出として、2017年もタイポグラフィーを前面に押し出したデザインが増えていくように思います。
 http://www.nurturedigital.com/

●フラットでミニマルなデザインが増えた今、タイポグラフィーに力を入れたサイトが増えたように思います。

●CSSでの表現が可能になった縦書き。長文になるとWeb上だと多少読みにくさは感じてしまいますが、Webでのタイポグラフィ表現はこれからもっと広がっていくのではと感じます。
 http://tategaki.github.io/awards/

 

Webフォント

無料で使えるGoogleのWebフォントのおかげで、日本でもWebフォントの使用率は格段に高まりました。これまで1種類だけだったフォントを、試験的とはいえ、今年になって9種類に増やした影響も大きかったでしょう。
今後も順次Webフォントの存在感は増し、もしかしたら2017年中には完全に主流になる、という逆転現象が起きるやも知れません。

●データ量の多い日本語のWebフォントは避けられていましたが、回線速度が速くなったことなどにより、現在では参考サイトに載っているサイトの多くはWebフォントが活用されているかと思います。
 https://www.waseda.jp/inst/whywaseda/en/

●Googleフォントなどのおかげで表示速度も速くなったとのことで、最近の案件ではメイリオと同じくらいよく見るようになりました。これから明朝体など、もっと使えるフォントが増えてくるのだろうと思うので、使えるフォントをよく知っておいて、積極的に使っていきたいです。
 http://cineca.si/

 

こだわりの写真や写真の大胆/アーティスティックな加工

メインビジュアルにインパクトのあるオリジナル写真が1枚使われる傾向が増えたのは、やはり、デザインのシンプル・ミニマル化と連動してのことでしょう。人物フォトと自然のフォトとの融合は非常にアーティスティックで美しいものが多いのですが、下記のコメントにもあるように、日本のサイトで使用するにはまだとんがりすぎているようですね。
2017年あたりは、この進化系として人工知能の発達を背景にした人物と機械の融合フォトが出てきたりして…。

●参考サイト集を開いてパッと見てもわかるように、オリジナルな1枚写真を大きく使って魅せるのがトレンドというより、すでにメジャーになっているなと感じます。メインイメージで切り抜いた写真をコラージュするのはサイトによってはやや古い印象を受ける場合もあるし、ストックフォトだと弱くなる。弊社でも今後も積極的にカメラマンに入ってもらい、お客様のサービスのいいところをより的確に伝えたいですね!
 http://www.mu-ro.jp/
 https://www.auto-plaza.co.jp/

●人と自然など2枚の写真を調合したビジュアルを海外のサイトなどでよく見かけるようになったかと思います。インパクトがあって目を引くかとは思いますが実際に案件では使いどころがあまりないかと…。 
 https://blogof.francescomugnai.com/2013/11/photo-inspiration-20-best-double-exposure-portraits-ive-ever-seen/

wonderful

メインビジュアルを大胆に加工したサイトが増えたように思います。高画質なディスプレイでみるとインパクト大です。
 http://connection.michaelfangman.com/

 

全画面構成

トレンドというよりは、すでに主流感すらある1カラムの全画面構成。特に、クリックをさせる代わりにスクロールをさせる手法を用いるサイトが多く、必ずしも「縦に長い」タイプのものばかりではありません。
全画面というシンプルな構成上、ここまでトレンド要素としてあげてきた「印象的なタイポグラフィー」や「こだわったビジュアル」などがふんだんに取り入れられているのは言うまでもありません。

maedagumi

●現在手がけているクリニックの案件でこのデザインを取り入れたんですが、メッセージ性のものや、ストーリーを感じさせたいサイトなどに使うととても効果的だと思いました。
 http://www.ajike.co.jp/#service

●少し前からこういうサイトはあったと思うのですが、最近では案件の中でも増えているように思います。ファーストビューの印象の強さや、イメージが伝わりやすいというのが一番大きいと思います。情報が少な目で(またはトップに載せる情報を絞り込んで)、イメージ重視のサイトに向いていると思います。
 https://maeda-g.co.jp/

●ひと味違ったサイトを作りたいと考えている企業がこのようなデザインを導入しているような印象があります。実際に仕事でもまだ公開はされていませんが、このような動きのデザインを制作しています。初めて見た人にはとても印象の強いサイトになるのではないかと思っています。
 http://www.kuronekoyamato.co.jp/ytc/recruit/fresh/shinsotsu/#!page4

●1スクロールごとに1画面が切り替わっていくサイトをちらほら見かけた。インパクトを出しやすい、シンプルに見せたいものを見せられるところはいい。
 http://myv382tokyo.com/
 http://h-mp-recruit.jp/2017/concept/

 

インフォグラフィックの有効活用

インフォグラフィックは世に生まれて以降、進化を続け、最近では単に複雑な情報をわかりやすく伝える役割だけでなく、メインビジュアルとしてのインパクトや芸術性を備えたものが増えているように思います。
下記の参考サイトにも挙げられているとおり、メディアや企業の連載コンテンツとしても定着しており、今後もその表現の幅の広がりには注目したいところです。

tokyo

●フラット・ミニマルデザインがまだ根強い状況の中、それらと相性の良いインフォグラッフィックを有効活用させたサイトが多く見られました。
 https://vdata.nikkei.com/datadiscovery/08calorie/
 https://www.waseda.jp/inst/whywaseda/en/

●電話回線でインターネットをしていた時代では考えられない画像の大きさ!
 http://www.ana.co.jp/travelandlife/infographics/

 

多用なパターンのアニメーション

2016年は一時代を席巻したフラッシュが終焉を迎え、新しい技術に支えられた様々なアニメーションが登場しました。静止画でもない、動画でもない新しい表現として、2017年にはさらに楽しい表現が増えていきそうです。

kikagaku

●近ごろのサイトは動画の導入や、多くのデバイスに対応するために画像サイズが大きくなったことで、読み込みに時間がかかってしまいます。それを待つユーザーのストレスを軽減させるためにローディングにアニメーションを導入するサイトが増えています。
 https://uzuz.jp/

●個々の動きにこだわったアニメーションは見ていてとても楽しい気分になるし、飽きないので、今後デザインに取り入れられたらと思いました(参考サイトを例にあげるとアイコンとか、猫の目とかです)。
 http://www.kuronekoyamato.co.jp/ytc/customer/

●シネマグラフがデザインに入っているとページを開くたびに面白みを感じます。なにより料理系のサイトで使用されているとおいしそう。
 http://gilgul.co.il/eng.html

●今年は「幾何学模様」も来てたと思うんです。このサイトでは、3Dモデリングみたいな幾何学を背景に、アニメーションも加わって非常におもしろいです。
 https://www.collectivei.com/

 

ほかにも、こんなのもよく見たよね!

グラデーションも2016年のWebデザインのトレンドでしたね。特に海外のサイトではよく見かけました。
メインビジュアルに動画を持ってくるパターンは定着傾向にありますね。特にブランドのスピリットやストーリーを語るためのクオリティの高い動画をメインに持ってくるサイトが増えています。

グラデーションを活用したデザイン

●メイン画像などにきれいで明るい配色のグラデーションを活用しているサイトが多く見られたかと思います。
 https://designmodo.com/qards/

 

華やかな配色デザイン

●流行色と呼ばれたローズクォーツ&セレニティなどの淡い色合いのものが流行ったのははじめだけで、一年を通してみると派手で華やかな色が多かったように思います。
 http://materialuicolors.co/

 

印象的なパララックス効果

●とにかくファーストビューのパララックス効果の使い方が秀逸だと思います。新しい技術が浸透してきたなと感じさせたサイトでした。古いブラウザの対応が切り捨てられ、色々なアイディアが出てきていて楽しいです。
 http://swaywater.com/

 

メインイメージが動画

●リクルートサイトでよく見かける印象があります。メインが動画だと珍しくてじっくりと見てしまいますね。リクルートサイトは毎年作り換える企業も多いと思うので、その年の流行などが見えてくるように思います。
 http://hr.yahoo.co.jp/

 

まとめ

以上、エムハンドデザイナーが選んだ2016年Webトレンドでした!
やはり、海外のとがったサイトと日本の中小企業のコーポレートサイトでは、マッチするトレンドWebデザインも違いますが、こうして並べてみると、世界観が広がっているなあとつくづく思います。
今後も続いていきそうなシンプル・ミニマルの流れの中で、2017年はどんなトレンドが生まれるのか楽しみです。
そのあたりのトレンド予想も新春にできればと思います。乞うご期待!