近年では、グラフやチャートといったインフォグラフィックを導入しているウェブサイトが増えてきています。インフォグラフィック化することでデータをよりわかりやすく表示出来たり、重要なポイントを強調したりできる、といったメリットを挙げることができます。

インフォグラフィックをウェブサイトに入れる場合、作成した画像を貼るだけでは問題ないですが、そこにアニメーションをつけるとなるとHTMLやCSS、JavaScriptを用いて作成する必要があります。HTMLやCSSでインフォグラフィックを作ろうとすると、なんだか難しそう…というイメージがあるかもしれませんが、実際には、とてもシンプルに作ることができます。どれくらい簡単か、ぜひ本記事で確認してみてください。

完成のデモはこちら

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

インフォグラフィック（infographics）とは、「info（情報）」を「graphics（図形）」で表すという意味の言葉です。データを視覚的にわかりやすくするために、図やグラフに要素を盛り込んだものです。数値の推移や、文字では説明しづらい情報を簡潔でわかりやすく伝えたいときに便利です。標識や地図、教科書に使われていましたが、近年ではウェブサイトにも取り入れられるようになっています。

以下のようなものがインフォグラフィックに当てはまります。

インフォグラフィックに関するブログ記事は他にもありますので、以下も合わせてご覧ください。

インフォグラフィックとは？ゼロから作成まで徹底解説！

本記事では4種類のインフォグラフィックの作り方を解説します。

円グラフ

まずはこのような円グラフを作っていきます。

円をSVGで作る

まずは円グラフの円を作ります。SVGタグのcircleで円を描きます。

設定項目は以下の通りです。

cxとcyを0にしたとき、円の中心部が0地点に来るイメージです。

svgエリアの中心に円が来るよう、cxとcyを調整しましょう。

次に、SVGのエリアと円の大きさをCSSで調整します。円の半径を70px（直径140px）で設定しましたが、円に10pxの枠線を付けてグラフの線にするため、その太さを考慮しエリアは円の直径よりも少し大きくしています。

circleは以下のような設定です。

設定項目は以下の通りです。

今回は直径140pxの円なので、外周を求めるには140px × π = 439.822…px（四捨五入して440px）となります。そのため、線が始まる位置を0pxにし、線の間隔は開けなくてよいので440pxにしています。これで、グレーの円が出来上がりました。

数値用の円をSVGで作る

次に、数値を表す円を作り、上に重ねます。先ほど作った円に .base というクラスを付け、新しい円に .line というクラスを付けました。

任意の数値までの線にしたい場合、外周 ―（外周 × 入れたい数値） ÷ 100 となります。
今回は入れたい数値を88にしているので、外周の88%の線が引かれます。

文字を入れる

このままでも円グラフとして成り立っていますが、より数値などがわかりやすいようテキスト情報を入れたいと思います。

.number の中に数値とパーセント記号、.text にグラフの名前を入れてみました。

そして、これらを修飾します。
.number は絶対配置で円の中心に移動させ、数字とパーセント記号のジャンプ率を変えます。
グラフの名前は真ん中寄せにしてみました。

すると、このような形になります。

アニメーションを付ける

.line（色のついたほうの線）に対してアニメーションをつけます。1秒で、線の長さが0から440pxになる、というものです。

すると、このように動きます。

円グラフの開始位置を上にする

現在、グラフが右から始まる状態になっています。これでも問題はありませんが、上から始まるグラフのほうが慣れ親しんでいるかと思いますので、グラフを回転して調整します。

このように、上から始まる円グラフになりました。

複製する

色ごとにクラスを変えて複製してみました。

完成のデモはこちら

棒グラフ

横に伸びる棒グラフを作っていきます。

棒グラフを作る

棒グラフ用の .graph と、その大枠 .bar-graph-wrap 用意します。今は中身が空で大丈夫です。

<div class="bar-graph-wrap"> <div class="graph"></div> </div>

1 2 3

<div class="bar-graph-wrap">   <div class="graph"></div> </div>

CSSで、グラフの大枠の高さを固定しました。

.bar-graph-wrap { position: relative; height: 350px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); }

1 2 3 4 5

.bar-graph-wrap {   position: relative;   height: 350px;   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); }

グラフは絶対配置にし、表したいパーセンテージをwidthで指定します。今回は88%としたかったので、widthも88%にしています。

.bar-graph-wrap .graph { height: 50px; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; background: #03a9f4; width: 88%; border-radius: 0 4px 4px 0; }

1 2 3 4 5 6 7 8 9 10 11

.bar-graph-wrap .graph {   height: 50px;   position: absolute;   left: 0;   top: 0;   bottom: 0;   margin: auto;   background: #03a9f4;   width: 88%;   border-radius: 0 4px 4px 0; }

すると、このような形になります。

グラフ名と数値のテキストを入れる

表示する場所を変えたいので、グラフ名と数値のテキストはそれぞれspanで囲いました。

<div class="graph"> <span class="name">Graph 01</span> <span class="number">88%</span> </div>

1 2 3 4

<div class="graph">   <span class="name">Graph 01</span>   <span class="number">88%</span> </div>

.graph span { font-size: 14px; color: #ffffff; }

1 2 3 4

.graph span {   font-size: 14px;   color: #ffffff; }

両端に配置したかったので、display: flex; にし、justify-content: space-between; を用いています。
要素の端にくっついてほしくなかったので、paddingで内側に余白をとっています。

.bar-graph-wrap .graph { display: flex; align-items: center; justify-content: space-between; padding: 10px; }

1 2 3 4 5 6

.bar-graph-wrap .graph {   display: flex;   align-items: center;   justify-content: space-between;   padding: 10px; }

すると、このような形になります。

アニメーション化する

以下は棒グラフが左から伸びるように、グラフの位置を左方向へ-100%にし、3秒かけて右に移動するというアニメーションです。

.bar-graph-wrap .graph { animation: graphAnim 3s forwards; }

1 2 3

.bar-graph-wrap .graph {   animation: graphAnim 3s forwards; }

@keyframes graphAnim { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }

1 2 3 4 5 6 7 8

@keyframes graphAnim {   0% {     transform: translateX(-100%);   }   100% {     transform: translateX(0);   } }

大枠の外からグラフが右へ流れるので、枠の外にいるときは非表示にするために、overflow: hidden; にしました。

.bar-graph-wrap { overflow: hidden; }

1 2 3

.bar-graph-wrap {   overflow: hidden; }

すると、このようににゅるっと伸びるような動きになります。

複製する

色ごとにクラスを変えて複製してみました。

完成のデモはこちら

棒グラフ（横）

縦に伸びる棒グラフにするやり方を紹介します。
先ほど作った棒グラフをベースにしており、追加になるCSSのみ記載します。

縦にしたいグラフの大枠に .vertical というクラスを付けました。そして、縦の長さを少し長くし、横幅いっぱいですとグラフが見づらくなるので幅を狭めました。これはグラフの本数によって適宜調整すればよいかと思います。

.bar-graph-wrap.vertical { height: 500px; margin: 0 auto; max-width: 350px; }

1 2 3 4 5

.bar-graph-wrap.vertical {   height: 500px;   margin: 0 auto;   max-width: 350px; }

グラフは縦幅が50pxに固定されていましたが、横幅を固定値にし、縦はパーセンテージによって変化するようにします。縦に伸びるのに合わせ、角丸（border-radius）の場所も変更しました。下からの位置を0pxで固定しています。

.bar-graph-wrap.vertical .graph { width: 50px; bottom: 0; border-radius: 4px 4px 0 0; animation: graphAnim02 3s forwards; flex-direction: column-reverse; }

1 2 3 4 5 6 7

.bar-graph-wrap.vertical .graph {   width: 50px;   bottom: 0;   border-radius: 4px 4px 0 0;   animation: graphAnim02 3s forwards;   flex-direction: column-reverse; }

グラフの横幅を狭めたことでテキストが見づらくなったので、フォントサイズを下げました。

.bar-graph-wrap.vertical .graph .name { font-size: 10px; }

1 2 3

.bar-graph-wrap.vertical .graph .name {   font-size: 10px; }

グラフの位置を調整します。パーセンテージは高さ（height）で指定できます。

.bar-graph-wrap.vertical .graph { left: 15%; height: 88%; top: auto; }

1 2 3 4 5

.bar-graph-wrap.vertical .graph {   left: 15%;   height: 88%;   top: auto; }

アニメーションはY軸ベースにすることで、下から上に来るような縦のアニメーションになります。

@keyframes graphAnim02 { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }

1 2 3 4 5 6 7 8

@keyframes graphAnim02 {   0% {     transform: translateY(100%);   }   100% {     transform: translateY(0);   } }

すると、このように縦に伸びる棒グラフにすることができます。

完成のデモはこちら

レーダーチャート

3つの頂点があるレーダーチャートを作ります。

背景を作る

グラフ用の背景を作ります。CSSで作るのは大変なので、画像を用意しました。

この画像を、グラフの背景に設置します。
.graph-bg という枠を作り、背景に画像が当たるようにしました。

<div class="graph-bg"></div>

1	<div class="graph-bg"></div>

.graph-bg { width: 250px; height: 250px; margin: 0 auto; background: url("../img/graph03_bg.png") no-repeat center/contain; }

1 2 3 4 5 6

.graph-bg {   width: 250px;   height: 250px;   margin: 0 auto;   background: url("../img/graph03_bg.png") no-repeat center/contain; }

グラフを作る

先ほど作った背景用の.graph-bg の中に、グラフ用の .rader を作ります。

<div class="graph-bg"> <div class="rader"></div> </div>

1 2 3

<div class="graph-bg"> <div class="rader"></div> </div>

.rader-graph-wrap .rader{ margin: 0 auto; width: 250px; height: 250px; clip-path: polygon(50% 17%, 2% 100%, 77% 87%); background: rgba(3, 169, 244, 0.4); }

1 2 3 4 5 6 7

.rader-graph-wrap .rader{   margin: 0 auto;   width: 250px;   height: 250px;   clip-path: polygon(50% 17%, 2% 100%, 77% 87%);   background: rgba(3, 169, 244, 0.4); }

グラフはclip-pathで作成しています。clip-path では指定した領域は表示し、外側は非表示にするというクリッピング領域を作ることができます。今回使っているpolygonは多角形を作るためのプロパティです。このように指定します。

polygon（X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点）

1	polygon（X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点）

clip-pathにはこのようなジェネレーターもあるので、よかったら参考にしてみてください。
CSS clip-path maker

アニメーションを作る

clip-path のサイズを0から100%にするアニメーションをあてています。こうすると、グラフが伸びるような表現になります。

.rader { animation: graphAnim03 3s forwards; } @keyframes graphAnim03 { 0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); } 100% { clip-path: polygon(0, 0, 0); } }

1 2 3 4 5 6 7 8 9 10 11

.rader {   animation: graphAnim03 3s forwards; } @keyframes graphAnim03 {   0% {     clip-path: polygon(50% 50%, 50% 50%, 50% 50%);   }   100% {     clip-path: polygon(0, 0, 0);   } }

複製する

色ごとにクラスを変えて複製してみました。

完成のデモはこちら

レーダーチャート（五角形）

5つの頂点があるレーダーチャートを作ります。

背景を作る

グラフ用の背景を作ります。CSSで作るのは大変なので、画像を用意しました。

この画像はXDで作りました。

三角形作成ツールからサイズで5と入力すると、簡単に五角形を作れます。サイズを変えて4つ複製すると、このような見た目になります。

この画像を、グラフの背景に設置します。.graph-bg という枠を作り、背景に画像が当たるようにしました。

<div class="graph-bg"></div>

1	<div class="graph-bg"></div>

.graph-bg { width: 250px; height: 250px; margin: 0 auto; background: url("../img/graph04_bg.png") no-repeat center / contain; }

1 2 3 4 5 6

.graph-bg {   width: 250px;   height: 250px;   margin: 0 auto;   background: url("../img/graph04_bg.png") no-repeat center / contain; }

グラフを作る

先ほど作った背景用の.graph-bg の中に、グラフ用の .pentagon を作ります。

<div class="graph-bg"> <div class="pentagon"></div> </div>

1 2 3

<div class="graph-bg">   <div class="pentagon"></div> </div>

.pentagon { margin: 0 auto; width: 250px; height: 250px; background: rgba($blue, 0.4); clip-path: polygon(50% 6%, 93% 40%, 63% 69%, 27% 89%, 13% 41%); }

1 2 3 4 5 6 7

.pentagon {   margin: 0 auto;   width: 250px;   height: 250px;   background: rgba($blue, 0.4);   clip-path: polygon(50% 6%, 93% 40%, 63% 69%, 27% 89%, 13% 41%); }

こちらのグラフもclip-pathで作成しています。五角形は[X軸の頂点 Y軸の頂点]を5つ指定して作ります。

polygon（X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点）

1	polygon（X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点, X軸の頂点 Y軸の頂点）

アニメーションを作る

clip-path のサイズを0から100%にするアニメーションをあてています。こうすると、グラフが伸びるような表現になります。

.pentagon { animation: graphAnim04 3s forwards; } @keyframes graphAnim04 { 0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); } 100% { clip-path: polygon(0, 0, 0, 0, 0); } }

1 2 3 4 5 6 7 8 9 10 11

.pentagon {   animation: graphAnim04 3s forwards; } @keyframes graphAnim04 {   0% {     clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);   }   100% {     clip-path: polygon(0, 0, 0, 0, 0);   } }

複製する

色ごとにクラスを変えて複製してみました。

完成のデモはこちら

まとめ

ということで、いくつかのインフォグラフィックの作り方を本記事でまとめました。どれもHTMLとCSSのみでできるので、比較的導入しやすいかなと思います。

今回はHTMLとCSSを使ったものに絞りましたが、インフォグラフィックに特化したJavaScriptライブラリも何種類かあります。次のレベルにステップアップしてみたい！という方は以下のようなライブラリも参考にしてみてはいかがでしょうか。

・D3.js
・Chart.js
・HighChart.js
・Chartist.js

データを分かりやすく伝える手段のひとつであるインフォグラフィックをつかって、より多くの人に情報を届けられると幸いです。

参考サイト

円グラフ
Circle Progress Bar Using Html CSS and SVG | CSS Percentage Circle
cssで円グラフを表示させる件＠モーショングラフィックス風

棒グラフ
CodePen Home CSSで棒グラフ（アニメーション付き）

レーダーチャート
Pure CSS Radar Chart