Web制作をしていると、同じ操作を一日に何度も繰り返します。
ブラウザのタブを移動する。
ページを更新する。
不要なタブを閉じる。
開発者ツールを開く。
ファイル名を変更する。
一つひとつは数秒にも満たない操作ですが、毎日繰り返していると意外と面倒です。
そこで私は、普段あまり使っていなかったテンキーを左手デバイスとして使うようにしています。
右手はマウス。
左手はテンキー。
数千円~数万円もする左手デバイスを購入しなくても、Windowsで使える「AutoHotkey」を利用すれば、テンキーの各キーに好きな操作を割り当てられます。
今回は番外編として、実際にWeb制作で使っているテンキーの割り当てと、AutoHotkeyの導入方法を紹介します。
使っていないテンキーを、Web制作向けの左手デバイスにしています
Web制作をしていると、ブラウザのタブ移動や更新、開発者ツールの起動、ファイル名変更など、同じ操作を何度も繰り返します。
そこで私は、普段あまり使っていなかったテンキーを左手側に置き、Web制作向けのショートカットデバイスとして使っています。
右手はマウス、左手はテンキー。
Windowsの「AutoHotkey」を使えば、テンキーの各キーに好きな操作を割り当てられます。
実際の配置はこんな感じです。


すべてのキーを同じ頻度で使うわけではありません。
この中でも、特に便利だと感じているのが 4・5・6・8 です。
特におすすめなのは「4・5・6・8」
いろいろな操作を割り当てていますが、その中でも圧倒的によく使うのがこの4つです。


- 4:左のタブへ移動
- 5:ページを更新
- 6:右のタブへ移動
- 8:現在のタブを閉じる
という配置にしています。
Web制作では、WordPressの管理画面、公開ページ、参考サイトなど、複数のタブを行き来する場面がかなり多いです。
この4つをテンキーにまとめておくと、右手をマウスから離さず、左手だけでタブ移動・更新・タブを閉じる操作まで完結します。
特に 4・5・6 が横一列なので、
左へ移動 ← / 更新 / → 右へ移動
という感覚で覚えやすいのも気に入っています。
個人的には、この4キーだけでもテンキーを左手デバイス化する価値があります。
その他のブラウザ操作
4・5・6・8以外にも、Web制作でよく使う操作を割り当てています。


| キー | 操作 |
|---|---|
* | 強制更新(スーパーリロード) |
- | 開発者ツールを開く(F12) |
9 | Ctrlを押しながらクリック(別タブで開く) |
7 | 選択した文字列を新しいタブで検索 |
* には Ctrl + Shift + R を割り当てています。
通常の更新ではキャッシュが残ることがありますが、Web制作ではCSSなどの変更確認で強制更新を使う場面も多いため、通常更新の 5 と使い分けています。
- は F12。
Chromeなどで開発者ツールを開くために使っています。
9 はCtrlを押しながらクリックする操作です。
リンクを新しいタブで開きたいときに使えます。
「7」は選択した文字列をすぐ検索する
7 は少し特殊な割り当てです。
文字列を選択した状態で 7 を押すと、
コピー
↓
アドレスバーへ移動
↓
貼り付け
↓
新しいタブで開く
までを自動で実行します。
分からない単語やサービス名、エラー文などを見つけたときに、文字列を選択して 7 を押すだけです。
元のページを残したまま新しいタブで検索できるので、調べものが多いWeb制作とはかなり相性が良いです。
※WordPressの管理画面内など、「Ctrl + K」にショートカットキーが割り当てられている場合はうまく動きません!
文字編集にも使っています
ラウザ操作だけでなく、文章やコードの編集にも使っています。


