【情報の可視化に最適!】インフォグラフィックとは?種類やポイント・事例も解説

Webデザイン
さいとぅ
さいとぅ

情報を受けとるとき、テキストに図が添えられているとわかりやすかった経験が誰しも一度はあるかと思われます。

そんな読み手がひと目で理解ができるように情報を可視化した図は「インフォグラフィック」と呼ばれます。

本記事では、この「インフォグラフィック」について詳しくまとめていきます。

インフォグラフィックとは

はじめに、インフォグラフィックには、以下のような意味があります。

インフォグラフィック(インフォグラフィックス):
情報やデータを直感的に把握できるよう、わかりやすく表現する技術。また、その図。文章で説明するのではなく、イラスト・グラフ・地図などを用いて視覚的に伝えることを指す。

出典元:インフォグラフィックの意味−デジタル大辞泉−コトバンク
さいとぅ

すなわち、インフォグラフィックはWebデザインのみならず、日常生活のあらゆる場面で使用されています!

インフォグラフィックの使いどころ

インフォグラフィックは、読み手の負担を減らし、ひと目で情報を受けとりやすくします。Webデザインでの使いどころとしては、以下の場面があげられます。

  • 説明が長文化する場面
  • 写真が用意しにくい場面
  • 情報に数量を含む場面

説明が長文化する場面

テキストのみで情報の詳細を伝えようとすると、どうしても長文化しやすく、堅さや無機質な印象をいだく懸念があります。

また、Webサイトはスクロール操作で読み進める(情報の表示範囲が移動する)ため、密度の高い文章は読みづらくなりやすいともいえます。

そのため、図で適度なリズムや流れをつくると読みやすさが向上します。

写真が用意しにくい場面

無形商材を題材にしたサイトでは、具体的な写真が用意できない場合も多く、写真の代わりとなる図よって情報の内容や雰囲気が伝わりやすくなります。

情報に数量を含む場面

情報に数量を含むときは、数量をただテキストとして並べるよりも、図に加工することで数量の意味や関係性がよりわかりやすく、印象的になります。

注意点

視覚的にわかりやすいメリットが多いインフォグラフィックですが、使用時の注意点もあります。

まず、素材がないと伝えたい情報に合った図をいちから制作するため、時間や工数がかさんでしまいます。

また、図を制作するタイミングで情報の取捨選択(最適化)をしているため、どうしても補足が必要となる場合もあります。

インフォグラフィックの種類

では、実際のインフォグラフィックにはどんな種類があるのでしょうか?代表的な表現を以下にまとめていきます。

さいとぅ

インフォグラフィックの分類には、ダイアグラム(質的表現)とチャート(質・量的表現)という分類があります。しかし、広義でまとめるとすべてダイアグラムという主張もあり、また複数の種類を併用する場合もあるため厳密な分類は難しいです。

そのため、今回はインフォグラフィックとしての利用シーンに基づいて紹介します!

イラスト(上)、フローチャート(中)、表(下)の一例

イラスト

挿絵や図解としてイラストを用いた情報の視覚化です。イラストのタッチによって印象が大きく変わるため、伝えたい情報の温度やトーンに合わせて使用します。

フローチャート

プロセスや順序がある情報に対して、数字や矢印などを用いて視覚的に遷移を表す図です。単一方向の単純なプロセスや分岐を含むフローにも適用できます。

さいとぅ

本来はアルゴリズムを表現する図を指しますが、インフォグラフィック上のフローチャートは明解なプロセスに使用されるケースが多く見受けられます。

表は、情報の関係性や条件を行列に定めて書き並べます。このとき、文字だけの情報や数量をあつかう情報も規則性や関係性が明瞭であれば表として表現できます。(例:名簿、年表、成分表、天気予報など)

グラフの例

グラフ

量的表現の最たる例がグラフです。誰しも一度はグラフを用いて情報を伝えた経験があるのではないでしょうか。以下に代表的なグラフをまとめます。

  • 棒グラフ
  • 円グラフ
  • 折れ線グラフ
  • レーダーチャート

棒グラフ

棒グラフは、横軸に比較対象、縦軸に数量を置いて、各対象が有する数量を棒として視覚化します。(横棒ブラフでは軸の値が入れ替わります。)そして、数量の大小の関係性を読み解きます。

円グラフ

円グラフでは、情報の総数を100%とし、各数量が総数のうち何割を占めているかが表現できます。

そこからさらに細分化した内訳や、円の中心をくり抜いたドーナツ状のグラフなどの加工も可能です。

折れ線グラフ

折れ線グラフは、横軸に時系列、縦軸に数量を置いて、対象の経時的な変化を線で結び可視化するグラフです。

図として占める範囲が少ないので、複数の対象をひとつのグラフにまとめて表示できます。(この場合は経時的な変化にくわえて、対象ごとの変化の比較が可能です。)

レーダーチャート

レーダーチャートは、評価項目の数を頂点とした多角形に数量を打ち込み、線を結んだ形で対象の状態を見ます。

この表現は対象のバランスや優れている点、改善点などの評価に適しています。

