VS Codeのショートカット大全がわかる！WindowsとMacでの設定方法やトラブル解決法も徹底ガイド

VS Codeで毎日作業しているのに、カーソル移動や選択を矢印キーとマウスで繰り返しているなら、すでにかなりの時間を失っています。しかも、ある日突然ショートカットが効かない、コメントアウトできない、設定が消えた…このどれか一つでも起きると、納期と集中力が一気に削られます。本記事は、よくある「ショートカット一覧」の焼き直しではありません。WindowsとMacのショートカット30選でまず作業を加速しつつ、カテゴリ別のチートシート、コメントアウトやカーソル移動の実務テク、そして「効かない・消える」を前提にしたトラブル診断と設定運用まで一気通貫で押さえます。HTMLやWordPressの編集、マルチカーソルや矩形選択、Emmet連携、キーボードショートカットのカスタマイズと同期までを一つのロードマップとして整理しているため、「VSCode ショートカット一覧」「ショートカット効かない」で何度も検索して回る必要がなくなります。この記事を読み切る頃には、矢印キーに頼らず、PCを替えても迷わず、チームでも再現できるVS Code環境が手元に残ります。

VS Codeのショートカットを知らないと損する！あなたが毎日どこで時間を失っているのか？
まずはこれだけ！覚えておきたいVS Codeのショートカット30選（WindowsとMacどちらでも対応）
カテゴリ別で探せるVS Codeショートカット一覧「困ったときに即解決」のために
コメントアウトができない・解除もできない時こそ！VS Codeショートカットを再確認しよう
VS Codeでショートカットが効かない・消えてしまう時の「トラブル診断チェックリスト」
ショートカット設定やカスタマイズも自在！VS Codeのキーボードショートカットをあなたの味方に
HTMLやWordPressのコーディング現場で本当に役立つVS Codeのショートカット活用法
矢印キーはもう不要！？カーソル移動術でマルチカーソルや矩形選択も自在に
現場で効いてる！VS Codeのショートカット学習ロードマップでスキルアップ
この記事を書いた理由

VS Codeのショートカットを知らないと損する！あなたが毎日どこで時間を失っているのか？

「今日はコードを書いたはずなのに、振り返ると“カーソルを動かしていただけ”で終わっていた」
そんな感覚があるなら、すでにかなりの時間をキーボードとマウスの往復に溶かしています。私の視点で言いますと、このロスは残業や納期遅れよりも静かに効いてくる“見えない赤字”です。

毎日のカーソル移動や選択操作が思わぬボトルネックになる理由

HTMLやPHP、JavaScriptを書いている時間より、カーソル移動や選択、コピー&ペーストに使っている時間の方が長い人は珍しくありません。
1操作あたりの差は1秒ですが、1日数百回、月間で見ると数時間分の手残りを失っています。

よくある操作をざっくり分解すると、次のようになります。

カーソルを次の単語や行の先頭へ移動
範囲選択して削除・インデント調整
コメントアウトや一括編集のためのマルチカーソル設定
ファイル間の移動や定義へのジャンプ

これを矢印キーとマウスで行うか、CtrlやCmd、Opt、Shiftを組み合わせたショートカットで行うかで、1回あたり3〜5アクションの差が出ます。
Web担当者やエンジニアで、1日8時間VSCodeを開いているなら、カーソル操作だけで「1時間分の集中力」を失っている計算になりやすいのです。

マウス頼みの編集がWeb担当者やエンジニアの生産性を削る落とし穴

企業内のWeb担当やマーケ担当の現場を見ると、次のようなパターンが頻発します。

LPのテキスト修正に、実作業10分・カーソル移動とスクロール15分
WordPressのテンプレート編集で、マウス操作に気を取られてタグを消すミスが増える
画面スクロールとファイル切り替えのたびに手が止まり、作業の集中状態がリセットされる

マウスに手を伸ばすたびに、視線と意識が「エディタ」から「画面全体」へ広がり、集中が途切れます。
特にWindowsとMacを両方使う人は、CtrlとCmd、AltとOptの違いでさらに混乱しやすく、同じ操作を探すだけで頭を使ってしまう状態に陥りがちです。

このロスは、単純な時間だけでなく次の点でも痛手になります。

レビューやペアプロで、相手のPC操作が遅くて議論のテンポが落ちる
Zoom画面共有で「ちょっと待ってください」が増え、会議が長引く
マウス操作に慣れた担当者が増え、教育コストが下がらない

ショートカットを「個人の好み」で済ませてしまうと、チーム全体の作業効率やレビュー品質まで巻き込んで落としてしまうのが怖いところです。

VS Codeで作業効率を爆上げするための3つの視点で理解する（操作・設定・運用）

時間を取り戻すには、「便利なキーを覚える」だけでは足りません。現場で結果が出ている人は、次の3つのレイヤーをまとめて設計しています。

視点	目的	具体例
操作	1アクションを最小化	コメントアウト、行移動、マルチカーソル、矩形選択、検索置換
設定	自分の手と配列に合わせる	WindowsとMacのキー対応、JIS/US配列、キーバインド変更、初期化
運用	チームとPCをまたいで再現する	キーボードショートカットのエクスポート、同期、推奨セットの共有

この3つを押さえると、次のような変化が起きます。

