CSS/JSで作れるユニークなインフォグラフィックのスニペット8選

IC

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

そして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)

 

こちらもおすすめ!▼

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

30,000人以上が使う日本最大級のお仕事マッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 30,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