連載  /  

ベテランほど知らずに損してるPhotoshopの新常識(8) たかがガイド、されどガイド。ガイドと整列を制すものがデザインを制す

BY 公開

今回は、Web系など、主にPhotoshopでレイアウト作業を行う方向けに、ガイドと整列を取り上げます。ちょっと大げさなタイトルを付けてしまいましたが、地味ながらも重要なトピック。復習がてら、お読みください。

はじめに:クイズ

手はじめに、次の穴埋めに挑戦してみてください(回答はこのページの末尾にあります)。

  • 定規からドラッグしてガイドを作成する際、目盛にスナップさせるには(   )キーを押す
  • Photoshop CC 2014以降、(    )に対して、ワンアクションで4本のガイドを作成することができる。ただし、(    )を対象とすることはできない。
  • (    )を使えば、960 GridやBootstrapのグリッドに対応したガイドをスピーディに作成できる
  • Photoshopで複数のアイテムの間隔を均等に配置するには、(    )や(    )を使う
  • カンバスのエッジからの距離を計るには、レイヤーを選択後、(   )キーを押したまま、レイヤー外にマウスポインタを移動する

 

ガイドの作成

選択範囲やシェイプは、ガイドにスナップ(吸着)しますので、適切なガイドを準備することは、レイアウト作業の効率化に直結します。

Photoshopでガイドを作成するには、次の4つの方法があります。

  • [A]ルーラーからドラッグ(手動)
  • [B]新規ガイド(数値指定)
  • [C]シェイプからガイド作成
  • [D]新規ガイドレイアウト

このうち、[C]と[D]は、Photoshop CC 2014(15.2)からの機能です。それでは順を追ってみていきましょう。

[A]ルーラーからドラッグ(手動)

ベテランの方には説明不要な基本操作です。
ルーラー(定規)を表示し、定規の目盛からドラッグします。上の定規からは水平のガイド、左の定規からドラッグすると、垂直のガイドが作成されます。

guide-ps

その際、次のようなオプションがあります。

  • ドラッグ中、ガイドの座標の値は、スマートガイド、および、[情報]パネルに表示される
    screenshot-2016-01-12-09-34-09
  • optionキー(Altキー)を押しながらドラッグすると、水平/垂直が逆になる
  • shiftキーを押しながらドラッグすると、目盛にスナップする(=端数が出ません)

なお、Photoshop CC 2015.1(16.1)でデザインスペースを有効している場合には、定規の代わりに、カンバスの周辺にマウスオーバーすると表示される青い帯をドラッグします。

guide-designspace

ガイドのロック

Photoshopのガイドは、デフォルトではロックされていません。意図せず動いてしまうことを防ぐためにロックしておくとよいでしょう。ガイドをロックするには[表示]メニューの[ガイドをロック]をクリックします(すべてのガイドが対象になります)。

キーボードショートカットはcommand+option+:/Ctrl+Alt+:。

ガイドの移動

すでに引いたガイドを移動するには、[移動ツール]でドラッグします。

[移動ツール]以外のツールを選択しているときには、commandキー(Ctrlキー)を押しながらガイドをポイントし、マウスポインタが変化したらドラッグします。

screenshot-2016-01-13-12-39-38-s

ドラッグを開始後、optionキー(Altキー)やshiftキーによるオプションは、ガイド作成時と同様です。

定規の交差点

定規の交差点(左上)は、特別な領域です。

  • 定規の交差点からドラッグすると、(0, 0)の位置が変更される
    screenshot-2016-01-13-01-12-21-s
  • 定規の交差点をダブルクリックすると、カンバスの左上が(0, 0)になるようにリセットされる

なお、Illustratorのように、定規の交差点からcommandキー(Ctrlキー)+ドラッグすることで水平/垂直のガイドを同時に引くことはできません(これができると嬉しいのですが…)。

[B]新規ガイド(数値指定)

[表示]メニューの[新規ガイド]をクリックすると、[新規ガイド]ダイアログボックスが表示されます。

screenshot-2016-01-12-09-37-23

たとえば、「垂直方向、300」に設定すると、カンバスの左から300ピクセルの位置に垂直方向(縦)のガイドが引かれます。

screenshot-2016-01-12-09-37-36-s

この際、定規の原点(0, 0)を変更していてもガイド作成には影響しません。

カンバスの中心にガイドを作成する

