MacでWeb制作するなら覚えておきたいショートカット集｜VS Code・Chrome・Claude Codeまで効率化

Web制作をしていると、コードを書く以外にも、

• ブラウザを確認する
• 修正箇所を探す
• ファイルを開く
• スクリーンショットを撮る
• ChatGPTへ画像を貼る
• VS CodeとChromeを切り替える
• キャッシュを無視して再読み込みする
• Claude Codeの処理完了を待つ

といった細かな操作を何度も繰り返します。

1回あたり数秒でも、毎日何十回、何百回と行えば大きな差になります。

この記事では、MacでWeb制作をする際に特に使用頻度が高いショートカットを、Mac・Chrome・VS Code・Finder・ターミナル・Claude Codeに分けてまとめます。

各アプリの詳しい使い方や設定方法は、それぞれ別の記事で詳しく紹介します。

まず覚えておきたいWeb制作ショートカット

最初に、特に使用頻度が高いものをまとめます。

まずはこのあたりを自然に使えるようになるだけでも、Web制作の操作はかなりスムーズになります。

Macの基本ショートカット

Web制作では、アプリ間の移動やスクリーンショットの使用頻度がかなり高くなります。

コピー

Command + C

選択した文字やファイルをコピーします。

基本中の基本ですが、コード・URL・ファイル名・エラーメッセージなど、Web制作では常に使います。

貼り付け

Command + V

コピーした内容を貼り付けます。

元に戻す

Command + Z

コードを間違えて変更したときなどに使用します。

やり直す

Command + Shift + Z

Command + Z で戻しすぎたときに使います。

すべて選択

Command + A

テキストやファイルをまとめて選択できます。

アプリを切り替える

Command + Tab

Chrome、VS Code、ChatGPT、Finderなどをすばやく切り替えられます。

Web制作では、

VS Code
↓
Chrome
↓
ChatGPT
↓
VS Code

という移動を頻繁に行うため、使用頻度の高いショートカットです。

スクリーンショットをクリップボードへコピー

Command + Shift + Control + 4

Web制作では特に便利なショートカットです。

通常の、

Command + Shift + 4

ではスクリーンショットがファイルとして保存されます。

そこに Control を追加すると、画像を保存せずクリップボードへ直接コピーできます。

そのまま、

Command + V

でChatGPTやSlackなどへ貼り付けられます。

例えば、

表示が崩れている部分をスクショ
↓
ChatGPTを開く
↓
Command + V
↓
原因を相談

という使い方ができます。

不要なスクリーンショットファイルが増えないのもメリットです。

Chromeでよく使うショートカット

Web制作ではChrome DevToolsを頻繁に使用します。

DevToolsを開く

Command + Option + I

HTML・CSS・JavaScriptなどを確認できます。

要素選択モード

Command + Option + C

対象要素を直接クリックして、HTMLや適用されているCSSを確認できます。

例えば、

Command + Option + C
↓
対象の見出しをクリック
↓
Stylesを確認

という流れで使います。

Consoleを開く

Command + Option + J

JavaScriptエラーを確認するときに便利です。

GSAP、Splide、Lenisなどが正常に動かない場合は、まずConsoleを確認します。

通常リロード

Command + R

ページを再読み込みします。

キャッシュを無視して再読み込み

Command + Shift + R

CSSやJavaScriptを修正したのに変更が反映されない場合に便利です。

修正
↓
アップロード
↓
Command + Shift + R

という流れで使います。

閉じたタブを復元

Command + Shift + T

誤って閉じたWordPress管理画面や参考サイトをすぐ復元できます。

アドレスバーへ移動

Command + L

現在のURLをコピーするときにも便利です。

Command + L
↓
Command + C

でURLをコピーできます。

Chrome DevToolsでページ全体をスクリーンショット

DevToolsを開いた状態で、

Command + Shift + P

を押すとコマンドメニューが開きます。

そこで、

スクリーンショット

と入力します。

ページ全体を保存する場合は、

「フルサイズのスクリーンショットをキャプチャ」

を選択します。

操作は、

Command + Option + I
↓
Command + Shift + P
↓
「スクリーンショット」
↓
フルサイズのスクリーンショットをキャプチャ

です。

Webサイト全体のデザイン確認や修正チェックに便利です。

VS Codeでよく使うショートカット

VS Codeでは、ファイルやコードを探す操作をショートカット化すると特に効率が上がります。

ファイルを検索

Command + P

ファイル名を入力するだけで直接開けます。

例えば、

header.php

style.css

functions.php

などです。

プロジェクト全体を検索

Command + Shift + F

プロジェクト内すべてのファイルから文字列を検索できます。

例えば、

.global-nav

