【初心者】知らなきゃ損！本当に使うPhotoshopショートカット・裏技【ウェブデザイン】

ウェブデザインする上で欠かせないツール「Photoshop（フォトショップ）」

Photoshopにはショートカットキーが沢山用意されています。
なぜショートカットキーを使いこなすと良いのか。

それは作業スピードが早くなるから。

いちいちマウスで使いたいツールを選択する手間を、キーボードを押すだけで済ませられるようになると、積み重なった時間の違いは計り知れません。

しかしながら、ショートカットキーを全て覚えるとなるとその量は膨大すぎて、逆にそれらを覚えるのに時間がかかってしまいます。

 

こんな悩みを解説するために、現役ウェブデザイナーが初心者向けによく使うショートカットを紹介します！

基本中の基本！覚えるべきphotoshopツールのショートカット

まずはphotoshopで欠かせないツール編から！

ツールは沢山ありますが、とってもとってもよく使う、とにかく絶対覚えるべきショートカットキーを紹介します！かなり厳選したので少ないです！

V：移動ツール

キーボードのVを押すと移動ツールに切り替えることができます。

T：文字ツール

キーボードのTを押すと文字ツールに切り替えることができます。

U：長方形ツール

キーボードのUを押すと長方形ツールに切り替えることができます。

D：描画色と背景色の初期化 / X：描画色と背景色の切り替え

• D：描画色・背景色を初期設定（黒・白）に戻す
• X：描画色と背景色を切り替える

 

ツールのショートカットまとめ

一覧にするとこのようになります。↓

 

shift + 各ショートカットキー：複数のツールを切り替える

 

とにかく、ほんっとに使います。めちゃくちゃ便利です。
ウェブデザインをする人は特に、最初は最低限これだけ覚えれば作業効率が格段に上がります。

覚えるべきショートカット：レイヤー編

次は、レイヤーを扱う上で覚えておきたいphotoshopのショートカットを紹介します。
※画像にある「m」= mac、「w」= windows の略です。

新規レイヤーを作成

新規レイヤーってあまり意識してないけど意外と使うんですよね。
押すキーボードが少し多いですが、覚えると便利です！

一つ下のレイヤーへ移動させる

一つ上のレイヤーへ移動させる

一番下のレイヤーへ移動させる

一番上のレイヤーへ移動させる

 

レイヤーが複数あるとき、重なりによって、見え方が変わりますよね。
例えば、長方形の上に文字を置くデザインなど。ウェブデザインではよく見受けられます。

そのとき、レイヤーの構成で、長方形レイヤーが文字レイヤーより上にあると文字が見えなくなってしまいます。
そういったとき、文字レイヤーを長方形レイヤーより上に持ってくる、もしくは長方形レイヤーを文字レイヤーの下へ移動させる必要があります。

レイヤーの順番を意識して、入れ替えることはよくやるので、レイヤーの順番を入れ替えるショートカットは覚えておきましょう。

 

選択したレイヤーをグループ化

まとめておきたいレイヤーをグループ化することが出来ます。レイヤーも整理されて、見やすくなるので、覚えておきましょう。

 

グループを解除

グループになっていたレイヤーをグループ解除します。

 

レイヤー編ショートカットまとめ

一覧にすると、このようになります、↓

 

ツールに比べると覚えるものが多いな、と思ってしまうかもしれません。

最初は※印のあるものを優先的に覚えておきましょう。こちらはphotoshopだけでなく、illustratorやその他のAdobeソフトでも使えるショートカットになっています。

 

photoshop以外でも使える、覚えるべき基本のショートカット

忘れてはいけないのが、photoshopだけでなく、パソコンを扱う上でも覚えておくべきショートカットです。
こちらも、photoshopだけでなく、illustratorやその他のAdobeソフトでも使えるショートカットになっています。

保存する

このショートカットは覚えるの必須です。
デザインデータを無くさないためにもこまめに保存することを心がけましょう。

直前の操作を取り消す

例えば、photoshopで長方形をつくろうとします。
しかし間違えて楕円形ツールを使用して、楕円形を描写してしまいました。

そんなとき、直前にやった操作が「楕円形を描写する」ことだったら、このショートカットキーを使うと、それを取り消してくれます。（つまりこの場合だと、楕円形が消され、描写される前の状態に戻ります。）

取り消した操作を元に戻す

少し分かりづらいので説明します。

先ほどの例で、「直前の操作を取り消す」で楕円形を消しましたよね。
しかし、やっぱり「楕円形を描写した状態に戻したい」と思ったとします。

そのときにこのショートカットが使えます。

基本的に「取り消した操作を元に戻す」ショートカットは「直前の操作を取り消す」操作を行った後でないと使えないので、そこは注意が必要です。

コピー

ペースト

コピー&ペーストはセットで覚えておきましょう。

カット

コピーとは違い、カットは選択したものを切り取る点に注意しましょう。

 

万能なショートカットまとめ

一覧にするとこうなります。↓

基本中の基本ですが、これを覚えなくては何も始まらないといっても過言ではありませんね。

 

ステップアップするために覚えたい！photoshopの便利なショートカット・裏技

ここまで、覚えてほしいショートカットを初心者さん向けに紹介してきました。
ただ、それは基本に過ぎなかったりします。

もっともっとステップアップするには、やはり他のショートカットも覚えるべきです。

基礎的なショートカットはもう使えるよ！って人はこれから紹介する便利なショートカット・裏技も覚えていってください！

数値入力でTabキーを使う

長方形ツールや属性パネルで、幅や高さを数値で入力しますよね。
「幅」を入力した後、いちいちカーソルを「高さ」に持ってきてクリックする手間が面倒だと思いませんか？