Web更新やHTML編集の「よくある作業」を3〜5倍速で終わらせられる
Macへ乗り換えても、キー対応表とわずかな設定変更で数日以内に以前のスピードを再現できる
ショートカットが効かない、消える、コメントアウトできないといったトラブルも、原因を切り分けて即座に解決できる

特に、CtrlやCmdが効かない、Alt＋Shift＋Fで整形できない、F5で実行できないといった相談は現場で非常に多く、「設定と運用」を前提にしていないことがほぼ原因です。

次のセクション以降では、この3つの視点を軸に、まず覚えるべき30個のキーから、トラブル診断、設定のエクスポート、HTMLやWordPress現場での具体的な使いどころまで、一気に駆け上がれるロードマップとして整理していきます。ショートカットを「暗記科目」から、「自分の作業フローをデザインする武器」に変えていきましょう。

まずはこれだけ！覚えておきたいVS Codeのショートカット30選（WindowsとMacどちらでも対応）

毎日3時間コードを書く人が、マウス操作を1割ショートカットに置き換えるだけで、1週間で丸1時間分の「手残り時間」が生まれます。ここでは、Web担当者とエンジニアが最初の3日で覚えるべき30個に絞り込みました。

私の視点で言いますと、「全部覚えよう」とせず、まずこの30個だけを指に染み込ませることが、作業効率を爆発的に上げる近道です。

保存や取り消し・検索など基本的な操作を網羅するショートカット

まずはどの言語でも共通で使う、超基礎セットです。ここをマウスでやっていると、1日中ブレーキを踏みながら走っているような状態になります。

保存
- Windows: Ctrl + S
- Mac: Cmd + S
元に戻す / やり直し
- Windows: Ctrl + Z / Ctrl + Y
- Mac: Cmd + Z / Cmd + Shift + Z
検索 / 置換
- ファイル内検索: Ctrl + F / Cmd + F
- 置換: Ctrl + H / Cmd + Opt + F
- ワークスペース全体検索: Ctrl + Shift + F / Cmd + Shift + F
ファイル操作
- 新規ファイル: Ctrl + N / Cmd + N
- ファイルを開く: Ctrl + O / Cmd + O
- 上書き保存して閉じる: Ctrl + W / Cmd + W
コマンドパレット
- すべての機能にアクセス: Ctrl + Shift + P / Cmd + Shift + P

この10個を「マウス禁止」で1日使うだけで、VSCodeの体感速度が一段階変わります。

コメントアウトや行移動・マルチカーソルなど編集に欠かせないショートカット集

HTMLやPHP、JavaScriptを編集する人にとっては、ここが本命ゾーンです。コメントアウトとカーソル移動が遅いと、レビュー前の微修正で毎回つまずきます。

コメントアウト
- 行コメントのトグル:
  - Windows: Ctrl + /
  - Mac: Cmd + /
- ブロックコメントのトグル（複数行に便利）:
  - Windows: Shift + Alt + A
  - Mac: Opt + Shift + A
