Webデザインとしてのインフォグラフィック

インフォグラフィック webデザイン 1

これまでにもインフォグラフィックの良さを取り入れたWebサイト、Webページを取り上げてきました。
ウェブデザイン新潮流?スクロールで見せるインフォグラフィック組み込みページ
Webデザインの新しい姿。インタラクティブ・インフォグラフィック
ウェブデザイナーがインフォグラフィック制作の担い手に。カロリーメイト公式サイト紹介

今回紹介するのは、インフォグラフィック・デザイン・プロダクション「Neo Mammalian Studios」が制作・公開する「13 Reasons Why Your Brain Craves Infographics」。

まずは、下記よりご覧ください。内容は、インフォグラフィックそのものに関して。
13 Reasons Why Your Brain Craves Infographics

インフォグラフィックは「情報をわかりやすく伝える」ためのものです。
そこに広報・PRの意味合いが強まってきているのが、2010年頃から。

Webサイトも「説明」機能と「広報・PR」機能を兼ねるものなので、共通点も多く、インフォグラフィックの見せ方がWebデザインに持ち込まれるのは自然なことです。

インフォグラフィックとして考えた場合も、Web型インフォグラフィックは、静的な画像インフォグラフィックよりも良いところがあります。

1.画面全体フィット

多くの場合、静的な画像インフォグラフィックが公開されるのは、サイトやブログのコンテンツエリアです。
そのため、全体表示するのに十分な幅がなく(縦長のインフォグラフィックでも幅800pxくらいは欲しい)、クリックして全体表示となります。

一方、Webページ型インフォグラフィックでは画面一杯に最適化できるため、クリックして拡大などのアクションなしで全体がスムーズに見れます。

また、いろんなデバイスの画面サイズに合わせることもできます(レスポンシブ)。

インフォグラフィック webデザイン レスポンシブ

2.縦長へのストレス

静的な画像インフォグラフィック(縦長)では、1,500~3,000pxくらいがひとつの目安になると思います。
縮小してサイトやブログのコンテンツエリアに表示したとしても、それなりの縦長感があり、サイト全体とのバランスやナビゲーションへの誘導の障害になったり、見る側の閲覧意欲を削いだりしかねません。

一方、「13 Reasons Why Your Brain Craves Infographics」の縦の長さは、10,441pxですが、それほど縦長によるストレスを感じずに閲覧できたのではないでしょうか?

インフォグラフィック webデザイン フル

3.アクションへの導線

近年のインフォグラフィック活用増には、広報・PRツールとしての期待があります。
企業、ブランドならではの専門的な情報をインフォグラフィックにまとめて、拡散を狙ったコンテンツとしてサイトやソーシャル・メディアで発信していきます。
有益なものや面白いものであれば、画像がいろいろなところで共有されます。

ブランドイメージの向上という面ではそれで良いのですが、そこからアクション(たとえば、サイトの特定ページへ誘導)を実際に起こしてもらうのは難しく、静的な画像インフォグラフィックの限界とも言えます。

それを解決するのが、Web型インフォグラフィックです。
「13 Reasons Why Your Brain Craves Infographics」では、随所にTweetリンクや、各データ・情報の出典リンクが貼られています。

インフォグラフィック webデザイン tweet

インフォグラフィック webデザイン 引用リンク

最後に

海外のインフォグラフィック・プロダクションでは、WebやアプリのUI/UX設計、インタラクティブなビジュアライゼーション制作も手がけているところが多く、Web制作と近いところで、インフォグラフィック(静的なものも含む)が動いているように感じます。

インフォグラフィックの制作工程も、情報・データの分析フェーズ(プログラミングを使用する場合もある)の比重が大きく、グラフィックデザインよりも、Webデザインに近いものです。

Webデザインの領域からインフォグラフィック制作をする人が増えてくると面白くなってきます。

記事に関係する本

プロフィール

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

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