[新規ガイド]ダイアログボックスのデフォルトの値は「mm」ですが、「50%」のように単位付きで入力することで、カンバスの中央に水平(または垂直)のガイドを作成することができます(水平/垂直、それぞれ別途引く必要があります)。

screenshot-2016-01-12-09-37-45-s

カンバスのエッジにガイドを作成する

シェイプをドラッグで描くとき、カンバスのエッジにはスナップしてくれません。カンバスサイズに合わせたガイドを引いておくと、この問題を回避できます。

カンバスのエッジ(右端、下端)にガイドを作成するには、[新規ガイド]ダイアログボックスで、「0%」や「100%」のように単位付きで入力します。

スクリプトを利用

カンバスのエッジ(4本)および、中央(2本)にガイドがあると、レイアウトを行う上で重宝します。ドラッグを使ってのガイドの作成時、カンバスのエッジにスナップします。[新規ガイド]を使って数値指定することもできますが、いずれの方法でも、6回行わなければならず、時間も手間もかかります。

screenshot-2016-01-13-12-35-12-2

「乱雑モックアップ」さんが作成されたスクリプト「ステージ枠と中央にガイドを引く.jsx」を利用すると、カンバスの中心とエッジに6本をガイドを1アクションで引くことができます。

カンバスのエッジのみに(4本の)ガイドを引くには、Deapsの「外枠にガイドを引くスクリプト」が使えます。

Photoshopでスクリプトを利用するには

スクリプトを利用するには、[ファイル]メニューの[スクリプト]→[参照…]をクリックして、ダウンロードしたスクリプト(JavaScriptファイル)を選択します。

screenshot-2016-01-13-01-09-49

所定の場所にスクリプトファイルをおいておけば、[ファイル]メニューの[スクリプト]のサブメニューに表示されます。

Mac /アプリケーション/Adobe Photoshop CC 2015/Presets/Scripts
Windows C:¥Program Files¥AdobeAdobe Photoshop CC 2015¥プリセット¥スクリプト

screenshot-2016-01-13-01-16-58

[ファイル]メニューの[スクリプト]のサブフォルダーに表示されるスクリプトには、キーボードショートカットを割り当てることが可能です。

screenshot-2016-01-13-01-17-26

[C]シェイプからガイド

Webのカンプ作成時には「シェイプにぴったりとガイドを引きたい」というニーズがあります。シェイプに対してガイドを引く場合、「スナップ」こそ効くものの、1本1本引かなくてはなりません。

対象となるシェイプを選択し、[表示]メニューの[シェイプから新規ガイド]をクリックすれば、4本のガイドが作成されます(Photoshop CC 2014以降)。楕円形や複雑なシェイプの場合には、それがすっぽりと入る長方形の領域に対して作成されます。

screenshot-2016-01-13-01-51-28-s

複数のシェイプを選択していても同時に実行可能です。シェイプごとに4本ずつ引かれるので、たくさんのシェイプに対して同時に実行すると、カンバスがガイドだらけになってしまいます。

screenshot-2016-01-13-01-50-54-s

なお、[シェイプから新規ガイド]を実行できるのは、あくまでもシェイプのみ。選択範囲に対して実行することはできません。

選択範囲に対してガイドを引くには

「乱雑モックアップ」さんの「選択範囲にあわせてガイドを引く.jsx」を使うと選択範囲に対してガイドを引くことができます。単位が「ピクセル」以外になっていると、うまく動作しませんのでご注意ください。

有償になりますが、次のような拡張機能があります。

[D]ガイドレイアウト

ガイドレイアウト機能を利用すると、グリッドレイアウト用のガイドをスピーディに作成することができます。

ガイドレイアウトを使うには、[表示]メニューの[新規ガイドレイアウト]をクリックして、[新規ガイドレイアウトを作成]ダイアログボックスを表示します。

[新規ガイドレイアウト]での各値は、プリセットに「Webファイル(1920, 1080)」を選択したときの値です。

screenshot-2016-01-13-01-52-46-s

960 grids

  • [列]オプションにチェック(行はオフ)
  • 「数:12、幅、60px、間隔:20px」
  • [列を中央に揃える]オプションをオン
  • [マージン]にチェックを付け、[左]と[右]に「480」に設定
    (1,920-1,260-1,120-2*10)

screenshot-2016-01-13-02-00-42

[行]をオフにしても、[マージン]の設定で、カンバスの上端、下端にガイドが生成されます。

screenshot-2016-01-13-02-00-42-2

Bootstrap

