【チャートデザイン10個の法則】機能的で美しいチャートを作るなら、知っておきたい基本まとめ

世の中に溢れる膨大な量の情報から、必要な情報だけをピックアップし、並べる「チャート」。複雑な情報を整理することで、伝えたいことを分かりやすく伝えられるツールです。

そんなチャートのデザインには、10個の法則があります。

この記事の筆者であるライアン・ベールズは、15年間もの間、複雑で大量のデータを扱うWebサイトやモバイルアプリをデザインしてきました。仕事のなかで数多くのチャートデザインに触れ、経験を積み、美しくて機能的なチャートデザインを作るための法則を見つけだしたのです。

今回は、みなさんに10個の例を紹介したいと思います。

1. ユーザーが親しみやすいチャートを使う

デザイナーたちは、スチームグラフのような変わったチャートを使いがちです。しかしユーザー側からすると、見慣れないチャートは解読するのに時間がかかります。特別な理由がない限り、分布図、棒グラフ、線グラフ、円グラフなどの一般的なグラフを使用しましょう。
Streamgraph Dashboard / dribbble

2. 円グラフには5個以上の項目を入れない

円グラフを使うのなら、グラフにおさめる項目は５つ未満に設定しましょう。なぜなら、項目を増やせば増やすほど、量が多すぎてグラフから意味を読み取るのが難しくなってしまうからです。多くの情報を伝えたいときは、データラベルや数値を付け足すより、別のチャートで説明した方が分かりやすくなります。

3. 上昇順か下降順にデータを並べる

日にちを扱うものでない限り、データは上昇順か下降順かのどちらかの順番に並べましょう。主に棒グラフを作るとき、どちらかに上昇順か下降順にデータが並んでいると、見た目が整っているので読みやすくなります。

4. 3Dチャートを避ける

3D効果を施したチャートもよく見かけますが、果たして3Dにする意味はあるでしょうか？ 見づらいだけではなく、印象もクリアではありません。3D効果を施したチャートはなるべく使わず、フラットなデザインを使いましょう。

5. デフォルトカラーを使わない

チャート作成ソフトの中には、データシリーズの色が自動的に設定されているものがあります。その機能は一見便利ですが、資料全体の色のトーンに合わない場合もあります。デザイナー自身がデータの視覚的な影響を考え、データシリーズの色を設定しましょう。データが、ひと目見て区別できるような配色になっているかがポイントです。

6. トレンドラインは邪魔になるのでひかない

トレンドラインは重要だという人もいますが、ユーザーにとってはただ情報量が増えて、チャートがわかりにくくなるだけです。もしトレンドラインを加えるのであれば、最低限取り外せるような仕様にしましょう。

7. ツールチップに頼らない

ツールチップは、補足情報を提供する手段として考えましょう。プロットされた数値を表示するためだけにツールチップを使うのは、おすすめしません。

8. 凡例はなくてもいい

データが1種類しかないときは、スペースを取ってしまう凡例を入れる必要はありません。

9. グリッドラインは必要なときだけ使う

グリッドラインは、データポイントの数値を読み取りやすくするためには便利です。しかし、シンプルなチャートにおいては必要ありません。もしもグリッドラインを使うのであれば、X軸とY軸の両方が必要か、片方だけで十分なのかを検討しましょう。

10. チャートのモックアップには実際のデータを使う

このチャートが実用的かどうか、実際のデータを使ってテストしましょう。

チャートを美しく見せようとするあまり実際のデータを考慮せずに進めてしまうと、開発者にかなりの負担がかかります。

開発者に負担をかけないためには、２種類のデザインを作っておくことです。ひとつめのバージョンは、データが美しく見えるようにデザインする。このデザインは、今後あなたがクライアントに対してプレゼンするためのポートフォリオとして使えるでしょう。そしてふたつめのバージョンは、チャートを実際に活用する際に見やすい形に仕上げます。これは、あなたが開発者に引き継ぐものです。

Map Dashboard / dribbble

いかがでしたか？

データは大量で複雑なので、分かりやすくチャートにすることは簡単なことではありません。今回説明した法則を、ぜひ実践してみてください。

ご紹介したのはあくまで原則ですので、うまくいかないときはルールを破ってもかまいません。重要なのは、実際使用される環境において、あなたのデザインをきちんとテストしてみることですから。

（翻訳：Akiko Ogita）