Web関連

【web制作】情報を圧倒的にわかりやすくする!インフォグラフィックス

0

今、インフォグラフィックスの出番?

突然ですが。

2015年3月、いよいよ北陸新幹線開業ですね!
金沢、ちょっと前から行きたいな~なんて思ってまして。
街並みが素敵~なんて話も最近耳にしたのでますます気になってます。

交通系で言うと、2020年に山手線の品川―田町間に新駅が誕生するとか。
これは、2020年のオリンピックに向けての取組みのようです。

オリンピックに向けて、訪日外国人が旅行しやすいように
各所ドンドン整備されていってますよね。
(リアルのほうはもちろん、Webサイトも多言語対応の案件が
増えてくるでしょうね~準備しないとです。)

そこでですよ、言語を理解できるものにするのはもちろんですが
言語で全部説明って難しいときもあるじゃないですか。

そんなときに!今回のテーマ『インフォグラフィックス』の出番です。

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

言葉だけでは分かりにくい、仕組みやデータなどの情報を、
絵やイラストを使って視覚的に表現し、分かりやすく伝えるための
グラフィックデザインです。

つまり・・
難しいカタカナ用語、感じばっかり並んでるデータとか
数字などがずらーっと並んでるのを見てると眠くなる・・
そんな人でも、「面白そう!」と興味をもって見てもらうことができる、デザインです。

ご存知の方なら、
インフォグラフィックスと聞くと「いろんなデータや企業や人の歴史が載っている縦に長いページ」を
想像しませんか?

でも、実はそれだけじゃないんです。

たとえば、地図やトイレを示す男女のマーク(ピクトグラム)も
インフォグラフィックスの一種なんです。

使い分けましょう

インフォグラフィックスは、大きく6つの分類に分かれます。
表現したい内容によって使い分けましょう。

1、ピクトグラム

直感的に情報を伝える手法。先に挙げた「トイレのマーク」も、男/女と文字が書かれていなくても分かりますよね。

namekata_0106_01.png
参考)ヒューマンピクトグラム2.0 http://pictogram2.com/

いろんな施設の案内でも、英語表記はもちろん、こういったピクトグラムが多用されますよね。
特に様々な国の人が利用する場所では、ユニバーサルデザインを意識したものが必要になってきます。

2、ダイアグラム

イラストを用いて、図で解説する手法です。

施設の各部屋の説明や、機械の中身の説明だったり、
構造を説明するときに便利です。

たとえば、よく見るのが「イラストによる豚や牛の部位説明」。
ここはハラミ、ここがタン、みたいな。

私は、学生時代アルバイトしていた焼肉屋さんで覚えるようにと言われましたが、
一切覚えられませんでした・・。
美味しければ何でも良い、と思う私には興味心が足りませんでした。

3、表

情報をある基準で分けて、縦軸・横軸上に表にする手法。
エクセルで作れるあれです、定番です。

表ひとつでも、単に文字や数字を羅列するのではなく、
数字が大きいと赤、小さいと青、などパッと見てわかるようにすることが大事です。

4、チャート

相互の関係を整理するときに用いられる手法。歴史、フローチャート、相関図、組織図でよく使われている手法です。歴史は、企業の歩みコンテンツでよく見ますね。

namekata_0106_02.png
参考)ティファナ・ドットコム(弊社) 制作フロー /service/flow/

こういった制作フローのような、複数の項目が関わり合うときに関係性をわかりやすく表現できます。

これを言葉にしようとすると・・
「ヒアリングのときには、コンサルティングセクションがお客様の話を伺い、
調査・分析の段階に入ると、コンサルティングセクション、情報デザインセクション、webデザインセクション、
システム開発セクションが・・」と、非常に長ったらしく、読む気の失せるものになります。

試しにgoogleで「相関図」と検索したところ、
2番目に、女性同士の嫉妬や妬みや憎悪、戦いを描く人気ドラマ
「First Class」の人物相関図がでてきました。