[マージン]の値は、プリセット「Webファイル」(1920 x 1080px)を選択したときの値です。

  • [列]オプションにチェック(行はオフ)
  • 「数:12、幅、70px、間隔:30px」
  • [列を中央に揃える]オプションをオン
  • [マージン]にチェックを付け、[左]と[右]を「345」に設定
    (1,920-1,270-1,330)

screenshot-2016-01-13-02-04-03-s

[行]をオフにしても、[マージン]の設定で、カンバスの上端、下端にガイドが生成されます。

screenshot-2016-01-13-02-04-40-s

プリセット

ガイドレイアウトの設定は「プリセット」として保存し、読み込むことができます。

  • ダウンロード

screenshot-2016-01-13-02-04-50

なお、ガイドレイアウトを使ってガイドを作成する際、[既存のガイドを消去]オプションをオンにすると、それまでに引いたガイドが消去されます。

ガイドの使いこなし

ガイドの表示/非表示

ガイドの表示/非表示は[表示]メニューの[表示・非表示]→[ガイド]でコントロールします。

キーボードショートカットはcommandキー(Ctrlキー)+:キーです。

アプリケーション ガイドのロック ガイドの表示/非表示
Photoshop command+option+:
Ctrl+Alt+:
command + ;
Ctrl + ;
Photoshop
デザインスペース
command + :
Ctrl + :
Illustrator command+option+;
Ctrl+Alt+;
InDesign

Photoshop CC 2015.1(16.1)のデザインスペースでは、IllustratorやInDesignと同じ、commandキー(Ctrlキー)+;(セミコロン)キーが使われています。

ガイドのロックと合わせて、整合性を重視される方は、キーボードショートカットを変更してしまうとよいでしょう。

アートボードとガイド

Photoshop CC 2015で搭載されたアートボード機能は、Photoshop CC 2015.1(16.1)で大幅に強化されています。

ガイドに関しても、アートボードに依存する「アートボードガイド」と、アートボードに依存しない「カンバスガイド」の2つの種類になりました。

  • アートボードを選択時には、アートボードガイドが引かれる
  • アートボードを移動すると「アートボードガイド」は追随する
  • アクティブなアートボード以外のアートボードガイドはデフォルトでは非表示。環境設定で[非アクティブなアートボードガイドを非表示]オプションをオンにすると表示される
    screenshot-2016-01-13-01-34-03-s

なお、ガイドのカラーの変更は、環境設定で行います。「カンバスガイド」のカラーは「シアン」、「アートボードガイド」のカラーは「ライトブルー」がデフォルトです。

screenshot-2016-01-13-01-28-20-s

ガイドの表示/非表示のキーボードショートカットを実行すると、次のように順番に切り替わります。

  • ガイドなし
  • カンバスガイドのみ表示
  • カンバスガイドとアートボードの両方を表示

スマートガイド

カンバスからの距離

次の手順でカンバスのエッジからの距離を計測するスマートガイドが表示されます。

  • [移動ツール]、または、[パスコンポーネント選択ツール]を選択
  • いずれかのレイヤーを選択(シェイプでも選択範囲でも可)
  • commandキー(Ctrlキー)を押しながら、レイヤー外の領域にマウスポインタを移動

screenshot-2016-01-13-02-45-04

ほかのレイヤーからの距離

先と同じ手順で、レイヤー外のほかのレイヤー上にマウスポインタを移動

レイヤーを複製時に計測

optionキー(Altキー)を押しながらレイヤーをドラッグしはじめると、元のレイヤーとの距離を計測できます。

3つ以上のレイヤーの場合には、間隔を測定してくれます。

screenshot-2016-01-13-02-45-37

整列

Photoshopは元々オブジェクトベースで何かするアプリケーションではなかったので、整列に関しては、少し弱いです。

  • パネルでなく、オプションバーで操作するため、状況によっては整列ボタンが表示されない
  • キーボードショートカット:デフォルトでは設定されていない
  • キーオブジェクト:できなくはないけれど面倒
  • カンバスの中央(や端)に整列:できなくはないけれど面倒い
  • 等間隔に分布:スクリプトを使わないとできない
  • 指定間隔で分布:スクリプトを使わないとできない

整列コマンドのキーボードショートカット

Photoshopで整列を行うには、オプションバーのボタンを利用します。

screenshot-2016-01-13-02-48-14

しかし、長方形などのライブシェイプを[パスコンポーネント選択ツール](黒い矢印)で選択すると、オプションバーではアイコンをひとつのアイコンにまとめられ、さらに、グレーアウトしてしまいます。

