勝手に予想!2017年に流行りそうなWebデザイン

こんにちは、BONDs編集部で、Webユニットの小畑です。

 

2017年ですね!

技術の進歩とともに移り変わりも早いWebデザインの世界。広告マンとして時代の先端に乗ったイケてるホームページ(以下HP)を提案できるように、まずは昨年に流行ったデザインを振り返りながら、今年のトレンドを勝手に予想しちゃいたいと思います。※昨年に流行った定義は、DGコミュニケーションズで担当者したHPで見かけた頻度を主観的に判定させて頂いております。ご了承ください。

2017年の前に、まずは2016年に流行ったWebデザインの振り返り

1.レスポンシブWebデザイン
もはや流行ったというより当たり前という表現が正しいのかもしれません。みなさんご存知かと思いますし、こちらの記事で詳細説明しましたので、ここでの説明は割愛いたします。

2.パララックス

パララックスは、スクロールなどの動作に応じて複数の層にある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法です。勝手に再生される動画と違い好きなペースで進めることができますし、スクロールというシンプルな操作だけで楽しめながら情報が得られます。事例を2つ紹介しますので、実際に体感ください。

<事例東京タワーズ

 

<事例②>無印良品「MUJI to Sleep」

事例①は、谷口巧さんの写真集『東京タワーズ』の刊行と同時に公開されたHPです。「東京タワー」と「朝・宵・赤・青」などのキーワードでTwitterに呟かれている内容を各画面の背景に連動し表示しています。

事例②は、ページ途中の動画コンテンツがスクロールの動きに合わせて再生されます。

2つの事例を体感して頂いた通り、このような快感を覚えさせるスクロール操作と連続する展開は、ユーザの感覚を刺激し「次へ、次へ」と促し、さらに情報取得したいアクション・モチベーションに繋がります。するとユーザは自然とHPに一定の時間を滞在し、繰り返し閲覧したり、更にリピート来訪したりすることが期待できます。つまり、HPから得た素晴らしい体験というプラス的印象と共に、商品・サービス・コンテンツ内容も来訪者の記憶に残すことができるのではないでしょうか。

3.インフォグラフィックス
インフォグラフィックスは、イラスト・写真・図などを使って、言葉では表現しづらい情報を一目で分かるように表現するデザイン手法です。情報の供給過多に伴い、発信者は単なる文字情報の羅列だけではなく、受け取り手に対して「情報をデザイン」する工夫や配慮が必要になったことがその背景にあるのではないかと思います。読んでもらえず日々埋もれていく情報を可視化することで、魅力的で明確に伝わる手法として注目を集めています。

<事例infographic.jp

 

<事例②>ジョイサウンド「カラオケ白書」

事例①は、インフォグラフィックス制作内容を紹介したエコンテ社のHPです。

事例②は、エクシング社が運営する通信カラオケ「ジョイサウンド」の楽曲にまつわる様々な調査結果が、インフォグラフィックスで分かり易く報告されています。

2017年に流行りそうなWebデザイン

1.シネマグラフ

シネマグラフは、写真の一部にだけ動きを取り入れたデザイン映像手法です。2つの事例を紹介します。このように、ちょっとだけ動いている画像は、なぜかついつい見入ってしまいませんか?

<事例gilgul社HP

 

<事例②Pfister社HP

事例①は、海外の飲食コンサルティング企業gilgul社のHPです。ぐつぐつ沸騰している鍋、ケーキにソースをかけている動作を見せていて、見ていると食欲が湧いてくるような構成です。

事例②は、蛇口を扱うメーカーPfister社のHPです。蛇口から水が流れるシネマグラフを使用しています。シンプルなデザインにちょっとした動きを入れて、全体が非常に美しく表現されています。

2.クロムなし

コンテンツを取り囲むデザイン要素のことを「クロム(枠)」と呼ぶ事があります。

クロムなしは、その「クロム(枠)」が無いデザインの事です。

中央揃えされたコンテンツや、重要なコンテンツを左から右に詰めていくレイアウトがWebデザインの王道と言われている中で、それぞれのコンテンツのクロム(枠)の無いデザインは、背景の商品ビジュアルを生かすために遮る枠や余分なパーツを減らし、見せたいものや伝えたいことの中から引き算をしていき最小限度におさえることで、全画面を通じてビジュアルのメッセージ性を強調することができます。また、私の主観ですが、枠によって遮られないデザインは、とても清潔感があり、スタイリッシュに見えませんか?

ちなみに、よく聞かれる「パララックス」との違いですが、「クロムなし」は、デザインのことだけを指しているのに対し、「パララックス」は、動きを付け視覚効果を狙っている点が異なります。

<事例週末仙台

 

<事例②ブラウン社HP

事例は、週末に仙台に訪れる事を訴求するサイトです。

 

事例は、シェーバーでお馴染みのブラウン社のHP。製品自体も余分なデザインが少ないシンプルなデザインなので、製品コンセプトと合致したクロムなしのサイトデザインなのかと思います。

3.ストーリーテリング

ストーリーテリングは、一言で表すと、HP自体が一つの物語になっているデザインです。ページをスクロールしていくと、まるで絵本を読んでいるかのように1つの物語として構成されているので、HP来訪者に分かりやすく説明することができます。物語形式になっているので、スッと頭に入ってきます。

<事例①>甲南女子大学 Letters ~拝啓、未来へ。~

 

<事例②>Bellroy社HP

事例①は、大学の校訓と受け継がれてきた歴史がまさに物語のように展開しています。

事例②は、財布メーカーBellroy社のHP。膨らんでしまう財布の問題提起→問題解決方法の提案(問題解決可能な財布の簡易紹介)→商品の詳細説明という流れで展開しています。

まとめ

以上、勝手ながら2016年のおさらいと2017年の予想でした。

 

2016年は各案件において、Webサイトでデスクトップ型PCよりもスマホ経由での流入数が凌駕する傾向の常態化により、「スマホでも見やすいWebサイトになっているか?」をより皆さんが意識した年だったのかと思います。

なので、マルチデバイスで最適なWebデザインの「レスポンシブWebデザイン」や、スマホユーザの行動パターンを勘案した上下スクロールでユーザ主導のタイミングで閲覧し展開していく「パララックス」など、スマホ視点でのユーザビリティの探求がなされた1年だったのかなぁと思います。

また、2016年はサイト全体や、複数の主要テーマの訴求力の向上を目指していたようなイメージです。

 

2017年は、中でも、最も訴求したい1点を強く訴求するメッセージ力を探求する1年になるような気がします。

マンション建設予定地のみを光らせる、周辺写真で桜の枝のみ風にそよぐ、等の気付いて欲しいポイントに特化して訴求する「シネマグラフ」。キャッチコピーを強く伝える「クロムなし」。コンセプトや土地の歴史性等を物語として伝える「ストーリーテリング」。というような演出のWebデザインが流行るのではないかなぁと個人的には思っています。

 

「うんうん、そうだよね!」や「それはないんじゃない?」とかいろいろなご感想があろうかと思いますが、何人かの方にでも、イケてるHPの提案のヒントになれば幸いです。

 

小畑