Tres Innovation

2017年06月28日

僕が思う2017年のWEBデザイントレンド5選!

Pocket

 

 

 

pexels-photo-326424のコピー

 

 

 

 

こんにちは、最近自分で作れるWEBサービスを考えているぐっちーです。

ずっと考えていますが、面白いものが見つかりません。

 

人工知能によるサービスがパソコンやスマホ、IoT(モノのインターネット)や

WEBサービスに利用され、その人工知能も年々精度が高まって来ました。

 

 

AI導入って夢がある…カッコいい…

 

「弊社は人工知能によるデータでユーザーに最善の価値を提供します。」

 

なんて言ってみたい。

 

 

今や人工知能を持ったWEBサイトもあるくらいですから、

トレンドだけに留まらず、UI・UXはもちろん、テクノロジーにも関心が必要です。

 

そんな慌ただしいWEB業界の2017年度のWEBサイトに見る

「WEBデザインのカタチ」が見える事例とトレンドをまとめました。

 

 

 

人工知能を持ったWEBサイト

 

 

 

 The North Face IBM Watson

 

 

thenorthface_watson

 

 

大手アパレルブランドThe North Faceが消費者向けにAIを活用した

オンラインサービス「XPS」を開始。そのAIを担当するのはIBM Watson。

ハーマイオニー・グレンジャー でも美女と野獣のベルでもありません。

 

XPSでは手元にあるiPhoneのSiriより遠い存在だったWatsonと

会話が出来るのですが彼?彼女?は容赦なく英語で話して来ます。

なのでGoogleさんに通訳してもらう必要があるかもしれませんね。

 

Watsonが商品特性と人工知能によるデータに基づいた情報を元に

自然言語処理能力を利用し、ユーザーのニーズにあった商品を

おすすめしてくれるので要望にあった商品にたどり着く事が可能。

 

 

thenorthface_watson_result

 

 

Watsonは性別から場所、季節や時期など詳しく聴いてくれます。

リアクションも慣れたもので、答えた要望にもちゃんと仕事をする

僕と違い仕事が出来るAIです。悲しい。

 

UX的にも新しい体験を提供することで、CX(顧客体験)に生かされ

入力情報からさらに的確な情報提供が可能になります。

 

WatsonはもちろんSiriをはじめ人工知能がいずれ

すべてのサードパーティに対応する事を考えるとWEBサイトの在り方、

求められ方が変わってくるんじゃないかと考えています。

 

 

 

スプリットスクリーン・レイアウト

 

 

スプリットスクリーン・レイアウトといえば、

昨年から人気上昇中のトレンド中のトレンドです。

 

画面を縦2分割にした1画面2コンテンツ型レイアウト。

ポートフォリオにも活用出来ますし、二部構成として

2つのストーリーを1画面で描く事が出来ます。

主にWEBサイトではメインビジュアルに置く事が主流となっています。

特に写真とテキストが活き、配色もコントラストを持たせる事ができます。

 

 

dropbox

 

 

 

kirichik

 

 

 

galvanmobili

 

 

 

活かせる利点

 

 

  • 2つのストーリーを同時に進める事ができる
  • ダイナミックに動きをつける事ができる
  • コンテンツの差別化がはっきりできる
  • イメージとテキストが同じレベルの要素として扱える

 

 

ちなみに!当ブログにもスプリット・スクリーンの使い方について

僕の大好きな番野さんが書いている記事を参考に挑戦してみてはどうでしょうか?

 

banno-1-150x150
スプリットスクリーンレイアウトの実装が簡単にできる「multiScroll.js」

 

 

 

利用しない手はないカード・グリッドレイアウト

 

 

今やWEBデザインの基本

 

 

ここ数年、カード・グリッドレイアウトは失速する事を知りません。

シンプル且つフレキシブルにレイアウト出来るカード・グリッドレイアウトは

CSS3 FlexBoxでPC、スマホ共に相性抜群です。

それに仕分けしたいコンテンツをわかりやすく分ける事ができます。

アイキャッチと共に簡単なタイトルを添えて、繰り返し使う事が利便性の一つとなっています。

 

すでに王道であり、WEBデザインの基本中の基本と言えるレイアウトですね。

 

 

 

カード・グリッドレイアウトと言えば「Pintarest」。

 

 

piterest

 

 

 

活かせる利点

 

 

  • 多くなるコンテンツの入り口として多様できる
  • ボックスのサイズに変化をつける事で優先順位が明確になる

 

 

 

 レスポンシブ対応フルスクリーン動画

 

 

今動画はアツぃ!

 

 

こちらもここ最近継続して採用されているデザインで、

Instagram、SnapChatを活用した動画マーケティングが取り入れられています。

 

 

数分、数秒の中にユーザーにとってもわかりやすく目に止まりますし、

メッセージ性が強く、動画の見せ方次第ではブランディングにもなると思います。

 

背景に動画を配置するだけでなくマスキングする事で

動画をデザインで活かす事ができます。

ただしHTML5による埋め込み動画の場合は、動画容量を考慮した動画サイズ、

時間、解像度でWEBサイトが重くならないように気をつけるべきでしょう。

 

 

 

przman

 

 

 

tsuneniidom

 

 

 

ohland

 

 

 

 

活かせる利点

 

  • ファーストビューからインパクトが強い
  • 伝えたい事がテキストではなく映像で伝えられる
  • 質の高い動画でブランド力をつける

 

 

 

パララックスデザイン

 

 

パララックス(視差)効果は各要素ごとにスクロールスピードを調整し

box-shadowや要素と要素を重ね合わせるタイミングを作る事で

スクロールした際に動きがあるサイトに仕上がります。

タイミングを合わせて見てもらいたいコンテンツなどに、アニメーションを

活用したり1枚のページでストーリー性のあるサイトに仕上がります。

 

また、ユーザーにとってもパララックス効果やアニメーションで

楽しむ事もできるのでサイトのUX的にも良く、

そのページを下部まで見てくれる可能性も高まります。

 

 

 

carbonbeauty

 

 

 

feudi

 

 

 

le-mugs

 

 

 

活かせる利点

 

  • 視差効果がデザインに動きをつける
  • 要素ごとに動きを変える事でユーザーにも楽しんでもらえる
  • ページ内を上部から下部まで見てもらえる可能性が高くなる
  • パララックス効果をつける要素を選ばない

 

 

 

世界中には様々なWEBサイト公開されていますが、用途や目的はそれぞれ異なり

より目的に合ったデザインやコンテンツを心がけるために、参考になる

WEBサイトはチェックしておくと制作のレパートリーとして活用できます。

 

さらには、そのデザインに対しての利点を

探す事、調べる事で提案しやすくもなるでしょう。

 

独自でデザインを考える事も大事ですが、参考になるサイトを見つけ

真似てみる事が何よりデザインの意図を理解するための近道です。

 

僕ももっとたくさんのデザインに触れていこうと思います!

 

 

 

 

 

 

この記事を書いた人

採用情報

I hope share!この記事をシェアする