ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

見る人もつくる人も楽しい!ソーシャル時代に再注目のインフォグラフィックス

  • コンテンツ

WEBサイトの魅力のひとつとして、美しいグラフィックでの表現があります。これまでには、SEO対策としてのテキスト重視傾向などのために、ビジュアル表現が抑えられてきた時期もありました。しかし、ここに来て再び見直されてきています。

その理由の一つが、ソーシャルメディアの台頭。アイキャッチ画像のつくリ方によってシェア数やクリック率が変わったなどという事例も多く、ビジュアルの役割が重視されるようになってきています。価値のある情報は、グラフィックとセットにして伝えることで一層シェアされやすくなる…、それは多くの実例が示しています。今日は、ビジュアル表現の魅力を活かす代表的手法「インフォグラフィックス」を取り上げます。

なぜ、シェアされる?インフォグラフィックスの魅力とは?

「ビールを最もよく飲む都道府県、第一位は東京-ぐるなび調査」ちょっぴり気になる情報ではありますが、もし文字だけの情報だったとしたら、見出しを見ただけで終わってしまうかもしれません。しかし、このような画像が添えられていたら、どうでしょうか?

150328_01

ずいぶんと楽しい印象になりますね。全都道府県の順位がイラストで公開され、「ビールは都市部でよく飲まれている」など、より多くの情報が一目瞭然です。また、自分の出身県の順位を見たり、一番ビールを飲まないのはどこかを調べたり…と、格好のコミュニケーション・ネタにもなりそうです。それがシェアされやすい理由につながります。

ちなみに、当社の本社がある京都でもビールはよく飲まれていて、ベスト3に入っています!

このように情報や知識、データといったものをわかりやすく表現したのが「インフォグラフィックス」。日常的によく目にする路線図や標識などもそのひとつですが、WEB上ではコンテンツの一種として活用され、この「ぐるなび」の事例のように、楽しい雰囲気のものが多く見られます。

ちなみにぐるなびでは、「グルメ×インフォグラフィックス」というギャラリーを公開しています。

代表的なインフォグラフィックスのパターン

ここからは、実際のインフォグラフィックスを見ていきながら、どのような内容が表現されているのか、事例を見ていきましょう。インフォグラフィックスには様々なものがあり、もちろん自由に作成していいのですが、よく使われるものとしては「情報をわかりやすく伝えるもの」「知識をまとめたもの」「数字やデータをわかりやすく表現したもの」があります。

情報を表現した事例「花暦で見る富士山」

info01
http://www.fujiyama-navi.jp/infographics/flower-calendar/

「花暦で見る富士山」は、富士急行が運営する富士山の総合ガイドサイト「フジヤマNAVI」に掲載されているインフォグラフィックス。富士山で年間を通して見ることができる花の情報が地域別にまとめられています。

シーズンとエリアをクロスさせて見ることができるので、とてもわかりやすく、観光の際の参考になります。

事例2:知識を表現「数字で見る年賀状」

info02
http://www.nengajou.com/ig/

「年賀状.com」というサイトに掲載されたインフォグラフィックス。「年賀状の豆知識」として、世界の十二支、年賀状の歴史、年賀はがきの発行枚数の推移、年賀はがきお年玉の当選確率など、年賀状にまつわる豆知識が1枚の画像に盛り込まれています。

下の方には、古代から現代までの年賀状の歴史や、近代以降の年賀はがきの発行部数の推移がまとめられていますが、こうした時系列情報を扱うのもインフォグラフィックスの得意とするところです。

事例3:データを表現「世界の家賃相場」

150328inf_04

アート・クラフト・サイエンス株式会社の「LivinGraphics(リビングラフィックス)」は、住まい情報をインフォグラフィックスで表現したコンテンツ。

ここに紹介しているのは、「世界の家賃相場」を伝えるものです。数値が中心になるデータを表す場合、文章や一般的なグラフで表現するとどうしても堅くなりがち。インフォグラフィックスを使うと、難しい数字も、このようにとても親しみやすくなります。

http://acskk.com/?page_id=14696

ちょっぴり変わったインフォグラフィックス

インフォグラフィックスというと静止画像をイメージしがちですが、WEBならではの表現を組み合わせたものも多くあります。いくつか紹介していきましょう。

インフォグラフィックス+パララックス

150328inf

縦長のWEBページをスクロールしてできるだけ最後まで見てもらおうとするのが、微妙な動きや効果を加える、「パララックス」という手法です。

縦長になることが多いインフォグラフィックスでも、このパララックスと組み合わせることで、魅力がより高まっていきます。大塚製薬のロングセラー商品「カロリーメイト」は、この手法により、その長い歴史を、見る人をあきさせることなく表現しています。

http://www.otsuka.co.jp/cmt/history.php

インフォグラフィックス+インタラクティブ

150328inf_06s

ユーザーの操作によりコンテンツが変化するというインタラクティブな表現も、WEBならではのもの。インフォグラフィックスにもその機能を取り入れることができます。

例えば、この「NIPPON COLORS – 日本の伝統色」というページでは、色名を選ぶことでページ全体の色が変わっていきます。コンテンツそのものが機能を持つ、まさにインタラクティブなインフォグラフィックス、と言えるでしょう。

http://nipponcolors.com/
(※このページはsafariブラウザに最適化されています)

インフォグラフィックス+動画

150328inf_07

いま、WEBの世界で最もホットなコンテンツ表現と言えば「動画」かもしれません。これをインフォグラフィックスに組み合わせた手法も海外では多く見られます。

「ビデオインフォグラフィック」や「インフォグラフィック動画」と呼ばれるこの手法では、動画の中でインフォグラフィックスが動きを付けて表現されます。日本では「ソニー損保」のものが有名です。

http://www.sonysonpo.co.jp/infographic/ifga201401v.html

SEOにも有利なつくり方

ここまでいろいろなインフォグラフィックスを紹介してきましたが、インフォグラフィックスで気になる点があるとすれば、「コンテンツの大部分が画像になってしまい、SEO効果が落ちるのでは?」ということではないでしょうか。この点では、HTML5で作成すれば、画像ではないインフォグラフィックスの表現も可能となります。

対応ブラウザなどでの面でまだまだ懸念はあるHTML5ですが、インフォグラフィックスでの用途も今後のために意識しておくとよいでしょう。当のGoogle自体が、この方法を使ったコンテンツを公開していますので、今後の期待は大と言えるのではないでしょうか。

今回のまとめ

  1. 話題性のある情報は、インフォグラフィックスの活用で一層シェアされやすくなる。
  2. インフォグラフィックスは堅くなりがちな情報を分かりやすく表現。より多くの情報をまとめて見せることも可能。
  3. パララックスやインタラクティブな機能と組み合わせることで、WEBコンテンツとしての表現もより多彩になる。動画との組み合わせも効果的。
  4. SEO対策を考慮するなら、HTML5での表現もひとつの可能性。

ただわかりやすく楽しく情報をまとめるというだけではなく、インフォグラフィックスには、もっと多くの可能性がありそうですね。みなさんのコンテンツでも、ぜひアイデアを凝らして活用してみてください。

<関連情報>
ユーザーの視覚と心に訴えかける、パララックスを効果的に使う事例とポイント

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」