Web無料相談会2018冬
Web無料相談会2018冬
2018.04.09

インフォグラフィックをマスターするぞ!参考サイトまとめ

ヴィクトリア

こんにちは! デザイナーのヴィクトリアです!

今回のブログでお話ししたいのは「インフォグラフィック」についてです!

「サイトに溶け込むインフォグラフィックを考える」と題しまして、案件で効果的にインフォグラフィックを使用するために勉強していきたい所存です。

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

インフォグラフィックとは、情報やデータを視覚的に表現したい場面で用いられ、ごちゃごちゃしているものをシンプルで分かりやすく、伝えやすくまとめる手法のこと。

だそうです!

ただ説明の文章と数字が並べられているだけでは、必要な情報や目立たせたい部分が伝わりにくいですが、色やサイズ、イラストを使用することで、楽しく分かりやすく伝えることができ、目にも留まりやすくなるのです。

また、分かりやすさとデザイン性に富んだインフォグラフィックは、活字離れしている若年層向けであり、プロモーションツールとしても活用できます。おもしろい内容やいいデザインは、SNSで拡散されて話題になりやすいからです。

つまり、ターゲットユーザーが若者の場合にとても効果的であるとも言えそうですね!

\ インフォグラフィックについて書かれた過去記事 /

効果的なインフォグラフィック使用例

実際にインフォグラフィックを効果的に使用しているサイトをご紹介したいと思います!

Yahoo! JAPAN

yahoo

Yahoo! JAPANの採用サイトでは毎年インフォグラフィックが使用されています。情報量がとても多いのに、分かりやすくスッキリまとめられていて素敵です。

絵と文字のバランスもちょうどよくて、見やすい、分かりやすいインフォグラフィックがハマっているページだと思います。

Webサイトはこちら:https://about.yahoo.co.jp/hr/infographics/

交通事故削減ソリューション Pdrive

pdrive

まさにサイトに溶け込んでいるインフォグラフィックだと思います。分かりやすく図にまとめられていていることと、メリハリがついているので視線が誘導されて情報がスーッと頭に入ってきます。

Webサイトはこちら:http://pdrive.jp/lp/

ソニー損保

sonysonpo

こちらはページ単位でインフォグラフィックが使用されています。動きが加わってワクワク感があります。ただ単にデータを見やすくするだけでなく、ストーリー性を持ってページを展開させ、コンテンツとして統一しているのが素晴らしいと思います。

Webサイトはこちら:https://www.sonysonpo.co.jp/infographic/

JOYSOUND カラオケ白書

joysound

インフォグラフィックに動きがあるといえばこちらのサイト。まきこさんが作ったページです! コンテンツの中身もおもしろいし、インフォグラフィックもかわいいし、大好きです。

アニメーションの動きがスムーズで気持ちがいいし、文字とイラストで視覚的に情報を得ているようで文章を読むより全然ストレスがありません。

Webサイトはこちら:https://camp.joysound.com/whitepaper/

トリップアドバイザー TripAdvisor Gallery

trip

有名なインフォグラフィックと言えばこのサイト。各テーマごとに作成されていて、内容もおもしろくてすごく勉強になります! どんな内容だったらどこまで表現できるかを考えたとき、デザイン的にも参考になります。

最近更新がなくて寂しいです。個人的にこの富士山の魅力がすごく好きです。

Webサイトはこちら:http://tg.tripadvisor.jp/news/graphic/

まとめ

以上のサイトを参考に、インフォグラフィックを使用するときの勉強をしたいと思います。

題名に「サイトに溶け込む」と入っている通り、私が作成する機会があるのはランディングページではないので、いかに分かりやすいインフォグラフィックを考えられるかが課題でもあります。

上記にあげたサイトから

・構成
・コンテンツ内容
・デザイン(あしらい)

の順番で、最適なインフォグラフィックを作れるように頑張ります! 私の作ったインフォグラフィックが公開され次第ご報告させていただきたいと思います!

キャリアアップ
「Studio上野でWebクリエイターを目指す!」