Webデザインカンプ制作などで正確なレイアウトに必須！Photoshopでの整列方法

整列には色々な種類がありますが、ここでは基本となる部分をピックアップして解説しています。整列を使うと、Webデザインカンプの制作などで正確なレイアウトが効率的に行なえます。

動画での解説

下記動画は、この記事の動画での解説です。

以下で、テキストと画像での解説をしています。

整列とは？

整列とは、複数のオブジェクトを、左揃え、中央揃え、右揃えなど綺麗に並べることです。
整列を使うことで、手動で並べるよりも早く正確に並べることができます。

整列の使い方〜基本編〜

整列の種類

整列は移動ツールのオプションバーで設定します。

よく使うものはオプションバーに常に表示されています。

右端に［…］と表示されている［整列と分布］ボタンをクリックすると、さらに多くの整列方法を選べます。

整列の手順

整列の手順ですが、まず最初にレイヤーパネル上で整列させたいオブジェクトを選択しておきます。

それから、オプションバーでどう整列するかを選択すると、選んだ整列で整列されます。

左端揃え／右端揃え／水平方向中央揃えの例と整列の基準

左端揃えの例

左端揃えをすると、下記のように整列されます。

左端揃えは、選択しているオブジェクトの中で一番左端のオブジェクトが基準になります。

【整列前】

【整列後】

右端揃えの例

右端揃えをすると、下記のように整列されます。

右端揃えは、選択しているオブジェクトの中で一番右端のオブジェクトが基準になります。

【整列前】

【整列後】

水平方向中央揃えの例

水平方向中央揃えをすると、下記のように整列されます。

【整列前】

【整列後】

中央揃えは、選択しているオブジェクトの両端を基準に、その中央に整列されます。

整列の基準

整列の基準は、上記の例で見たように、一番端にあるオブジェクトが基準になります。
ここでは左端揃え、右端揃え、水平方向中央揃えを例にしましたが、上端揃え、下端揃え、垂直方向中央揃えも同様です。

分布をつかって等間隔に並べよう

垂直方向に分布や、水平方向に分布を使うと、オブジェクトを等間隔に並べることができます。
下記は水平方向に分布を使った例です。

【整列前】

【整列後】

整列の使い方〜応用編〜

上記が基本的な使い方でしたが、上記の例だと

• カンバスの中央に揃える
• 任意のオブジェクトを基準にする

ということができません。

それを可能にするのが、選択範囲を整列の基準に使うということです。
整列は、選択範囲が設定されているときは、その選択範囲が基準になります。

以下で、それぞれ見てみましょう。

カンバスの中央に揃える

カンバスの中央に揃える場合は、［すべてを選択］（ショートカット→Mac：command＋A、Win：ctrl＋A）でカンバス全体を選択してから、

例えば水平方向中央揃えをすると、オブジェクトをカンバスの中央に揃えることができます。

任意のオブジェクトを基準にする

任意のオブジェクトを基準に揃えたいときは、まず、基準とするオブジェクトの選択範囲を、Macはcommand、Winはctrlを押しながらレイヤーサムネールをクリックして選択範囲を作ります。

この選択方法について詳しくは、ワンクリックでオブジェクトの形が選択できる！Photoshopの便利な選択方法！をご覧ください。

その後、揃えたいオブジェクトをレイヤーパネル上で選択し、例えば水平方向中央揃えをすると、揃えたいオブジェクトを、基準にしたオブジェクトの中央に揃えることができます。

アートボードを使用している場合

アートボードを使用している場合で、かつ、整列したいオブジェクトを1つだけ選択している場合は、わざわざ選択範囲を作らなくても基準がアートボードになります。

そのため、例えば水平方向中央揃えをしたいときは、レイヤーパネル上でオブジェクトを1つだけ選択した状態で水平方向中央揃えをすると、そのオブジェクトをアートボードの中央に揃えることができます。