Webサイトの成果が上がる!?WEBデザイナー必見「インフォグラフィック」とは?

フォーザウィン社員発のIT業界にまつわる豆知識。
「フォーザウィンアカデミー」

HOMEフォーザウィンアカデミー 〉Webサイトの成果が上がる!?WEBデザイナー必見「インフォグラフィック」とは?

Webサイトの成果が上がる!?WEBデザイナー必見「インフォグラフィック」とは?

shutterstock_157797695_0000

電車の路線図や地図など、私たちの生活の周りに意外と使われている「インフォグラフィック」をご存知でしょうか?

わかりやすいWebサイトを作る際に非常に役立つ「インフォグラフィック」というデザイン表現について、今回はその特徴や魅力をご紹介します。

もくじ

  1. インフォグラフィックとは
  2. インフォグラフィックの種類
  3. インフォグラフィックを使うメリット
  4. まとめ

 

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

情報を文字や言葉にすると、情報量が多く表現がわかりづらくなってしまうものをイラスト・グラフ・図・ピクトグラムなどといった視覚的な表現を用いてわかりやすく見せる表現をインフォグラフィックといいます。
インフォグラフィックとは「Information+graphics」という意味の造語になります。
身近なものでは、標識や地図、電車の路線図などの形で用いられることも多く、誰もが一度は目にしたことがあるでしょう。

 

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

インフォグラフィックの表現や種類は大まかに以下の7種類に分類されます。

1.ダイアグラム
イラストや2次元幾何学モデルで視覚化した表現を用いて物事を解説します。
使用例:http://www.who.int/campaigns/immunization-week/2017/infographic/en/

2.チャート
情報を表やグラフを用いて解説します。
使用例:https://www.sonysonpo.co.jp/infographic/ifga201308.html

3.相関図
登場人物などの紹介でよく使われる表現で、双方の間の相関関係を表します。
使用例:http://kenz0.s201.xrea.com/weblog/2012/09/star_wars_infographic.html

4.フローチャート
矢印などを使い、プロセスや流れをわかりやすく解説します。
使用例:http://weddingphotography.com.ph/6861/how-to-make-movies-helpful-infographic-flowchart-guides/

5.年表
歴史の紹介や年表などでよく使われる表現で、歴史上の起こった出来事を年代順に表します。
使用例:http://infogra.me/ja/list/12245

6.地図
インフォグラフィックの中でも最もベーシックな表現で、地域や空間、地形や道などを表したものをいいます。
電車の路線図などに使用されます。
使用例:http://tg.tripadvisor.jp/precipitation/

7.ピクトグラム
絵文字に似たような記号やアイコンを用いて情報を表します。
公共施設、宿泊施設、交通施設などのあらゆる場所で使用されています。
使用例:https://about.yahoo.co.jp/hr/infographics/

 

◆インフォグラフィックを使うメリット

インフォグラフィックを使用するメリットは、情報を分かりやすく視覚的に伝えることができる点にあります。
イラストやグラフなどを使って説明することによって、文字や言葉では伝わりにくいことを簡単に説明することができます。
また、異なる言語の人にもインフォグラフィックを用いればスムーズにイメージを伝えることができます。

 

◆まとめ

グローバル化が進み、ますます注目されるインフォグラフィック。
また、Webサイト制作においても誰もが見やすく、わかりやすいデザインにするにはその存在は必要不可欠といえるでしょう。

私たちの身近な所にもインフォグラフィックを用いた表現方法は溢れていますので、興味がある方は是非注目してみてください。

最新記事

2018.10.10
2018.10.05
2018.09.28
2018.09.26
2018.09.21

カテゴリー

TOP