ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

おすすめ情報

おすすめ情報

2016年12月3日

2016年のWebデザインのトレンドと、2017年流行の兆しのWebデザイン

web-design-trend-of-2016-and-web-design-of-signs-of-epidemic-in-2017

Web業界は常にトレンドが変化し続けています。
デザインの移り変わりは早いもの。
常に新しいデザインを追い続けられるといいですね。

ということで、今年のWebデザインを振り返りながら、
2017年に流行の兆しのWebデザインについて
考察を加えます。

2016年に流行ったデザインのおさらい

シネマグラフ

シネマグラフ(Cinemagraphs)という手法が、
近年人気が出てきています。

シネマグラフとは画像の一部のみを動かす
Webデザインの技術です。
このデザインを導入することで動画とは違う、
洗練したインパクトをユーザーに残すことができます。

GIFアニメーションを使ったホームページ自体は
以前からありましたが、最近では
少し変わった形で使われています。

今回は、シネマグラフを活用した
オシャレなサイトと画像をまとめてご紹介します。

株式会社電通クリエイティブXのホームページでは、
社員や文具が永遠と回るシネマグラフを
デザインに取り入れています。

トップページをはじめ、企業紹介から社員紹介、
リクルートページまで全て共通して回転する
シネマグラフがデザインに入っているため、
ページを開くごとに面白みがありますね。

クリエイティブコンテンツを制作する
同社ならではのユニークな試みと言えます。

img_dentsu

http://www.dentsu-crx.co.jp/

料理関連のサービス「gilgul」では、
料理ができ上がるまでのシーンを
シネマグラフで表現しています。

動くシネマグラフを使うことで、
イメージや想像をさせることができていますね。

img_gilgul

http://gilgul.co.il/eng.html

パララックス

パララックスはスクロールなどの動作に応じて
視覚的エフェクトが発生するWebデザインです。

パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの
動作に応じて、複数のレイヤー(層)にある要素を
異なるスピードで動かすことで、「立体感や奥行きを演出」、
「フェード・拡大縮小・回転などの視覚的エフェクト」を
演出する手法を指します。

何年か前から人気でしたが、ページが重たいなどの
反対意見がありつつも、依然として人気のWebデザインです。

「Nikon」のサイトでは、
パララックスでストーリー性を持たせ、
製品の特徴をアピールしています。

img_nikon

http://shop.nikon-image.com/nikon1/nikon1aw1/

インフォグラフィックス

インフォグラフィックスはグラフや表など
データなどを視覚的に見やすい形で表現したデザインです。

ごちゃごちゃしているものをシンプルで
分かりやすくて伝えやすくまとめられるメリットがあります。

通常、データや表の記載は
どうしても堅苦しいものになりがちですが、
それにデザインセンスを取り入れることで、
見やすい画期的なWebデザインになります。

「ウェブの進化」のページでは、
Webの技術の歴史をまとめたインフォグラフィックスが
効果的に使われています。
グラフの扱い方や表現方法も素晴らしいですね。

img_evolutionofweb

http://www.evolutionoftheweb.com/

「NIPPON COLORS – 日本の伝統色」サイトでは、
日本の伝統色を集めて静的にグラフを見せていますが、
右のONOFFボタンをオンにすると、一気に三次元の
視覚的に見やすくデザイン的に表すようにできます。

ぐるぐる回るカラーと、背景色の切り替わりが幻想的で、
ずっと見ていたくなりますね。

img_japancolor

http://nipponcolors.com/#messhi

クロムなし

Googleの開発しているウェブブラウザとは無関係ですが、
グラフィック・フレームワークの婉曲的な言い回しで、
コンテンツを取り囲むデザイン要素のことを
「クロム(Chrome)」と呼ぶことがあります。

中央揃えされたコンテンツや、重要なコンテンツを
左から右に詰めていくレイアウトが
Webデザインの王道ですが、一方、
クロムのないデザインは、余分なパーツを省くことで、
よりコンテンツやビジュアルのメッセージ性を
強調することができます。

クロムのないデザインは、とても清潔感があり、
スタイリッシュだという見た目の部分に
メリットが行きがちです。

しかし、コーディングする上でも非常にメリットがあります。

通常はコンテナと呼ばれるdiv要素を
入れ子のように配置するのが一般的ですが、
クロムのないデザインでは
不要なdiv要素を省くことができます。

クロムなしとはその言葉のまま、コンテンツを囲む
クロムを排除したWebデザインです。

クロムなしにすることで、よりメッセージが際立ち、
視覚的インパクトを強めましょう。

シェーバーでお馴染みの家電メーカー「ブラウン」ですが、
注目したいのは、単にデザインとして
クロムなしのレイアウトを取り入れているのではなく、
製品のコンセプトと一貫しているという点です。

