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

連載

ベテランほど知らずに損してるPhotoshopの新常識

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

はじめに：クイズ

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

__
Photoshop体験版
ダウンロード

ガイドの作成

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

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

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

［A］ルーラーからドラッグ（手動）

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

https://blog.adobe.com/media_e5091715689bd4f7aef66201b6ed9e181aa73da4.gif

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

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

https://blog.adobe.com/media_1fea54884859f90ea38209e9336ff9637fac4278.gif

ガイドのロック

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

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

ガイドの移動

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

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

https://blog.adobe.com/media_3c180eb45f3811ee23f7197884f4e8bc289a8ec2.gif

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

定規の交差点

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

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

［B］新規ガイド（数値指定）

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

https://blog.adobe.com/media_dd1d0461cab3c0df6b9f6ebf7e6a9e04a0fcd399.gif

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

https://blog.adobe.com/media_a9eca8f5944a57d25b70db77dfcf639ca1b7b9dc.gif

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

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

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

https://blog.adobe.com/media_c87ede6264369a66d0a3c392abd301905afe42bb.gif

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

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

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

スクリプトを利用

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

https://blog.adobe.com/media_ccf25a250e1726cc3c5b4f002d5217714338b647.gif

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

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

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

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

https://blog.adobe.com/media_fde14ef5529f2378596fcec66d7c91a369635eda.gif

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

https://blog.adobe.com/media_9549c19127f36e7c319679c9378aa91c45177a05.gif

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

https://blog.adobe.com/media_180ac8fc7108e5d3be6d05e2d461a93f91352f6b.gif

［C］シェイプからガイド

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

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

https://blog.adobe.com/media_44e14bfef82401f52f73ee02208a1de75aeedeb8.gif

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

https://blog.adobe.com/media_264170da3e939fc00d49b8c05c2b340c21ddad54.gif

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

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

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

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

［D］ガイドレイアウト

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

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

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

https://blog.adobe.com/media_f29b0fe3a8d81408a987c79b7bd8b612682b4ecf.gif

960 grids

https://blog.adobe.com/media_e4b2e2f27f75b69ee6bd097c7e686c78ba16a316.gif

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

https://blog.adobe.com/media_5429cc2e901b91a54bd8ea004efecd05d1de4660.gif

Bootstrap

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

https://blog.adobe.com/media_a7dbe4bb3d837474b2e85037d2147538163d5f36.gif

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

https://blog.adobe.com/media_fc44cae53e84d972bc4f614713bc3ebb3a5ebc58.gif

プリセット

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

https://blog.adobe.com/media_ddfe5e70a1babbed4ae3a8922f87c6a3d9fac798.gif

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

ガイドの使いこなし

ガイドの表示/非表示

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

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

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

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

アートボードとガイド

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

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

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

https://blog.adobe.com/media_028a46b60b1ca515e5b233b72c5240ac626a8a2d.gif

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

スマートガイド

カンバスからの距離

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

https://blog.adobe.com/media_6fbcabefe3c7b80aac77442d9b3b183056667d40.gif

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

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

レイヤーを複製時に計測

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

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

https://blog.adobe.com/media_a8b6c841ae475b7119008a409822aa6c81d9ca8a.gif

整列

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

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

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

https://blog.adobe.com/media_e0ba6b64651ab1f7909716c6ef5dcbb59aa61be5.gif

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

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

https://blog.adobe.com/media_4ff559f2700c25887c54cc23f228a1f6d5c3fcbf.gif

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

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

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

https://blog.adobe.com/media_b52d027fab44a286000bb6c27373f5603034da2e.gif

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

https://blog.adobe.com/media_15e0ee4689ca6e12c6060da92e1126c75aa5a5ca.gif

キーオブジェクト

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

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

https://blog.adobe.com/media_9367e1b0b32316bc495dfb67f8383c005b636e92.gif

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

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

整列をパネルを行いたい

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

https://blog.adobe.com/media_3fd9b3df4f287dc539bf0d299a8a1a9cf965a94e.gif

等間隔に分布

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

https://blog.adobe.com/media_9a454df1f12c43545568a00314f61c9d915567bf.gif

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

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

指定間隔で分布

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

https://blog.adobe.com/media_0e4035d319eceb103a873083aae3f70e4feee9e2.gif

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

まとめとクイズ（回答）

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

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