get_field(

wp_enqueue_script

などを探すときに便利です。

現在のファイル内検索

Command + F

指定した行へ移動

Control + G

例えばClaude Codeから、

header.css の1284行目

と指定された場合、その行へ直接移動できます。

コマンドパレット

Command + Shift + P

VS Codeのさまざまな操作を検索できます。

例えば、

• Reload Window
• Format Document
• Keyboard Shortcuts
• Git関連

などです。

同じ文字列を複数選択

Command + D

同じクラス名などをまとめて変更するときに便利です。

行を上下に移動

Option + ↑

Option + ↓

HTMLやCSSの順番変更に使います。

行を複製

Shift + Option + ↓

同じHTML構造などを複製するときに便利です。

コメントアウト

Command + /

現在行または選択した行をコメントアウトできます。

エディターを左右分割

標準では、

Command + \

です。

VS Codeでは、エディターを左右に分割して複数ファイルを同時に確認できます。

例えば、

左：HTML
右：CSS

や、

左：functions.php
右：single.php

のように並べて作業できるため、HTMLとCSSを見比べたり、WordPressのテンプレートと functions.php を同時に確認したいときに便利です。

MacのJISキーボードで反応しない場合

VS Codeの「エディターを分割」は標準では Command + \ ですが、MacのJISキーボードでは ¥ キーが IntlYen として認識され、反応しない場合があります。

その場合は、VS Codeのキーボードショートカット設定で Split Editor を検索し、Command + ¥ を割り当てれば使えるようになります。
対象のコマンドの上で右クリックして、「キーバインドを変更する」から変更してください。

標準ショートカットがない操作は自分で設定する

すべての操作に使いやすいショートカットが用意されているわけではありません。

頻繁に使う操作は、自分でショートカットを設定するのがおすすめです。

例えばVS Codeの、

Developer: Reload Window

は、通常、

Command + Shift + P
↓
Reload Window
↓
Enter

と操作します。

頻繁に使う場合は、VS Codeのキーボードショートカット設定から、

Command + Option + R

など、自分が押しやすいキーへ割り当てておくと便利です。

同様に、

• Reload Window
• Split Editor
• Format Document
• Terminal
• Git関連

など、よく使う操作は自分用にカスタマイズするとさらに効率化できます。

Finderでよく使うショートカット

指定したフォルダへ移動

Command + Shift + G

パスを直接入力して移動できます。

例えば、

/Users/ユーザー名/.claude/

のような隠しフォルダを開く場合にも便利です。

隠しファイルを表示

Command + Shift + .

以下のようなファイルを表示できます。

.htaccess

.env

.git

Web制作ではかなり使用頻度の高い操作です。

Quick Look

対象ファイル上で、

Space

ファイルを開かずにプレビューできます。

画像・PDF・動画などを確認するときに便利です。

ターミナルでよく使う操作

実行中の処理を停止

Control + C

ローカルサーバーや長時間処理を停止するときに使用します。

過去のコマンドを呼び出す

↑
↓

以前実行したコマンドを再利用できます。

例えば、

python3 -m http.server 8000

のようなコマンドを毎回打ち直す必要がありません。

入力補完

Tab

長いファイル名やパスを補完できます。

行頭へ移動

Control + A

行末へ移動

Control + E

ターミナルで長いコマンドを修正するときに便利です。

Claude Codeは完了通知を設定すると便利

Claude Codeへ複数ファイルの調査や修正を任せると、処理に少し時間がかかることがあります。

その間ずっとVS Codeを見ている必要はありません。

Claude CodeのHooksを使えば、

Claude Codeへ作業依頼
↓
Chromeやメールなど別作業
↓
作業完了
↓
Macに通知
↓
VS Codeへ戻る

という使い方ができます。

例えば、

• 作業完了 → Glass音
• 確認・許可待ち → Ping音

のように通知音を分けることもできます。

macOS側の通知を「バナー」ではなく「通知パネル」にしておけば、自分で閉じるまで通知を残すこともできます。

Claude CodeのHooks設定や ~/.claude/settings.json の具体的な設定方法は、別記事で詳しく紹介します。

左手デバイスや多ボタンマウスへの登録も便利

ショートカットはすべて暗記する必要はありません。

使用頻度の高い操作は、

• 左手デバイス
• マクロパッド
• 多ボタンマウス

などに割り当てる方法もあります。

例えば、

などです。

特に、標準ショートカットが押しにくい操作は、左手デバイスへ登録すると使いやすくなります。

Web制作ではショートカットを組み合わせて使う

単体で覚えるより、作業の流れとして覚えると定着しやすくなります。

CSSの表示がおかしい場合

Command + Option + C
↓
対象要素を選択
↓
CSSを確認
↓
Command + P
↓
対象ファイルを開く
↓
Command + F
↓
クラスを検索
↓
修正
↓
Command + S
↓
Command + Shift + R

ChatGPTへ表示崩れを相談する場合

Command + Shift + Control + 4
↓
問題箇所を選択
↓
ChatGPT
↓
Command + V

Claude Codeへ修正を任せる場合

Claude Codeへ修正依頼
↓
別の作業を進める
↓
完了通知
↓
VS Codeへ戻る
↓
修正内容を確認

このように、ショートカット単体ではなく作業フロー全体を短くすることが重要です。

まとめ

Web制作の効率化というと、新しいアプリやAIツールに目が向きがちですが、毎日繰り返す基本操作を短縮するだけでも作業速度はかなり変わります。

特に、

• スクリーンショットを直接ChatGPTへ貼る
• Chrome DevToolsで対象要素をすぐ確認する
• VS Codeでファイルやクラスをすぐ検索する
• 強制リロードですぐ表示確認する
• Claude Codeの完了を通知で受け取る

といった操作は、日常的なWeb制作と相性が良いです。

また、標準ショートカットを覚えるだけでなく、

「頻繁に使うのにショートカットがない操作は、自分で設定する」

という考え方もおすすめです。

VS Codeの Reload Window や、JISキーボードで使いにくい Split Editor などは、自分が押しやすいキーや左手デバイスへ割り当てることでさらに快適になります。

すべてを一度に覚える必要はありません。

まずは、自分が1日に何度も行っている操作からショートカット化するのがおすすめです。

All topics