The Do’s And Don’ts Of Infographic Design

• 12 min read
• Design,Data Visualization,Infographics
• Saved for offline reading
• Share on Twitter, LinkedIn

Since the dawn of the Internet, the demand for good design has continued to skyrocket.

編集部注: Nathan Yau の記事「The Do’s And Don’ts Of Infographic Design」を読むとよいでしょう。

インターネットの黎明期から、優れたデザインに対する需要は急増し続けています。 Web 1.0 から Web 2.0 そしてそれ以降も、デザイナーは、オンラインの世界のトレンドと期待を定義するために、常に気を配ってきました。 インターネットは偉大なデザイナーの遊び場であり、オンライン・ビジネスは、優れた目の保養から得られるものをますます高く評価するようになっています。

インフォグラフィックは、情報の視覚的表現であり、最近ではクールな子供たちが「データビズ」と呼んでいるものです。

インフォグラフィックスは、情報を視覚的に表現したもので、最近ではクールな子供たちが「データビズ」と呼んでいます。「データビズ」という言葉は「データビジュアライゼーション」に由来し、データのセットを読むのではなく、見ることができる独自の方法で表示することを意味します。 このビジュアライゼーションは、解釈に委ねられるのではなく、すべての視聴者に普遍的な結論を提供する方法で設計されるべきです。 簡単に言えば、インフォグラフィックは、エクセルなどのプログラムが長年吐き出すチャートやグラフとあまり変わらないのです。

SmashingMag のその他の記事

• インタラクティブなインフォグラフィック デザインの魅力
• データの視覚化とインフォグラフィックのリソース
• 円グラフが永遠にインフォグラフィックを踏み続けるのを想像してみる
• データの視覚化における物理の楽しみ

もちろん、Web 2.1 と同じように、インフォグラフィックも、より多くの人に楽しんでもらうことができます。0 が 1.0 を変えたように、今日のインフォグラフィックは、単純な円グラフや棒グラフよりもはるかに人目を引くものになっています。 今日、インフォグラフィックは、多くの異なるデータの視覚化を、1つのまとまった「目の保養」にまとめています。

デザインのトレンドは移り変わるものですが、インフォグラフィックはこれからも続いていくものです。

いくつかのデザイントレンドは移り変わりますが、インフォグラフィックは今後も続くでしょう。USA Today、The New York Times、Googleなどのブランドやオバマ大統領までもがインフォグラフィックを支持しており、大量の情報を大衆に普及させるための強力なツールになりつつあります。 大企業も中小企業も、インフォグラフィックを使ってブランドを確立し、オーディエンスを教育し、リンク構築によって検索エンジンランキングを最適化しています。

データ ビズとインフォグラフィックのデザイン

インフォグラフィックのデザインは、ウェブサイト、チラシ、パンフレットなどのデザインと同じではありません。 よだれが出るようなポートフォリオを持つ最高のデザイナーでさえ、効果的なインフォグラフィック デザインを実行することはできません。 インフォグラフィックの作成は挑戦であり、誰にでも自然にできるわけではない考え方が必要です。

見せる、教えない

映画のルールは、「見せる、教えない」です。 インフォグラフィックのデザインにも同じことが当てはまります。 インフォグラフィックのデザイナーとして、あなたはコンセプトを決定し、最終的なデザインのためにすべての調査をまとめるかもしれませんし、そうでないかもしれませんが、いずれにしても、その情報を、ストーリーを伝え、データを視覚化する機会を一つも逃さない、視覚的に刺激的でまとまったデザインにする責任があります。

このインフォグラフィックでどこが間違っているのでしょうか。 それは、ゲートからすぐに最初のルールを破っています。 情報を視覚的に表示する機会があるときは、それを利用しましょう。 ここでは、1秒あたりのツイート数を少なくとも棒グラフで表示することができたはずです。 棒グラフのさまざまな高さを見ることによって、何も読まなくても、イベントごとの秒あたりのツイートの違いをすばやく把握することができます。

