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. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    Web制作会社厳選!レスポンシブWebデザイン(RWD)の便利なテンプレート&ツールまとめ

    今回の記事は書く前から決まったテーマで書かなくてはいけませんでした。…

  2. Web関連

    なぜ2MBなの!?ビジネスマナーの意外な理由

    私生活では使わなくなったメール機能ですが、実は送信できる容量の限界が決…

  3. Web関連

    ターゲットを見極めてWebサイトの売り上げ大幅アップ!「男女」のニーズを把握する

    今回は、ユーザーの性別によるwebサイト最適化方法の違いについてご紹介…

  4. Web関連

    乗り換えるか迷う!「格安SIM」「格安スマホ」の基礎知識

    皆さんは携帯電話の月額料金はどのくらい掛かっていますでしょうか?私は…

  5. Web関連

    動画コンテンツは一般ユーザーには響いてなかった!

    いきなりですが、御社はホームページに動画コンテンツを取り入れようと考え…

  6. Web関連

    web制作に便利な iPhone アプリまとめ

    こんにちは。育児に家事に大忙しのディレクター、望月です。限られ…

おすすめ記事

最近の記事

  1. 持つべきなのか?運転免許証+マイナンバーカード
  2. RPAから始める業務効の自動化 働き方改革への選択肢の一つに…
  3. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  4. 約1年間のウィズコロナ生活で大きく変わったもの
  5. スマートストアにより、小売業は激変する

アーカイブ

「いいね」を押された記事

  1. AIさくらさん

    【人工知能(AI)×インバウンド】超えられない言葉の壁をAIさくらさんが解決
  2. Web関連

    音楽業界に定額制のWEBサービスを導入
  3. Web関連

    仕事で使える!スマホ、iPodで印刷が出来るプリンターアプリ
  4. Web関連

    価値のあるWebサイト制作のためにW3Cを意識しよう!
  5. Web関連

    ホームページ制作会社がまとめるカスタマーサポートに必要なポイント!
PAGE TOP