ウェブデザイン新潮流?スクロールで見せるインフォグラフィック組み込みページ

Googleが検索の仕組みをまとめたインフォグラフィック「How Search Works」を公開しました。

ウェブページに組み込まれており、縦スクロールに反応して表示内容が切り替わります。

How Search Works

Google インタラクティブ インフォグラフィック 検索の仕組み
How Search Works

つぎに紹介する「Every Last Drop」も同じようなつくりになっています。

Every Last Drop

一日の中で、どれくらい水を消費しているか(イギリス)をストーリー仕立てに見せています。

Every Last Drop インタラクティブ インフォグラフィック
Every Last Drop

上の2つほど動的には変化しませんが、縦スクロールで展開するウェブページ型インフォグラフィックを3つ紹介します。

Messi VS Ronaldo

サッカーのリオネル・メッシ選手とクリスティアーノ・ロナウド選手を比較しています。

Messi vs Ronaldo インフォグラフィック
Messi VS Ronaldo

2012 アメリカ大統領選挙 Connect USA

2012年のアメリカ大統領選挙について、大統領になるまでの道のりや候補者・政党の考え方の違いをまとめています。

2012 アメリカ大統領選挙 Connect USA
2012 アメリカ大統領選挙 Connect USA

TOKY | 2012

海外のクリエイティブ・エージェンシーがアニュアルレポートをインフォグラフィックにしてウェブページに組み込んでいます。

アニュアルレポート インフォグラフィック
TOKY | 2012

インフォグラフィックが1枚絵で1つの流れの中で情報を見せるものなのに対し、ウェブサイトはどちらかというと情報をカテゴリーやレベルで分割して細かく見せていくものです。

それぞれに利点があるのですが、インフォグラフィック特有の「流れで見せる考え方」とウェブサイト特有の「構造的に見せる考え方」の両方をうまく取り入れようとして、今回紹介したような表現がうまれてきているのだと思います。

スマートフォンやタブレットの普及、ソーシャル・メディアのタイムラインへの慣れなどによって、縦スクロールに馴染んだユーザーが増えているのも背景としてあるのかもしれません。
無限スクロールするサイトも増えましたしね。

楽天サイトのデザインに、学ぶことはありそうです(お洒落かどうかは抜きにして)。

プロフィール

櫻田潤
櫻田 潤(さくらだ・じゅん)

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキングを運営。あわせて、インフォグラフィックのデザインも始める。2014年、NewsPicksにインフォグラフィック・エディターとして参画。ビジュアルを用いた記事を多数、執筆デザイン。2017年よりNewsPicksの全体クリエイティブを統括。著書に『たのしい インフォグラフィック入門』『シンプル・ビジュアル・プレゼンテーション』