ブラウンが手掛ける時計ブランドのウェブサイトは、
同社が哲学としている
「Less, but better(より少なく、しかしより良く)」の
コンセプトのもとに、クロムなしでスタイリッシュに
仕上がっています。

しかしそれだけでなく、製品にも余分なデザインは
一切ないということは、Webサイトの製品を
ご覧いただければお分かりいただけるでしょう。

img_braun

http://www.br-time.jp/

ストーリーテリング

UX(ユーザーエクスペリエンス)を最大化する、
ということはウェブ業界では久しく言われてきたことです。

単にクールなだけでなく、ブラウジングする際に
読み手にどんな体験をしてもらうか、ということが大切である、
という考え方です。

次にWebデザインの大きなトレンドのひとつとして、
ストーリーテリングが挙げられます。

「ストーリーテリング」とは、伝えたい思いやコンセプトを、
それを想起させる印象的な体験談やエピソードなどの
“物語”を引用することによって、聞き手に強く
印象付ける手法のことです。
抽象的な単語や情報を羅列するよりも、
相手の記憶に残りやすく、得られる理解や共感が深いことから、
企業のリーダーが理念の浸透を図ったり、
組織改革の求心力を高めたりする目的で
活用するケースが増えています。

・・・とのことですが、まあつまりストーリーテリングとは、
シンプルに言うと、Webサイトが一つの物語になっている感じです。

ストーリーテリングのWebサイトは、
すっきりとしたデザインが特徴で、
ページをスクロールしていくと、
まるで絵本を読んでいるかのように
一つの物語として構成されているので、
Webサイトを訪れた人に、
よりわかりやすく説明することができます。

紹介したいストーリーに最大限焦点を合わせ、
他の表示物を一切削除しているので、
頭にすっと物語が入ってくるというメリットがあります。

このストーリーテリング、
2015年に流行ったシングルページデザインと
とても相性がいいんです。

シングルページとストーリーテリングを組み合わせると、
ページを多層化せずに、
シンプルな1枚画面で言いたいことぜんぶ言える
Webサイトが出来上がります。

また、同じく2015年のトレンド
「バックグラウンドムービー」とも好相性。
シンプルな1ページで、1つの物語を展開する。
そして、背景に動画を使うことで、
ビジュアル的にも目を引くページになります。

サンプルでご紹介させて頂くCyberAgent社の
NIGO®さんと市川紗椰さんの対談レポは、
まるで取材現場にいるような迫力で
ページを読んでいただけます。
動画ではなく、静止画像ならではの迫力が特徴的な
Web デザインに仕上がっていますね。

ストーリーテリング サイバーエージェント社

https://www.cyberagent.co.jp/special/otsumotalk/006/

ただ、上記で紹介したのはスクロール型コンテンツ。
縦に長く伸びるシングルページデザインでは、
読み手は最後までスクロールすることに疲れてしまうという見方もあります。

そこで、サイト全体を1つのストーリーに構成して、
読み手を惹きつける魅力的なコンテンツに仕上げていく手法も
同じく人気です。

次に紹介するストーリーテリングのお手本になるサイトが、
「The Live in Levi’s Project」です。

リーバイスとともに送る生活の魅力を、
存分に伝えるサイトに仕上がっているため、
多くの共感を得ています。

ストーリーテーリング リーバイス

http://levi.jp/suchmos/mintcondition/

2017年に来るかもしれないWebデザインのトレンド

ミニマリズムは継続

img_minimal

フラットデザインやGoogleの ”Material Design” の
基盤となっているミニマリズムはここ数年間とても
ポピュラーなコンセプトとなってきましたが、
今後もその傾向は続きそうです。

ミニマリズムが流行ると、どのサイトも同じように見える、
という批判もあるのですが、ユーザーが使いやすいような
デザインパターンはすでに確立されていて、
むしろその制約の中でクリエーティビティーを
発揮することを求められています。

見かけのデザインよりもデータやコンテンツをデザイン

これまでは「Webデザイン」というとビジュアルな
意味合いが強かったのですが、これからはむしろ
コンテンツやデータそのもののデザインの意味合いが
強くなりそうです。

上記で挙げたミニマリズムも、この動向を反映している
背景があります。

実際のところ、ユーザーはサイトのデザインを
見るのではなくサイトのコンテンツに興味があるのであり、
サイトそのものはむしろコンテンツをサポートする
役目をするべき、というのがポイントです。

コンテンツデザインを重視することで、結果的には
サイトのクリック率や販売率も上がることが期待される、
というのもあります。

イラストレーションの多用

img_illust2

写真よりもイラストの方が多いサイトが増えるかもしれません。