| キー | 操作 |
|---|---|
1 | 現在位置から行頭まで選択 |
3 | 現在位置から行末まで選択 |
+ | 全選択して貼り付け |
1 は Shift + Home、3 は Shift + End を実行します。
文章やコードの一部分を削除したり置き換えたりするときに、マウスでドラッグしなくて済むので便利です。
+ は、
Ctrl + A
↓
Ctrl + V
を実行します。
つまり、現在の内容をすべて選択して、そのままクリップボードの内容に置き換えます。
「2」はファイル名変更用
2 は、ファイル名を変更するときに使っています。
押すと、
F2
↓
Ctrl + V
↓
Enter
を自動で実行します。
つまり、
名前変更 → クリップボードを貼り付け → 確定
までを1キーで実行します。
Web制作では画像ファイルの名前を変更する機会も多いので、新しいファイル名をクリップボードにコピーしておけば、テンキーの 2 を押すだけで変更できます。
自分の環境に合わせて変更しているキー
ここまでの設定は比較的そのまま使いやすいものですが、すべてのキーが誰にでも同じように使えるわけではありません。
私の場合、
0Enter/.
は、自分の作業環境に合わせて使っています。
0:エクスプローラーを開く
0 では、Win + 2を実行しています。
Windowsでは Win + 数字 を押すと、タスクバーに固定しているアプリを起動・切り替えできます。
私はタスクバーの左から2番目にエクスプローラーを固定しているため、エクスプローラーのウィンドウがアクティブになります。


