現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

Web／グラフィックデザイナーのゆかまるです。
今回、私は「グラフ」についてのクイズを出題します。

早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「グラフのデザイン」がデータを分かりやすく伝えられていると感じますか？

1問目「アクセントカラーの使い方」（難易度★）

2問目「情報整理と補助線の使い方」（難易度★★）

3問目「グラフの種類の選び方」（難易度★★★）

いかがでしたか？

私が考える答えは……

1問目の答え：B

2問目の答え：A

3問目の答え：B

以上が私なりの解答です。

あなたがよいと感じたグラフは、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/design/quiz-challenge-annotation

1．アクセントカラーを絞って「主役」のデータを際立たせる

まず、1問目から振り返っていきましょう。
私が選んだ答えは「B」でした。

AとBの違いは、棒グラフの色の使い方です。

Aはすべてのチャネルに違う色を使っているため、カラフルでデータが分かりやすそうだと感じるかもしれません。

ただ、すべての棒が目立っているため、どこに注目すればよいのか分かりにくくなっています。

一方でBは、一番注目して欲しい「Channel C」だけにアクセントカラーを使い、それ以外の項目はグレーに抑えています。

これにより、見る人の視線が自然と重要なデータに集まります。

資料デザインでは、色をたくさん使うほど分かりやすくなるわけではありません。
むしろ、色数が多いほど情報の優先順位が曖昧になり、「全部目立っているけれど、結局どれが大事なの？」という状態になりやすいのです。

特にグラフは数字を比較するためのものなので、色を使いすぎると比較の邪魔になってしまいます。

Bのようにアクセントカラーを1色に絞ると、見る人の視線が自然と重要なデータに集まります。

その結果、「最も成果の高い項目」や「注目してほしいデータ」「結論となる数字」をスムーズに伝えられます。

ビジネス資料における色使いの原則

では、実際に資料を作るとき、色をどう使い分ければいいのでしょうか。
グラフを作る場合、以下の「色の役割分け」を意識してみてください。

• アクセントカラー（1色） ・・・最も伝えたい情報に使う
• セカンダリーカラー（1〜2色）・・・ 比較対象や関連情報に使う
• ニュートラルカラー（グレー）・・・その他の情報に使う

「Channel Cが重要」という意図がある場合、Bのようにアクセントカラーを1色に限定し、その他はグレーで統一するのが効果的です。

Illustratorで棒グラフを作り、グラフの色を編集する方法

Illustratorには、数値を入力するだけで棒グラフや折れ線グラフなどを簡単に作成できる「グラフツール」が搭載されています。

今回のような棒グラフの作成手順を、以下でご紹介します。

1. ツールバーの「グラフツール」を長押しし、「棒グラフツール」を選択
2. アートボード上をドラッグして、グラフのサイズを指定
3. 表示された「グラフデータウィンドウ」に数値を入力
4. 右上のチェックマークをクリックして適用

グラフは作成直後もグラフデータと連動した状態で編集できます。

棒の色を変えるだけであれば、「グループ選択ツール」を使って変更したい棒を選択し、塗りの色を変更できます。

ただし、棒ごとの細かなレイアウト調整や、文字・線・余白などを自由に整えたい場合は、グラフを選択した状態で、「オブジェクト」メニューの「グループ解除」（Ctrl + Shift + G／MacはCmd + Shift + G）を実行すると、通常のオブジェクトとして編集できるようになります。

グループ解除後は、棒の色だけでなく、文字サイズやラベル位置、不要な要素の削除なども自由に調整できます。ただし、一度グループ解除するとグラフデータとの連動は解除されるため、数値が確定してから編集するのがおすすめです。

後から数値を修正する可能性がある場合は、グラフデータと連動した状態のオブジェクトを複製し、バックアップとして残しておくと安心です。

2．「引き算」と「強調」のメリハリで、グラフの結論を伝える

続いて、2問目の振り返りです。

私が選んだ答えは「A」でした。

AとBの違いは、補助線や数値ラベルなどの情報量です。

Aは補助線や数値ラベルを必要最低限に減らし、重要なポイントだけを目立たせています。
そのため、売上がどのように伸びているのか、どこから変化が大きくなったのかが直感的に伝わりやすくなっています。

一方でBは、補助線や数値ラベルが細かく入っているため、正確な数値は読み取りやすく見えます。

しかしその分、画面内の情報が増えて、グラフ全体が少し情報過多になり、重たく見えてしまいます。

グラフは「全部読ませる」より「結論を伝える」

資料に入れるグラフは、すべての数値を細かく読ませるためだけのものではありません。

特にプレゼン資料や提案資料では、見る人が短時間で内容を理解できることが重要です。
そのため、グラフにおいては、細かな数値の正確さよりも、まず「何が起きているのか」を直感的に伝えることを優先すべき場面があります。

今回の作例の場合、グラフで伝えたいのは細かな月ごとの数値ではなく、「サービス導入後、売上が大きく伸びている」という変化です。

そのため、すべての月に数値を入れるよりも、重要なタイミングや最終数値だけを目立たせる方が、資料としては伝わりやすくなるのです。

Illustratorの「グラフ設定」で情報量を整理する方法

Illustratorの「グラフツール」には、グラフを見やすく編集できる「グラフ設定」が用意されています。

ここでは、グラフ設定の使い方と、折れ線グラフの調整のコツをお伝えします。

まず、グラフを選択した状態で、「オブジェクト」メニューの「グラフ」＞「設定」を選択すると、「グラフ設定」が開きます。

今回のような折れ線グラフでは、必要な情報だけを残すことが重要です。

以下の調整を行って情報を整理してみましょう。

