Webサイトのデザインでユーザー体験を豊かなものにするための手段として、ごく最近インフォグラフィックが私たちの生活の中に現れるようになりました。
しかし開発者たちが、より多くの閲覧者を取り込むために個人のポートフォリオや企業のWebサイトで統計を使用する例はこれが初めてではありません。
Vintage Agencyというサイトを見てみましょう。
魅力的な過去実績の他に、エージェンシーとして数値をアピールする機会を逃しません。このサイトでは、統計的数値を全体的なデザインに完璧にマッチするよう絶妙に取り入れることでユーザー体験を高めています。
データビジュアライゼーションはストーリーテリングの一環として、情報伝達だけではなく、視覚的にも強い印象を与えるツールです。
たとえばCorning Glass Classでは、ガラス製品についてグラフィカルなアプローチを用い、多くの情報を提供しています。これは2012年に作られたものなので、Webサイト上にデータビジュアライゼーションが登場し始めた様子が伺い知れます。
Brand Love ScoreのWebサイトと比較すると、上記のデータビジュアライゼーションは幼稚に見えるかもしれません。しかし、2012年当時はこれがとてもクールだったのです。こういったアプローチは紆余曲折の末、飛躍的に改良されました。
Brussels Airport in Numbersはオンラインインフォグラフィックを起用し、全ての側面において現代の流行を取り入れています。わずかに輪郭をつけた図解やスムーズなタイポグラフィ、縦書きの書式や縦のライン、高級感のある写真によってデータビジュアライゼーションは次のレベルへと進化しました。
すでに述べたように、Brand Love Scoreは現代的なテクニックでデータビジュアライゼーションを用いたもう１つの代表的な例でありお手本です。
このプロジェクトはブラックフライデーの週末のソーシャルメディアからとったインサイトや感情のようなコンテンツを視覚化しています。操作してみて、自分なりの方法でツイートを探索してみてください。
現在使われているデータビジュアライゼーションのすべてがBrand Love Scoreのように洗練され、進歩しているわけではありません。The Software HouseやCampaign Monitorを見てみてください。これらはいわゆる「一年の総括」のようなコンテンツです。
The Software Houseは原始的なグラフィックや、巨大な文字組み、ダイナミックな効果などの力を借りて宇宙的なテーマの表現を実現しました。このチームはただの総括を数値の裏付けのある共感性の高いナラティブに昇華させたのです。
Campaign Monitorは綺麗でシンプルなデザインを用いており、わずかにハイテクな雰囲気を持っています。チャートやバーのような昔ながらのデータビジュアライゼーションを上手く使っているのが特徴で、それでいて目立たないアニメーションを表現しています。
これらの例はデータビジュアライゼーションをどのようにしてWebデザインに組み込み、どのように体験を損なわないようにするかについて、様々なヒントを与えてくれます。
- 数字を大きく表現する
- 短い文章を使う
- シンプルやシームレスな背景を選ぶ
- 色の組み合わせは１～２色程度にする
- 余白を十分に取る
- 画像を見せるパートと情報を載せるパート、２つに画面を分ける
- 退屈なデザインを捨て、よりアーティスティックなアプローチをする（美しいアイコンやエレガントなタイポグラフィ、派手なイラストなどを使用するなど）
- 他との違いを生み出すためにダイナミックな効果を追加する
基本的な要素
図表によってデータを表現するための昔ながらの手段は、チャートやバー、ラインやグラフなどが挙げられ、多くの事例をみつけることができます。
地図サイトや地球儀サイトを見てみると静的なものからダイナミックな表現のものまであります。中でも以下のサイトは印象的な表現をしていますので参考にしてみてください。
Clarityは力強く多岐にわたる印象を生むのはもちろん、より鮮明に地点を表示するためにライブ３Dの地球儀のビジュアライゼーションに基づいて製作されています。その表現は実に優れたものです。
Okelaは円形チャートに素晴らしい革命をもたらしました。このチャートはクリーンでエレガントなデザインに申し分なく溶け込んでいるだけではなく、ポートフォリオ内において一種の「司令塔」のような役割を果たしています。
もし古さと新しさの面白い共存関係に関心があるならば、 Fedex Soundtrackを参照するとよいでしょう。このサイトは現代の技術を応用し、昔ながらのマップを特色あるものにしています。また、ゴージャスな色合いにも注目してください。豪華さを見事に演出できています。
心や魂を注ぎ込めば、どのような環境でもチャートはその機能を発揮します。Game of Canadaはそれを示す完璧な例です。
Game of Canadaの作成チームは、上記の例とほぼ同じアプローチを用いています。地図はユーザー体験のなくてはならない一部分ですが、今回の場合はマップをフラットでグラフィカルな形で置いています。それぞれのポインターをクリックし、米ドラマGame of Thronesのカナダ版のようなコンテンツをお楽しみください。
次に紹介するWind and Wordsも、Game of Thronesの著者であるGeorge R.R Martinのファンタジー小説が好きな人向けのものです。
これはHBOで放送したGame of Thronesの１～６シーズンに特化して作られています。字幕からデータを収集し、それぞれのキャラクター間でどれだけの交流があったかをデータビジュアライゼーションを用いて鮮明に映し出しています。
データビジュアライゼーションを使用するその他の例
従来と違うデータビジュアライゼーションの活用法にはどのようなものがあるのでしょうか？ Red Bull Racing + Citrixを見てみてください。近未来型のネオンのようなイラスト、圧倒的に暗い色彩や手の込んだダイナミックな効果によって、このサイトは一流で最高に近代的に感じられます。ここでの数字は情報のただ一部分にすぎません。
Your Worst Short Haircut Storyを見るのもいいかもしれません。最初はデータビジュアライゼーション に見えないかもしれませんが、ユーザーが体験した悪い体験をスマートにコンテンツに落とし込んでいます。このデザインはアイデアを中心に据えたいときにあるべきデザインとなっています。このプロジェクトを３語で表すなら「面白く」て、「シンプル」で、「独創的」です。
まとめ
データビジュアライゼーションの昔ながらの手法は、人々を楽しませユーザー体験を豊かなものにするための確固たる手法へと進化してきました。もちろん、創造的な考え方のみからこの変容のすべてが起こったわけではありません。他にも重要な要素がたくさんあります。
１つめにグラフィカルに表現する技術が向上しました。チャートは従来からの退屈で数学的な図よりも、まるでイラストのように見えるようになりました。
２つめにアニメーションやダイナミックな効果が状況を変えました。
３つめにWebGLというJavaScript API や、ソーシャルメディアと他の最新ツールの統合が、アプローチの質を引き上げました。最後に、トレンドがこの種のデザインに大きな影響を与えました。これらの結果として、洗練され成熟した解決策でツールキットを満たせるようになったのです。