気になる人が多いんですね。

復讐、罠などの黒い言葉が並んでいます。
うん、面白い。わかりやすい。

気になる方は、「相関図」で検索!

5、グラフ

これも定番。あらゆるものの比較や変化を数値で表すことで、分析しやすくなります。

namekata_0106_03.png参考)働くジェネレーションギャップ  http://hatagra.tumblr.com/

このグラフでは、働く20代と40代の仕事への意識を比較していますが、
明らかに各世代で回答の内容が異なることがわかりますね。
20代は「働く上で重要」なのは職場環境、40代は仕事内容・・・ふむふむ。

またまた試しに、「グラフ」とgoogleに聞いてみました。

「1世帯当たり年間のたらこ購入金額」という、グラフを見つけました。
なんか・・グラフにして「やっぱり福岡がダントツだよね!」って言いたいんだろうなって・・思いますよね。

こちらです。

namekata_0106_04.png

赤線で囲った部分、左が北九州市、右が福岡市です。

やっぱり!

6、地図

位置関係を分かりやすく表示する地図。これは、昔からある手法ですね。

たとえば電車の路線図。
各社、路線ごとに色分けしたり見やすいように工夫しています。

東京メトロ( http://www.tokyometro.jp/station/index.html )は、
特にわかりやすくしているなぁと思います。
路線ごとに色が違うのはもちろん、千代田線なら「C」、丸の内線なら「M」と、
ローマ字表記の頭のアルファベットをとってアイコンが作られているんです。

私は、よく利用する半蔵門線は「Z」で「紫」と覚えているので、
駅の中で半蔵門線を求めて迷うことはきっとありません!

まとめ

私の部下にこんな人がいます。

誰かが不在の際、内線がかかってきた旨を付箋紙に書いてお知らせするとき、
電話をかけた人の名前は書かず、似顔絵を書くのです。

これ、面白いですが一瞬考えてしまうので、
情報伝達方法としては優れていません。(ごめんね。でも面白いからやめないで)

そう、絵は使いどころが肝心なのです。

このデータ、わかりづらいけどどうしても伝えたい・・
そんなときには、戦略的にインフォグラフィックスを使ってみてください。

0

Web制作会社に働く担当者のつぶやき。フルスピードで仕事をするには・・・。前のページ

効率的なミーティングの為に、心掛ける8つのポイント次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    Webサイト売上げアップに使える”行動心理学” その2

    今回は、以前ご紹介した行動心理学について書いていきます。今回も3つの…

  2. Web関連

    コンピュータが人類を超える!?2045年問題について調べてみた。

    こんにちは、ティファナでSEをしている森です!今回は、最近噂になった今…

  3. Web関連

    コンパクトカメラがなくなる?最近のスマホのカメラがすごい!

    みなさんは「スマートフォン(スマホ)」はお使いですよね?ほとんどの方が…

  4. Web関連

    休憩時間に癒やしを!可愛い動物たちのサイトまとめてみた

    Webのサービスは様々なものがあり、コミュニケーションを取るためのSN…

  5. Web関連

    営業担当者必見!MAツールを使って時短&顧客育成!

    あなたは効率よくお仕事が出来ていますか?「実は時間が短縮できる…

  6. Web関連

    オンライン学習はどこまで進んでいるのか?

    こんにちは。コーダーの須澤です。皆さんはオンラインで学習サービスを使…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    本当はPerfumeの方が好きだけど話題のSTAR WARSについて紹介します。…
  2. AI関連

    AI搭載ドローンが人の命を救う時代に
  3. AI関連

    AIチャットボットの未来像
  4. Web関連

    【必見!】円滑にコミュニケーションをとるための話し方、「PREP法(プレップ法)…
  5. Web関連

    初心者Webデザイナーが「ダサい」から脱却する方法とは?
PAGE TOP