レスポンシブデザインとは?基本的な仕組みと対応方法を解説
2019年12月9日
東証スタンダード上場企業のジオコードが運営!
Web制作がまるっと解るWebマガジン
更新日:2022年 05月 17日
【監修】株式会社ジオコード Web制作事業 責任者
高松 建太郎
近年、身近なところにあるインフォグラフィックスについてご存知でしょうか?言葉は聞いたことあるけれど具体的にどのようなものなのか知らない方も多いと思います。
インフォグラフィックス(infographics)とはinformation+graphicsという意味の造語で、インフォグラフィックスは昔から私たちの身近なところで活用されています。
当社、株式会社ジオコードへも、情報の見せ方をわかりすくしたい、インフォグラフィックを集客に活かしたいなど、情報を可視化するデザインについてのご相談を多く寄せられています。
WebデザインやWebマーケティングのご相談などございましたら、気兼ねなくお尋ねください。
目次
改めて、インフォグラフィックスとは言葉や数字だけでは伝わりづらい情報を「整理」「分析」「編集」してイラスト・チャート・グラフ・表・地図などで表現したものです。例えば、標識、教科書、報道、地図、最近ではWeb、プレゼンテーションなど目にすることが多くなっています。
目にすることが多くなってきた背景には、情報量の供給過多が存在します。
情報量の供給過多により、発信者は情報をデザインし、テキストだけでは読んでもらえないものを魅力的で明確に伝わるように変化させた伝達手法として注目されています。
グラフィック、チャートとグラフ、色、動画などを使い、面白さや役に立つといった、ユーザーに有益なビジュアルコンテンツを提供し自然と視聴者を引き付けることができます。面白いビジュアルの表現により、視聴者が楽しむことで、印象づけることができます。
短時間で理解できない情報は、ユーザー、発信者の両者にとって不利益なものになってしまいます。インフォグラフィックスを用いて視覚化された情報は、理解しやすいため認識率が向上します。
データ、情報の伝達については、どの業界、分野にも必要不可欠になっています。
インフォグラフィックスは教育、ビジネスレポート、プレゼンテーション、物の紹介、新聞、統計図表など、どの業界でも共通して活用できるものになりました。
言語は共通ではないので、伝わらないことがあります。
インフォグラフィックスは、共通視覚言語をよく用います。
色や絵、グラフを使うことで、外国の方にも伝わるようになります。
情報をイラストや2次元幾何学モデルで視覚化した表現方法。
ダイアグラムは比較分析や分類表との相性がよいため、マーケティングや、地下線路図や人口分布でも用いられます。
出典:infogra.me
ピクトグラムとは絵文字や絵ことばの総称です。
単純な視覚記号で情報を表したもので道路交通標識、空港や駅の案内板、非常口の表示など誰が見てもすぐに意味がわかるデザインとして利用されています。
数値などのデータを図・表・グラフを使って表現したものです。
数値データは視覚化すると明確になるため、人口比や収入の増減などを表すのに活用できます。
出典:freepi
相関図とは、物事の相関関係を表した図を指します。
関係性は視覚化すると伝わりやすくなります。
出典:pinterest
フローチャートでは、作業の流れや手順を表します。
ダイアグラムと似た役割と考えられることがありますが、フローチャートのほうがダイアグラムよりも物事の流れや順序に特化しています。
なので、製造過程などをコンパクトにまとめたり、説明したりする際に多く用いられます。
出典:pinterest
ここでは実際にインフォグラフィックスを作成する際の手順について解説いたします。
具体的な手順は以下の5STEPで、STEP1~STEP3は同時に行っていくことになります。
STEP1.テーマの設定
STEP2. 情報を集める
STEP3. 切り口の検討
STEP4.ピクトグラム化・図解化する
STEP5. ビジュアル表現を追加する
STEP1~3である「テーマの設定」「情報を集める」「切り口の検討」の3つの要素が作成するインフォグラフィックスの効果を決めると言っても過言ではありません。
テーマの設定や切り口を考える際は、マーケティングの視点を意識することが大切です。
「ターゲット分析」を軸として相手のニーズを突き詰めることで、メッセージを伝えられます。
このSTEPでは思いつくままにアイディアや情報を出して、関連する情報は一つににまとめたり、不必要な情報は消す作業が必要です。
ここでの整理を誤ると、作成するインフォグラフィックスで本来伝えたかったことが間違った方向で伝わってしまう可能性があります。
また、インフォグラフィックスは文字の情報を減らし、代わりグラフや図を用いて受け手に伝えるので、理解を受け手に委ねる傾向になります。
なので、受け手側の理解が得られているかどうかを第三者の方に感想や意見をいただくことは重要になっております。
出典:伝わるデザイン
ここではSTEP1~STEP3でまとめたものを図で表現するようにします。
図解化するにあたり、Adobe Illustratorなどデザインツールを活用できるとより表現の幅が広がりますが、非常に高価かつ専門家向けのため技術的にも費用的にも一般向けではありません。
そこで、イメージに近い素材を フリー素材サイトで探すという方法が手軽でおすすめです。中には有料の素材もありますが、すぐに使える無料サイトも多いので、ブックマークに入れておき、次回制作する際の時短にも活用しましょう。
フリー素材サイトだからといって、著作権には注意が必要です。必ず規約を読んで 「商用フリー」かどうかを確認し、規定範囲を超えないようにしましょう。
STEP4で作成した図やピクトグラムを組み合わせてインフォグラフィックスを完成させましょう。初めからパソコンで組み合わせていくよりも紙に書いてラフを作ってからパソコンで処理した方がよりまとまりの良い伝わりやすいインフォグラフィックスが完成します。
情報には適した形が存在します。もちろん正解は多数存在しますが、使い方を間違えてしまうと伝えたい内容が伝わらなくなってしまいます。
また、アイコンとテーマのアイコンの関連性が低いとどの情報に対してのものなのかが理解しにくくなります。複数の図や表を扱う場合にもどちらのものなのかが理解しにくくなってしまうので注意が必要です。
そして目立たせたい、重要な情報は色や大きさ、配置位置に注意することで本来の役割を果たします。
最後にインフォグラフィックを作成する目的、伝えたい相手のことを考えて作成しよう。
◇ インフォグラフィックの種類:チャート・マップ
農林水産省の作物統計データを基にした都道府県別の野菜収穫量をインフォグラフィックスで表現したサイトです。
「トマト」「じゃがいも」「大根」「なす」「ピーマン」の5種類の野菜の収穫量を、年代別に比較でき、色使いも赤にちかくなればが収穫量が多いようにデザインされていてとてもわかりやすいです。
出典:農林水産省 作物統計「都道府県別の作付面積、10a当たり収量、収穫量及び出荷量
◇ インフォグラフィックの種類:チャート
世界でたったひとつ自分だけのブレンドコーヒーを作るというテーマで、コーヒー好きのために作られたインフォグラフィックスです。
基本ブレンドのあるインフォグラフフィックスは受け手にわかりやすく簡潔にまとめられたチャートで訴求しています。
出典:econte
◇インフォグラフィックの種類:チャート
最も年収を稼ぐ日本人のプロスポーツ選手を男女別にトップ10のランキングにし、年収の高い順に左から並べたものです。
顔写真の周りの円の色によって女性か男性を表しており、また、各選手のスポーツ競技をアイコンで表しています。
出典:PRINTFUL
◇インフォグラフィックの種類:チャート
2020年現在の各国のファッションECの市場規模を緑色、2024年までに到達すると予測されるファッションECの市場規模を赤色を使って円形のバープロットで示しています。
中国とアメリカは飛び抜けて市場規模が大きいため、外れ値として波線を使って省略しています。
こちらのインフォグラフィックはeccLabやEC-CUBEなど主要なECについてのメディアに取り上げられたものです。
普段あまり見かけないデザインですが、とても目を引く、わかりやすいデザインですね。
出典:PRINTFUL
◇インフォグラフィックの種類:チャート・マップ
世界のEC(eCommerce=電子取引)市場規模を円の大きさで表したものです。
国旗アイコンを囲む円グラフは、商品カテゴリー別の売上シェアを表しています。
文字のみの表現と比べ、市場規模の大小が感覚で伝わります。
出典:JAPAN PI
◇インフォグラフィックの種類:チャート・マップ
各国の採用候補者を対象に実施したスクリーニング調査のうち、経歴詐称が発見された割合をマップ上に示しています。
円の大きさが大きいほど経歴詐称率は高くなっています。
こちらは、外国人雇用に関するメディアやSNSで取り上げられたインフォグラフィックになります。
出典:smartsheet
◇インフォグラフィックの種類:チャート・マップ
市場規模と成長率を地図上に表示したインフォグラフィックです。
2020年現在の市場規模を地図上に青のグラデーションで、2025年までの予測成長率を円の大きさで表しています。
「現状の市場規模」は、規模が大きくなるほど(金額が高くなるほど)濃い色で表示されています。
現在、多くの情報で溢れている世の中でインフォグラフィックスという表現は私たちに必要不可欠なものとなっています。皆さんも何かを説明したい、伝えたい時にはインフォグラフィックの表現を使い簡潔にわかりやすく伝えると、あなたの伝えたい内容がより多くの人に正しく伝わるのではないでしょうか。
またWebサイト制作でお悩みの方はお気軽にご相談ください。