• 目盛りが不要なら非表示にする
• 折れ線グラフのマーカー（点）が不要なら外す
• 影を付けないように設定する
• 塗りつぶしを使わない

1問目で「色を絞る」とお話ししましたが、実は「情報量」も同じです。

資料デザインでは、要素を足せば足すほど分かりやすくなるわけではありません。

そのため、補助線や数値ラベルだけでなく、「グラフ設定」で追加できる他の装飾も「本当に必要か？」を考えながら使うことが大切です。

特にプレゼン資料やレポートは、細かな数字をじっくり読ませることではなく、「データの傾向や差」を瞬時に伝えることが目的となるため、必要以上に目盛りを増やさないのがオススメです。

もちろん、グラフを作った後に補助線を削除することもできますが、最初から「必要な線だけに絞る」と決めて設定を調整しておけば、編集の手間を減らしながら見やすいグラフが作れるようになります。

3．比較したいデータに合わせて適切な「グラフの種類」を選ぶ

最後のクイズ、3問目の振り返りです。

私が選んだ答えは「B」でした。

AとBの違いは、グラフの種類です。

Aは商品別の売上実績を「円グラフ」で表現しています。
円グラフは、全体の中でどの項目がどれくらいの割合を占めているかの構成比を見せるのに便利ですが、商品ごとの売上金額を比較するには少し不向きです。
特に今回のように項目数が多く、金額の差を見せたい場合、円グラフではどの商品がどれくらい違うのかを直感的に判断しづらくなります。

一方Bは、「横棒グラフ」で商品ごとの売上金額を並べています。

棒の長さで比較できるため、売上の高い順番や金額差がひと目で分かります。

円グラフは「割合」、棒グラフは「比較」に向いている

あらためて、なぜ今回のクイズで「横棒グラフ」が正解だったのか、「円グラフ」と「棒グラフ」の違いを整理しておきましょう。

円グラフ

全体を100%としたときに、「どの項目がどれくらいの割合を占めているか」を見せるのが得意です。

例えば、「会社の売上全体のうち、商品Aが何％を占めているか（シェア）」を伝えたいときには、円グラフが向いています。

棒グラフ

項目ごとの「数字の大きさ（金額や件数）を比べる」のが得意です。

今回の作例のように、商品ごとの売上金額を並べて「どれが一番売れているか」「いくらの差があるか」を見せたい場合は、棒グラフが適しています。

なぜなら、人は角度や面積の違いよりも、長さの違いの方が比較しやすいからです。

色をまとめて調整できる「オブジェクトを再配色」

クイズ1では、グラフツールを使った棒グラフの作成方法を紹介しました。
ここでは、すでに作成したグラフの色を効率よく整理する方法として、Illustratorの「オブジェクトを再配色」を活用してみましょう。

売上の内訳や商品カテゴリなど、項目数が多いグラフでは、色数が増えるほど全体の統一感が崩れやすくなります。
色を1つずつ手作業で変更することもできますが、項目数が多い場合は時間がかかり、色味のトーンもバラつきやすくなります。

そんな時に便利なのが「オブジェクトを再配色」です。

グラフを選択した状態で、「編集」メニューの「カラーを編集」＞「オブジェクトを再配色」を選択すると、選択しているオブジェクトに使われている色を一覧で確認しながら、まとめて調整できます。

「オブジェクトを再配色」を使うと、例えば、以下のような調整がしやすくなります。

• 明るさや彩度を揃える
• 目立たせたい色だけ残して、他を落ち着いた色にする
• グラフ全体のトーンを資料の雰囲気に合わせる

特に項目数が多い棒グラフや円グラフでは、1色ずつ変更するよりも、「オブジェクトを再配色」を使った方が全体のバランスを見ながら色を整えられます。

グラフは色が多いほど華やかに見えますが、色のトーンがバラバラだと、資料全体が散らかった印象になってしまいます。
「オブジェクトを再配色」を使えば、色数を保ったままでも、全体のトーンを揃えて見やすく整えることができます。

今回は「オブジェクト再配色」で明るさを変更しましたが、「生成再配色」でもプロンプトでさくっと色変更できる場合があるので、ぜひ試してみてください。

まとめ：グラフ作成のセンスを上げるポイント

今回は、資料の中に入れるグラフの見せ方と、Illustratorで使えるデザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

1．アクセントカラーを絞って「主役」のデータを際立たせる

• すべての項目に色を付けると、どこを見ればよいか分かりにくくなる
• 伝えたいデータだけにアクセントカラーを使い、視線を集める

2．「引き算」と「強調」のメリハリで、グラフの結論を伝える

• 補助線や数値ラベルが多すぎると、データよりも情報量が目立ってしまう
• 重要な数値や変化だけを残し、グラフの結論が伝わるように整理する

3．比較したいデータに合わせて適切な「グラフの種類」を選ぶ

• 円グラフは割合を見るのに向いているが、金額差や順位の比較には不向き
• 商品ごとの売上金額を比較したい場合は、棒グラフや横棒グラフを使うと分かりやすい

グラフは、ただデータを見せるためのものではなく、見る人に「何を伝えたいか」を届けるためのデザインです。

色、情報量、グラフの種類。それぞれの役割を意識しながら、ぜひ資料やバナー制作でも今回の内容を試してみてください。

他にもグラフデザインのクイズがあるので、ぜひチャレンジしてみてください。

このグラフの見せ方、どっちが正解？伝わるグラフをデザインするセンスを磨こう

お相手はWeb＆グラフィックデザイナーのゆかまるでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。

https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/desig２n/quiz-challenge

https://main--da-cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/product-blade/illustrator