【作業効率アップ】地味だけど絶対役立つショートカットキー【ブラウザ編】

【作業効率アップ】地味だけど絶対役立つショートカットキー【ブラウザ編】

web制作、プログラミングなどクリエイティブな現場では、最新の技術や高度なテクニックに注目がいきがちです。
そういった側面から、何かと軽視されがちな「ショートカットキーを覚える」ということ。
しかし、ショートカットキーを覚えることは、作業効率アップに取り組む上で、一番手軽で、なおかつ非常に効果が高い方法です。

 

そこで、web制作に関わる人すべてが最低限知っておくべきだと思う、ブラウザのショートカットキーをまとめたいと思います。
ここで紹介するショートカットキーは、Chromeだけではなく、モダンブラウザすべてで共通して使うことができます。

web制作時に役立つブラウザのショートカットキー

デベロッパーツールを開く

Mac : [command]  +  [alt]  +  [ i ]
windows : [ctrl]  +  [alt]  +  [ i ] もしくは [F12]

おそらく一番よく使うショートカットキー。
ブラウザのメニューを開いて、その他のツールを開いて..とやらずに、瞬時に開いちゃいましょう。

キャッシュのクリア

Mac : [command]  +  [shift]  +  [delete]
windows : [ctrl]  +  [shift]  +  [delete]

ちなみに、Chromeの場合は別の方法もあります。
デベロッパーツールを開いた状態で、ブラウザの左上の再読み込みボタンを右クリックし、[キャッシュの消去とハード再読み込み]を選択しましょう。
基本的に開発中はデベロッパーツールを開いた状態が多いので、このショートカットの方が素早くできるかもしれません。

タブを開く/閉じる

タブを開く
Mac : [command]  +  [ t ]
windows : [ctrl]  +  [ t ]
タブを閉じる
Mac : [command]  +  [ w ]
windows : [ctrl]  +  [ w ]

これはまぁほとんどの方が知っているでしょう。
誰もが知っているからこそ、自分だけが知らないということにならないよう、絶対に知っておくべきですね。

タブ切り替え

Mac : [control]  +  [tab]
windows : [ctrl]  +  [tab]

こんなショートカットが本当に作業効率アップに繋がるのかと疑問に思うかもしれません。
だけど、キーボードから手を離してマウスを操作することなく作業が行えるのは結構重要なことです。

ショートカットキーを覚えることで得られる意外な効果

冒頭でも述べましたが、これまで紹介したショートカットキーは、すべてのモダンブラウザで共通で使えるものです。
これが、ある意外な効果を発揮します。
それは、ブラウザごとの操作の違いを覚えなくて済むということです。

 

Chromeでデベロッパーツールを開く場合と、firefoxでデベロッパーツールを開く場合を考えましょう。
ショートカットキーを使わずに開こうとすると、どこから操作すればいいでしょうか?
覚えてしまえば問題ないことかもしれませんが、普段使わないブラウザで操作する必要が出てきたときに、こういった操作の違いは、なかなかストレスになります。

 

それが、ショートカットキーを覚えることで、ブラウザによる違いを意識せずに済むわけです。
これはなかなか重要なことではないでしょうか?

まとめ

ショートカットキーを覚えることで、実際にどれくらい作業効率がアップするか検証したわけではありませんが、効果があるということは間違いありません。

これらのショートカットキーを覚えてしまえば、逆にショートカットキーを知らない人を見ると信じられない。という感覚になるかもしれません。
その時は、そっとさりげなく教えてあげてください。

ショートカットキーは地味なせいもあって、教えてあげても感謝されにくいうえに、伝え方やタイミングによっては、うっとうしい感じになってしまうので、気をつけましょう。