Illustratorの基本・ベクターとは
ベクターとビットマップの違い
| 比較項目 | ベクター（Illustrator） | ビットマップ（Photoshop） |
|---|---|---|
| データの仕組み | 数式でパスや形を記述 | ピクセル（点）の集合 |
| 拡大時の品質 | 劣化なし（どんな大きさでも綺麗） | 拡大するとぼやける（ジャギー） |
| ファイルサイズ | 比較的小さい | 画像サイズに比例して大きい |
| 向いている用途 | ロゴ・アイコン・イラスト・印刷物 | 写真・テクスチャ・Web画像 |
ロゴはベクターで作成するのが絶対条件
名刺からビルボードまで様々なサイズで使われるロゴはベクター形式（.ai / .eps / .svg）で作成・保管することが必須。JPGやPNGのビットマップロゴは引き伸ばすと品質が落ちる。
Illustratorの画面構成
ツールバー（左）
選択・ペン・図形・テキスト・塗りつぶしなどの描画ツール。Vで選択ツール、Pでペンツール
コントロールパネル（上）
選択中のオブジェクトに応じてX・Y・W・H・塗り・線などが変わる
アートボード（中央）
実際の制作エリア。印刷や書き出しの範囲を示す白い矩形。複数同時作成可能
パネル群（右）
レイヤー・スウォッチ・文字・整列・パスファインダーなどの機能パネルが並ぶ
アートボードと基本図形ツール
| ツール | ショートカット | コツ |
|---|---|---|
| 長方形ツール | M | Shiftで正方形、クリックでサイズ数値入力 |
| 楕円形ツール | L | Shiftで正円 |
| 多角形ツール | — | ドラッグ中に↑↓キーで辺数変更 |
| 線分ツール | \ | Shiftで水平・垂直・45度固定 |
オブジェクトの操作
- グループ化（
Cmd+G）— 関連オブジェクトをひとまとめに。ダブルクリックで個別編集モード - 整列・分布（
Shift+F7）— 「アートボードに整列」で基準揃え - バウンディングボックス — ハンドルをドラッグして拡大縮小。Shiftで縦横比固定
線幅も一緒に拡大される設定を確認する
オブジェクトを拡大する際、デフォルトでは線幅も一緒に拡大される。線幅を固定したまま拡大したい場合は、環境設定の「一般」→「線幅と効果を拡大縮小」のチェックを外すこと。
- ベクターは数式でパスを描くため拡大しても劣化しない。ロゴ・アイコンに最適
- ビットマップはピクセルの集合で写真・テクスチャに向いている
- 基本図形はShiftで正円・正方形、ドラッグ中の↑↓キーで辺数変更できる
- 整列パネルの「アートボードに整列」でオブジェクトをアートボード基準に揃える
パス・ベジェ曲線
ペンツールとアンカーポイント
ペンツール（P）はIllustratorの核心的なツール。クリックでコーナーポイント、ドラッグでスムーズポイント（曲線）を作成します。
アンカーポイント
パスの形を決める制御点
ハンドル
曲線の方向と強さを制御するバー。ドラッグで曲率を調整
コーナーポイント
ハンドルが独立して動く。鋭い角を作る
スムーズポイント
ハンドルが対称に動く。滑らかな曲線を作る
パスの編集と複合パス
- ダイレクト選択ツール（
A）でアンカーポイントを個別選択 - ペンツールでパス上をクリックしてアンカーポイントを追加・削除
- アンカーポイントの切り替えツールでコーナー↔スムーズを切り替え
- 複合パス（
Cmd+8）で穴あき形状・文字抜きロゴを作成
- ペンツールでクリック=コーナーポイント、ドラッグ=スムーズポイントを作成
- ダイレクト選択ツール（A）でアンカーポイントとハンドルを個別編集
- 複合パスで穴あきや複雑な形状を作ることができる
テキスト・カラー・効果
文字ツールとアウトライン化
- 文字ツール（
T）でクリックするとポイント文字、ドラッグするとエリア文字を作成 - アウトライン化（
Cmd+Shift+O）— テキストをパスに変換。フォントがないPC環境でも見た目を保持 - 文字タッチツール — 文字1文字ずつを個別に移動・回転・拡大
アウトライン化は元に戻せない
アウトライン化するとテキストをパスに変換してしまうため、テキストの編集ができなくなる。作業ファイルはアウトライン前のものを必ず保存しておくこと。
スウォッチとグラデーション
- スウォッチパネル — よく使うカラーを登録して再利用
- グローバルカラー — スウォッチを1か所変更するとドキュメント全体に反映
- 線形グラデーション — グラデーションパネルで作成。角度・カラー停止点を設定
アピアランスパネルを活用する
アピアランスパネルでは、1つのオブジェクトに複数の塗り・線・効果を重ねて適用できる。元のパスを壊さずに見た目を変えられるのが最大の特徴。
- アウトライン化でテキストをパスに変換し、フォント依存をなくす（元ファイルは必ず残す）
- グローバルカラースウォッチで全体のカラー変更を一括管理できる
- アピアランスパネルで複数の塗り・線・効果を1オブジェクトに重ねられる
ロゴ・アイコン制作・書き出し
ロゴデザインの流れ
- コンセプト・キーワードを言語化する
- 鉛筆でラフスケッチを複数案作成する
- Illustratorでベクターデータ化する
- カラーバリエーション（カラー・白・黒）を用意する
- 使用用途別（Web・印刷・白背景・暗背景）で書き出す
SVG書き出しと印刷用データ
- SVG書き出し — 「スクリーン用に書き出し」（
Cmd+Option+E）からSVGを選択 - Webバナー — 72ppi・RGB。アートボードサイズを最初に決める
- 印刷用データ — 300ppi・CMYK。塗り足し（3mm）と文字の安全エリアを設定
ロゴは3つのバリエーションを用意する
①カラー版 ②白抜き版（暗背景用）③モノクロ版（白黒印刷用）の3種類を用意しておくと、あらゆる使用場面に対応できる。
- ロゴはカラー・白・黒の3バリエーションと用途別書き出しを用意する
- アイコンはSVGで書き出すことでWebで拡大しても綺麗に表示される
- 印刷用データはCMYK・300ppi・塗り足し3mmの設定を忘れずに