SONICMOOV Googleページ

こいつ、動くぞ!これからのインフォグラフィック9選

こいつ、動くぞ!これからのインフォグラフィック9選

  • このエントリーをはてなブックマークに追加

デザインと聞くとグラフィックや装飾を思い浮かべがちですが、designの意味には「設計する」という意味があります。「画面を見るユーザーに分かりやすく情報を伝達するために視覚設計する」、と捉えるとよりよいデザインができるようになるのではないでしょうか。

「分かりやすく情報を伝達する」デザイン手法の一つとしてインフォグラフィックがあります。

目次

インフォグラフィックとは?

インフォグラフィックとは、”information”と”graphics”を組み合わせたもので、グラフィックを使って情報を視覚的に分かりやすく表現したデザイン手法です。

情報を視覚化してみせることでユーザーの認知を向上させることができ、特にインフォグラフィックと相性のいいものに、データや統計的な数値情報を使ったものがあります。こちらのページデータで見るソニックムーブでは弊社に関する数値をグラフィックで表現しており、視覚的に分かりやすく伝えています。
インフォグラフィック(infographics)とは?

インフォグラフィックとパララックスの相性

インフォグラフィックはWebサイトのデザイン制作にも使われることは多いのですが、ふと思ったのは以前のアイデアを真似したくなるタイプ別パララックスサイト20選記事でも紹介しましたパララックススクロールとの相性は抜群なのではないかということです。

情報認識のしやすさ、理解度が高まるという意味ではインフォグラフィックは凄く有効な手法ですが、そこに今どきのWebの人気の表現手法の一つとして視差スクロールを利用したパララックスと組み合わせることでさらに視聴者の感情を揺さぶるページ制作を行えるようになる、ということです。

そんなわけで今回の記事テーマとして、これからのインフォグラフィックは単なる静止したものではなく、ワンランク上の動くインフォグラフィックを表現するクリエイティブをもっとしていこうというサクッとした提案とサンプルサイトをピックアップしてみました。

動くインフォグラフィックサンプル

シンプルなWhy your Brain Craves Infographics

脳がインフォグラフィックを欲する理由
https://neomam.com/interactive/13reasons/

ちょうど今回のテーマにピッタリの内容ですが、「脳の50%は視覚処理に関与している」、「70%の知覚受容体は目にある」、「1/10秒未満で視覚的なシーンの感覚を得ることができる」など、なぜ脳がインフォグラフィックを欲するのかという理由がまとめられています。パララックス自体はシンプルなものに留まっています。

動くレジュメを表現したInteractive Resume

インタラクティブなレジュメインフォグラフィックのインフォグラフィック
http://www.rleonardi.com/interactive-resume/
Robby Leonardi氏による自身のレジュメ(履歴書)ページです。横スクロール型のゲームを彷彿させるような内容になっていて、氏のスキルや住んでいる場所などをグラフィックで表現していて、思わずスクロールして先を見たくなるアイデアとなっています。

オシャレ感を感じさせるJames Bond 007 Cars Evolution

歴代ボンドカーグラフィックのインフォグラフィック
http://www.evanshalshaw.com/more/bondcars/
歴代ボンドカーのイラストが見れ、スクロールで次々と表れるボンドカーの登場はオシャレ感を感じさせる内容となっています。

模倣しやすい動きBattle of the Sexes

模倣したいサンプルのインフォグラフィック
https://citipark.co.uk/battle-of-the-sexes
内容自体はシンプルですが、スクロールで車が動くアニメーションは比較的に模倣しやすい内容ではないでしょうか。

ストーリーを感じさせるMake Your Money Matter

ストーリーを感じさせるインフォグラフィック
http://makeyourmoneymatter.org/
全編を通してイラストで制作されていますが、ストーリーを感じさせるような流れになっています。

スクロールで歴史の変遷が分かるPORSCHEvolution

ぷるシェの歴史の変遷が分かるインフォグラフィック
http://porschevolution.com/
これも比較的にシンプルですが、スクロールするだけでポルシェの歴史の変遷が分かりやすいものとなっています。

数値に目が行くInfoQuest Infographic

Atlassianによるインフォクエスト
https://www.atlassian.com/information-management-infographic
BitbucketやTrelloなどのサービスなどを提供しているAtlassianがConfluenceへの誘導を目的としているページで、様々な情報に関する数値をパララックススクロールで見せています。

文字の見せ方を工夫したThe Arnold Clark Savings Challenge

文字が多いパララックス
https://www.arnoldclark.com/challenge/
ページ全体が単色メインであるため少し文字だけの印象というデザインになっていますが、折り紙をイメージしたギミックで文字の見せ方に工夫をしています。

最後の仕掛けに「あ」となるYou Waste A Lot Of Time At Work

最後の仕掛けに「あ」となるインフォグラフィック
https://www.atlassian.com/time-wasting-at-work-infographic
これもAtlassianの仕事における様々な浪費時間に関する情報をインフォグラフィックで表現しており、色使いが派手ですがパララックス自体はシンプルです。ページの最後までスクロールするとこのページのテーマに思わず「あ」となってしまいました。

関連記事
アイデアを真似したくなるタイプ別パララックスサイト20選

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation