皆さま、こんにちは。
WEBサイトで数字をビジュアルで見せるために、円グラフや棒グラフなどを取り入れることも増えてきました。例えば満足度99%！などもグラフを使うとインパクト強く表現できます。
参考：https://prtimes.jp/main/html/rd/p/000000004.000098438.html
特に広告から訪問者様がやってくるランディングページにはプレゼンテーション資料と同じようにグラフや表を入れることで内容がわかりやすくなるのでよく使われる傾向にあります。
そこで今回はWEBページ掲載用の円グラフを作る方法を4つご紹介します。ツールを使って簡単に作成する方法もあるので、WEBコンテンツ内でちょっと使いたいなというときでも手軽に作成、載せていただけます。
■円グラフを作る方法4つ
- Illustratorを使う
- ツールを使ってブラウザ上で作る
- PowerPointを使う
- CSSで表示させる
CSSを使うと図ではなくCSSのみで円グラフを実装できます。それぞれにできることの幅があり、仕上げられるグラフの見た目も異なってくるので、4つの方法を見ていただき、どれが作りやすいかご検討いただければと思います。
1.Illustratorを使う
デザイナーさんが社内にいらっしゃる場合や、Illustratorを使えるディレクターさん、ライターさんなら、Illustratorで作成するといちばん自由度が高いです。円グラフ以外にも棒グラフ、折れ線グラフなどを作ることができます。
表からグラフを生成するのではなく、一旦丸いグラフを作り、そこに値を入れて仕上げていきます。
①円グラフツールから作成
ツールから作成するとサイズ選択ボックスが出るので、好みのサイズで円グラフをまずドンと1つ作ります。
②円グラフの割合を入力
割合を入れると自動的に円が割れます。
③グループを解除して、色をつけていく
Illustratorですから、円グラフのベースが仕上がったら自由にデザインできます。細かいビジュアルも整えやすいです。
2.ツールを使ってブラウザ上で作る
円グラフを無料で会員登録も不要で作れるツールもたくさんあります。その中から入力しやすくてデザインもきれいな「devroom」内で提供されている円グラフツールをオススメしたいと思います。
①欄内に必要な情報を入れる
タイトル、仕上がりの画像サイズ、凡例を上に出すか右に出すか（出さないか）などの入力欄があります。デザインもいくつか揃っているので、好みのものを選びます。数値を入力していくと画面下に円グラフが出来上がります。紫色ベースのグラフにすると落ち着いた印象に。
②【ダウンロード】からpngをローカル保存
ダウンロードボタンも用意されているので、そこからpng形式でダウンロードできます。画像サイズも事前に入力しているのでそのままサイズ調整することなくWEBサイトにアップロードできます。
▼今回作成した円グラフ
きれいな円グラフができました。ブログ記事に挿入するなら十分な品質です。色が限定されるのでデザインにこだわらなくてもいい場合はすごく楽なのでいいですね。1分あればあっという間に作ることができます。
3.PowerPointを使う
MicrosoftOfficeシリーズでグラフといえばExcelでの作成が基本だと思いますが、PowerPointでも作ることができます。同じシリーズのソフトですが実はグラフの作り方に違いがあります。
Excelは表を作ってからグラフを生成するという順番ですが、PowerPointではグラフを作ってから数値を当てるのでIllustratorに近い手順です。ビジュアルからスタートするので”どんなグラフになるか”が想像しやすく、普段表やグラフなどで数字に触れることが少ない方はこちらのほうが作りやすいかもしれません。
①【挿入＞グラフ】で好きなビジュアルを選ぶ
新しいスライドを開いたら、挿入＞グラフもしくはアイコンから作りたいビジュアルの円グラフを選択します。
②立ち上がったExcelに数値やタイトルを入れる
円グラフを選択するとExcelが自動的に立ち上がってきます。最初は見本（ダミー）の数値が入っています。この表で「売上高」となっているところがタイトルに当たる部分です。
数値を入れ替えると、PowerPoint上のグラフも連動して変更されます。デザインはテンプレートが用意されていますし、自由に変更したいときは【書式設定】から変更します。サイズや塗りつぶし、影など細かく調整できます。
③【右クリック＞図として保存】でpng、jpgなどに変換して保存
保存は画像形式を選んでローカル保存できます。
グラフについてはかなり柔軟にデザインできます。Officeのソフトをお持ちなら、グラフ作成はPowerPointからでも十分な品質のものができますね。
4.CSSで表示させる
CSSで円グラフを作るメリットは、修正のときにCSSを触るだけでよい点です。画像にしてしまうと修正ができないので、数値を更新していくような運用であればCSSでの作成が便利かもしれません。
conic-gradient()という関数を使います。円錐状に色をグラデーションで出すことができるので、その機能を使って円グラフにするイメージです。
①円グラフ用のCSSを準備する
まず円グラフの表示サイズとそれぞれの色を決めておきます。どこをどの色で表示させるか決めたらカラーコードをメモしておいてください。それからCSSを作っていきます。
.pie {
width: 400px;
height: 400px;
background-image: conic-gradient(#a9a9a9 0% 50%, #d9d9d9 50% 100%);
border-radius: 50%;
}
■conic-gradient
conic-gradientでは、カラーコードとその色味がどこからどこまでかをパーセンテージで設定します。今回はわかりやすいよう50%／50%で設定しました。
パーセンテージを設定しないと円を描きます。パーセンテージを設定することでグラフとして意味を成してくるんですね。
■border-radius
この設定で円に見えているので、消してしまうと四角になります。
②class設定したdivタグを挿入する
円グラフを表示させたいところへ以下のタグを挿入します。
<div class="pie"></div>
これでプレビューすると円グラフが表示されています。
文字を重ねたり、背景を入れたりなどCSSに記述を追加していくことでビジュアル面もレベルアップさせられます。画像にしないので例えば1ヶ月に1回更新したいなどのときはCSS表示が時短ですね。
まとめ
円グラフは割合をわかりやすく見せるのに効果的な表現で、売れ筋ランキングやアンケート結果を見せることに適しています。数字だけではなく円グラフを活用して、一目で伝わるコンテンツを作っていきましょう！