イラストレータとCSSを駆使した2017年のWebデザインのトレンドのまとめ

2016年11月21日

Webデザインの世界では、日々、新しい技術が開発され、新しいトレンドが登場しています。
日頃から流行に関するアンテナを立てて、ユーザビリティの高いおしゃれなWebサイトを制作しましょう。今回は、2016年の傾向を踏まえつつ、2017年のWebデザイントレンドを予測しました。

2017年のWebデザインを占う二つのポイント

【1】縦に長いWebページ

縦に長く、スクロールしながら読むWebページは2017年も引き続き流行が予想されます。その理由は、縦長ランディングページのコンバージョン率の高さにあります。
優れたセールストークが、商品に対する興味を引き出し、客がついつい長時間に及んで話を聞いてしまうように、様々な工夫のこらされた縦長Webページには、どんどん続きを見たくなる魅力があります。

縦長Webページは通常のサイトに比べレイアウトの制限が少ないため、ダイナミックで自由なデザインを実現しやすくなります。美しく面白いデザインにひきこまれたユーザーは、Webサイトを眺めるうちに商品に魅力を感じ、最終的には気持ちよく商品やサービスを購入します。

縦長Webページには、1枚のHTML文書に多くの情報を載せるとファイルサイズが重くなるという欠点がありましたが、インターネットのインフラの向上や、画像やJavaScript、CSSコードの最適化によって、読み込みの負荷は年々改善されてきています。
それにより、デザイナーにとっては1Pの中で凝った表現が可能になり、クライアントである企業にとってはコンバージョンに繋がるため、縦長Webページに適したデザインは引き続き今後も流行することが予測されるのです。

【2】モバイルフレンドリー

スマートフォンによりWebを閲覧する人が急増し、将来的には「モバイルファースト」から「モバイルオンリー」に移行するであろうとも予測されています。レスポンシブWebデザインはもはや当然のこととなり、モバイルを意識したWebデザインの需要がますます高まっていくでしょう。

2017年のトレンドを予測

【1】ストーリーテリング

ユーザーの興味を引く動機付けをファーストビューで作り、物語仕立てでユーザーを引きこみ、お問合せへと誘導します。デザインのポイントとしては、物語に焦点をあて、他の表示物を極力排除します。

たとえば「You Waste A Lot of Time at Work Infographic - Atlassian」では、"こんなに仕事中に無駄な時間が発生しているよ！"というメッセージを、インフォグラフィックスを使って明快に、そしてテンポよく紹介されています。ファーストビューに掲載されたタイトル「You Waste A Lot Of Time At Work」も、ドキっとするメッセージですよね。

そんな風に、ファーストビューで「魅せて」、ストーリーで引き込み、CVへとつなげていく、というサイトの構成の作り方が「ストーリーテリング」という手法なのです。

【2】アクセント的なアニメーション

GIFアニメを用いて、画像の一部にだけ動きをとりいれた「シネマグラフ」、アイコンなどに動きをとりいれた「アニメーションアイコン」などで、読み込みの負荷を抑えつつ、人目を引くWebページを作ることができます。
具体例をもっと知りたい！という方は、「cinemagraphs」という、シネマグラフに特化した海外のホームページをご覧ください。ファッションやライフスタイル、旅行など、テーマ別にさまざまなシネマグラフを見ることができます。

また、シネマグラフについては過去のブログ記事「ドイツ発！シネマグラフのストックフォトサービス「Gallereplay」」にも紹介がありますので、そちらも参考にしてみてください。

【3】スプリットスクリーン

無駄な隙間を作らずに、読み手にインパクトを与えるWebデザインの手法として、スプリットスクリーンという技法が海外で流行しています。それは、Web画面を二つ（あるいはそれ以上）に分割して、スクロールをすると左右で別々の動きをするデザイン手法のことです。
スプリットスクリーンの採用にあたっては、モバイルフレンドリーに配慮する必要があるなど、いくつかの注意点があります。

具体例が知りたい！という方は、「One of a kind Chicago」のサイトをご覧ください。