これはパソコンやスマホの解析度が上がり、
MacBookやiPhone/iPadのレティナディスプレイなどで、
高解像度画像をWebでも負荷なく見せられるように
なってきたことが背景にあるようです。

WebブラウザのSVG対応が広まったことで、
小さなファイルサイズで劣化のないイラストレーションを
ウェブに掲載できるようになり、デザイナーもカラフルで
シャープなイメージを実現できるという意味で
イラストの多様化が進みそうです。

操作ミスのフォローによる、多様なユーザー層への対応

ある統計によると、2017年には実に世界の人口
半分以上がインターネットを利用するようになるそうです。

そこには、多様な文化や教育背景を持つ人々や、
いろいろな年齢のユーザーが含まれることになります。

現時点でパソコン利用に慣れている人たちにとって
説明不要な当たり前のことでもそれがわからず
悪戦苦闘するユーザーも増えてくると思われます。

そのようなユーザーがする行動や操作ミスを
サイトがフォローしてサイトにアプローチしやすくする
工夫がますます必要になってきそうです。

完璧に未来を予測することは不可能ですし、
これ以外にもまた違った予測もあり得ると思いますが、
これらの項目は既に現実化しているものがほとんどなので、
来年以降トレンドとして定着する可能性は十分あると思います。

マイクロ・ミニ・インタラクション

2015年あたりから「マイクロ・インタラクション」が
話題となり始めています。

マイクロ・インタラクションとは「ユーザーの
アクションに対して小さなアクションを返すこと」です。

例えば、ボタンをクリックしたときに
アニメーションなどを用いて「あなたは今クリック
しましたよ」とユーザーにリアクションとして
通知することなどがそれに当たります。

「神は細部に宿る」とはよく言われますが、
Webデザインの作りこまれた細部表現です。

しかし現在のマイクロ・インタラクションは
ややリアクションが薄すぎてユーザーに
認識されていないこともしばしば。

2017年にはさらに「マイクロ・ミニ・
インタラクション」として改善が進みそうです。

触覚フィードバック技術

触覚フィードバック技術(ハプティクス)
というのをご存知でしょうか?

例えば、スマートフォンのキーボードに
触れるとガラスの感触がしますが、
これを実際のキーボードに近い感触として
フィードバックする技術のことです。

今のところまだそれほどメジャーな技術とは
言えないところがありますが、数か月内に大きく
話題に昇ってもおかしくない技術でもあります。

そしてこの「触覚フィードバック技術」を
さらに洗練させると、ユーザーはWebサイト上で
実際の製品に近い感触を確かめることが
できるようになりますね。

もしくはザラつく背景なんかもあるかもしれません。

もちろんこれらは実際の触感をシミュレーション
したものですが、そう遠くないうちに「触感」も
Webデザインの一要素となるかもしれませんね。

ちなみにこの触覚フィードバック技術に
取り組んでいる企業のひとつとして、
「ディズニー」が名を連ねているそうです。

レイテンシーへの取り組み

例えば、あるWebサイトの「次へ」ボタンを押して、
目的のページが表示されるのに5秒以上かかった場合
大半のユーザーは離脱してしまうのはUXデザインに
おいては、もはや常識となってきました。

Webページに限らず、こうしたさまざまな
レイテンシー(遅延)がUXを著しく損なわせるのは
間違いないのですが、Webデザイナー側では
その対応策のアイデアが考案され始めています。

例えば、現在でもユーザーにとって目的となる
ページのスクリーンショット画像をクリックする前に
表示して、レイテンシーによるユーザーの離脱を
予防しているサイトがありますが、2017年には
こうしたさまざまな対策案が考案されていくでしょう。

年齢レスポンシブデザイン

現在のレスポンシブデザインは、デバイスのスクリーン
サイズに応じて表示形式や表示するコンテンツに適合
するものですが、今後は閲覧者の「年齢」に応じて
コンテンツ表示を変えるデザインが出現するかもしれません。

例えば日本の場合で考えると、閲覧者が幼い
子どものときは漢字を使わない文章を表示し、
その子どもの親が閲覧している時は
一般的な文章を表示するというイメージです。

その他にも、

  • ユーザーの年齢に合わせ表示するナビゲーションメニューを変える
  • 高齢者のユーザーにはフォントサイズを大きく表示する
  • サイトカラーも若年層向けには明るく、高齢層には落ち着いた色で表示する

などが考えられます。

年齢レスポンシブデザインは今後
Webデザインに取り込まれていくでしょう。

まとめ

いかがでしたでしょうか。

日々挑戦し続けなければいけないWebデザイナーの皆様。
Webサイトのデザインに悩んだ時や
革新的なデザインに挑戦したい時は、
ぜひ本記事を参考に、サイトデザインを作ってみてくださいね。

このエントリーをはてなブックマークに追加
メルマガ登録