このルールの遵守に問題がある場合は、AI ファイルの 1 つのレイヤーにすべてのテキストを維持してください (図表内のテキストを除く)。 時々、テキストレイヤーをオフにして、インフォグラフィックがまだ意味をなしているかどうかを確認します。

クライアントが Excel のグラフを望んでいるなら、あなたは必要ないでしょう

厳しいように聞こえるかもしれませんが、本当です。 インフォグラフィックが、ページに標準的なチャートやグラフをたくさん並べるのと同じくらいシンプルであれば、クライアントは優れたデザイナーを探し出す必要はないでしょう。 カラフルな円グラフや折れ線グラフ、棒グラフを作成できるツールはネット上にたくさんありますから、デザインを際立たせるためには、次の段階に進む必要があるのです。 上記のデータを使って、以下の 2 つのグラフのうちどちらがクライアントを喜ばせると思いますか?

B と答えたあなたは理解していますよね？ もちろん、すべてのデータが、創造的でユニークなグラフに適しているわけではありません。 グラフAは、インフォグラフィックの他の部分が同様の美観を共有している場合、非常にうまく機能するかもしれません。 それでも、以下の例のように、常にドレスアップする方法を検討してください。

Typography Should Not Be a Crutch

Typography はデザインを良くも悪くもしますが、データ可視化の問題に対する解決策であってはいけません。 多くの場合、デザイナーは、インフォグラフィックを非常にエネルギーと興奮をもって始めますが、ページの下に進むにつれて、急速に勢いを失います。 例えば、大きな数字を視覚化する代わりに、タイポグラフィーを使って見せるなどです。

これを見るたびに、「Where’s the beef?” ad campaign」を思い出し、「Where’s the data viz?”」と思っています。 Sketch Rockwell はずっと好きなフォントの 1 つですが、これはタイポグラフィーに頼りすぎている典型例です。

インフォグラフィック用に調査番号が提供されたときはいつでも、それをどのように視覚化できるかを自問自答してください。 パーセントは常にクリエイティブな円グラフで視覚化することができ、セットの数値は通常、ユニークな棒グラフに変えることができます。 上記のデータを視覚化できた別の方法を示します。

Typography Has Its Place

そうは言っても、タイポグラフィーには用途があり、インフォグラフィックを作るときに無視すべきではありません。 ほとんどの場合、タイトルと見出しにあなたの創造的なタイポグラフィのエネルギーを集中させたいと思うことでしょう。 インフォグラフィックのタイトルは、楽しくて目を引くフォントを使用し、テーマやトピックに合った処理を施す絶好の機会です。 ただ、タイトルがあまりに邪魔で、そもそもインフォグラフィックを見ている理由を奪ってしまわないように気をつけましょう。

同様に、見出しはインフォグラフィックを分割し、データを取り込みやすくするのに役立ち、あなたのフォントネルの旗を揚げる別の機会を与えてくれるのです。

Organization And Storyline

意味をなす方法で、見る人の興味を引くようにインフォグラフィックを構成することは、常に簡単ではありませんが、ほとんどのインフォグラフィック デザイナーにとっては仕事の一部です。 通常、多くのデータが与えられ、そこから視覚的なストーリーを作成する必要があります。

インフォグラフィックのワイヤーフレーム

インフォグラフィックのワイヤーフレームは、デザインのためのストーリーボードとレイアウトを作成することができます。 伝えたいストーリーのアイデアがあっても、レイアウトを始めると、壁にぶつかってやり直さなければならないことがあります。 せっかくデザインしたのにやり直さなければならないのは、非常にもどかしいものです。 このような事態を避けるために、最初にストーリーラインを設定し、どのデータをどのように見せるかを決定しておきましょう。 1時間ほど時間をとってスケッチし、すべてが意味をなすことを確認してください。 これは、選択するカラーパレットが重要なポイントに注意を向けさせ、視線をページの下に流し続けることにも役立ちます。

枠にとらわれない

インフォグラフィックをワイヤーフレーム化するとき、ストーリーを伝えるのに役立つセクション区切りを確認します。 オンラインのほとんどのインフォグラフィックは、各セクションに見出しを付けて最後のセクションと区別する、縦の流れになっています。 これでは、すぐに飽きられてしまいます。

