68
魅力的なチャートやグラフを作成する

パワーポイントのプレゼンテーションをじっくり見たり、四半期報告書を読んだりしたことがあるなら、チャートやグラフにうんざりした経験があるはずです。おそらく、灰色の背景に青、赤、黄色の線が入ったものでしょう。もしかしたら、誰かが3D効果を加えて「目立たせる」ために、このようなつまらないグラフィックをいくつか作ったことがあるかもしれません。

インフォグラフィック、つまり情報グラフィックのデザインスキルを向上させる余地は、ほとんどすべての人にあります。インフォグラフィックとは、言葉、数字、画像を組み合わせて、ストーリーを簡潔かつ明確に伝えるものです。円グラフ、棒グラフ、折れ線グラフなどがその例です。「グラフィック」という言葉がありますが、魅力的なインフォグラフィックを作成するために、専門的なプログラムや美術の学位、あるいはオフィスソフトの高度なエフェクトは必要ありません。代わりに、トップエキスパートが教える以下のデザインルールに従うだけで、どのアプリケーションを使っても効果的なインフォグラフィックを作成できます。

情報を理解する

優れたチャートやグラフは、成長、減少、対比、時間、あるいは価値といったストーリーを、簡潔かつ明瞭に伝えます。Inbound Logistics誌のクリエイティブディレクター、マイケル・マーフィー氏によると、インフォグラフィックを作成する際のデザイナーの役割は、主要な物語を理解し、情報に隠されたドラマを見つけることです。

そのためには、まずデータの意味を理解する必要があります。次に、対象とする聴衆の視点からデータを分析する必要があります。「最も重要な事実を伝えているか?」「彼らの言葉で伝えているか?」と自問自答してみましょう。対象とする聴衆全員にとって同じ意味を持つと確信できる場合を除き、専門用語の使用は避けましょう。

適切な配送方法を選択する

悪いチャートの例
この悪い売上チャートの例は、フォントやテキスト サイズが多すぎる、グラフィックが多用されている、3D 効果が目障り、色の選択が不適切、背景が雑然としているといった問題で、見栄えが悪くなっています。

インフォグラフィックを作成する際に最も重要な決定の一つは、使用するチャートやグラフの種類です。一般的に、棒グラフは金額の比較や経時的な傾向を示すのに最適です。一方、図やフローチャートは、プロセスや関係性を示すのに適しています。

次に、数字を参考に、最も適切なインフォグラフィックの種類を選びましょう。例えば、比較する数字が異なる場合にのみ棒グラフを使用します。ほぼ同じ数字の棒グラフでは、あまり印象に残りません。また、パーセンテージが100%の場合のみ円グラフを使用します。

次に、紙にスケッチを描き、ソフトウェアではなく自分のアイデアがインフォグラフィックの方向性を決めるようにしましょう。ミシガン州立大学のインフォグラフィック・プログラムの責任者であるカール・グード氏は、見た目の美しさではなく、論理的な構造を考えることを勧めています。

 紙のスケッチを改良した後でのみ、Adobe Illustrator ( )、Apple Numbers (  )、Microsoft Excel (  )、または Red Rock Software の DeltaGraph ( )などのプログラムのチャートとグラフのテンプレートを操作してください 

重要なことを強調する

インフォグラフィックの最も重要なデータを強調し、情報をすばやく伝えるには、レイアウト、サイズ、フォント、色の 4 つの要素が役立ちます。

レイアウト:ほとんどの人はまずページの左上を見るので、見出しや導入文などを配置して、グラフや図表の残りの部分の配置を決めるのに自然な位置です。また、他の要素よりも先に読者に目に触れてもらいたい重要な画像を配置するのにも適しています。当然ながら、右下隅は必ず見るべき詳細を配置するのには適していません。

成功するインフォグラフィックは、高さよりも幅が広い傾向がありますが、別の形状の方が理解しやすい場合は、情報を水平方向に押し込まないでください。

良いチャートの例
この改良されたグラフでは、情報がより分かりやすくなっています。フォントはサンセリフのみで、バーの色は同系色で、気温が上昇するにつれて濃くなります。さらに、背景に線がなく、グラフが枠で囲まれていません。

サイズ:一般的に、重要度の低い情報は最も小さくする必要がありますが、文字サイズを使いすぎると閲覧者が混乱してしまうため、あまり多くのサイズを使い分けないようにしてください。例えば、見出しを最も大きく、導入部分を少し小さく、グラフのテキストを最も小さくするなど、3種類の文字サイズに限定するとよいでしょう。

フォント:テキストを読みやすくするために、使用するフォントファミリーは1つか2つに限定しましょう。サンセリフ体(線端に装飾のない書体)は、セリフ体よりも線が太く、すっきりとした印象を与えるため、ほとんどのインフォグラフィックに適しています。Helvetica、Gill Sans、Trebuchet MSはOS Xに付属のサンセリフ体です。他には、Franklin Gothic、Myriad、Stone Sansも選択肢に挙げられます。

これらのフォント ファミリの多くにはバリエーションが含まれているため、たとえば、テキストに Myriad を使用し、見出しに Myriad Bold を使用して迫力を加えることができます。

色彩は重要な情報を際立たせるのに驚くほど効果的ですが、控えめに使用した場合に限ります。例えば、雑誌「ベストライフ」の副アートディレクターであるヘザー・ジョーンズは、色彩を最も効果的に使用するために、まず白黒で作業を開始します。データが明確に伝わっていることを確認した後、インフォグラフィックの各部分をより際立たせるために、適度に色彩を加えます。

原色を大胆に使うと、色を強調しにくくなるため、避けましょう。(また、色覚異常のある視聴者も考慮してください。多くの人は緑と赤の区別がつきません。)比較的落ち着いた色合い(アースカラーの緑や黄色など)を採用するか、1色を選び、その色の濃淡を混ぜてみましょう。

また、グラフや図表が配布される可能性のあるあらゆる方法を考慮する必要があります。例えば、白黒プリンターで印刷される可能性がある場合は、黒、白、グレースケールのみを使用する方が安全です。

避けるべきよくある間違い

インフォグラフィックのしっかりした下書きが完成したら、一歩引いて批判的に見てみましょう。目標は、以下の間違いを犯していないか確認することです。

焦点がないグラフ内の棒グラフ、円グラフ、線グラフがどれも同じような大きさや色だと、見る人の目を引く要素がありません。例えば、暑い日にビーチボールの売上が多いことを示している場合、グラフ内の各日の棒グラフは灰色になっています。最も暑い日を表す棒グラフを赤に変えれば、瞬時に焦点が絞られます。

一貫性の欠如:類似した要素は、色、サイズ、配置、書体など、見た目が統一されている必要があります。インフォグラフィックの視覚的な手がかりに一貫性がないと、閲覧者を混乱させる可能性があります。

同様に、同じページに掲載され、同じスケールを使用するグラフは、同じサイズにする必要があります。例えば、気温の高さと日焼け止めの売上を関連付けたグラフを作成し、それをビーチボールグラフと同じページに掲載する場合、グラフ全体とグラフ内の要素のサイズを統一する必要があります。そうすることで、閲覧者は情報を簡単に比較できます。

情報が多すぎる重要な情報と競合する、重要でない情報はすべて削除しましょう。例えば、グラフの棒グラフの高さをグリッド線で表している場合、すべてのグリッド線を表示する必要はありません。また、グラフが経時的な成長を示している場合は、棒グラフの上にある数字を削除することで、開始点と終了点を強調します。このようにグラフから不要な情報を削除することで、メッセージが強化されます。

境界線多くの人は、データを枠で囲みたいという衝動に駆られます。特にインフォグラフィックに軸線、目盛り、グリッド線、テキストなどの要素が含まれている場合は、その衝動を抑えましょう。

効果の空虚さ効果的なインフォグラフィックデザインのルールでは、3D効果、複雑な陰影、反射、テクスチャの使用が推奨されていないことにお気づきでしょうか?これは、人々の目が情報そのものに集中し、無意味な装飾に惑わされないためです。

インフォグラフィックはまず平面的な視点で機能する必要があります。立体的なグラフィック、遠近法の歪み、派手なエフェクトは今や人気ですが、それらはチャートとしては役に立たないものです。どうしても使用する必要がある場合は、控えめに使用しましょう。

Terri Stone 氏は、CreativePro.com と InDesign Magazine の編集長です。