競合に差をつけるインフォグラフィック5つのポイント│東京のweb制作会社のデザイン関連コラム

Columnコラム

Webデザイン

ライバルサイトに差をつける!インフォグラフィックを作るための5つの手順

ライバルサイトに差をつける!インフォグラフィックを作るための5つの手順

2015/02/05
このエントリーをはてなブックマークに追加

こんにちは。デザイナーの松田です。

この前、とあるサイトのデザインをしていた時にふっと思いました。

「もっと凝ったデザインにしたいなぁ」と。

でも短納期だし、細部にこだわるだけの時間がない。
みなさん、そんな経験はありませんか?

100%満足いくデザインを作りきるのは、納期ありきのWeb制作にとって
なかなかできることではありません。

だからこそ、決められた時間内でクオリティの高いデザインを作るために
日頃から色々なデザインを見たり、本を読んだりして勉強することが大事なんですね。

僕はインスピレーションが刺激されるものの一つとして、
インフォグラフィックを見ることをお勧めします。

インフォグラフィックって?

そもそもインフォグラフィックって何?という方へ。

インフォグラフィック(英語: infographics)は、情報、データ、知識を視覚的に表現したものである。 インフォグラフィックは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。

Wikipediaより引用

...( 一・一)?

平たく言いますと、いい感じにデザインされたデータです。
グラフや、標識、地図などでよく使用されますが、情報を視覚的にわかりやすくまとめたい!というときに
利用される技術です。

実際に見てみると、「あーなるほど、こういうことか」と思うかもしれません。
下記のサイトに色々なインフォグラフィックがまとめてありますので、ご紹介しておきます。

infogra.me(インフォグラミー)
img_infograme01.jpg

インフォグラフィックを作るときのポイントは5つ

インフォグラフィックの特徴は何といっても
「情報をいかにわかりやすく視覚的に伝えられるか」です。

うわぁこのグラフの見せ方かっこいいーと感じるだけで
肝心の内容が伝わらなければ意味がありませんよね。

インフォグラフィックを作るときにポイントは5つあります。

・情報収集
・情報の分析と整理をする
・図にしてみる
・構成を決める
・デザインを決める

です。

情報収集

まず自分が作りたいインフォグラフィックに必要な情報をあつめます。

例えば、
・自社サイトの年間PV数
・月別のお問い合わせ数

などです。

過去のデータがそろっている題材だと作りやすいと思います。

情報の分析と整理をする

集めた情報を分析・整理します。
どの情報を使ってインフォグラフィックを作るのか、おおまかなイメージを頭に描きながら
自分が集めた情報でいるもの、いらないものを書き出していきます。

図にしてみる

整理された情報を手書きでもいいので、図解化します。

長々とした説明はなるべく省き、図で表現することを意識します。
ピクトグラムなどを利用すると良いかもしれません。

構成を決める

図解化したものの配置を決めます。

1枚の紙を用意し、その上に並べていきます。
ユーザーの目線の動きなども考慮して構成を決めます。

デザインを決める

さて、いよいよデザインをしていきます。

「小学生でもわかるデザイン」を意識して作ります。

色彩パターンを決めて、色で情報を分類していくと
パッと見たときにわかりやすいデザインになります。

また背景などで世界観を表現すれば、どの題材が伝わりやすいのではないでしょうか。

まとめ

いかがだったでしょうか。

パッと見すぐできそうなインフォグラフィックですが
実は作るまでがすごく時間がかかったりします。

プレゼン用の資料を作成する際にも
是非利用したいですね!

この記事を読んで少しでも興味を持って頂けると嬉しいです^^

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

text_totop