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