この記事では現役のWEBディレクターが普段どのようなショートカットキーを駆使して、作業を効率化しているかご紹介します。とにかく死ぬほど毎日使っているショートカットキーなので是非活用いただきたいです。
※基本的にmacユーザー向けになるのでご容赦ください
基本・共通編
WEBディレクターに関わらず、通常のビジネスシーンでも活用できるショートカットキーなので是非活用してみてください。
全選択
command + A
これは結構使います。PCを毎日操作している人なら必ずと言っていいほど知っているショートカットキーかと思います。WEBディレクター的に言うと、クライアントから提供された原稿をまるっと選択したいときに使いますね。
コピー
command + C
先程の全選択で選択したテキストをクリップボードにコピーしたいときに使います。これも基本中の基本ですね。知らない人がいないと言っても過言ではないですね。PC使うなら基本です。
貼り付け
command + V
先程コピーしたテキストを別のシートやアートボードに貼り付ける際に使用します。その他画像やファイルとかでも可能です。これらの「全選択」「コピー」「貼り付け」は一連の動作としてとりあえず叩き込んでほしいショートカットキーになります。是非活用してください。
改めて言いますがこれは基本です。
切り取り
command + X
これは若干応用ですが切り取りのショートカットキーです。コピーにすると元のテキストが残ってしまうので、元のテキストがいらないなーと思うときに活用してください。Googleスプレッドシートとかでよく使いますね。
スプレッドシートの貼り付け
command + shift + V
これもWEBディレクターをしているとめちゃくちゃ使います。
先程スプレッドシートの話が出たのでついでにしておくと、WEBディレクターはサイトのリニューアルをする際とかに既存サイトの構造を改めて理解また改善するために既存サイトのサイトマップを作ることがよくあります。そんなときに活躍してくれるのがGoogleのスプレッドシートなのですが、、サイトマップの作り方についてはまたの機会にご紹介したいと思います。ここで言いたいのが既存のサイトからスプレッドシートにタイトルをコピーして貼り付けるのが死ぬほどダルいと言うことです。また普通にコピーして貼り付けるとサイトのスタイルを継承してしまいスプレッドシート上の体裁が整わなくなります。めんどくさい上にさらにめんどくさいと言うことで、ここで使って欲しいのが上記のショートカットキーです。これを使うことで貼り付ける際にスプレッドシート上のスタイルに変更してくれるので、サイトのスタイルは継承されません。是非使ってみてください。
一つ前に戻る
command + Z
これは死ぬほど使います。何か動作をミスったりした時とか、やってみたけど何か違うかった、、と言うことはWEBディレクターなら1日に100回くらいはあります。そんなときに便利なのがこのショートカットキーです。一つ前の作業状態に戻れるのでミスも怖くありません。いろんなアプリケーションで使えるので是非活用してください。特にデザインソフトのイラレやフォトショ、XDなど何でも使えます。
一つ前から元に戻る
command + shift + Z
これは若干イレギュラーな時に使うショートカットキーですが、何かミスったからcommand + Zで元に戻した、、けどやっぱ元の状態でいいや！ってときに使います。たまに使いますので覚えていただきたいです。
新規ウィンドウ
command + N
例えば、Wordとかを使っていて新しいファイルを立ち上げたい時とかって結構あると思います。これはWordに限らずいろんなアプリを使っている際とかでも活用できます。イラレ、フォトショ、XD。パッと新しいウィンドウを立ち上げたいときに活用してください。
アプリの終了
command + Q
これは使っていないのに裏側でずっと起動しているアプリとかあったら何か気持ち悪いですよね。そんなとき起動中のアプリに切り替えてこのショートカットキーで終了してしまってください。
アプリの切り替え
command + tab（commandキーを押しつつtab連打）
上記でお伝えしたように、アプリ間の移動もマウスでするのではなくてショートカットでしてください。これはマジで使います。
スクリーンショット（全画面）
command + shift + 3
WEBディレクターをしているとデザイナーへのフィードバックや、クライアントへの説明で画面のスクリーンショットに朱書きを入れたりすることがあるかと思います。そんなときにはこのショートカットキーでスクショを撮ってください。これは基本ですかね。
スクリーンショット（選択範囲）
command + shift + 4
こちらのスクショは画面の範囲を選択して撮るスクリーンショットです。全画面よりむしろこちらの方がよく使いますかね。ブラウザを開いた状態だとタブとかまでスクショされて今うので余計なところを外したいときに活用してください。あと選択モードに切り替わって、開始位置をミスってしまった場合は「escapeキー」で初期状態に戻るのでこれも覚えておいた方がいいですね。ミスったスクショをゴミ箱に入れる作業は一番ダルいので、、、
印刷する
command + P
これもよく使いますね。というかよく使うからショートカットを覚えようということなのですが、、笑
Chrome開発系
ここからは少し制作よりと言うか、WEBディレクターよりのショートカットキーになります。Chromeのショートカットキーも含まれるので普段ブラウザを多用している人は必見です。
ディベロッパーツール表示
command + option + I（アイ）
WEB系の開発者なら200%毎日のように使っているツールかと思います。WEBディレクターもほぼ毎日使っています。ソースコードを見たり、どんなスタイルが当たっているか確認したり、もうディベロッパーツールでできることは山のようにありますが、それを開く際にいちいちメニューから選んでいると日が暮れます。（日が暮れた後に作業をしているエンジニアもいるかもしれませんが）。
ソースコード表示
command + option + U
純粋にソースコード（HTML）のみを確認したいときはもう新しくタブを開いてしまってみた方がわかりやすい時もあります。そんな時は「ソースの表示」というメニューをクリックすると出てくるのですが、それもいちいちやっていると夜が開けます。そんな時は上記のショートカットキーを使って表示してください。
新規タブ追加
command + T
これはどちかかというとWEBディレクター的かもしてませんが、WEBディレクターは何せブラウザを使っての調べ物がむちゃくちゃ多いです。とりあえず今見ているタブは残しておいて新しいタブを開きたい時は上記のショートカットキーを使ってください。
タブの終了
command + W
WEBディレクターは調べものが多いと言いましたが、逆に調べすぎてブラウザのタブを開きまくりアイコンすら見えずタブが１ミリくらいになっている時がよくあります。とりあえず一旦キレイにしたいときは上記のショートカットキーを連打しまくってください！
タブ間の移動
control + tab
タブ間を移動するときは上記のショートカットキーを使ってください。個人的には「新規タブ追加」「タブの終了」「タブ間の移動」を常に使い回す感じです。
前のページに戻る
command + 「
いわゆるヒストリーバックですね。WEBディレクターなら覚えておいて損はないです。
前のページから下のページに戻る
command + 」
ヒストリーバックのバックですね。ヒストリーバックと併せて覚えたいところです。
リロード
command + R
command + shift + R
これはWEB制作に携わる人はみんな使っているのではないでしょうか。これは通常のリロードで「command + shift + R」でスパーリロードになります。画像なども含めてハードを再度読み込むパターンですね。
HTMLやCSSその他もろもろですが、ローカルではきちんと表示されているのに何故かサーバーにあげるとうまくいかない時があります。それはブラウザのキャッシュをまず最初に疑いましょう。WEBディレクターであれば、コーダーやエンジニアさんから修正でテストアップされたテストサイトを確認することは日常的にあるかと思うのですが、前回のままになっていることがあります。「えっ直ってないですよー？」とかってコーダーさんに伝えると「それキャッシュじゃないですか？」と言われて恥ずかしい思いをするので、必ず覚えておきたいところです。
ちなみにキャッシュなども含めて全てリロードする場合はディベロッパーツールを開きぐるぐるマークを右クリックして「キャッシュの消去とハードの再読み込み」をクリックしてください。これをすることによりサイトを最新の状態にすることができます。
Chromeのリロードはこの３つをまとめて覚えて置くとキャッシュに悩まされることはありませんので是非活用してください。
まとめ
上記のように様々なショートカットキーを駆使してWEBディレクターは日々制作と格闘しております。まだまだ紹介仕切れていませんが、とりあえずこれらのショートカットさえ覚えていれば何とかなります。
他にもいろいろなツールやソフトを使っているのでそのツールのショートカットまでとなるとキリがありませんので、またおいおい使っているアプリケーションやそのショートカットキーも紹介してければと思います。
