このグラフの見せ方、どっちが正解？伝わるグラフをデザインするセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
デザイナー・アートディレクターの黒葛原 道です。
今回、私は「グラフのデザイン」についてのクイズを出題します。
プレゼン資料やレポートに欠かせないグラフは、見せ方ひとつで情報の伝わり方は大きく変わります。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「グラフのデザイン」がよいと感じますか？
まずは直感で選んでみてください。
1問目「売上の伸びを正しく伝えられているのはどっち？」（難易度★★）
2問目「情報を直感的にわかりやすく伝えられているのはどっち？」（難易度★）
3問目「複数社のデータを比較しやすいのはどっち？」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：B
3問目の答え：A
以上が私なりの解答です。
あなたがよいと感じたグラフは、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．棒グラフの縦軸の目盛りは「0」から始める
まずは1問目を振り返ります。
私の考える正解は「B」でした。
AとBはいずれも、売上の推移を示した棒グラフです。
一見どちらのグラフでも問題なさそうですが、情報の受け取られ方に決定的な違いがあります。
Aのグラフでは、縦軸の目盛りが「0」から始まっておらず、数値の一部（高い部分）だけを切り取っています。
これでは数値の差が実際よりも大きく見え、売上が急激に伸びているような誤った印象を与えてしまいます。
一方でBは、縦軸の起点が「0」から始まっているため、増減が実態に沿って表現され、2023年から2025年にかけての推移を過度な印象操作なく読み取れます。
そのため、今回は「B」を正解としました。
棒グラフは「棒の長さの差」で量の違いを直感的に伝えるものです。
縦軸の起点が0でないと、本来は緩やかな増加でも「大きな変化」として受け取られやすくなります。
グラフは「どう見せたいか」だけでなく、「どう受け取られるか」までを含めて設計することが大切です。
縦軸を0から始めるのは、見た目の良し悪しではなく、情報を正しく伝えるための基本のひとつなのです。
Illustratorの「グラフツール」の基本的な使い方
Illustratorには、数値データを入力するだけでグラフを自動生成できる「グラフツール」があります。
複雑なデータ分析には向きませんが、プレゼン資料やWebサイト、インフォグラフィックなど、「数値をビジュアルとしてわかりやすく見せる」用途では十分実用的です。
ツールバーの「グラフツール」を長押し（または右クリック）すると、以下の9種類から目的に合ったグラフを選択できます。
- 棒グラフツール
- 積み上げ棒グラフツール
- 横向き棒グラフツール
- 横向き積み上げ棒グラフツール
- 折れ線グラフツール
- 階層グラフツール
- 散布図ツール
- 円グラフツール
- レーダーチャートツール
どのタイプのグラフを選んでも、基本的な操作の流れは共通しています。
以下で操作手順をご紹介します。
【手順1】グラフツールを選択する
まずは、ツールバーから作成したい種類のグラフツールを選択します。
ツールバーにグラフツールが表示されていない場合は、ツールバー下部の「…」をクリックすると選択できます。
【手順2】アートボード上にドラッグする
グラフを表示させたい範囲をドラッグします。
すると、ドラッグしたサイズでグラフの枠が配置され、同時に数値を入力するための「グラフデータウィンドウ」が表示されます。
この時点では、まだ数値は入っていません。
【手順3】グラフデータウィンドウに必要項目を入力する
グラフデータウィンドウに項目名や数値を入力することで、グラフが生成されます。
入力の基本ルール
- 列（縦方向）：項目名（カテゴリ）を入力
- 行（横方向）：数値データを入力
Microsoft ExcelやGoogle スプレッドシートに近い感覚で操作でき、以下のショートカットを使うと入力がスムーズです。
- Tabキー：右のセルへ移動
- returnキー/Enterキー：下の行へ移動
【手順4】「適用」をクリックして生成
入力が完了したら、ウィンドウ右上にある「チェックマーク」をクリックしてください。
これでアートボード上のグラフに数値が反映されます。
もし、数値が反映されない場合は、以下の点を確認してください。
- 「チェックマーク」を押し忘れていないか
- 全角数字が混ざっていないか
- 不要な空白セルが意図せず入っていないか
【手順5】グラフデータウィンドウを閉じる
グラフ生成後はグラフデータウィンドウを閉じておきます。
グラフデータウィンドウが開いたままだと、グラフの他の設定へのアクセスができなくなります。
グラフデータウィンドウはデータ入力をする時だけ開くようにしておきましょう。
Illustratorのグラフツールを活用すれば、ツールを選んで範囲を指定し、表示されたウィンドウに数値を打ち込み、微調整するだけで、データと連動したグラフがカンタンに完成します。
なお、棒グラフの場合は幅を80％ほどにするとバランスがよくなります。
ぜひ、グラフを使うシーンで活用してみてください。
2．テーマをビジュアル化して、データの背景情報を読み取ってもらう
続いて、2問目の振り返りです。
私の考える正解は「B」でした。
AとBは、いずれも「地球温暖化の推移（平均気温）」を示したグラフです。
Aは、棒グラフで整理されており、17世紀から20世紀にかけて気温が上昇していることが数値として正しく読み取れます。
ただ、このグラフ単体では「地球温暖化」というテーマ性や変化の意味を直感的に理解するのに、少し補足が必要になります。
一方でBは、温度計のモチーフによって「気温の上昇」が視覚的に強調されています。
色の変化や上方向への矢印の動きにより、長期的な上昇傾向がひと目で伝わり、言葉による説明がなくても「何が起きているか」という文脈をつかみやすい構成です。
2問目のクイズは「情報を直感的にわかりやすく伝えられているのはどっち？」であったため、今回は「B」を正解としました。
グラフには数値を示すだけでなく、「何についての情報か」「どんな変化が起きているか」を伝える役割があります。
特に環境問題のような、背景の理解が必要なテーマでは、見た瞬間に意味が伝わる「直感性」が大きな価値になります。
もちろん、正確な数値比較が最優先ならAのようなシンプルさが適する場合もあります。
大切なのは、目的に応じて「正確さ」と「直感性」のバランスを使い分けることです。
Illustratorの生成AIでグラフ用素材を作る
Bのグラフで使用した温度計のイラストは、Illustratorの生成AI機能「ベクターを生成」で作成しています。
この機能を使えば、データの意味を補足するモチーフを短時間で用意できます。
また、生成されるデータは「ベクター形式」のため、拡大・縮小しても画質が劣化せず、色や線の太さなどを後から自由に変更できるのも大きなメリットです。
「AIが作ったものをそのまま使う」だけでなく、まずは表現のたたき台として生成し、不要な要素を削ったり色味を調整したりすると、利用シーンに合わせた最適なバランスに仕上げられます。
それでは、「ベクターを生成」機能を使ってグラフ用素材を作成する手順を解説します。
【手順1】土台となる図形を描く
まずは、生成したいサイズに合わせて四角形などの図形を描きます。
図形なしでも生成できますが、アウトプットの精度を上げるなら、仕上がりサイズをAIに伝えるための図形をあらかじめ用意しておくのがオススメです。
【手順2】設定画面を開く
先ほど作成した図形を選択した状態で、「オブジェクト」メニューから「生成」＞「ベクターを生成」をクリックして設定画面を開きます。
【手順3】モデルを設定し、プロンプトを入力
モデルの種類はアドビモデルに加え、他社製のパートナーモデルも利用できます（※Illustrator v28.6以降が対象です）。
今回は、パートナーモデル「Gemini 2.5 (Nano Banana)」を使用します。
次に、作成したいイメージを言葉にし、「プロンプト」欄に入力します。
今回は「シンプルな温度計 目盛りは無し」としました。
プロンプトに正解はないので、ぜひ、いろいろ試してみてください。
【手順4】詳細設定でテイストを整える
より理想の仕上がりに近づけるため、以下の詳細設定を行います。
コンテンツの種類
「アイコン」を選択します。
これはアイコンそのものを作りたいというより、グラフィックをシンプルに仕上げるための設定です。
ディテール
スライダーを「最低」に調整します。
「どの程度細かく描写するか」の設定のため、今回のようにシンプルにしたい場合は、低めに設定するほうが適しています。
効果
表現の方向性を決める項目です。
今回は過度な立体感を抑えた「フラットデザイン」を使用し、文字通りフラットな印象に仕上げます。
カラーとトーン
「カラープリセット」を使うと、「白黒」「落ち着いたカラー」など、プリセットに応じて配色が自動で整います。
今回は、黒の輪郭線と赤の温度計にしたかったため、「カラー数」を「2」にし、「カラーを指定」で「黒」と「赤」を選択しました。
すべての設定が完了したら「生成」ボタンをクリックします。
【手順5】生成結果の確認と編集
生成されたイラストは、最初に描いた図形の位置に配置されます。
また、「プロパティパネル」の生成履歴からも確認でき、ここから再生成やプロンプトの変更もまとめて行えます。
生成されたオブジェクトはベクターデータですので、パスを動かしたり色を塗り替えたりと、通常のIllustratorオブジェクトと同じように自由に編集可能です。
オリジナルのグラフィックをグラフに適用する方法
生成AIで作ったイラストや自作のグラフィックをグラフの「棒」として使うには、Illustratorの「グラフのデザイン」という機能を使って登録する必要があります。
一度登録してしまえば、数値を書き換えるだけでイラストの長さが自動で変わる「カスタムグラフ」がカンタンに作れるようになります。
【手順1】グラフィックをデザインとして登録する
まずは、作成したグラフィックを「グラフ用のパーツ」として認識させます。
登録したいグラフィックを選択した状態で、「オブジェクト」メニューの「グラフ」＞「デザイン…」を開きます。
「グラフのデザイン」ダイアログで「新規デザイン」をクリックすると、一覧に「名称未設定のデザイン」が追加されます。
必要に応じて、「名前を変更」をクリックし、後で見てわかりやすい名称（例：温度計）にしておきましょう。
【手順2】グラフにデザインを適用する
次に、作成済みのグラフに対して、登録したデザインを反映させます。
編集したいグラフ（棒グラフ）を選択し、「オブジェクト」メニューの「グラフ」＞「棒グラフ...」を開きます。
一覧から、先ほど登録したデザイン名を選択し、「OK」ボタンをクリックすると、グラフの棒が指定したイラストに置き換わります。
伸縮しても変形しないグラフを作成する方法（ガイドの活用）
通常の設定でデザインを適用すると、数値（棒の長さ）に合わせてイラスト全体が無理やり伸び縮みしてしまいます。
例えば、温度計の丸い部分が楕円形に歪んでしまうといった現象です。
このような現象を防ぎ、特定の場所だけが伸びるように設定するには、登録前に「伸縮を想定したガイド」を作成しておくのがポイントです。
【手順1】伸縮させたい範囲に直線を引き、線をガイド化する
デザインを登録する前に、イラストの中で「伸び縮みしても形に影響がない部分」の上下を横切るように、「直線ツール」で水平線を2本描きます。
次に、描いた2本の線を選択し、「表示」メニューの「ガイド」＞「ガイドを作成」をクリックしてガイド化します。
【手順2】ガイドと一緒にデザイン登録し、形式を指定して適用する
グラフィックと作成したガイドをすべて一緒に選択した状態で、前述の「【手順1】グラフィックをデザインとして登録する」と同じ手順でデザイン登録を行います。
そして、前述の「【手順2】グラフにデザインを適用する」と同じ手順でデザインを適用し、ダイアログ内の「棒グラフ形式」を「ガイドライン間を伸縮」に変更してから「OK」を押しましょう。
これで、ガイドに挟まれた範囲だけが伸縮するようになり、イラストの重要なパーツ（温度計の頭や底の丸みなど）を歪ませることなく、正確なグラフを表示できます。
デザインの最終仕上げでの注意点
見た目をさらに微調整したい場合は、グラフを「グループ解除」することで、個別のオブジェクトとして編集可能になります。
ただし、グループ解除後は、グラフ設定やグラフデータウィンドウに戻れなくなるため注意が必要です。
デザインの最終仕上げは、必ずすべての数値入力と設定を終えたあとの、一番最後に行いましょう。
また、作業の際は、元のグラフをコピーして横に避けておくといった、いつでも調整前に戻れる「保険」をかけておくのもオススメです。
3．複数のデータを比較するなら「折れ線グラフ」を活用する
最後に、3問目の振り返りです。
私の考える正解は「A」でした。
AとBは、いずれも複数の企業の売上推移を比較したグラフです。
Aは折れ線グラフで表現されているため、年ごとの変化が線でつながり、「増減の推移」や「変化のタイミング」といった一連の流れを自然に追うことができます。
一方でBの棒グラフは、各年の値自体は読み取りやすいものの、複数社をまたいで推移を比較しようとすると、視線が左右に行き来してしまい、全体の傾向をつかむのに時間がかかってしまいます。
そのため、今回は「A」を正解としました。
連続するデータの比較で重要なのは、個々の数値よりも「変化の流れ」をどう見せるかです。
折れ線グラフは動きを一本の線で示せるため、比較対象が増えても相対的な傾向をひと目で把握しやすくなります。
数値そのものを厳密に比較したいのか、あるいは成長の流れを読ませたいのか、目的に合わせて適切なグラフ形式を選びましょう。
複数社のデータを整理する入力のコツ
1問目の基本操作では「項目名」と「数値」の2つの要素を扱いましたが、会社別の推移を比較する場合は、データウィンドウの使い方が少し異なります。
今回の目的は、会社ごとの年度別売上の推移を比較すること。
つまり「年」「売上高」に加えて、「どの会社のデータか」という情報まで含めて整理する必要があります。
ポイントは、左端の列に基準となる「年」を入力し、その右側に会社ごとのデータを列単位で並べていくことです。
各列の先頭行に会社名を入力すれば、それがそのまま「凡例（どの線がどの会社かを示す注釈）」として機能します。
このように整理することで、横方向に「年ごとの変化」、縦方向に「会社ごとの差」が読み取れる、比較に適したグラフが生成されます。
凡例の順番と仕上げの注意点
先ほどのデータウィンドウの画像で、社名の順番が右から並んでいることに気づいたでしょうか。
実はIllustratorの仕様上、先頭行が複数ある場合、データウィンドウに入力した社名の順番と、グラフ上の凡例の順番は逆（右側の列から順に表示）になります。
そのため、あらかじめ意図した並びの逆順で入力しておくとスムーズです。
また、色やフォントを自由に変えたい場合は、「オブジェクト」メニューから「グループ解除」を実行します。
グループ解除後は通常のオブジェクトとして自由に編集できます。
ただし、一度解除すると数値データの変更ができなくなるため、必ずすべてのデータ入力が完了してから最終工程として行いましょう。
まとめ：伝わるグラフをデザインするセンスを磨くポイント
今回はグラフデザインに関するクイズと、デザインテクニックを取り上げました。
最後に、今回のノウハウのまとめです。
1．「正確性」を守り、情報を誠実に届ける
どんなに美しいグラフでも、数値を誤解させる見せ方はNGです。
特に棒グラフでは「縦軸を0から始める」という基本を徹底し、実態に即した正しい比較を行いましょう。
デザインは演出だけでなく、読み手の理解を助ける手段でもあります。
スケールや起点を正しく設計することが、作り手としての信頼につながります。
2．「文脈」を可視化し、直感的な理解を助ける
グラフは「何のデータか」を瞬時に理解してもらうことが重要です。
生成AI（ベクターを生成）などを活用して、温度計やアイコンといったモチーフを取り入れることで、言葉による説明を最小限に抑え、視覚的にメッセージを届けることができます。
ただし、装飾はあくまで「情報の補助」であることを忘れず、テーマに合わせた最適なバランスを追求しましょう。
3．「目的」を見極め、最適な形式を選択する
グラフは数値を並べるものではなく、情報を「どう伝えるか」を考えるための手段です。
グラフの種類、データの並べ方ひとつで、同じ数値でも受け取られ方は変わります。
「個々の量を比べたいのか」それとも「時間の流れや変化を追いたいのか」など、目的に合ったグラフ形式を選びましょう。
お相手はデザイナー・アートディレクターの黒葛原 道でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：黒葛原 道
1999年にデザイナーとして活動を開始し、広告代理店勤務を経て2003年に独立。翌年大阪から宮崎へ移住し、Webデザインを中心にサイト構築、ディレクション、撮影、コンテンツ企画まで幅広く手がける。ECサイト運営を通じて培った「売る」視点を活かし、成果につながる制作を信条とする。現在はAdobe Community Expertとしても活動。
著書に『ネットショップ初心者でも売れる商品写真の基礎知識とつくり方』（玄光社）