行のコピー / 削除 / 移動
- 行コピー: Shift + Alt + ↓ / Opt + Shift + ↓
- 行削除: Ctrl + Shift + K / Cmd + Shift + K
- 行の上下移動: Alt + ↑↓ / Opt + ↑↓
インデント調整
- インデントを増やす: Ctrl + ] / Cmd + ]
- インデントを減らす: Ctrl + [ / Cmd + [
マルチカーソル / 選択
- 次の同じ単語を追加選択: Ctrl + D / Cmd + D
- カーソルを上下に追加:
  - Windows: Alt + Ctrl + ↑↓
  - Mac: Opt + Cmd + ↑↓
- 行全体を選択: Ctrl + L / Cmd + L

マルチカーソルと矩形選択を組み合わせると、「同じ位置のクラス名を一気に変更する」といったWeb制作あるある作業が、一瞬で片付きます。

サイドバーから統合ターミナルまで画面を自在に切り替えるショートカット

カーソル移動だけでなく、画面切り替えがマウス頼みのままだと、せっかくのショートカット効果が半減します。ファイルツリーやターミナルへ素早くフォーカスを移動しましょう。

サイドバー関連
- エクスプローラー表示: Ctrl + Shift + E / Cmd + Shift + E
- 検索ビュー表示: Ctrl + Shift + F / Cmd + Shift + F
- サイドバー表示切替: Ctrl + B / Cmd + B
統合ターミナル
- 表示 / 非表示トグル: Ctrl + / Cmd +
- ターミナルにフォーカス: 同上でOK
エディタ分割・グループ移動
- エディタを左右に分割: Ctrl + \ / Cmd + \
- 次のエディタグループへジャンプ: Ctrl + K → Ctrl + →
  / Cmd + K → Cmd + →
全画面・パネル切替
- パネル（ターミナル/出力）の表示切替: Ctrl + J / Cmd + J
- ズームに近いエディタ最大化: Ctrl + K → Ctrl + M
  / Cmd + K → Cmd + M

画面レイアウト操作を覚えると、WordPressテンプレートを左で開き、右でCSSを確認するといった「比較しながらの編集」が一気に快適になります。

WindowsとMacのキー対応表で乗り換えや両環境利用もストレスなし

WinとMacで一番つまずきやすいのが、CtrlとCmd、AltとOptの違いです。ここを頭ではなく「指の感覚」で対応させると、両環境を行き来しても迷子になりません。

役割	Windowsキー	Macキー
基本ショートの主役	Ctrl	Cmd
サブ機能・マルチカーソル	Alt	Opt
シフト操作	Shift	Shift
システム系	Win	Ctrl
コピー	Ctrl + C	Cmd + C
ペースト	Ctrl + V	Cmd + V
検索	Ctrl + F	Cmd + F
全選択	Ctrl + A	Cmd + A

特に、Macへ乗り換えた直後は「Ctrl + Cでコピーできない」というストレスが頻発します。上の対応表を1週間デスクに貼っておき、意識的にCmdへ置き換えていくと、WindowsとMacの両方で同じスピード感を維持できるようになります。

カテゴリ別で探せるVS Codeショートカット一覧「困ったときに即解決」のために

「今この操作だけ知りたい」に応えるには、カテゴリ別で探せることが重要です。実務では Editing / Selection / Search / Navigation / Display を押さえておくと、Web制作もコーディングも一気に快適になります。

私の視点で言いますと、「どのカテゴリの操作か」を意識して覚えた人ほど、あとから応用が利きます。

ここでは代表的なショートカットを、WindowsとMacの両方で整理します。

カテゴリ	よく使う操作	Win	Mac
Editing	行のコピー	Shift+Alt+↓	Shift+Opt+↓
Editing	行の削除	Ctrl+Shift+K	Cmd+Shift+K
Selection	行選択	Ctrl+L	Cmd+L
Selection	すべて選択	Ctrl+A	Cmd+A

EditingやSelectionのマスター術：行選択と複数選択・矩形選択の総まとめ

編集系は、「行単位」「単語単位」「ブロック単位」で考えると整理しやすくなります。

行の複製
- Win: Shift+Alt+↓ / ↑
- Mac: Shift+Opt+↓ / ↑
行の移動
- Win: Alt+↓ / ↑
- Mac: Opt+↓ / ↑
単語単位の選択拡張
- Win: Ctrl+D
- Mac: Cmd+D

矩形選択（縦方向の選択）は、HTMLクラス名の一括編集やテーブルの列編集で真価を発揮します。

矩形選択開始
- Win: Alt+ドラッグ
- Mac: Opt+ドラッグ

SearchやReplaceでファイルやワークスペース全体を一気に検索・置換

Web担当者が「同じ文言を10ページ直す」場面では、検索と置換の使い分けが作業時間を半分以下にします。

ファイル内検索
- Win: Ctrl+F
- Mac: Cmd+F
置換
- Win: Ctrl+H
- Mac: Cmd+Opt+F
ワークスペース全体検索
- Win: Ctrl+Shift+F
- Mac: Cmd+Shift+F

パターンで覚えると楽になります。

状態	操作	ショートカット
開いているファイルだけ探したい	検索	Ctrl+F / Cmd+F
プロジェクト全体を探したい	グローバル検索	Ctrl+Shift+F / Cmd+Shift+F
一括で書き換えたい	検索＋置換	Ctrl+H / Cmd+Opt+F

Navigationによるカーソル移動：定義ジャンプや編集箇所間の高速移動

マウスでファイルタブを行き来していると、1日で数百回クリックしてしまいます。Navigationを使えば、「いま集中していた場所」へ一瞬で戻ることができます。

定義へ移動
- Win: F12
- Mac: F12
直前の場所へ戻る
- Win: Alt+←
- Mac: Ctrl+-
次の場所へ進む
- Win: Alt+→
- Mac: Ctrl+Shift+-

関数やテンプレートの定義を行き来する習慣をつけると、コードリーディングの速度が一段上がります。

Displayやグループ表示の操作でエディタ分割やパネル管理を究める

画面の使い方が下手だと、せっかくの大きなディスプレイが「巨大なメモ帳」で終わってしまいます。エディタ分割とパネル切り替えを押さえると、HTML・CSS・ブラウザ検証を同時に見るスタイルが楽になります。

サイドバー表示切り替え
- Win: Ctrl+B
- Mac: Cmd+B
統合ターミナル表示
- Win: Ctrl+`
- Mac: Ctrl+`
エディタを縦に分割
- Win: Ctrl+\
- Mac: Cmd+\
エディタグループ間のフォーカス移動
- Win: Ctrl+1/2/3
- Mac: Cmd+1/2/3

実務では、次のようなレイアウトが鉄板です。

左グループ: テンプレートファイル（PHPやHTML）
右グループ: CSSやJS
下パネル: ターミナルと問題タブ

このレイアウトにショートカットで一瞬でフォーカス移動できるようにしておくと、レビューやデバッグ時のストレスが目に見えて減ります。

コメントアウトができない・解除もできない時こそ！VS Codeショートカットを再確認しよう

「さっきまで動いていたコメントアウトが突然効かない」
納期前の夜にこれが起きると、心臓に悪いレベルの冷や汗が出ます。コメントアウトはHTMLやPHP、JavaScriptのデバッグで最も触る機能のひとつです。ここが不安定だと、作業スピードだけでなく、バグ混入リスクも一気に跳ね上がります。

私の視点で言いますと、コメントアウト周りのトラブルは「操作ミス3割・設定と環境7割」です。まずは正しいショートカットと動作を押さえたうえで、原因を冷静に切り分けていきましょう。

単一行と複数行のコメントアウトショートカット、それぞれの動作の違い

単一行と複数行で、使うコマンドも動き方も変わります。ここを混同すると「効かない」と感じやすくなります。

種類	Windows / Linux	Mac	主な動作
行コメントのトグル	Ctrl + /	Cmd + /	選択行の先頭に // や // を付け外し
ブロックコメントのトグル	Shift + Alt + A	Opt + Shift + A	/ / やで囲む

ポイントは「トグル」かどうかです。行コメントのトグルは、同じショートカットでコメントと解除を切り替えます。一方、ブロックコメントは範囲選択が前提で、HTMLやCSSのようにコメント構文が異なるファイルではエディタが自動判定します。

よくある勘違いは次の2つです。

何も選択していないのにブロックコメントを実行して「動かない」と思う
複数行を選択せず、カーソルだけ置いている状態で「全部まとめてコメントされない」と感じる

選択状態とコメントの種類を意識するだけで、挙動の9割は説明がつきます。

コメントアウトのショートカットが動かない時の原因（キーバインド競合や拡張機能など）

ショートカットが本当に反応していない場合、現場で多いのは次の4パターンです。

他のキーバインドに上書きされている
拡張機能が同じキーを奪っている
キーボード配列（JIS / US）と設定がズレている
OS側や常駐アプリが先にキーを拾っている

まずはキーボードショートカット画面を開き、コマンドを検索します。

Windows / Linux: Ctrl + K → Ctrl + S
Mac: Cmd + K → Cmd + S

検索欄に「toggle line comment」と入力し、現在のキー割り当てを確認してください。意図しないキーになっている場合は、右クリックでキーバインドの削除を行い、改めて希望のキーを設定します。

チェックポイント	見る場所	具体的な確認内容
キーバインド競合	キーボードショートカット	同じキーが複数コマンドに割り当てられていないか
拡張機能の影響	拡張機能一覧	一時的に無効化して再テスト
キーボード配列	設定 → keyboard layout	JIS / USの設定が実機と一致しているか
OS・常駐アプリ	OSのショートカット設定	画面キャプチャ、IME切替と衝突していないか

MacでCmd + / が効かないケースでは、入力ソースやIMEのショートカットが原因のことが多く、OS側で変更した途端に安定する、というパターンが目立ちます。

複数行や一括コメントアウトを安全に使いこなす実務テクニック

一括コメントアウトは便利な反面、壊し方も派手です。特にテンプレートファイルやWordPressのループ処理では、1つのコメントミスが画面真っ白につながります。そこで、現場で守っておきたいルールを整理します。

必ず範囲選択を可視化してから実行する
- Shift + 矢印キーで行単位の選択を行い、意図したブロックだけが反転しているか確認します。
コメントアウト前にカーソル位置を覚えておく
- Ctrl + G（Cmd + G）で行番号へジャンプできるようにしておくと、戻る時に迷いません。
マルチカーソルと組み合わせる場合は「列」を意識する
- Alt + クリック（Opt + クリック）やShift + Alt + ドラッグで矩形選択を使い、同じインデントの行だけを狙い撃ちします。
Gitとセットで運用する
- コミット直後に大きめのコメントアウトを行い、動作確認が済んだら不要なコメントを削る、というリズムにしておくと、コメントだらけの読みづらいコードを防げます。

特にWeb担当者やマーケ担当の方がLPを編集する場合、PHPテンプレートや条件分岐の一部だけコメントアウトしたつもりで、実は閉じタグごと無効化してしまう事故が起きがちです。コメント前後でHTML構造が崩れていないか、ブラウザの検証ツールで確認する習慣を付けると、デザイン崩れの早期発見にもつながります。

コメントアウトは、単なる「オンオフのスイッチ」ではなく、デバッグと安全運用の中心にあるアクションです。ショートカットの再確認と環境の整備に一度しっかり時間を投資しておくと、その後の毎日の編集スピードと安心感が別物になります。

VS Codeでショートカットが効かない・消えてしまう時の「トラブル診断チェックリスト」

「さっきまで動いていたCtrl操作が突然無反応」この瞬間に作業リズムが一気に崩れます。ここでは、現場で実際に使っているチェック順序をそのまま診断フローに落とし込みます。

CtrlやCmdのショートカットが動作しない時に最初に確認する3つの設定

まずは深呼吸して、次の3点だけ順番に確認します。8割はここで片付きます。

キーボード自体の状態確認

他アプリ（ブラウザやメモ帳）でCtrl+C / Cmd+Cが動くか
外付けキーボードなら、USBやBluetoothの接続状態

VSCode側のキーバインド確認

メニューから「キーボードショートカット」を開き、検索欄に copy paste などのコマンド名を入力
同じキーに複数のバインドが登録されていないかを確認

エディタフォーカスの確認

サイドバーやターミナルにフォーカスがあると、期待したactionが走らないことがあります
いったんエディタ部分をクリックしてから操作を試します

チェックの順番を決めておくことが、納期前のパニックを防ぐ一番の保険になります。

F5やAlt＋Shift＋Fなど特定ショートカットだけ効かない時の意外な落とし穴

一部のキーだけ反応しない時は、「VSCode以外のルール」が邪魔をしているケースが多いです。

OSレベルのショートカット
- MacのFキーは、デフォルトで画面の明るさや音量などに割り当てられています
- fn + F5 で動くかをまず確認します
他アプリのグローバルショートカット
- スクリーンショットツールや常駐アプリがAlt＋Shift＋Fを先に奪っていることもあります
- 一時的に終了させて挙動を確認します
フォーマッタの設定漏れ
- Alt＋Shift＋Fは「ドキュメントのフォーマット」actionです
- 対象言語にフォーマッタ拡張機能が入っているか
- 設定でeditor.defaultFormatterが指定されているかを確認します

次の表のように、「何が動かないか」で当たりをつけていくと迷いにくくなります。

症状	見るべきポイント
F5だけ効かない	fnキー、OSショートカット設定
Alt＋Shift＋Fだけ効かない	フォーマッタ拡張機能、defaultFormatter
デバッグ系だけ不可	launch設定、ワークスペースフォルダ

キーボード配列（JIS・US）や他の常駐アプリとのショートカット衝突の見極め方

WindowsからMacに乗り換えた直後や、US配列に変えた直後は「押しているキーと表示される文字」がズレて混乱しやすいです。

配列の確認手順
- OSのキーボード設定で、JISかUSかを確認
- VSCodeの右下ステータスバーに出ている言語モードではなく、OS側の配列設定を見ることがポイントです
衝突の見極め方
- キーボードショートカット画面で、上部の「キーボードショートカットを記録」を押してから問題のキーを入力
- どのコマンドに紐づいているか、あるいは何も表示されないかを確認します
- 何も表示されない場合、他アプリやOSで完全に奪われている可能性が高い状態です

配列が絡むトラブルは、「自分だけおかしいのでは」という不安を生みます。あらかじめJISとUSでどこが違うかをチームで共有しておくと、ペア作業時の説明コストも下がります。

ショートカット初期化でも解決しない時の“最後の手段”を伝授

設定のリセットまでやってダメなら、「設定ファイルそのもの」か「拡張機能」が犯人のことが多いです。ここからは少し踏み込んだ対処になります。

拡張機能の一括無効化

拡張機能ビューで、一時的に全てを無効化
その状態でショートカットが動くか確認
問題が解消したら、グループを分けて有効化し、どの拡張が衝突しているかを特定します

ユーザー設定とキーバインドのバックアップ退避

設定フォルダから settings.json と keybindings.json を別名でコピー
一度空の状態にしてVSCodeを再起動し、デフォルト状態で挙動を確認します

ワークスペース設定の見直し

プロジェクト単位の settings.json に、ショートカットに影響する設定が書かれていないかチェック
チーム開発では、ここに知らないうちに制限が追加されていることがあります

私の視点で言いますと、最後の手段は「原因を特定しきる」ことをゴールにするのがおすすめです。再インストールで一時的に直しても、拡張機能や設定を戻した瞬間に再発するケースを何度も見てきました。どこがボトルネックだったかをメモしておくと、次のトラブル時には数分で復旧できるようになります。

ショートカット設定やカスタマイズも自在！VS Codeのキーボードショートカットをあなたの味方に

「なんとなく触っているだけのエディタ」から「手足のように動く相棒」に変えるかどうかは、ショートカット設定をどこまで自分の作業に合わせ込めるかで決まります。ここでは、現場で本当に使われているカスタマイズ術を軸に、迷わず調整できる形に整理します。

ショートカット一覧の表示方法やコマンドパレットの便利な使い方

まずは「どんなコマンドがあるのか」を素早く引ける状態にしておくことが土台になります。

Windows / Mac 共通
- コマンドパレット表示: Ctrl+Shift+P / Cmd+Shift+P
- キーボードショートカット一覧: Ctrl+K → Ctrl+S / Cmd+K → Cmd+S

コマンドパレットは「機能検索エンジン」と考えると分かりやすいです。例えば「行追加」「折りたたみ」など、日本語の一部を入力するだけで関連する editor や workbench のコマンドが候補に出てきます。ショートカットが覚えられない操作は、まずここから実行し、頻度が高いものだけ後でキー割り当てする流れがおすすめです。

ショートカット一覧画面では、上部の検索欄で「comment」「cursor」「multi」などの英単語や、「コメント」「カーソル」など日本語でも絞り込みができます。右側のキーバインド欄をダブルクリックすると、すぐに変更ダイアログが開くので、編集まで一気に進められます。

よく使う操作を自分専用キーに割り当てる具体的な手順とコツ

現場で差がつくのは「自分の手癖に合わせた最小限のカスタマイズ」です。代表的な手順と、やりがちな失敗をまとめます。

キーボードショートカットを開く
検索欄に目的の動作を入力
- 例: マルチカーソルなら「add cursor」、矩形選択なら「column」など
対象コマンドを右クリックして「キーの変更」
実際に割り当てたいキーを押して保存

頻度が高いのにデフォルトが押しづらい操作だけを絞るのがコツです。私の視点で言いますと、Ctrl+Alt や Cmd+Opt のような「親指と薬指の距離が遠い組み合わせ」は、長時間の編集で確実に疲労の原因になります。代わりに、Ctrl+Shift+任意キー など、左右の手でバランスよく押せる組み合わせを優先すると、1日中コーディングしても指の負担がかなり軽くなります。

チーム開発の場合は、以下のように「変えてよい範囲」を先に決めておくとレビューがスムーズです。

領域	方針
保存・検索・実行	デフォルトを全員共通で使用
コメント・整形系	共通ルールがあれば揃える
カーソル移動・選択	各自カスタマイズを許容
デバッグ・ターミナル	担当者だけ追加でカスタム

この線引きをしておくと、画面共有やペアプロ中に「そのキー何？」という会話が激減します。

設定のエクスポート・同期化でPC乗り換えやチーム共有もスマートに

せっかく整えたショートカットが「PC入れ替えで全部消えた」というのは、現場で本当によく聞く悲劇です。設定を資産として扱うために、バックアップと同期の考え方を押さえておきましょう。

ショートカットの実体
- 基本設定: keybindings.json
- GUIでの設定変更も最終的にはここに書き込まれます

最も手軽なのは、VSCode標準の設定同期機能を使う方法です。

ステータスバーのアカウントアイコンから「設定の同期」を有効化
同期対象に「設定」「キーボードショートカット」「拡張機能」を含める
MicrosoftまたはGitHubアカウントでサインイン

これで新しいWindowsやMacでも、サインインするだけで同じショートカットが再現されます。オンプレ環境で同期が使いづらい場合は、keybindings.json をリポジトリに含め、チームの標準セットとして共有する方法も現場ではよく取られます。

ケース	おすすめ運用
個人で複数PCを使う	設定同期をフル活用
チームでルールをそろえたい	`keybindings.json`を共有リポジトリに
客先常駐や貸与PCが多い	最小限セットをメモ＋JSONで持ち歩く

「エディタの設定は環境トラブル時に真っ先に守るべき資産」という意識を持つだけで、PCトラブルや再セットアップのストレスが一段と軽くなります。ショートカットを自分の味方につける一歩は、設定を一度きりの作業で終わらせないことから始まります。

HTMLやWordPressのコーディング現場で本当に役立つVS Codeのショートカット活用法

コーディングが速い人は、特別な才能よりも「指の動き」が整理されています。マウスに手を伸ばす回数を減らし、Ctrl・CmdとEmmetを軸に組み立てるだけで、LP1本分の作業時間が平気で3〜4割変わります。

私の視点で言いますと、HTMLとWordPressの現場では「打たない・探さない・迷わない」ショートカットをどこまで仕込めるかが、生産性の分かれ目です。

ここでは、HTMLとテーマ編集に厳選した“現場で本当に減る”操作だけを扱います。

HTMLのDoctypeや基本構造を一瞬で挿入するショートカットとEmmet活用術

HTMLの最初の10行を手入力しているなら、今日で卒業してしまいましょう。VSCodeでは、Emmetと数個のキー操作でほぼ自動生成できます。

よく使う組み合わせの例

新規ファイル作成
htmlと入力
Tab（もしくはEnter）で展開 → Doctypeとhtml基本構造を一括挿入

この「入力 → 展開」を確実に通すには、以下のキー操作をセットで覚えると安定します。

目的	Windows / Mac 共通	補足
Emmet展開	Tab または Enter	設定で変更されている場合はキーバインドを確認
コマンドパレット表示	Ctrl+Shift+P / Cmd+Shift+P	Emmet設定を変える入口
設定検索	コマンドパレット →「Preferences: Open Settings」	Emmet有効化を確認

HTMLの繰り返し要素でもEmmetは強力です。

例）ul>li.item$*5 → Tab
クラス名付きliが5つ並ぶリストを一瞬で生成できます。LPの料金表や機能一覧の土台作りが、一気に“秒作業”になります。

クラス名やテキストの一括置換でデザイン修正やABテストも高速化

Web担当やエンジニアが地味に時間を溶かしているのが、「同じクラス名やテキストを延々と探しては書き換える」作業です。ここは検索と置換のショートカットで一気に片付けます。

基本の検索・置換

現在ファイル内で検索
- Windows: Ctrl+F
- Mac: Cmd+F
現在ファイル内で置換
- Windows: Ctrl+H
- Mac: Cmd+Opt+F
ワークスペース全体を検索
- Windows: Ctrl+Shift+F
- Mac: Cmd+Shift+F

例えば、CSS側で.btn-primaryを.btn-mainに変えたのに、テンプレート内のクラス変更を忘れている、というミスは頻出です。この場合は「ワークスペース全体検索」でクラス名を洗い出してから置換するのが安全です。

ABテストの文言差し替えも同様です。見出しテキストを検索し、対象LPだけにフィルタをかけて置換すれば、「どこか別のページも書き換えてしまった」という事故を減らせます。

シナリオ	有効なショートカット	現場でのメリット
クラス名変更	全体検索＋置換	CSSとテンプレートの不整合を一掃
ABテスト文言差し替え	ファイル単位の検索置換	テスト期間終了後の戻し漏れを防ぐ
特定テンプレートだけ修正	検索結果でファイルを絞り込む	functions.phpなど別ファイルへの誤爆防止

テンプレートファイルを横並びで比較しながら編集できる画面分割テクニック

WordPress制作で必ずぶつかるのが、「header.phpとsingle.phpを見比べながら修正したい」「functions.phpをチラ見しつつテンプレートを編集したい」という状況です。ここでマウスでタブをドラッグしていると、それだけで数分単位のロスになります。

画面分割まわりの要点

エディタ分割
- Windows: Ctrl+\
- Mac: Cmd+\
隣のエディタグループへカーソル移動
- Windows: Ctrl+1 / 2 / 3
- Mac: Cmd+1 / 2 / 3
現在のファイルを隣のグループへ移動
- コマンドパレット →「View: Move Editor into Next Group」

実務では、次のようなレイアウトが使いやすいです。

左: header.php / footer.php
右上: single.php や page.php
右下: style.css や block用のCSS

スタイル崩れを追うときは、ブラウザでフロントを表示しながら、右側のテンプレートとCSSを上下分割しておくと、「どのテンプレートが効いているのか」「どのクラスで上書きしているのか」を一目で追えます。

作業パターン	分割レイアウト	効率が上がる理由
テンプレート構造の把握	左: index.php / 右: header.php+footer.php	include関係を視覚で理解しやすい
LPテンプレ修正	左: page-lp.php / 右: style.css	デザイン調整の試行回数を増やせる
ブロックテーマ調整	左: block.json / 右: 該当テンプレート	設定と実装のズレをすぐ修正できる

マルチカーソルや矩形選択と組み合わせれば、複数テンプレートに散らばった同じ位置のコードも一気に整形できます。矢印キーでウロウロする時間を編集ロジックの検討に回せるので、結果として「ミスは減るのにスピードは上がる」という、現場目線で理想的な状態に近づいていきます。

矢印キーはもう不要！？カーソル移動術でマルチカーソルや矩形選択も自在に

マウスと矢印キーでちまちま編集していると、LP1本直すだけで平気で30分は溶けます。ここを一気にショートカットに置き換えると、「同じ作業を半分の時間で終える世界」に切り替わります。

マルチカーソルや矩形選択を駆使して同じ位置の文字列を一括編集

クラス名や文言の「ちょっとした差し替え」が多いWeb制作では、マルチカーソルと矩形選択の習熟が生産性の分かれ目です。

代表的な操作をWindows / Macで並べると次のようになります。

アクション	Windows	Mac	よく使う局面
マルチカーソルを下に追加	Ctrl+Alt+↓	Opt+Cmd+↓	同じ列のテキストを縦に修正
マルチカーソルを上に追加	Ctrl+Alt+↑	Opt+Cmd+↑	連番やIDの一括編集
選択中の文字列を次も選択	Ctrl+D	Cmd+D	同じクラス名を順に変更
同じ文字列を一気に選択	Ctrl+Shift+L	Cmd+Shift+L	全ての同名セクションを差し替え
矩形選択（ボックス選択）	Alt+ドラッグ	Opt+ドラッグ	表形式のテキスト編集

特に矩形選択は「テーブル的なHTML」「カラムレイアウト」で威力を発揮します。縦方向に同じ位置の文字を一気に選択して変更できるため、余計なドラッグやBackspaceをほぼ排除できます。

現場でよくやるパターンは次の通りです。

カラムレイアウトのクラスcol-4をcol-3に一括変更
ランキング数字だけを矩形選択し、1〜10をまとめて書き換え
ABテスト用にボタン文言を複数箇所まとめて差し替え

この3つがスムーズにできるだけで、「HTML修正が面倒」という感覚が一段薄れます。

キーボードのみでOK！行や単語をスムーズに移動するカーソル操作パターン集

カーソル移動は、「どの単語までを一息で飛ばすか」をパターン化すると一気に楽になります。

目的	Windows	Mac	ポイント
1文字ずつ移動	← / →	← / →	微調整用に最小限だけ使用
単語単位で移動	Ctrl+← / →	Opt+← / →	クラス名・属性の移動に最適
行頭 / 行末へ移動	Home / End	Cmd+← / →	長い行の編集を瞬時に開始・終了
ページ単位スクロール	Ctrl+PgUp / PgDn	Fn+↑ / ↓ など	行数の大きいCSSで有効
行を上/下へ移動	Alt+↑ / ↓	Opt+↑ / ↓	セクションの並び替えに直結

特に「単語単位の移動」は、カーソルを属性値やテキストの境目に素早く持っていくための必須スキルです。矢印キーを連打する時間が、そのまま残業時間に変換されると思って抑え込んでおきたい部分です。

私の視点で言いますと、まずは「単語移動」「行頭・行末移動」「行の入れ替え」の3つを1セットで体に叩き込むと、エディタ上での迷子状態がほぼ無くなります。

Vim風hjkl操作で矢印キーなしワークスタイルのメリットと注意点

さらに一段上の世界として、Vim風のhjklによるカーソル移動を採用するチームも増えています。専用拡張を導入すると、次のような操作に切り替えられます。

h: 左へ移動
j: 下へ移動
k: 上へ移動
l: 右へ移動
w: 次の単語へジャンプ
b: 前の単語へジャンプ

メリットは明快で、指がホームポジションから一切離れません。矢印キーやマウスに手を伸ばす距離がゼロになるので、1日中コーディングするエンジニアほど差が出ます。

一方で、現場での注意点もはっきりしています。

チーム内でVim派と非Vim派が混在すると、ペアプロ時に操作説明が毎回発生
キーバインドを大きく変えるため、標準ショートカットの学習コストと二重管理になりやすい
Web担当やマーケ担当など、開発専任でないメンバーにはオーバースペックになりがち

そのため、「全員Vim化」ではなく、次のような線引きをおすすめします。

日常的にコードを書くメンバー: Vim拡張でhjkl操作を採用
週数回だけLPやWordPressを触るメンバー: 標準ショートカット＋マルチカーソルに集中

この切り分けをしておくと、「誰かのPCを借りた瞬間に何もできない」といった事故を避けつつ、キーボード中心の高速編集というメリットだけをしっかり享受できます。矢印キーに指を伸ばす回数を、今日から意識して減らしてみてください。作業スピードの変化に、かなり驚くはずです。

現場で効いてる！VS Codeのショートカット学習ロードマップでスキルアップ

「全部覚えよう」として挫折するより、「今日から3日間で人生を変えるキーだけ握る」方が、現場では圧倒的に成果が出ます。

3日で身につく“最小限ショートカット”と1週間で広がる応用セット

まず3日間は、マウス移動を減らすことだけにフォーカスします。

3日で必須（毎分使うレベル）

保存・取り消し・やり直し（Ctrl/Cmd＋S・Z・Y）
行のコピー/カット/削除（Shift＋Alt＋↓、Ctrl/Cmd＋X で行切り取りなど）
コメントアウト切替（Ctrl/Cmd＋/）
検索・置換（Ctrl/Cmd＋F・H）
行移動・インデント（Alt＋↑↓、Ctrl/Cmd＋] [）

4〜7日目で広げる応用セット

マルチカーソル（Alt＋クリック、Ctrl/Cmd＋Alt＋↑↓）
単語単位の選択・移動（Ctrl/Cmd＋←→、Ctrl/Cmd＋D）
画面分割とエディタグループ移動
コマンドパレット（Ctrl/Cmd＋Shift＋P）
ワークスペース全体検索（Ctrl/Cmd＋Shift＋F）

1週間で「カーソル移動と選択はキーボード、細かい位置調整だけマウス」という状態まで持っていくのが、最も失敗しないステップです。

個人だけでなくチームでも揃えておきたいショートカットの決め方

個人最適だけを突き詰めると、ペアプロや画面共有のたびに「そのキー何ですか？」から始まり、レビュー時間がどんどん溶けます。そこで、次の2段構えがおすすめです。

チームで“必ず揃える”領域

コメントアウト
検索・置換
定義ジャンプ・前後の編集箇所へジャンプ
画面分割・ターミナル表示

個人裁量に任せる領域

マルチカーソルの細かい割り当て
矩形選択のキー
vim風 hjkl 操作の有無

下記のように「チーム標準」と「個人カスタム」を明示しておくと、育成や引き継ぎが一気に楽になります。

領域	ルール	目的
コメント関連	チームで統一	レビュー・指示が通じる
検索・置換	チームで統一	ペア作業のスピード確保
移動・選択系	個人カスタム可	生産性の最大化
vimキーバインド	個人カスタム可	好みのワークスタイル維持

開発PCのトラブルや設定飛びにも強くなる“開発環境の守り方”と現場で見た教訓

PC入れ替えやOS再インストールのたびに、「ショートカットが前と違う…」というストレスで1〜2週間ペースが落ちるケースは珍しくありません。私の視点で言いますと、ショートカットは“スキル”ではなく“資産”として管理する意識が重要です。

環境を守る3ステップ

キーボードショートカットの設定を定期的にエクスポート
設定同期機能やGitリポジトリで、設定ファイルをバージョン管理
新しいPCや別拠点に入る前に、「標準キーマップ＋チームルール」をまとめたドキュメントを配布

特にWeb担当者やマーケ担当が複数拠点で作業する場合、settings.jsonとキーバインドのバックアップ有無で、日々の更新速度が目に見えて変わります。ショートカットの学習と同時に、「どう壊れないように守るか」まで設計しておくことが、長期的な生産性アップの決め手になります。

この記事を書いた理由

著者 – 伊藤和則（nextlife事業部責任者）

本記事は生成AIによる自動生成ではなく、業界歴15年の運営責任者の経験に基づき制作しています。ご安心の上閲覧ください。

クライアント企業のWeb担当者やエンジニアと日々向き合う中で、VS Codeを使っているのに、矢印キーとマウス操作だけで毎日何時間も奪われているケースを何度も見てきました。しかも、ある日突然ショートカットが効かない、コメントアウトが動かない、PCを替えたら設定が消えた、といった相談が続くと、現場全体のスピードが一気に落ちます。

私自身もPCのログイン不可や設定飛びを経験し、WindowsとMacを行き来しながら、キーボード配列や常駐アプリの衝突に何度も悩まされてきました。SNS運用やAIマーケティング体制の構築を支援する中でも、ちょっとしたショートカットの差異やトラブルが、納期や成果に直結する場面は珍しくありません。

そこで、本記事では「単なるショートカット一覧」ではなく、実務で本当に使うキー操作を30個に絞り込み、トラブルの起こりやすいポイントと設定運用の守り方までを一つの流れで整理しました。PCを替えても、チームが増えても、迷わず再現できる形でまとめたのは、同じ遠回りをこれ以上してほしくないからです。