KOBITブログ

2017年WEBデザインのトレンドはどうなる?まとめてみた。

この記事は約 6分 で読めます。

cinema

Web制作に携わっている方たちは2017年のトレンドが気になってくる頃かと思います。 今回は今年にくるだろうと予測されるWebデザイントレンドをまとめました。

ストーリーテリング

見た目のかっこよさだけでなく、見る側にどのように楽しんでもらうのか、見ることで何かを得てもらえるのかを重要視する考え方です。 サイトのコンテンツをストーリー仕立てで作り、ユーザーを引き込むことを目的とします。

参考HP
http://levi.jp/suchmos/mintcondition/


リーバイスのキャンペーンサイト。 従来のHPでは商品を紹介するだけで終わるところを、ライフスタイルをメインに押し出しユーザー目線でコンテンツの展開を行うことで共感を生み、 ユーザーを惹きつけることを目的としています。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-06-12-43-59

スプリットスクリーン

webページ画面の構成を分割しレイアウトするもの。(分割スクリーン/分割レイアウト) 一度に複数面の情報を見れるので、ユーザビリティの向上にもつながります。 またスマホでは分割部分を上下に分けるなど、レスポンシブデザインにも対応可能です。

参考HP
https://ausdesignradio.com/



このサイトでは3面に分割されており、右側で紹介されている人物を選択すると、中央にその人物の詳細が表示される仕組みとなっています。 右は固定で配信しているポッドキャストが聞ける仕組み。さらにオレンジのバーがタイムラインになっているなど、すべての情報を同時にユーザーに提供してるます。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-06-12-44-36

クロムなしレイアウト

コンテンツを囲むクロムを排除したWebデザイン。紙面のような自由度の高いレイアウトです。 視覚的に美しさを求めるので、メッセージ性が上がります。 しかしWebサイトのデザインというよりも絵的なデザインとなるので、いかにユーザーを誘導していくかがポイントになるでしょう。 上記で紹介したストリーテリングなどのサイトで有効と思われます。

参考HP
http://weekend-sendai.com/


 
雑誌のようなレイアウトがされているサイト。 縦スクロールで移動し枠も取ったシンプルなデザインでありつつも、どこをクリックしたら何の情報が見えるのかなどのリードがスマートかつ上手になされています。 trend

シネマグラフ

数年前からちょくちょく話題になっているシネマグラフ。 写真の一部だけを動かして動きを与え、不思議な感覚を観る側に与える手法です。違和感をあえて生み出すことでユーザーを惹きつけます。 

参考サイト
cinemagraphs
このサイトではシネマグラフの例を大量に掲載しています。

イラストレーションをふんだんに取り入れたサイト

PCスペックが向上しロード時間がかかりにくくなったことで、ユーザーに負担なくWeb上で多くのイラストレーションでの展開をすることが可能になりました。 写真やイラストなどの使用幅が増えることで、今まで以上に幅広いデザイン表現のサイトが増えることが予測されます。

参考HP
http://www.wakitaseikeigeka.com/physicalcare/index.html

 画面をスクロールさせると、イラストが飛び出します。 このサイトでは柔らかい印象を与えることで親近感を生み出し、見る側を構えさせずにページ最後まで誘導しています。

trend3

インフォグラフィック

情報やデータなどを視覚的に表現することを指します。 数値や情報の箇条書きなどが多くあるサイトは、情報の多さで嫌になり最後まで見てもらえないことも多々あると思います。 しかし、簡潔にイラストで表現することでユーザーに受け入れられやすく、サイト自体も華やかに見せることができます。

参考HP
http://infographic.jp/

trend4

 インフォグラフィック作成を専門としている会社。 特化しているだけあってかなりわかりやすいインフォグラフィックがいくつもあります。 ローディング・アイコン ロード中に表示されるアニメーションのこと。 このアイコン、アニメーションはユーザーに待ち時間と認識されにくく作成することで、ユーザーの滞在時間を上げることができ、SEO対策にもなります。 また、デザインとして取り入れることでHPの幅も増やすことができます。


参考HP
http://www.habib-fadel.com/en/

 ローディングアイコンだけでなく、その後のトップページではカーソルの位置に合わせて背景が動いたり、 別ページでもカーソルの位置によって音声が出る仕組みにしているなどかなり手の込んだ面白いサイトでした。 最後に。 見た目がシンプルなサイトから豪華なサイトまで、年々自由度が上がり多くの手法のWebサイトが増えてきました。 Webサイトを作るにあたって最も重要なのは、ブランディングの基本コンセプトがぶれないこととユーザビリティ。 ここを大事にしつつ、よりよいデザインでユーザーを惹きつけるWebページを作っていきたいと思います。

参考サイト
http://big-mac.jp/
http://webdesign-trends.net/
http://brian.hatenablog.jp/
https://blog.codecamp.jp/

著者:MainYard Design(メーンヤードデザイン) 北野敦子

kitano

1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。
街を歩くだけでも無限の魅力があふれています。
ある日ふとそれらに魅了され別業界からデザイナーへ転身。
関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出典。第31回読売広告大賞協賛社賞受賞。


さあ、KOBITをスタートしよう。