Webサイト制作において、Photoshop（フォトショップ）はデザインカンプ作成や画像加工に欠かせないツールです。しかし、初期設定のまま使っていたり、便利なショートカットキーを知らなかったりすると、思わぬところで時間を取られてしまうこともあります。
この記事では、Web制作者やWebサイト運営を始めたばかりのあなたが、Photoshopでの作業効率を格段にアップさせるための「環境設定」と、覚えておきたい「厳選ショートカットキー」をご紹介します。
※本記事のショートカット表記は、macOS（Mac）を基準に解説しています。
まず行いたい「環境設定」
Photoshopを開いたら、まずは作業しやすいように環境設定を見直しましょう。（ショートカットキー: Command + K）
単位・定規 (Command + K → 「単位・定規」)
Webデザインはピクセル（px）単位で進めるのが基本です。設定を「px」に統一しておきましょう。
- 定規: px
- 文字: px
グリッド (Command + K → 「グリッド」)
デザインのレイアウトを整えるためにグリッドを活用します。Webデザインでは8の倍数（または4の倍数）がよく使われるため、以下のように設定しておくと便利です。
- グリッド線: 16px
- 分割数: 4
※設定後、グリッドを表示させるには、画面最上部のメニューバー「表示」→「表示・非表示」→「グリッド」にチェックを入れます。
作業効率が上がる「レイヤーパネル」設定
レイヤーパネルの表示も見直しましょう。レイヤーが増えてくると、どのレイヤーに何があるか分かりにくくなります。
レイヤーパネル右上のメニュー（4本線のアイコン）をクリックし、「パネルオプション」を選択。「サムネールの内容」を「レイヤー範囲のみを表示」に変更します。
※デフォルト設定（アートボード全体）では、オブジェクトが小さい場合にサムネイルでレイヤーの内容が確認しづらいため、この設定がおすすめです。
覚えておきたい厳選ショートカットキー
Photoshopには無数のショートカットがありますが、まずはWeb制作で特によく使うものから覚えていきましょう。
ツールの切り替え
ツールの切り替えは、基本的にキーボードのキー（アルファベット）を押すだけです（Commandキーは不要）。
また、同じツールアイコンに格納されている別のツール（例えば「長方形ツール」と「楕円形ツール」）を切り替えたい場合は、Shiftキーを押しながら該当のキーを押します。
| キー | ツール名 | 解説 |
|---|---|---|
V |
移動ツール | オブジェクトを移動させます。オプションバーの「自動選択」にチェックを入れておくと便利ですが、チェックがなくてもCommandキーを押しながらクリックすれば自動選択されます。 |
Z |
ズームツール | 虫眼鏡マークに切り替わり、クリックした箇所を基準にズームイン・アウトできます。（Optionキーを押しながらクリックでズームアウト） |
U |
シェイプツール | 長方形ツールが基本です。Shift + Uで円や多角形などに切り替えられます。 |
T |
テキストツール | 文字を入力する際に使います。 |
M |
選択範囲ツール | 長方形選択ツールが基本です。画像の一部を選択する際に使用します。 |
C |
切り抜き / スライスツール | 画像の切り抜き（トリミング）や、Web用に画像を分割するスライスツールです。Shift + Cで切り替えられます。 |
Space |
手のひらツール | Spaceキーを押しっぱなしにしている間だけ、手のひらツールに切り替わります。拡大表示中に、表示範囲を上下左右に移動させたい時に非常に便利です。 |
その他よく使う操作
ツール切り替え以外にも、覚えておくと格段にスピードが上がる操作です。
| ショートカット | 操作内容 | 解説 |
|---|---|---|
Command + D |
選択範囲を解除 | 選択範囲ツール（M）などで作成した点線の選択範囲を解除します。 |
Command + H |
表示・非表示の切り替え | ガイド、バウンディングボックス（オブジェクト選択時の枠線）など、「表示」メニューでチェックを入れている補助的な表示を一括で表示・非表示に切り替えます。デザインをシンプルに確認したい時に便利です。 |
Command + 1 (or 0) |
表示倍率の変更 | Command + 1は「100%表示（ピクセル等倍）」、Command + 0は「ウィンドウサイズに全体を表示」します。 |
Command + : |
ガイドの表示・非表示 | 引いたガイドラインだけを表示・非表示にします。 |
Option + Command + : |
ガイドのロック・解除 | ガイドラインを誤って動かさないようにロックしたり、編集するために解除したりします。 |
Option + Command + Shift + W |
書き出し形式 | アートボードやキャンバス全体を画像として書き出す（PNG, JPGなど）際の詳細設定画面を開きます。 |
Option + Command + Shift + S |
Web用に保存（従来） | スライスツールで分割した画像パーツを書き出す際などに使う、従来の保存画面です。 |
まとめ
今回は、Photoshopの作業効率を上げるための環境設定とショートカットキーをご紹介しました。
特にショートカットキーは、自転車の乗り方やスポーツのフォームのように、頭で考えるよりも「手が覚えている」状態になるのが理想です。最初は面倒に感じるかもしれませんが、意識して使い続けることで、Webデザインのスピードは格段に向上します。
まずは、あなたが「よく使う操作」からショートカットキーに置き換えてみてください。
よくある質問（FAQ）
Q. Windows版のショートカットキーはどうなりますか？
A. 基本的に、MacのCommandキーはWindowsのControlキーに、MacのOptionキーはWindowsのAltキーに置き換えて使用できます。例えば、環境設定はControl + K、選択範囲の解除はControl + Dとなります。
Q. グリッド設定を「16px」「分割数 4」にするのはなぜですか？
A. これは「4pxグリッド」または「8pxグリッド」と呼ばれる、Webデザインで一般的なルールに基づいています。要素のサイズや余白（マージン・パディング）を4や8の倍数で設計することで、デザイン全体に一貫性が生まれ、整って見えるようになります。グリッドを16px（4の倍数であり8の倍数でもある）に設定し、分割数を4（16 ÷ 4 = 4）にすることで、4px単位でのデザインがしやすくなります。
Q. ショートカットキーが多すぎて覚えられません。コツはありますか？
A. 一度にすべてを暗記しようとする必要はありません。まずは、あなたが最も頻繁にマウスで操作している作業（例えば「移動ツール（V）」と「テキストツール（T）」の切り替え、「手のひらツール（Space）」での移動など）を3〜5個だけ選び、それを徹底的にショートカットキーで実行するように意識してみてください。それに慣れたら、次の3〜5個を覚える、というように段階的に進めるのがおすすめです。