Web関連

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

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

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

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

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

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

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

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

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

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

Wikipediaより引用

…( 一・一)?

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

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

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

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

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

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

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

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

です。

情報収集

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

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

などです。

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

情報の分析と整理をする

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

図にしてみる

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

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

構成を決める

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

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

デザインを決める

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

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

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

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

まとめ

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

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

出会いと別れの時期に!ギフトWebツールまとめ前のページ

大手企業が実践しているリターゲティング広告をする2つのメリット次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    【Web制作会社に聞いた】ランディングページの基礎を知ろう!

    皆さん、今さらですが年末年始はどのように過ごされましたか?私は…

  2. Web関連

    ぶっちゃけ、iPhoneとXperiaどっちが良いの?

    ずーっとiPhoneを使い続けてきた筆者が、2015年12月にXper…

  3. Web関連

    メリットづくしのレスポンシブ・ウェブデザインとは?

    こんにちは。デザイナーの栄です!今回は、『レスポンシブ・ウェブデザ…

  4. Web関連

    「QRコード」+「Webサイト」=「顧客獲得」

    今回はリアルとネットをつなぐO2Oマーケティングにも良く利用されるQR…

  5. Web関連

    デザイナーの私がおすすめする厳選サイト3選

    久しぶりに私のコラムの題材に規定がなく、「よっしゃあ~すごいの書いちゃ…

  6. Web関連

    癒しを求めるあなたへ。アニマルカフェはいかがですか?

    こんにちは。動物に癒されたい堀井です。実家では猫を飼っていたのですが、…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    進化するソーシャルメディア!ソーシャルギフト編
  2. Web関連

    「ハッカソン」って何?知らないと恥ずかしい?IT業界でよく聞くコトバ
  3. Web関連

    忙しいビジネスマンにオススメ!のLINEのサービス
  4. Web関連

    面白いスマホサイトまとめてみた!
  5. Web関連

    「Doodle」知ってる?超身近なハイクオリティデザイン!
PAGE TOP