【CSS/JS】魅力的なインフォグラフィックのコードスニペット8選

媒体をまたいで幅広く活用されている、インフォグラフィック。概念やプロセスをわかりやすく可視化してくれる、とても便利な表現手法です。

そしてWebは、インフォグラフィックによりインタラクティブな可能性を与えられる媒体です。インフォグラフィックは旧時代の単純なグラフィックに比べて、よりストーリーテリングでユーザーフレンドリーなものへと変容してきています。例えばインフォグラフィックにアニメーションを使うことで、アイデアの表現が豊かになり、Webテクノロジーとインフォグラフィックの組み合わせがアクセシビリティを向上させます。

今回はそんなインフォグラフィックを、クリエイティブに活用するためのスニペットを8つご紹介します。

1. 大きなラベルでプロセスを表示

See the Pen Responsive infographic/ CSS variables, grid layout (no Edge support) by Ana Tudor (@thebabydino) on CodePen.

Web上では物事のプロセスを説明する機会も多いはず。しかし、プロセスをわかりやすく伝えるためには工夫が必要です。

このインフォグラフィックには、プロセスの順番を大きくラベル表示し、大胆でわかりやすく、かつ細かい部分までこだわられたデザインが用いられています。表示領域が限られた環境にも対応しています。

2. ホイール型のインフォメーショングラフ

See the Pen Responsive Animated Infographic. by Sarah Drasner (@sdras) on CodePen.

意見を伝えるためには、クリエイティブな方法が有効なこともしばしば。

このホイールのような円グラフは、気候変動に関する情報を回転しながら解説しています。わかりやすいだけでなく、デザインとして非常に面白いです。情報を魅力的に伝えるという点において、お手本にしたい作品です。

3. インタラクティブな円グラフ

See the Pen Infographic Pie (SVG based) by Shalabh Vyas (@shalabhvyas) on CodePen.

シンプルで直感的、そして美しいデザインのこの円グラフは、インタラクティビティを最大限に活用しています。

それぞれの企業ロゴをクリックするとコンテナが開き、情報が表示されるという仕組みです。カラフルでなめらかなアニメーションが、ユーザーを楽しませてくれます。

4. 統計をアニメーションで伝える

See the Pen CodePen Stats InfoGraphic by Tiffany Rayside (@tmrDevelops) on CodePen.

テレビのニュースやスポーツ番組には、アニメーションつきの統計プレゼンテーションがしばしば登場します。

この例も統計のための、アニメーションつきインフォグラフィックです。大胆なデザインとアニメーションで、ユーザーの注目を集めます。

5. ダイナミックな3Dチャート

See the Pen Dynamic Infographic by Archer (@archer-graphics) on CodePen.

この例ではインタラクティビティがフル活用されており、3Dチャートの数や色の調整が可能です。

画面には色や数字を調整するためのウィンドウが表示されるほか、画面上でチャートの位置を移動させることもできます。

6. カードゲームのようなデザイン

See the Pen Infographic smooth cards view by Sergiu Mocian (@serjuiced) on CodePen.

インタラクティブなインフォグラフィックの中でも、特にユニークな作品がこちら。

CSSのコンテンツカードが重なりあって表示され、カードの上にカーソルをあわせるとアニメーションで詳細情報が表示されます。カードにリンクを設定すれば、ユーザーを関連コンテンツに誘導可能です。

7. クリックで詳細を表示

See the Pen Bosma – Interactive SVG Infographic by Ntara (@ntara) on CodePen.

このインフォグラフィックでは、アイコンをクリックすると緑色のサイドバーに詳細が表示されます。

こうしたインフォグラフィックがもっともその魅力を発揮するのは、フルスクリーンのプレゼンテーション。ユーザーはこの没入的なフォーマットに夢中になるはずです。

8. コーヒーの種類をわかりやすく伝える

See the Pen Types of Coffee | Pure CSS by Julie Park (@juliepark) on CodePen.

インフォグラフィックの基本条件は、魅力的かつ理解しやすいことです。この2つの条件を見事にクリアしているのが、CSSのみで作られたこちらの作品。

おいしそうなコーヒーのイラストは、それぞれの材料をわかりやすく、かつ美しく伝えています。

データをもっと活用しよう

静的テキストや画像だけでは、メッセージやデータがじゅうぶんに伝わらないケースも多いでしょう。一方、印刷業界で何十年も使われてきた実績があるインフォグラフィックは、Webにおいてもユーザーフレンドリーな、わかりやすくメッセージを伝えられる手法のひとつです。

最新のCSSやJavaScriptのテクニックを使えば、ユニークなインフォグラフィックを作れます。おもしろさと情報を組み合わせたインタラクティブなインフォグラフィックで、ユーザーを夢中にさせましょう！

（原文：Eric Karkovack　翻訳：Asuka Nakajima）

こちらもおすすめ！▼