相関図(左)、地図(右)の一例

相関図

相関図では、複数の対象間にある関係性が視覚化されます。関係性が複雑になると相関の注釈が増えて見づらくなってしまうため、適度に調整が必要です。

地図

地形や位置関係を切り取り、記号や分類から表す地図もインフォグラフィックといえます。

標準的な地図の他にも、ハザードマップや路線図など、特定の目的にあった表示方法があります。

ピクトグラム(左)、アイソメトリック(右)の一例

その他の表現方法

イラストと同様の効果を持ち合わせており、図の表現方法が異なるインフォグラフィックの種類があります。

ピクトグラム

シンプルな形やアイコンを用いた表現です。トイレや非常口のマークなど、社会的にもなじみがあり、プレーンなデザインをつくりやすい特徴があります。

さいとぅ

最近ではオリンピック競技のヒューマンピクトグラムが話題になりましたね!

アイソメトリック

アイソメトリックはアイソメトリックプロジェクション(isometric projection)の略で、三次元的な表現を指します。平面・立面・側面の3方向がそれぞれ120°となるような視点で描き、全体を見下ろしている状態を表します。

三次元的な空間の奥行きや世界観から、デザイン・テーマにも広がりが感じられます。

インフォグラフィックのポイント

インフォグラフィックの選び方

インフォグラフィックには数多くの種類があるため、伝えたい情報に最適な図を用いる必要があります。要約すると、以下の順番から使用するインフォグラフィックを選びます。

  1. 情報は質的表現と量的表現のどちらか
  2. 情報のうち、伝えたい結論は何か
  3. 図のみを見ても結論がブレないか

情報は質的表現と量的表現のどちらか

もとの情報が、質的表現と量的表現のどちらかを把握します。

情報に量的表現を含む場合は、グラフとしてあつかえる可能性が大きく、一気に選択肢をしぼれます。

情報のうち、伝えたい結論は何か

質的表現、量的表現にかかわらず、伝えたい結論がもっとも重要です。

たとえば、サービスのプロセスを図として表現する場合はフローチャートが有効です。しかし、そのプロセスが循環性や再現性をもつという結論も伝えたい場合は、平坦なフローよりも円環のフローが最適となります。

インフォグラフィックは種類によって表現できる情報が異なるため、図の軸となる結論をしっかりと定義します。

図のみを見ても結論がブレないか

図のみを見ても結論がブレないかどうかは、選び方であり確認方法でもあります。

図はあくまでも情報を伝える手段のひとつなので、テキストと図で認識にずれが生じる事態は避けなければなりません。

もし選んだ表現方法に違和感がある場合は、テキストのメリハリで表現できないか、複数の図を組み合わせる方法はないかなど、最適な方法を探しましょう。

インフォグラフィックの配色

インフォグラフィックは情報の視覚化であり、汎用性の高い表現です。情報をそのまま図にするだけでも十分伝わりますが、可能なかぎり配色を調整すると全体とのフィット感がより強まります。

Webサイトのメインカラーやアクセントカラーに基づき、インフォグラフィックにもメリハリと統一感を持たせましょう。

(多色の場合は、サイトの配色のトーン(明るさや鮮やかさ)に合わせると自然な印象となります。)

インフォグラフィックの実例(Wepot)

さいとぅ

今回取り上げたインフォグラフィックについて、Wepot のサイトを例にいくつか見てみましょう!

Wepot のインフォグラフィック

【Wepotとは】情報発信について

メディアであつかう各分野を想起させるアイコンとしてイラストで表現しています。細めの線でシンプルですが、グラデーションの配色で爽やかな印象があります。

【サイト内共通】内部遷移のカード表示

サイト内で共通している内部遷移のカード表示でもインフォグラフィックのアイコンを使用しています。こちらの図は線と塗りを使用して存在感があり、遷移の役割がわかりやすくなっています。

【実績一覧】Wepotの強み

Wepotの強みでは、3つの強みに図解を添えています。本文では詳細を解説しつつ、図で視線の流れや本文への導入をつくって読み進めやすくなっています。

【実績一覧】プロジェクト進行

プロジェクト進行では、制作物に合わせてプロセスの内容を解説しており、全体のフローをひとつの図として表しています。全体 ⇄ 工程 ⇄ 実作業 を把握でき、依頼のイメージがしやすくなります。

さいとぅ

このように、伝えたい情報に適した図を添えると、グッとわかりやすくなります!

まとめ

いかがでしたでしょうか、今回はインフォグラフィックについて解説しました。インフォグラフィックはテキストの理解を助ける図解であり、情報量や難解さをカバーできる便利な表現方法といえます。

Wepotでは、伝わりやすさやわかりやすさを重視して、読み手が自然と頷けるように工夫したWebサイトを制作いたします。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
さいとぅ

さいとぅ
デザイナー

さいとぅ
デザイナー

Webデザインをはじめロゴデザインやインフォグラフィックなどのグラフィックデザインも幅広く対応可能です。コンセプトを重視し、ビジュアルから想いが伝わりひろがるようなデザインを軸としています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。