そのため、これは厳密には「エクスプローラーを開くコード」ではなく、
タスクバー左から2番目のアプリを開くコードです。
自分のタスクバー配置に合わせて #1、#2、#3 などに変更してください。
Enter:スクリーンショットの保存フォルダを開く
テンキーのEnterには F10 を送信しています。
私の環境では、使用しているスクリーンショットソフト側で F10 に、
スクリーンショットの保存フォルダを開く
操作を設定しています。
スクリーンショットを撮ったあと、そのまま保存画像を開いて、矢印や吹き出しなどを編集しやすくするためです。
ここは使用しているスクリーンショットソフトによって設定が異なります。
/:スクリーンショット機能を起動
テンキーの / は、スクリーンショット機能の起動に使っています。
こちらもAutoHotkey側で共通の操作として決めているものではなく、使用しているスクリーンショットソフト側のショートカット設定によるものです。
使用しているツールに合わせて設定してください。
.:カラーピッカーを起動
. はカラーピッカーの起動に使っています。
Web制作では、
「この色のカラーコードは何だろう?」
という場面がかなりあります。
そのため、テンキーからすぐカラーピッカーを呼び出せるようにしています。
これも、使用しているカラーピッカーソフト側のショートカット設定によって変わります。
AutoHotkeyとは?
ここから実際の導入方法です。
AutoHotkeyは、Windowsのキーボード操作やショートカットを自由にカスタマイズできるツールです。
たとえば、
テンキーの5を押す
という操作を、
F5を押す
という操作に置き換えられます。
さらに、
コピー
↓
アドレスバーへ移動
↓
貼り付け
↓
新しいタブで開く
といった複数の操作を、1つのキーにまとめることもできます。
今回のテンキー左手デバイス化では、このAutoHotkeyを使っています。
AutoHotkeyにはv1とv2がある
導入するときに、1点だけ注意があります。
AutoHotkeyには、大きく分けて
AutoHotkey v1
と
AutoHotkey v2
があります。
v1とv2ではコードの書き方が異なります。
この記事で紹介しているコードは、AutoHotkey v2用です。
これから新しくAutoHotkeyを導入する場合は、v2を使用してください。
すでにAutoHotkey v1を利用している場合は、この記事のコードをそのまま貼り付けても正常に動かない可能性があります。
AutoHotkey v2の導入方法
1. AutoHotkeyをインストールする
まず、AutoHotkeyの公式サイトからAutoHotkey v2をダウンロードしてインストールします。
新しく導入する場合は、v2系を選択してください。
2. AutoHotkey Scriptを作成する
インストールしたら、デスクトップなどで右クリックして、
新規作成 → AutoHotkey Script
を選択します。
名前は何でも構いません。
たとえば、
my-shortcut.ahk
としておくと分かりやすいです。
.ahk がAutoHotkeyのスクリプトファイルです。
3. スクリプトを編集する
作成した .ahk ファイルを右クリックして編集します。
メモ帳でも構いませんし、Visual Studio Codeなどのエディタを使っても構いません。
そこにテンキーのキー割り当てを書いていきます。
実際に使っているAutoHotkeyコード
以下が、今回紹介している割り当てのAutoHotkey部分です。
・特定のソフトやWindowsのタスクバー配置に依存しない部分だけをまとめた、カスタム前提バージョン
・図解と同じ配置にしたい場合の、私が実際に使っている環境依存の設定も含む寺田と同じバージョンも掲載します。
; =========================================================
; Web制作向け テンキー左手デバイス【汎用版】
; AutoHotkey v2
;
; 特定のアプリやWindows環境に依存しない設定だけを
; まとめたサンプルです。
;
; 以下のキーは環境依存のため、このコードには含めていません。
;
; 0 :アプリ起動など
; Enter :任意のソフト操作
; / :任意のソフト操作
; . :任意のソフト操作
;
; 数字キーは、NumLock ON/OFFのどちらでも同じ動作になるよう
; 両方のキー名を登録しています。
; =========================================================
; +:全選択して、クリップボードの内容を貼り付け
NumpadAdd::{
Send "^a" ; Ctrl + A(全選択)
Sleep 100 ; 少し待機(0.1秒)
Send "^v" ; Ctrl + V(貼り付け)
Sleep 100 ; 少し待機(0.1秒)
}
; *:キャッシュを無視して再読み込み
NumpadMult::{
Send("^+R") ; Ctrl + Shift + R
}
; -:開発者ツールを開く
NumpadSub::{
Send("{F12}") ; F12
}
; 9:Ctrlを押しながらクリック
Numpad9::{
Send("{Ctrl down}{Click}{Ctrl up}")
}
; 9(NumLock OFF時)
NumpadPgUp::{
Send("{Ctrl down}{Click}{Ctrl up}")
}
; 4:左のブラウザタブへ移動
Numpad4::{
Send("^+{Tab}") ; Ctrl + Shift + Tab
}
; 4(NumLock OFF時)
NumpadLeft::{
Send("^+{Tab}") ; Ctrl + Shift + Tab
}
; 5:通常の再読み込み
Numpad5::{
Send("{F5}") ; F5
}
; 5(NumLock OFF時)
NumpadClear::{
Send("{F5}") ; F5
}
; 6:右のブラウザタブへ移動
Numpad6::{
Send("^{Tab}") ; Ctrl + Tab
}
; 6(NumLock OFF時)
NumpadRight::{
Send("^{Tab}") ; Ctrl + Tab
}
; 1:現在位置から行頭まで選択
Numpad1::{
Send("+{Home}") ; Shift + Home
}
; 1(NumLock OFF時)
NumpadEnd::{
Send("+{Home}") ; Shift + Home
}
; 3:現在位置から行末まで選択
Numpad3::{
Send("+{End}") ; Shift + End
}
; 3(NumLock OFF時)
NumpadPgDn::{
Send("+{End}") ; Shift + End
}
; 7:選択中の文字列をコピーし、新しいタブで検索
Numpad7::{
Send "^c" ; Ctrl + C(コピー)
Sleep 50 ; 少し待機(50ミリ秒)
Send "^k" ; Ctrl + K(アドレスバーへ移動)
Sleep 100 ; 少し待機(100ミリ秒)
Send "^v" ; Ctrl + V(貼り付け)
Sleep 50 ; 少し待機(50ミリ秒)
Send "!{Enter}" ; Alt + Enter(新しいタブで開く)
}
; 7(NumLock OFF時)
NumpadHome::{
Send "^c" ; Ctrl + C(コピー)
Sleep 50 ; 少し待機(50ミリ秒)
Send "^k" ; Ctrl + K(アドレスバーへ移動)
Sleep 100 ; 少し待機(100ミリ秒)
Send "^v" ; Ctrl + V(貼り付け)
Sleep 50 ; 少し待機(50ミリ秒)
Send "!{Enter}" ; Alt + Enter(新しいタブで開く)
}
; 8:現在のブラウザタブを閉じる
Numpad8::{
Send("^w") ; Ctrl + W
}
; 8(NumLock OFF時)
NumpadUp::{
Send("^w") ; Ctrl + W
}
; 2:名前変更 → 貼り付け → 確定
Numpad2::{
Send "{F2}" ; 名前変更
Sleep 100 ; 少し待機(100ミリ秒)
Send "^v" ; Ctrl + V(貼り付け)
Sleep 100 ; 少し待機(100ミリ秒)
Send "{Enter}" ; 確定
}
; 2(NumLock OFF時)
NumpadDown::{
Send "{F2}" ; 名前変更
Sleep 100 ; 少し待機(100ミリ秒)
Send "^v" ; Ctrl + V(貼り付け)
Sleep 100 ; 少し待機(100ミリ秒)
Send "{Enter}" ; 確定
}
NumLockのON/OFFでも使えるようにする
コードを見ると、
Numpad4
だけでなく、
NumpadLeft
という記述もあります。
これは、テンキーがNumLockの状態によって別のキーとして認識されるためです。
たとえばテンキーの 4 は、NumLockをOFFにすると左矢印として認識されます。
そこで、
Numpad4::{
Send("^+{Tab}")
}
NumpadLeft::{
Send("^+{Tab}")
}
の両方を登録しています。
これによって、NumLockがONでもOFFでも、物理的なテンキーの 4 を押せば左のタブへ移動できます。
0〜9については、この考え方で両方の状態を登録しています。
スクリプトを実行する
コードを書いて保存したら、作成した .ahk ファイルをダブルクリックします。
AutoHotkeyが常駐し、テンキーの割り当てが有効になります。
コードを変更した場合は、現在実行中のスクリプトを再読み込みすると変更内容が反映されます。
Windows起動時に自動で有効にする
毎回スクリプトをダブルクリックするのは面倒なので、問題なく動くことを確認できたらスタートアップに登録しておくと便利です。
Win + R を押して、
shell:startup
と入力します。
Windowsのスタートアップフォルダが開くので、そこに作成した .ahk ファイルのショートカットを置きます。
これでWindowsを起動したときにAutoHotkeyも自動で起動し、テンキーの設定が使えるようになります。
最初から全部設定しなくてもいい
ここまでいろいろ紹介しましたが、最初から全部のキーを使う必要はありません。
初めて試すなら、まずは図を見ながら、
4:左のタブへ移動5:更新6:右のタブへ移動8:タブを閉じる
この4つから始めるのがおすすめです。
数が少ないので覚えやすく、それでいて使用頻度がかなり高い組み合わせです。
慣れてきたら、
* に強制更新、- に開発者ツール、7 に検索、2 にファイル名変更、
というように、自分がよく使う操作を追加していけば十分です。
左手デバイスは「自分用」に育てるのが面白い
今回紹介した設定は、あくまで私がWeb制作をする中で使いやすくなった配置です。
特に、
0、Enter、/、.
のようなキーは、使用しているソフトやWindowsの設定によって最適な割り当てが変わります。
そのため、この記事の設定をそのまま完成形として使うというより、
まず基本となる操作を試して、自分がよく使う操作を少しずつ追加していく
くらいがちょうどいいと思います。
専用の左手デバイスを買わなくても、余っているテンキーがあれば始められます。
Web制作では、サイトそのものを改善することだけでなく、毎日触る制作環境そのものを改善することも、積み重なるとかなり効いてきます。
今回はRevifyの番外編として、そんな小さな業務改善の一例を紹介しました。


