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

Illustratorの「グラフツール」の基本的な使い方

Illustratorには、数値データを入力するだけでグラフを自動生成できる「グラフツール」があります。

複雑なデータ分析には向きませんが、プレゼン資料やWebサイト、インフォグラフィックなど、「数値をビジュアルとしてわかりやすく見せる」用途では十分実用的です。

ツールバーの「グラフツール」を長押し（または右クリック）すると、以下の9種類から目的に合ったグラフを選択できます。

• 棒グラフツール
• 積み上げ棒グラフツール
• 横向き棒グラフツール
• 横向き積み上げ棒グラフツール
• 折れ線グラフツール
• 階層グラフツール
• 散布図ツール
• 円グラフツール
• レーダーチャートツール

どのタイプのグラフを選んでも、基本的な操作の流れは共通しています。

以下で操作手順をご紹介します。

【手順1】グラフツールを選択する

まずは、ツールバーから作成したい種類のグラフツールを選択します。

ツールバーにグラフツールが表示されていない場合は、ツールバー下部の「…」をクリックすると選択できます。

【手順2】アートボード上にドラッグする

グラフを表示させたい範囲をドラッグします。

すると、ドラッグしたサイズでグラフの枠が配置され、同時に数値を入力するための「グラフデータウィンドウ」が表示されます。

この時点では、まだ数値は入っていません。

【手順3】グラフデータウィンドウに必要項目を入力する

グラフデータウィンドウに項目名や数値を入力することで、グラフが生成されます。

入力の基本ルール

• 列（縦方向）：項目名（カテゴリ）を入力
• 行（横方向）：数値データを入力

Microsoft ExcelやGoogle スプレッドシートに近い感覚で操作でき、以下のショートカットを使うと入力がスムーズです。

• Tabキー：右のセルへ移動
• returnキー/Enterキー：下の行へ移動

【手順4】「適用」をクリックして生成

入力が完了したら、ウィンドウ右上にある「チェックマーク」をクリックしてください。

これでアートボード上のグラフに数値が反映されます。

もし、数値が反映されない場合は、以下の点を確認してください。

• 「チェックマーク」を押し忘れていないか
• 全角数字が混ざっていないか
• 不要な空白セルが意図せず入っていないか

Illustratorの生成AIでグラフ用素材を作る

Bのグラフで使用した温度計のイラストは、Illustratorの生成AI機能「ベクターを生成」で作成しています。

この機能を使えば、データの意味を補足するモチーフを短時間で用意できます。

また、生成されるデータは「ベクター形式」のため、拡大・縮小しても画質が劣化せず、色や線の太さなどを後から自由に変更できるのも大きなメリットです。

「AIが作ったものをそのまま使う」だけでなく、まずは表現のたたき台として生成し、不要な要素を削ったり色味を調整したりすると、利用シーンに合わせた最適なバランスに仕上げられます。

それでは、「ベクターを生成」機能を使ってグラフ用素材を作成する手順を解説します。

【手順1】土台となる図形を描く

まずは、生成したいサイズに合わせて四角形などの図形を描きます。

図形なしでも生成できますが、アウトプットの精度を上げるなら、仕上がりサイズをAIに伝えるための図形をあらかじめ用意しておくのがオススメです。

【手順2】設定画面を開く

先ほど作成した図形を選択した状態で、「オブジェクト」メニューから「生成」＞「ベクターを生成」をクリックして設定画面を開きます。

【手順3】モデルを設定し、プロンプトを入力

モデルの種類はアドビモデルに加え、他社製のパートナーモデルも利用できます（※Illustrator v28.6以降が対象です）。

今回は、パートナーモデル「Gemini 2.5 (Nano Banana)」を使用します。

次に、作成したいイメージを言葉にし、「プロンプト」欄に入力します。

今回は「シンプルな温度計　目盛りは無し」としました。

プロンプトに正解はないので、ぜひ、いろいろ試してみてください。

【手順4】詳細設定でテイストを整える

より理想の仕上がりに近づけるため、以下の詳細設定を行います。

コンテンツの種類

「アイコン」を選択します。
これはアイコンそのものを作りたいというより、グラフィックをシンプルに仕上げるための設定です。

ディテール

スライダーを「最低」に調整します。

「どの程度細かく描写するか」の設定のため、今回のようにシンプルにしたい場合は、低めに設定するほうが適しています。

効果

表現の方向性を決める項目です。

今回は過度な立体感を抑えた「フラットデザイン」を使用し、文字通りフラットな印象に仕上げます。

カラーとトーン

「カラープリセット」を使うと、「白黒」「落ち着いたカラー」など、プリセットに応じて配色が自動で整います。

今回は、黒の輪郭線と赤の温度計にしたかったため、「カラー数」を「2」にし、「カラーを指定」で「黒」と「赤」を選択しました。

すべての設定が完了したら「生成」ボタンをクリックします。

オリジナルのグラフィックをグラフに適用する方法

生成AIで作ったイラストや自作のグラフィックをグラフの「棒」として使うには、Illustratorの「グラフのデザイン」という機能を使って登録する必要があります。

一度登録してしまえば、数値を書き換えるだけでイラストの長さが自動で変わる「カスタムグラフ」がカンタンに作れるようになります。

【手順1】グラフィックをデザインとして登録する

まずは、作成したグラフィックを「グラフ用のパーツ」として認識させます。

登録したいグラフィックを選択した状態で、「オブジェクト」メニューの「グラフ」＞「デザイン…」を開きます。

「グラフのデザイン」ダイアログで「新規デザイン」をクリックすると、一覧に「名称未設定のデザイン」が追加されます。

必要に応じて、「名前を変更」をクリックし、後で見てわかりやすい名称（例：温度計）にしておきましょう。

伸縮しても変形しないグラフを作成する方法（ガイドの活用）

通常の設定でデザインを適用すると、数値（棒の長さ）に合わせてイラスト全体が無理やり伸び縮みしてしまいます。

例えば、温度計の丸い部分が楕円形に歪んでしまうといった現象です。

このような現象を防ぎ、特定の場所だけが伸びるように設定するには、登録前に「伸縮を想定したガイド」を作成しておくのがポイントです。

【手順1】伸縮させたい範囲に直線を引き、線をガイド化する

デザインを登録する前に、イラストの中で「伸び縮みしても形に影響がない部分」の上下を横切るように、「直線ツール」で水平線を2本描きます。

次に、描いた2本の線を選択し、「表示」メニューの「ガイド」＞「ガイドを作成」をクリックしてガイド化します。