INDEX
目次
前の章に戻る1章：Illustratorの基本操作
この章では、Illustratorの基本的なインターフェースと操作方法を理解することで、簡単なデザイン制作ができるようになることを目的とします。
この章のゴール
- Illustratorの基本的なインターフェースと操作方法を理解する
- Illustratorで簡単なデザイン制作ができるようになる
【1-0】新規ドキュメント作成時のサイズ選択ガイド
目安の学習時間：30分
Illustratorでデザインを始める際、最初に迷うのが新規ドキュメントのサイズ選択ではないでしょうか。
用途に合った適切なアートボードサイズを選ぶことは、効率的な作業と最終的な出力品質に直結します。
用途に合った適切なアートボードサイズを選ぶことは、効率的な作業と最終的な出力品質に直結します。
用途別のドキュメントサイズ
Illustratorで新規ドキュメントを作成する際に表示されるプリセットは、大きく分けて以下のカテゴリに分類されます。
印刷（プリント）
- 用途: 名刺、チラシ、ポスターなど、印刷物として出力する場合。
-
ポイント:
- カラーモード: 必ずCMYKカラーを選びます。
- 裁ち落とし（塗り足し）: 印刷時のズレを防ぐため、3mm程度を設定しましょう。
- よく使うサイズ: A4 (210 x 297 mm)
Web（Web）
- 用途: Webサイトのバナー、SNS投稿画像、ブログのアイキャッチなど、ディスプレイ上で表示されるデザイン。
-
ポイント:
- カラーモード: 必ずRGBカラーを選びます。
- 単位: 基本的にピクセル（px）を使います。
- よく使うサイズ: 1920 x 1080 px（一般的なPC画面サイズ）
モバイル（Mobile）
- 用途: スマートフォンやタブレットのアプリUI、スマートフォン向けバナーなど、モバイルデバイス向けのデザイン。
-
ポイント:
- カラーモード: RGBカラー
- 単位: ピクセル（px）
- よく使うサイズ: 1080 x 1920 px（一般的なスマートフォンの縦長サイズ）
ビデオとフィルム（Film & Video）
- 用途: 動画編集ソフトに取り込む背景画像やテロップ、アニメーション素材など、映像作品で使用するデザイン。
-
ポイント:
- カラーモード: RGBカラー
- 単位: ピクセル（px）
- よく使うサイズ: HDTV 1080p（1920 x 1080 px）
アートとイラスト（Art & Illustration）
- 用途: デジタルアート、イラスト、アイコンなど、特定の出力先が決まっていない、または多目的に使用されるデザイン。
-
ポイント:
- カラーモード: 最終用途に応じて RGBカラー または CMYKカラー。
- 単位: 自由に設定できますが、迷ったら ピクセル（px） がおすすめです。
- 最初におすすめのサイズ: 1000 x 1000 px（正方形で扱いやすい）
【1-1】インターフェース概要
目安の学習時間：30分
ワークスペースの基本構成
Illustratorを起動すると、最初に目にするのがワークスペースです。
効率的に作業を進めるために、まずはその基本構成を理解しましょう。
効率的に作業を進めるために、まずはその基本構成を理解しましょう。
1.メニューバー（画面上部）
- ファイルの保存や書き出しなど、基本的な操作コマンドが配置されています。
- 「ファイル」「編集」「オブジェクト」などのメニューがあります。
2.ツールパネル（画面左端）
- デザイン作成に使用する様々なツールが配置されています。
- 選択ツール、ペンツール、図形ツールなどが含まれます。
3.作業エリア（中央の広いスペース）
- 実際にデザインを作成する白い領域（アートボード）があります。
- グレーの部分はペーストボードと呼ばれ、一時的な作業スペースとして使用できます。
4.パネル群（画面右端）
- レイヤー、カラー、パスファインダーなど、様々な機能パネルが配置されています。
- 必要に応じて表示/非表示の切り替えが可能です。
※ メニューバーの「ウィンドウ」からパネルを表示することができます（詳しくは次のパートで解説）
パネルとツールの概要
よく使用するパネルとツールを見ていきましょう。
パネルの表示方法
- メニューバーの「ウィンドウ」を選択すると、パネルとして表示できる機能の一覧が表示されます。
- クリックするとパネルが表示されます。
- 使用頻度が高いと思うものはパネル群に格納しすぐに使用できるようにしておくと効率化につながります。
- 下の画像は、よく使うパネルです。
- パネルを長押しして任意の場所へドラッグアンドドロップすることで、自分の好きな位置に移動することができます。
- 教材内の動画では、既にパネルが表示された状態で操作することが多いため、ご自身の画面にパネルが見当たらない場合は、メニューバーの「ウィンドウ」から表示させましょう。
主要なパネル
- レイヤーパネル：オブジェクトの重なり順を管理
- カラーパネル：色の作成と編集
※ ダブルクリックをするとピッカーが表示されます。
- パスファインダー：図形の合成や分割
- プロパティ：選択したオブジェクトの属性を編集
基本的なツール
- 選択ツール（V）：オブジェクトの選択と移動
- 直接選択ツール（A）：アンカーポイントの編集
- 長方形ツール（M）：四角形の作成
- 楕円形ツール（L）：円や楕円の作成
アートボードの概念と操作
アートボードとは、印刷やWeb用のデザインを作成する際の「キャンバス」のような役割を果たします。
アートボードの特徴
- 複数のサイズや向きのアートボードを1つのファイル内に作成可能
- 各アートボードに名前を付けて管理できる
- 書き出し時に個別に選択可能
基本操作
- アートボードの作成：アートボードツール（Shift + O）を選択
- サイズ変更：アートボードツールでエッジをドラッグ
- 向きの変更：プロパティパネルで縦横を切り替え
作業動画
確認問題とまとめ
【1-2】基本図形の作成と編集
目安の学習時間：30分
図形ツールの使い方
Illustratorでは、様々な基本図形を簡単に作成できます。
基本図形の種類と作成方法
長方形ツール（M）
1.クリック＆ドラッグで作成
2.Shiftキーを押しながらで正方形に
楕円形ツール（L）
1.クリック＆ドラッグで作成
2.Shiftキーを押しながら正円に
多角形ツール
1.クリック＆ドラッグで作成
2.上下矢印キーで辺の数を変更
直接選択ツールと選択ツール
これら2つの選択ツールの違いと使い分けを理解しましょう。
直接選択ツール（A）の特徴
・オブジェクトの一部分だけを選択可能
・アンカーポイントやパスの編集に使用
・より細かい調整ができる
選択ツール（V）の特徴
・オブジェクト全体の選択・移動・拡大縮小に使用
・複数オブジェクトの一括選択が可能
マウスを長押し後ドラッグして点線の四角でオブジェクトを囲う
マウスを長押し後ドラッグして点線の四角でオブジェクトを囲う
・任意のオブジェクトを選択したい場合は、Shiftキーを押しながらクリックをする
・回転の操作もできる
オブジェクトの複製と整列
効率的にデザインを作成するための基本操作を学びましょう。
オブジェクトとは、Illustratorのアートボード上で扱う図形やテキスト、画像など、すべての要素を指す言葉です。
オブジェクトとは、Illustratorのアートボード上で扱う図形やテキスト、画像など、すべての要素を指す言葉です。
オブジェクトの複製方法
以下のオブジェクトの複製方法に使い慣れましょう。
1.Alt（Option）キーを押しながらドラッグ
2.Ctrl（Command）+ C でコピー、Ctrl（Command）+ V でペースト
3.Ctrl（Command）+ D で直前の操作を繰り返す
繰り返しのショートカットは、均等な間隔で複製でき、効率的なデザイン作業が可能になります。
繰り返しのショートカットは、均等な間隔で複製でき、効率的なデザイン作業が可能になります。
整列パネルの使用方法
整列パネルは、オブジェクトを水平方向・垂直方向に揃えたり、均等配置するためのツールです。
例えば、ボタンを等間隔に並べたり、ロゴやテキストを中央に配置する際に便利です。デザインのバランスを整えるために頻繁に使用されます。
例えば、ボタンを等間隔に並べたり、ロゴやテキストを中央に配置する際に便利です。デザインのバランスを整えるために頻繁に使用されます。
・水平方向の整列（左揃え、中央揃え、右揃え）
・垂直方向の整列（上揃え、中央揃え、下揃え）
・均等配置（オブジェクト間の間隔を均等に）
確認問題とまとめ
【1-3】カラーとスウォッチ
目安の学習時間：30分
カラーモードの理解（RGB/CMYK）
デザインの用途に応じて、適切なカラーモードを選択することが重要です。
RGB
用途：Web・映像などのパソコンのディスプレイで表示する
用途：Web・映像などのパソコンのディスプレイで表示する
特徴
- RGBモードは、光の三原色と呼ばれる「レッド」「グリーン」「ブルー」の3色の組み合わせで色を生成する方式です。
- 黒い背景にこの3色の光を当てることで色を作り出します。
- それぞれの色は0から255までの数値で表す256段階の明るさの情報を持ち、この範囲で3色を組み合わせると、合計で約1677万色を表現することができます。
CMYK
用途：印刷物として出力する。
用途：印刷物として出力する。
特徴
- CMYKモードは、印刷物で使用される「シアン」「マゼンタ」「イエロー」「ブラック」の4色のインクを重ねることで色を生成する方式です。
- 白い紙にインクを重ねていくことで色を作り出します。
- CMYKで表現できる色の範囲は、RGBよりも狭いため、ディスプレイで発色された鮮やかな色が印刷物では再現できないことがあります。
- このため、印刷の仕事では、意図した色で出力されるように、デザイン段階での調整が必要となります。
カラーパネルの活用
カラーパネルを使用して、思い通りの色を作成しましょう。
カラーパネルの基本操作
・カラースライダーの調整
・カラー値の数値入力
※動画ではChromeの拡張機能を使用して、Webサイトで使用されているカラー値を抽出しています。
・カラーピッカーの使用
カラーピッカーを使用することで、パレットから自分の望む色を視覚的に選択できます！
カラーピッカーを使用することで、パレットから自分の望む色を視覚的に選択できます！
カラー設定のポイント
-
プロセスカラーと特色:
- プロセスカラー (CMYK): 一般的なフルカラー印刷用
- 特色 (スポットカラー): 蛍光色・金・銀・高彩度色など特定色の正確な再現に使用
- WEB以外ではブランドカラーや特殊な色に特色を使用
-
グローバルカラー:
- スウォッチに登録した「編集可能な色」で、変更すると適用済みの全オブジェクトが自動更新され作業効率が上がります。
スウォッチの作成と管理
よく使用する色をスウォッチとして保存し、効率的に管理しましょう。
スウォッチの作成手順
1.カラーパネルで色を作成
2.スウォッチパネルにドラッグ＆ドロップ
3.名前をつけて保存
「グローバル」にチェックを入れておくと、後からそのスウォッチの色を変更した際に、適用されている全てのオブジェクトの色が一括で更新されるため、効率的な色管理ができます。
「グローバル」にチェックを入れておくと、後からそのスウォッチの色を変更した際に、適用されている全てのオブジェクトの色が一括で更新されるため、効率的な色管理ができます。
スウォッチの管理方法
・フォルダによる分類
・カラーグループの作成
・スウォッチライブラリの活用
確認問題とまとめ
【1-4】レイヤーの基本
目安の学習時間：30分
レイヤーパネルの使い方
レイヤーを使用することで、オブジェクトを整理して管理できます。
レイヤーパネルの基本機能
・レイヤーの作成と削除
・レイヤーの表示/非表示
・レイヤーのロック/アンロック
レイヤーの階層構造
- レイヤー間の移動方法
- あるレイヤー上のオブジェクトを、別のレイヤーへ移動させることができます。
- オブジェクトをクリックすると、レイヤーの右側に「色のついた四角」が表示されます。
- その四角を長押しして移動したいレイヤーへドラッグして、移動先のレイヤー色の四角が表示されたタイミングでマウスから指を離すと移動が完了します。
- 親レイヤーと子レイヤー
- 親レイヤーは、他のレイヤー（子レイヤー）をグループ化して整理するためのフォルダのような役割を果たします。
- 親レイヤーの表示/非表示を切り替えると、その中の全ての子レイヤーも同時に表示/非表示になります。
- 子レイヤーは親レイヤー内に配置される従属レイヤーで、親レイヤーを展開すると表示されます。
- 子レイヤーは親の影響を受けながらも、個別に編集や操作が可能です。
- この階層構造により、複雑なイラストの要素を論理的に整理でき、作業効率が向上します。
- グループ化されたオブジェクト
- 制作を進めると様々なパーツを作成しますが、1つ1つのオブジェクトはまとまりを持っていないので（バラバラ）、選択をするときに1つ1つ選択をする必要があり操作が非常に大変です。
- グループ化をすることで、複数のオブジェクトを一つのまとまりとして扱えるようになり、選択や移動といった操作がしやすくなります。
- グループ化は、複数のオブジェクトを「1つのまとまり」として扱う機能です。グループ化することで、移動・編集が楽になります。
- 操作方法は、グループ化したいオブジェクトを複数選択を行いControl（Command）+ Gのショートカットを押します。
レイヤーの整理と名前付け
効率的な作業のために、レイヤーを整理しましょう。
レイヤーの命名規則
- 内容がわかる具体的な名前を付けましょう。（例：「レイヤー1」や「グループ1」のままにしない）
- 例：背景・文字・画像
- 番号やプレフィックス(接頭辞)の活用：プレフィックスに背景や文字、画像を入れて役割を明確にし詳細内容を続ける
- 例：背景_グラデーション・文字_見出し1・画像_写真
- 共同作業を考慮した命名：命名方法に一貫性を持たせ、選択したオブジェクトがどんな内容なのかが把握しやすくする
- 例：背景_グラデーション（ピンク）・背景_グラデーション（緑）・背景_カラー（白）・文字_見出し1・文字_見出し2・文字_リード文（共通）
レイヤーの整理方法
- 種類ごとのグループ化
- ボタン
- ナビ
- 文字と写真
- 文字と図形
- 目的別による並び順
- 前面：ボタン（配置しやすくするため）
- 中間：メインのコンテンツに含まれるもの（画像やテキスト）※背景より前に配置する必要があるため
- 背面：背景・装飾・アイコン（誤操作を防ぐため）
- テンプレートの活用
- テンプレートの機能はトレースの作業を行うときに役に立ちます。
- レイヤーオプションでテンプレートに設定を行う
- 濃度の設定で色を薄くすることができ、表示されていても印刷などの対象にならないので誤操作防止できます
レイヤーの結合とロック
レイヤーの高度な操作方法を学びましょう。
レイヤーの結合
複数のレイヤーを1つのレイヤーにまとめることを「レイヤー統合」といいます。
操作では、「レイヤー1」に「レイヤー2」と「レイヤー3」を統合しました。
ただし、統合されたオブジェクトがグループ化されていた場合、そのグループは維持されます。
操作では、「レイヤー1」に「レイヤー2」と「レイヤー3」を統合しました。
ただし、統合されたオブジェクトがグループ化されていた場合、そのグループは維持されます。
- 複数レイヤーの選択
- レイヤーパネルメニューから「レイヤーを結合」を選択
- 結合後の確認
レイヤーのロック機能
ロックは、レイヤー全体をロックとレイヤーの中にあるオブジェクトごとにロックすることもできます。
- 誤操作防止のための活用
- 背景レイヤーを作成した場合を例にすると、背景のオブジェクトはアートボード全体に配置されるため選択操作をするときに誤操作で位置がズレる可能性があります。
- ロックをかけておくことで誤操作を防止することができます。
- 部分的なロック
- レイヤー3に新しいオブジェクトを足して、2つのオブジェクトを配置します。
- 新しいオブジェクトのみ動かないようにロックをかけたい場合は、オブジェクト個別に選択してロックをかけることができます。
- ショートカットは Control（Command）+2 です。
- テンプレートレイヤーの設定
- テンプレートレイヤーは基本的にロックをしておくレイヤーですが、位置や大きさの調整をしたい場合はロックを解除して編集できます。
- バナーやロゴをトレースする時などに役立ちます。
確認問題とまとめ
【1-5】演習課題-基本図形を使ったデザイン制作
目安の学習時間：60分
このセクションでは、これまでの学習事項を活かして、複数カラーのカメラアイコンを作成します。
基本図形を使用したシンプルなアイコン作成
これまで学んだ基本操作を活かして、シンプルなアイコンを作成してみましょう。
まずは基本図形だけを使って「カメラ」のアイコンを作ります。
まずは基本図形だけを使って「カメラ」のアイコンを作ります。
作業手順
1.新規ドキュメントを作成します。（サイズ：500×500px、カラーモード：RGB）
2.長方形ツール（M）で本体を作成します。
3.楕円形ツール（L）でレンズを作成します。
4.小さな長方形でシャッターボタンを作成します。
（その前に、本体とレンズを選択し、整列パネルを使ってアートボードの中央へ配置しておきましょう。）
（その前に、本体とレンズを選択し、整列パネルを使ってアートボードの中央へ配置しておきましょう。）
5.全体のバランスを調整しましょう。
調整が完了したら、オブジェクトやグループに名前をつけましょう。
調整が完了したら、オブジェクトやグループに名前をつけましょう。
カラースウォッチを活用したバリエーション展開
作成したアイコンに、スウォッチを活用して複数のカラーバリエーションを適用してみましょう。
作業手順
1.カラーパネルで3〜4色を選びスウォッチへ登録します。
2.各色をスウォッチグループに保存します。
3.アイコンのパーツごとに色を適用します。
4.複数のバリエーションを作成します。
- アートボードの複製を行います。
- アートボードツールを選択してAlt (Option)キーを押しながらドラッグ ※ ロックがかかっているオブジェクトは複製ができないので全てロック解除をする
・新しい色をスウォッチへ登録する。
・スウォッチライブラリーの色をスウォッチに登録する
選定が難しい場合はAdobe Colorなどを活用しましょう。
選定が難しい場合はAdobe Colorなどを活用しましょう。
・色を適用する。
アイコンの各パーツを選択し、作成したスウォッチの色を適用してみてください。
Alt (Option)キーを押しながらドラッグすればコピーを作成できるので、複数のバリエーションを効率的に作れます。
Alt (Option)キーを押しながらドラッグすればコピーを作成できるので、複数のバリエーションを効率的に作れます。
レイヤーを活用した制作
作成したアイコンのパーツをレイヤーで整理し、管理しやすい状態にしましょう。
作業手順
- レイヤーパネルを開きます
- パーツごとにレイヤーを分けます（本体、レンズ、ボタンなど）
- 各レイヤーに適切な名前を付けます
- 関連するパーツをグループ化します
これで、後から修正が必要になった場合でも、対象のパーツがどこにあるか一目でわかるようになります。
実際に自分のファイルのレイヤーを整理してみましょう。
実際に自分のファイルのレイヤーを整理してみましょう。
作業画面
確認問題とまとめ
これで「1章：Illustratorの基本操作」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。