ELEMENT, INC.

Webデザインの作業は長時間に及ぶことがほとんどです。納期まで時間が限られているので、いかに効率良く作業できるかがとても重要になります。

今回は作業を効率を上げるショートカットキーをご紹介していきます。ショートカットキーは多くありますが、その中でも便利でよく使うものを厳選してご紹介します。

Webデザイナーが覚えておきたいショートカット

保存をする

Mac:command+S
Windows:Ctrl+S

作成したデザインを保存をする時、上部のツールバーからファイルを選択し、保存を押すことが多いと思います。このショートカットなら、すぐに保存を実行することができるのでとても便利です。

作成したデータが消えてしまわなように、こまめに保存をして作業を進めていきましょう。

一つ前の状態に戻す

Mac:command+S
Windows:Ctrl+S

デザインや写真の加工で一つ前の状態に戻したい時に使うショートカットです。作業をしていると、何度も元に戻す作業は出てきます。

何度も前に戻る

Mac:Command+Option+S
Windows:Ctrl+Alt+S

一つ以上前に戻りたい時は一つ前の状態に戻すショートカットにボタンが一つ加わります。何度も戻すことは可能ですが、上限はあるので気をつけましょう。

戻す回数の上限は環境設定から確認をすることができます。

写真や図形をコピーして、貼り付けをする

Mac:Command+C→Command+V
Windows:Ctrl+C→Ctrl+V

図形や写真をコピーして貼り付けをする時に使えるショートカットキーは作業では使う機会が多いです。このショートカットはWebデザイン初心者は必ずお覚えておきましょう。

写真や図形を複製する

Mac:Option+ドラッグ
Windows:Alt+ドラッグ

コピーしてから貼り付けをする2度手間を一手間でできてしまうショートカットキーです。図形だけでなく、テキストも複製可能なので、とても便利です。

図形の大きさや傾きを変える

Mac:Command+T
Windows:Ctrl+T

 図形や写真の大きさを変えることは作業の中で多いものの一つです。上のツールバーから選択して大きさを変えるより効率が良いので、使っていきましょう。

キャンバスを拡大

Mac:Command+＋
Windows:Ctrl+＋

キャンバスを拡大したい時は上記のショートカットで行うことができます。

キャンバスを縮小

Mac:Command+−
Windows:Ctrl+−

キャンバスを縮小したい時は上記のショートカットで行うことができます。

キャンバスの表示を最初の状態に戻す

Mac:Command+0
Windows:Ctrl+0

キャンバスの大きさを元に戻すことができるショートカットです。拡大や縮小の後に全体を見たい時に便利です。

レイヤーの移動

Mac:Command+[ or ]
Windows:Ctrl+[ or ]

レイヤーの位置を入れ替えたい時、マウスを使ってドラッグで前後を入れ替えることができます。しかし、ショートカットでもレイヤーを入れ替えることができるので、効率が良くなるのでオススメです。

レイヤーを複製する

Mac:Command+J
Windows:Ctrl+J

レイヤーを複製したい時はこちらのショートカットを使ってみましょう。

指定したレイヤー以外の非表示

Mac:Option+目のマークを押す
Windows:Alt+目のマークを押す

指定した以外のレイヤーを全て消したい時に使うことができます。レイヤーの数が多くなってくると、一気に消すことが面倒になってきます。そんな時に便利なのがこのショートカットです。

タブの切り替え

Mac:Command+Tab
Windows:Ctrl+Tab

たくさんの画像やデザインデータを開くと、タブが多くなり見たいタブを見る時に選択が大変になります。そのような時にこのショートカットを使えば、簡単にタブを切り替えることができます。

グリッドの表示・非表示

Mac:Command+@
Windows:Ctrl+@

キャンバス上にグリッドを表示するためのショートカットです。グリッドはキャンバス上にマス目を引くことできるツールです。図形や写真の位置を調整したい時に役に立ちます。

図形などの調整ができて、グリッドが邪魔になったらすぐに消すことができます。

まとめ

ショートカットキーを覚えておくと、デザインの作業の効率を上げることができます。今回ご紹介したのは、とてもよく使うものなので、使いながらショートカットキーを覚えていきましょう。