Web関連

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

0

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

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

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

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

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

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

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

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

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

Wikipediaより引用

…( 一・一)?

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

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

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

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

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

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

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

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

です。

情報収集

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

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

などです。

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

情報の分析と整理をする

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

図にしてみる

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

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

構成を決める

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

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

デザインを決める

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

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

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

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

まとめ

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

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    Web制作会社における「スマートオフィス」

    ITを活用 してつくる環境配慮型省力化オフィス「スマートオフィス」。…

  2. AI関連

    【ホームページ制作】採用はもうAI(人工知能)がやれば良い。

    巷ではAI(人工知能)の進化、活用が話題になっていますね。弊社でも…

  3. Web関連

    インターネットでのマイナンバーを取扱いについて

    マイナンバーを利用してインターネットからも個人の情報を閲覧できるように…

  4. Web関連

    なにがいいの?なぜいいの?GoogleAnalyticsのメリットとは

    Webサイトを運用していたら、一度は聞いたことがある名前「Google…

  5. Web関連

    スマートフォンサイト制作の気になる事、あれこれ

    こんにちは。モバイルサイト・シニア・アドバイザーの藤田です。嘘です。コ…

  6. Web関連

    リフレッシュするなら観光に行こう!

    みなさんのリフレッシュ方法はなんですか?カ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    良質な睡眠で快適に生活しよう!オススメアプリ3選
  2. Web関連

    お土産の購入もECサイトを有効活用
  3. AIさくらさん

    【人工知能(AI)×広告】人工知能(AI)を活用した最新の広告手法とは
  4. Web関連

    【Web制作】ビッグデータって結局なに?身近なビッグデータを考える
  5. Web関連

    果たしてDMPの導入は本当に敷居が高いのか?
PAGE TOP