そんなとき、「幅」を入力した後にTabキーを押すと、自動で「高さ」に選択が移動し、マウスを動かさずにそのまま数値入力することが出来ます。

 

shiftキー＋矢印キーで10px単位の移動ができる

通常、移動ツールを使って文字や画像をキーボードの矢印キーを使って移動させると、1px単位で移動させることが出来ます。

それをshiftキーを押しながら行うと、10px単位で文字や画像を移動させることが出来ます。

これはウェブデザインを行う上で非常によく使いますので、覚えておきましょう！

オブジェクトをoption/Altキーを押したままドラッグして複製する

オブジェクトを選択してoption / Altキーを押したままドラッグすると、選択したオブジェクトを複製することが出来ます。

そのとき、option / Altキーを押して選択範囲にカーソルを合わせると、カーソルの表示が上記の画像のように変わる点に注意しましょう。

 

command/Ctrlキーを押したままドラッグでグループをまとめて移動

グループ化したレイヤーをまとめて移動させたいとき、command / Ctrlキーを押してドラッグします。

実はphotoshopでは、グループ化したものを移動ツールでまとめて移動させることが、出来ないときがあります。
それは、どのレイヤーが選択されているかで変わります。

レイヤーをグループ化すると、フォルダの中にレイヤーが格納されますよね。

グループの中のレイヤー全てが選択された状態であれば、通常通り、移動ツールで動かすことが出来ます。

しかし、グループ化してレイヤーが格納されている「フォルダ自体」を選択して移動ツールを使用した場合は、まとめて動かすことが出来ません。

なので、「フォルダ自体」を選択した時は、この裏技を使うとまとめて動かすことができます。

command/Ctrl + Tで自由変形

長方形や円形など、大きさを変えたり変形させたい時によく使用します。

自由変形を行うと、選択したオブジェクトにバウンディングボックスが表示されます。

option/Altキーでクリッピングマスクを適用

クリッピングマスクは、レイヤーを右クリックし、「クリッピングマスクを作成」でも出来ますが、ショートカットを使う方が簡単です。

操作方法

1. レイヤーとレイヤーの間にカーソルをあてます。
2. 下の画像のようにカーソルの表示が変わるので、そのままクリックします。

optionキーで反転させたマスクを適用

 

レイヤーに描写されたオブジェクトの選択範囲を作成

ガイドを表示・非表示

やり方が2通りあります。

 

1.の方は、「エクストラ」という機能です。
通常、選択しているオブジェクトには選択範囲（四角で囲まれた表示）が表示されます。↓

エクストラで、表示を切り替えると、「ガイドの表示・非表示」と共にこの選択範囲も表示・非表示が切り替わります。

2.の方は、ガイドのみ表示・非表示が切り替わります。

どちらが良いということはないので、好みによって使い分けてください。

選択を解除

オブジェクトやレイヤーを複数選択する

オブジェクトやレイヤーを複数選択する方法は、

上記2種類があります。

これはphotoshopに限らず、パソコンの操作全体にも共通して使えるテクニックです。

まず、shiftキーを使った場合。
下の画像のように、選択したものから選択したいものまでの途中にあるレイヤーも全て選択されます。

command / Ctrlキーを使った場合。
途中にあるレイヤーは選択されません。

どちらのテクニックも使い分けられるようになるといいです！

Tabキーでファイルを全画面表示に切り替える（ツールなどを表示・非表示切り替え）

上記の画像のように、tabキーでツールなどの表示・非表示およびファイルの全画面表示を切り替えることが出来ます。

って疑問ですよね。私も最初はそう思っていました。笑
ですが、ウェブデザインを勉強されている方には覚えてもらいたいテクニックなんです。

photoshopでウェブデザインを制作していると、実際の表示の大きさの違いにギャップを感じたことありませんか？私はあります。
それは、photoshop上だと全体を見通しながら、かつ100%以上の大きさ表示でデザインを見通せないからです。

そんなとき、この機能を使って、ファイルを画面いっぱいに表示して、ウェブデザインを実際の大きさに近い状態で確認することが出来ます。

 

数字キーで不透明度を変更

オブジェクトを選択した状態で、数字キーを押すと不透明度を変更することができます。

• 0→不透明度100%
• 1→不透明度10%
• 2→不透明度20%
• 3→不透明度30%
• 4→不透明度40%
• 5→不透明度50%
• 6→不透明度60%
• 7→不透明度70%
• 8→不透明度80%
• 9→不透明度90%

0を入力すると不透明度100%になるので注意です！

また、不透明度を65%など細かく指定したいときは6と5を順番に素早く押してください。

 

まとめ

photoshopには本当にたくさんの機能があります。

しかし、自分がよく使う機能だけショートカットは覚えるべきです。

今回は、ウェブデザイナーになりたい人向けに、私が覚えているものやおすすめするショートカットを紹介しました。
でも中には「自分にはいらないな」と思う部分があるかもしれません。そういったものはすぐに覚える必要はないので、まずはよく使う機能から覚えていくといいです！！

 

ウェブデザイン制作の基本的なポイントをまとめた記事はこちら！↓

【初心者向け】現役デザイナーが教えるウェブデザイン制作の基本まとめ【独学でウェブデザイナー】

現役デザイナーがwebデザイン制作の基本をまとめて紹介します。ウェブデザインを独学で勉強している方や初心者の人が見落としがちな重要なポイントも網羅して、しっかり解説します。現場で使える知識なので、覚えておくといざ現場で働くことになってもすぐに活躍できるナレッジです。

matomebox.com

2020.08.08