たとえば、典型的な1カラムのレイアウトではなく、部分的に2カラムを使用することができます。 また、セクションをボーダーで区切ったり、さまざまな形の背景を使ったり、デザイン全体に道路や道のテーマを与えたりすることも可能です。

Tell a Story

すべての良い物語には、始まりと終わりと中盤があるものです。 インフォグラフィックも同じ扱いに値します。 インフォグラフィックの冒頭で、問題やテーマを紹介します。 そこから、データでそれをバックアップします。

フックを視覚化する

優れたインフォグラフィックには、見る人に「ああ！」と言わせるようなフックや主要な収穫が必ずあります。 フックは、インフォグラフィックの中央か一番端に配置すると、より注目を集めることができ、通常、最適です。 最も重要な情報には、最も視覚的な重みを与え、視聴者が何を取り上げるべきかを知ることができるようにします。

Cleaning Things Up With Color

カラー パレットがもたらす違いは、特にインフォグラフィックの世界では驚くべきものです。 適切なパレットは、インフォグラフィックを整理し、ブランドを伝道し、トピックを強化することなどに役立ちます。 間違ったパレットは、素晴らしいトピックを目障りなものに変え、ブランドのイメージを損ない、間違ったメッセージを伝えることになりかねません。

ユニバーサルにする

ウェブデザインでは、常に、ウェブサイトのテーマに合ったパレットを選択し、多様な訪問者のグループに対して十分にニュートラルであることが重要です。 インフォグラフィックは主にオンラインで共有されるため、さまざまな訪問者に適したパレットを選択することは同様に重要です。

たとえば、暗い色やネオンカラーは、一般的にインフォグラフィックスではうまく表示されません。 また、背景にはできるだけ白を使わないようにしましょう。 インフォグラフィックは、複数のウェブサイトやブログで共有されることが多く、そのほとんどが白を基調としたものです。

3色のパレットは目に優しい

インフォグラフィックに入るすべてのデータで、読者の視線がページを簡単に流れるようにします。 間違ったカラーパレットは、これを妨げる大きな要因となります。感覚を刺激しないパレットを選びましょう。

カラーパレットを選ぶのが難しい場合は、「3つの法則」にこだわってください。 3つの原色を選びます。 3色のうち、1色は背景色（通常は3色のうち最も明るい色）、残りの2色はセクションを分割するようにします。 他の色を加える必要がある場合は、3つの原色の影を使います。

自由に使えるツールを使う

色を選ぶときに、車輪の再発明をする必要はありません。 多くの素晴らしいウェブサイトが、インフォグラフィックに適したパレットを選ぶ手助けをしてくれます。 アドビのKulerは、新鮮なテーマと検索可能なデータベース、そして気になるパレットを簡単に調整するツールを提供しています。 Kuler の問題の 1 つは、すべてのパレットが 5 色であり、色が数原色の色合いではなく、まったく異なる系列の色であることがあるため、正しいパレットを見つけることは干し草の中から針を探すようなものです。

別の色選びのツールに COLOURlovers があります。 このデータベースは検索が簡単で、パレットをさまざまなテーマに分け、お気に入りごとに分類することができます。 ほとんどのパレットは 5 色で構成されていますが、各色は常に同じ重みを与えられているわけではなく、どの色が優勢であるべきかを示唆しています。

Final Thoughts

これらの基準は、ほとんどのインフォグラフィック デザインで考慮すべき重要事項ですが、時にはこれらの規則をすべて破って、それでも非常に成功しているインフォグラフィックも存在します。 結局のところ、クライアントは「目の保養」と「ポップ！」なデザインを好みます。 このような言葉は主観的であり、ほとんどのデザイナーにとって迷惑なものですが、私たちは皆、素晴らしいインフォグラフィックデザインを見れば分かりますし、あなたのクライアントも同じです。 これらのルールは、インフォグラフィックの領域へのガイドとして使用しますが、ある程度の経験を積んだら、独自のテクニックや基準を作りましょう。