整列を実行するには、[カンバスで揃える]オプションを選択する必要があります。

layer-align

整列コマンドにキーボードショートカットを設定すれば、[パスコンポーネント選択ツール]を選択していても整列を実行できます。

キーボードショートカットの設定方法

[キーボードショートカット]ダイアログボックスを開き、整列の[上端]、[垂直方向中央]、[下端]、および、[左端]、[水平方向中央]、[右端]にキーボードショートカットを設定します。

screenshot-2016-01-13-03-45-55-s

設定すると、メニューバーに(も)表示されます。

screenshot-2016-01-13-04-13-57

キーオブジェクト

整列を行うとき、移動させたくないオブジェクトに設定するのが「キーオブジェクト」です。IllustratorやInDesignでは、オブジェクトを選択後、キーオブジェクトに設定したいオブジェクトをクリックするだけですが、Photoshopでの操作手順は大きく異なります。

Photoshopでキーオブジェクトを設定するには、[レイヤー]パネルでそのオブジェクトのサムネールをクリックして、選択範囲を作成します。すると、[レイヤー]メニューの[整列]は、[レイヤーを選択範囲に整列]に変わり、選択範囲がキーオブジェクトとして扱われます。

screenshot-2016-01-13-04-16-58

この要領でカンバス全体を選択範囲にしておくと、レイヤーがひとつでも中央揃えや上ソロエ、左ソロエなどが可能になります。

なお、Photoshopでは一部のレイヤーをロックしておくと、そのレイヤーには整列を実行できません。

整列をパネルを行いたい

高橋としゆきさんが制作されている[整列]パネルを使うと、IllustratorやPhotoshopのようにパネルのボタンをクリックして操作できます。さらに、カンバス全体に対してのソロエをもっとラクに行うことができます。

screenshot-2016-01-14-02-07-57

等間隔に分布

Photoshopには、Illustratorの[整列]パネルでいう[等間隔に分布]と[整列](の対象の選択)がありません。等間隔に分布を実行するのには、スクリプトに頼る必要があります。

align-zukai

[等間隔に分布]を実現するには、Trevor Morris氏のスクリプトが有名です。

オブジェクトが横に並んでいるときには「Distribute Layer Spacing Horizontal 0-2-0.jsx」、縦に並んでいるときには「Distribute Layer Spacing Vertical 0-2-0.jsx」を使います(2つのスクリプトを使い分けます)。

指定間隔で分布

こちらはLIGブログで公開されているスクリプト「Margin」を使います。

  • 縦方向には「margin-top」、横方向には「margin-right」を使う
  • パネル自体が透けているので、どの程度の値にしたいかを見ながら設定し、[Apply]ボタンをクリックする

screenshot-2016-01-13-04-31-48

整列と併せて、キーボードショートカットを設定しておくとよいでしょう。

まとめとクイズ(回答)

冒頭のクイズの回答です。

ガイドの作成やガイドレイアウトなど、Photoshopの機能強化も見逃せませんが、スクリプトや拡張機能を利用することで、より効率的な作業が可能になります。

  • 定規からドラッグしてガイドを作成する際、目盛にスナップさせるには(shift)キーを押す
  • Photoshop CC 2014以降、(シェイプ)に対して、ワンアクションで4本のガイドを作成することができる。ただし、(選択範囲)を対象とすることはできない。
  • (ガイドレイアウト)を使えば、960 GridやBootstrapのグリッドに対応したガイドをスピーディに作成できる
  • Photoshopで複数のアイテムの間隔を均等に配置するには、(スマートガイド)や(スクリプト)を使う
  • カンバスのエッジからの距離を計るには、レイヤーを選択後、(command/Ctrl)キーを押したまま、レイヤー外にマウスポインタを移動する
連載

「ベテランほど知らずに損してるPhotoshopの新常識」のバックナンバー

  TAGS

  AUTHOR

鷹野 雅弘

1996年にDTP制作プロダクション「株式会社スイッチ」をスタート。 その後、Web制作、 コンサルティング業務にシフト。トレーニングやテクニカルライティング、書籍の企画や編集なども行っている。CSS Niteなどのセミナーイベントを企画運営のほか、DTP情報サイトDTP Transitを2005年から継続している。 テクニカルライターとして20冊以上の著書を持つ。主な著書に『10倍ラクするIllustrator仕事術(増強改訂版)』(共著、技術評論社)ほか。