Sponsored Link
Illustratorを使用してウェブデザインの制作を行う場合に頻繁に使用するショートカットの紹介です。
Illustratorでのウェブデザイン制作作業の流れ
まずIllustratorでウェブデザイン制作する場合の作業の流れを確認します。
- ファイルを作成
- ガイドを引く
- デザインを作る
- 保存する
基本的にはウェブデザインだからと言って特別な工程はなく一般的なファイル作成の流れと同じです。
ショートカットの紹介
ファイルを作成・保存・閉じる
| 目的 | ショートカット | 上部メニューから |
|---|---|---|
| 新規ファイルを作成 | Crtl + N | ファイル > 新規 |
| 保存 | Crtl + S | ファイル > 保存 |
| 閉じる | Crtl + W | ファイル > 閉じる |
| 終了 | Crtl + Q | ファイル > 終了 |
ガイドを引く
| 目的 | ショートカット | 上部メニューから |
|---|---|---|
| ガイドを作成 | オブジェクトを選択してCrtl + 5 | 表示 > ガイド > ガイドを作成 |
| ガイドをロック | オブジェクトを選択してAlt + Crtl + : | 表示 > ガイド > ガイドをロック |
| ガイドを隠す | オブジェクトを選択してCrtl + : | 表示 > ガイド > ガイドを隠す |
ツールを駆使してデザインを作る
| 目的 | ショートカット | ツール名 |
|---|---|---|
| キャンバスを拡大 | Ctrl + Space + 拡大したい部分をクリック | ズームイン(拡大)ツール |
| キャンバスを縮小 | Ctrl + Alt + Space + 縮小したい部分をクリック | ズームアウト(縮小)ツール |
| キャンバスを移動 | Space + ドラッグ | 手のひらツール |
| 目的 | ショートカット | ツールパネルアイコン |
|---|---|---|
| 選択ツール | V | ![]() |
| ダイレクト選択ツール | A | ![]() |
| 目的 | ショートカット | ツールパネルアイコン |
|---|---|---|
| ペンツール | P | ![]() |
| 長方形ツール | M | ![]() |
| 楕円形ツール | L | ![]() |
| 直線ツール | ¥ | ![]() |
| 目的 | ショートカット | ツールパネルアイコン |
|---|---|---|
| 横書き文字ツール | T | ![]() |
| 目的 | ショートカット | ツールパネルアイコン |
|---|---|---|
| 回転ツール | R | ![]() |
| リフレクトツール | O | ![]() |
| 目的 | ショートカット | ツールパネルアイコン |
|---|---|---|
| シェイプ形成ツール | Shift + M | ![]() |
| 線幅ツール | Shift + W | ![]() |
| ブレンドツール | W | ![]() |
| 目的 | ショートカット | ツールパネルアイコン |
|---|---|---|
| スポイトツール | I | ![]() |

![Illustratorでのウェブデザイン制作によく使うショートカット[随時更新]](https://webcre8tor.com/wp-content/uploads/2024/09/share.png)
















