ユーザーにより分かりやすく情報を伝えるために、説明用の画像（インフォグラフィック）を活用しましょう。
インフォグラフィックとは
インフォグラフィック（infographic）は、情報やデータを図・イラストを使って表現したものです。
インフォグラフィックは複雑な内容やイメージしづらい仕組みなどを、簡潔に分かりやすく伝えるために使用されています。加えて、インフォグラフィックにはユーザの目を引くことができる、SNSで拡散されやすいなどのメリットもあります。
統計情報がテーブル(表組み)で無機質に書かれていても、読む方は少数。
ですが、下図のような画像が表示されていたら、つい見てしまいますよね。
http://facts.city.fukuoka.lg.jp/data/food/
おいしい食材を福岡から世界へ！－農林水産物の港別輸出額－| Fukuoka Facts
インフォグラフィックの種類
インフォグラフィックは大まかに、下記7つの種類にカテゴライズされています。
- ピクトグラム
- ダイアグラム
- 相関図
- チャート
- フローチャート
- 年表
- 地図
1.ピクトグラム
ピクトグラムは単純な視覚記号で情報を表したものです。
お手洗いや非常口のマークが代表的です。
オリンピックでも使われていますね。
https://www3.nhk.or.jp/sports/story/6244/index.html
光る各国の個性！オリンピック歴代ピクトグラムを一気見せ | NHKスポーツ
2.ダイアグラム
ダイアグラム（diagram）は、情報をイラストや幾何学的な図形などと組み合わせて視覚的に分かりやすく示したものです。
インフォグラフィックの種類としての“ダイアグラム”は、正確さよりも抽象的かつデザイン性の高いもの＝一枚のイラストのように仕上がっているインフォグラフィックの呼称として使われることが多いです。
下記サイトのファーストビュー兼メニュー部分も、ダイアグラムに含まれるでしょう。
https://www.hellocycling.jp/
HELLO CYCLING
3.相関図
相関図とは、物事の相関関係を表した図を指します。
複数のものの関係をあらわしたい時に使われます。
https://suumo.jp/edit/suumo-heya/character/
SUUMO(スーモ)
Webの場合は、ビジネスモデルや関連業種などの紹介で見かけることが多いです。
https://www.r-staffing.co.jp/sol/contents/corporate/fresh/business/model.html
Recruit Staffing Co., Ltd. 総合採用サイト
https://sevenc.jp/kindofwork/
仕事の相関図 | 株式会社セブンシー
4.チャート
情報を表やグラフを使って示した図です。
棒グラフ、折れ線グラフ、円グラフなど、日常的に“グラフ”と呼んでいるタイプは大体こちらです。
https://www.kagome.co.jp/products/brand/sauce/genen/
カゴメソース 塩分50％カット
イラストを組み合わせると、より親しみやすく目もひく画像になります。
ページの主役になりますね。
https://www.ana.co.jp/travelandlife/article/000546/
外国人観光客数 年別・国/地区別ランキング｜ANA Travel & Life
5.フローチャート
プロセスや流れを矢印などを使って表す表現方法です。
申込み・導入までの流れ、応募方法などにもよく使います。
https://est-con.com/business/
エストコンサルティング株式会社
https://staiko.jp/flow/index.html
スタいこ GPS
6.年表
年代別にして、起きたことや知ってほしいことをまとめます。
Webページに掲載する年表の場合は、紙面デザインよりも情報を絞ってシンプルに作ると無難です。
こちらは一枚をまるまる図（画像）にするのではなく、コーディングされています。Webサイトに掲載する年表として理想的ですね。
http://www.ktk-hd.com/recruit/company/future
加藤憲ホールディングス株式会社
7.地図
読んでそのまま地図です。
地図とチャートなどを組み合わせることで、情報をコンパクトにまとめて見せるインフォグラフィックデザインは目にする機会が多いですね。
https://www.tripadvisor.jp/blog/WH/
数字で見る世界遺産 トリップアドバイザーのインフォグラフィックスで世界の旅が見える
インフォグラフィック作成について
上記でご紹介した、例えばトリップアドバイザーさんの画像のようなものを作るのは難しいです。
グラフィックデザイナー、インフォグラフィックデザイナーという職業もあるくらいですしね。
はじめて説明用の図（インフォグラフィック）を学習する場合は、下記を目標にしてみましょう。
- 素材を組み合わせて、簡単なインフォグラフィックを作成できる
- 素材をアレンジして表現したいポーズやアイコンを作成できる
- 簡単なピクトグラムやアイコンを作ることが出来る
素材もありますから、1から100まで全てを作らなくてもWebデザイナーとしてのお仕事は出来ます。
自作できる領域が広がるほど、お仕事の幅は広がっていきますよ。
次回からはアイコンの作成や、ランディングページデザインで空欄になっていた部分に当てはまる画像の制作を行っていきます。
