Web関連

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

0

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

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

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

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

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

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

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

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

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

Wikipediaより引用

…( 一・一)?

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

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

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

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

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

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

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

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

です。

情報収集

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

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

などです。

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

情報の分析と整理をする

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

図にしてみる

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

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

構成を決める

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

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

デザインを決める

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

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

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

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

まとめ

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

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    必ず売り上げが上がるWEBサイトの王道があります! 其の2

    商品単価が高いので、なかなかモノが売れない!という営業マンのお話し…

  2. Web関連

    【Webチームリーダー必見】自分のコピーを作る方法について

    目次- 自分のコピーを作るってどういうこと?- 仕事は、任せて…

  3. Web関連

    進化するソーシャルメディア!ソーシャルギフト編

    いきなりですが、みなさんはSNSサービスをよくお使いになるでしょうか?…

  4. Web関連

    採用希望者数を増加させたい

    自社のリクルートサイトを最大限に活用し、多くの人材を獲得総合求人サ…

  5. Web関連

    お薬手帳、電子版のススメ

    みなさんはお薬手帳を持ち歩ていますでしょうか。常に病院で薬を処方されて…

  6. Web関連

    電子書籍が良い理由

    最近ではよく見かけるようになった電子書籍。ですが、「電子書籍を始めるに…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    なるほどね!タスク管理と時間管理は深い関係性をもっていた!
  2. Web関連

    ミュージシャンのWebを利用したプロモーション
  3. AI関連

    【人工知能(AI)×観光】観光向けサイトで人工知能会話型システムを活用
  4. AIさくらさん

    商業施設のインフォメーションをAIさくらさんが担う!
  5. AI関連

    RPAが解決する単純作業! ~ECサイト活用編~
PAGE TOP