UXを向上させるデータビジュアライゼーション事例11選

WebサイトデザインのUXを向上させるため、インフォグラフィックが近年ますます注目を集めています。

インフォグラフィックをはじめとした「データビジュアライゼーション」は、ストーリーテリングの一環として、単なる情報提示だけでなく視覚的にもユーザーに語りかけられる表現手法です。

この記事では、Webサイトにデータビジュアライゼーションを導入する際に参考になる事例11選と、そのポイントをご紹介します。

データビジュアライゼーション事例11選

1. Vintage Agency

Vintage Agencyの事例を見てみましょう。

データビジュアライゼーションがWebサイト全体のデザインに完璧にマッチし、UXを向上させています。

2. Corning Glass Class

Corning Glass Classは2012年に公開された、Webサイトでデータビジュアライゼーションが使われた初期の事例です。グラフィックを用いて、ガラスのさまざまな特色を紹介しています。

現代のインフォグラフィックに比べると初歩的なものにものに見えるかもしれませんが、当時としては最先端のデザインでした。

3. Brussels Airport in Numbers

Brussels Airport in Numbersの事例を見てみましょう。

オンラインのインフォグラフィックであるこの事例は、最新のトレンドを全て取り入れています。イコノグラフィー、タイポグラフィ、文字や線の使い方、ダイナミックな写真が、群を抜いて美しく仕上がっています。

4. Brand Love Score

Brand Love Scoreは、データビジュアライゼーションにモダンなテクノロジーを導入した最新の事例です。

このプロジェクトでは、ソーシャルメディアから得られたインサイトなどのコンテンツをビジュアル化しています。インタラクティブなデザインを、ぜひ体験してみましょう。

5. The Software House

The Software Houseのプロジェクトは、年ごとの総括をデータで確認できるデータビジュアライゼーションの事例。

The Software Houseは、プリミティブなグラフィック、大きなテキスト、ダイナミックな効果などを使用し、その年のサマリーを上手くまとめています。

6. Campaign Monitor

Campaign Monitorはクリーンでシンプルなデザインで、ハイテクな雰囲気をもつデータビジュアライゼーションの事例です。

チャートやバーなど、古典的なのデータビジュアライゼーションの手法を採用しつつ、スマートで現代的なアニメーションを付け加えています。

7. Clarity

Clarityは地球環境にまつわるデータビジュアライゼーションの事例です。

3Dの地球のビジュアライゼーションを使用しており、印象的に仕上がっています。

8. Game of Canada

Game of Canadaは、静的な2Dの地図がベースになっています。

HBOの人気番組である『Game of Thrones』の舞台を、カナダの文脈にあてはめた面白い事例です。マウスポインターを動かして、実際に遊んでみましょう。

9. Okela

Okelaは円形モチーフのプリミティブなデータビジュアライゼーション事例です。

クリーンでエレガントなデザインを採用し、現代的に仕上がっています。

10. Wind and Words

『Game of Thrones』ファンには、Wind and WordsというWebサイトもおすすめです。

字幕からデータを収集し、それぞれのキャラクターの対話の軌跡を追えるようになっています。

11. Your Worst Short Haircut Story

Your Worst Short Haircut Storyは一見したところデータビジュアライゼーションには見えませんが、これまでに投稿された「5 Words」がユーザーごとに表示されています。。

デザインがテーマにマッチしており、楽しく、シンプルなサイトに仕上がっています。

データビジュアライゼーション活用のポイント

今回ご紹介した事例から、UXを損なうことなくWebサイトにデータビジュアライゼーションを採用するためのヒントが浮かび上がってきます。

全ての事例で、以下のポイントが共通しているといえるでしょう。

• 数字は大きく記載する
• 文章は短くまとめる
• クリーンでシームレスなバックグラウンドを使用する
• 1,2種程度の少ないトーンパレットを使用する
• ホワイトスペースを活用する
• スクリーンを、グラフィックとインフォメーションの2つに大きく分割する
• アーティステックなデザインアプローチを採用する
• イコノグラフィー、タイポグラフィ、イラストレーションのデザインに気を配る
• ダイナミックエフェクトを活用する

まとめ

UXを向上させるためのデータビジュアライゼーションは、近年さらにハイレベルなものになってきています。アニメーションやダイナミックエフェクト、WebG、ソーシャルメディアとのインテグレーション等々……。今後もさまざまなタイプのデータビジュアライゼーションが登場してくるでしょう。

従来のWebサイトに、洗練された新しい表現を提供してくれるデータビジュアライゼーション。ぜひあなたも試してみてください。

（原文：Nataly Birch　翻訳：Mariko Sugita）

あわせて読みたい！▼