PhotoshopもIllustratorも、標準機能だけで三分割法や黄金比の構図ガイドを引けます。Photoshopは表示メニューの「新規ガイドレイアウトを作成」、Illustratorは「グリッドに分割」＋ガイド化（command＋5）が入口で、どちらも数クリックで再現できます。
構図の理論はわかったのに、いざツールを開くと目分量で配置してしまう——バナーの構図が崩れる原因の大半は、ガイドを引かずに作り始めることにあります。ガイドさえ先に引いておけば、要素を「置くべき場所」へスナップさせるだけで構図が再現できます。
この記事では、三分割法・黄金比・対角線などの構図ガイドをPhotoshopとIllustratorで引く手順を、メニュー操作の順番どおりに解説します。仕上げに、整列・分布機能での視線誘導の実装と、バナーサイズ別のテンプレ化まで扱います。
はじめに：構図の「型」は理論編で
本記事は操作編です。三分割法・日の丸・対角線といった構図の種類と使い分け——「どの構図をいつ選ぶか」——は、理論編のバナーデザインの構図パターン｜三分割・対角線・日の丸で視線を操る基礎で図解つきで解説しています。型をまだ押さえていない方は、先に理論編を読んでから戻ってくると手順の意味がすっと入ります。
ここから先は「構図は決まっている。あとはツール上で正確に再現したい」という前提で、Photoshop→Illustratorの順に手順だけを積み上げていきます。
Photoshop：三分割グリッドを一発で引く
Photoshopで三分割ガイドを引く最短ルートは「新規ガイドレイアウトを作成」です。手動でガイドを4本ドラッグする必要はありません。
- バナーのカンバスを開き、メニューの「表示」→「新規ガイドレイアウトを作成」を選ぶ
- ダイアログで「列」にチェックを入れて数を「3」、間隔は空欄（0）にする
- 「行」にもチェックを入れて数を「3」、間隔は空欄にする
- OKを押すと、カンバスが縦横3等分されたガイドが一括で引かれる
- 「表示」→「ガイドをロック」でガイドを固定してから制作を始める
ダイアログの「プリセットを保存」を使えば、この3×3設定を名前付きで保存でき、次回からワンクリックで呼び出せます。ガイドの表示・非表示はcommand＋;（WindowsはCtrl＋;）で切り替えられます。詳細な仕様はAdobe公式の「ガイドとグリッド」ヘルプにまとまっています。
Photoshop：切り抜きツールのオーバーレイで構図を確認する
写真素材のトリミング段階なら、ガイドを引くより切り抜きツールのオーバーレイ表示が速い方法です。切り抜き枠の中に構図線を重ねて表示しながらトリミング位置を調整できます。
- 切り抜きツール（ショートカットC）を選ぶ
- オプションバーのオーバーレイ設定から「三分割」を選ぶ（初期設定も三分割）
- 切り抜き枠を調整し、被写体の主役が交点に乗る位置でトリミングを確定する
オーバーレイは三分割のほかに「グリッド」「対角」「三角形」「黄金比」「ゴールデンスパイラル」が用意されており、切り抜き中にOキーを押すと順番に切り替えられます。バナーに使う写真の「どこを見せるか」をこの段階で構図に沿わせておくと、配置後の調整が激減します。
Photoshop：対角線・シンメトリーのガイドを作る
Photoshopの標準ガイドは水平・垂直のみで、斜めのガイドは引けません。対角線構図の補助線が欲しいときは、ラインツールで対角線のシェイプレイヤーを作り、ガイド代わりに使います。
- ラインツールでカンバスの角から対角の角までドラッグして線を引く（2本）
- 線のレイヤーをグループ化して「構図ガイド」と名前を付ける
- グループをロックし、書き出し前に非表示にする
シンメトリー構図の中心軸は標準ガイドで対応できます。「表示」→「新規ガイド」で方向を「垂直方向」、位置を「50%」と入力すれば、カンバス中央に正確な軸が引けます。位置は%指定できるので、38.2%・61.8%と入力すれば黄金比の分割線も作れます。
Illustrator：三分割ガイドを引く
Illustratorには「新規ガイドレイアウト」に相当する機能がない代わりに、「任意のパスをガイドに変換できる」という強力な仕組みがあります。三分割は「グリッドに分割」と組み合わせるのが定番です。
- 長方形ツールでアートボードと同じサイズの長方形を描く（X・Y座標を0にして揃える）
- 長方形を選択したまま「オブジェクト」→「パス」→「グリッドに分割」を選ぶ
- 行の段数「3」・列の段数「3」・間隔はどちらも「0」にしてOK
- 分割された9つの長方形を選択したまま「表示」→「ガイド」→「ガイドを作成」（command＋5／WindowsはCtrl＋5）
- 「表示」→「ガイド」→「ガイドをロック」で固定する
これでアートボードが3×3に分割されたガイドになります。ガイドの仕様や解除方法はAdobe公式の「定規、グリッド、ガイド」ヘルプを参照してください。
Illustrator：黄金比・対角線のガイドを作る
三分割の分割位置を黄金比（38.2%・61.8%）に寄せたものがファイ・グリッドです。Illustratorでは位置を数値入力できるので、正確に再現できます。
- アートボードの幅×0.382と幅×0.618を計算する（幅1200pxなら458pxと742px）
- 直線ツールで垂直線を2本描き、変形パネルでX座標に計算した値を入力する
- 高さ方向も同様に高さ×0.382・×0.618の位置へ水平線を2本置く
- 4本の線を選択してcommand＋5でガイド化し、ロックする
黄金比のもうひとつの定番が黄金螺旋（ゴールデンスパイラル）です。黄金比の長方形を正方形で分割し続けると生まれる渦で、視線が渦の中心へ自然に収束します。Photoshopなら切り抜きツールのオーバーレイ「ゴールデンスパイラル」でそのまま表示でき、Illustratorでは上図のように分割スクエアを描いてからcommand＋5でガイド化すれば再現できます。渦の中心に主役（商品・顔・CTA）を置くのが使い方の基本です。
対角線も同じ要領で、アートボードの角と角を結ぶ直線を描いてcommand＋5を押すだけです。Photoshopと違って斜線も円もそのままガイドにできるのがIllustratorの強みで、曲線構図の補助線まで作れます。なお黄金比・白銀比をどの場面で使うべきかという判断は黄金比・白銀比・白金比の使い方で解説しています。
整列・分布で視線誘導を実装する（両ツール共通）
ガイドが「置く場所」を決める道具なら、整列・分布は「置いた要素をズレなく揃える」道具です。構図線に載せたつもりでも数ピクセルずれていると、視線の流れが濁ります。目視ではなく機能で揃えます。
- Photoshop：移動ツール（V）で複数レイヤーを選択すると、オプションバーに整列・分布ボタンが出る
- Illustrator：「ウィンドウ」→「整列」（shift＋F7）で整列パネルを開く。基準にしたいオブジェクトをもう一度クリックすると「キーオブジェクトに整列」になる
- 等間隔に並べる要素（特典3つ・ステップ3段階など）は、手動で置かず「分布」で間隔を揃える
視線誘導との組み合わせは「Z型の終点＝右下にCTAを整列で固定し、途中に置く要素は等間隔で分布させてリズムを作る」が基本形です。等間隔のリズムが視線を運び、終点のCTAで止まります。
バナーサイズ別にテンプレ化する
構図ガイドは毎回引き直すものではなく、一度作って使い回すものです。よく作るバナーサイズごとに、ガイドを引いた状態のファイルをテンプレとして保存しておきます。
- Photoshop：ガイドレイアウトのプリセット保存に加え、三分割ガイドを引いたPSDを「テンプレ」フォルダに保存し、複製から制作を始める
- Illustrator：「ファイル」→「テンプレートとして保存」で.ait形式にすると、開くたびに未保存の新規ドキュメントとして立ち上がり、上書き事故を防げる
- まず用意すべきは自分が受注・運用でよく使うサイズ。SNS広告の正方形（1080×1080）、OGP（1200×630）、ディスプレイ広告のレクタングル（300×250）あたりが定番
テンプレには三分割ガイドだけ入れておき、案件に応じて対角線やファイ・グリッドを足すのが運用しやすい形です。全構図のガイドを1ファイルに詰め込むと、線が多すぎて逆に迷います。
操作早見表：構図×ツール別の最短ルート
ここまでの手順を、構図別・ツール別の逆引き表にまとめます。制作中に「あの操作どこだっけ」となったらこの表に戻ってください。
| やりたいこと | Photoshop | Illustrator |
|---|---|---|
| 三分割グリッド | 表示→新規ガイドレイアウトを作成（列3×行3） | グリッドに分割（3×3）→ガイドを作成（command＋5） |
| ファイ・グリッド（黄金比分割） | 表示→新規ガイドで38.2%・61.8%を指定 | 座標入力で線を置き→command＋5 |
| 黄金螺旋 | 切り抜きツールのオーバーレイ「ゴールデンスパイラル」 | 分割スクエアを描いて→command＋5 |
| 対角線 | ラインシェイプで代用（標準ガイドは斜め不可） | 斜めの直線→command＋5 |
| シンメトリーの中心軸 | 表示→新規ガイドで垂直方向50% | 中央に垂直線→command＋5 |
| 写真を構図に沿ってトリミング | 切り抜きツール＋オーバーレイ（Oキーで切替） | Photoshop側での処理を推奨 |
| ガイドの固定 | 表示→ガイドをロック | 表示→ガイド→ガイドをロック |
ショートカットの表記はMac基準です。WindowsはcommandをCtrlに読み替えてください。
よくあるつまずきと対処法
ガイド運用で質問の多いつまずきを3つまとめます。いずれも表示メニュー周りの設定で解決します。
ガイドが制作中にずれる・動いてしまう
ガイドを引いたら必ずロックします。Photoshopは「表示」→「ガイドをロック」、Illustratorは「表示」→「ガイド」→「ガイドをロック」。ロックを習慣にするだけで、ドラッグ中にガイドをつかんでしまう事故が消えます。
ガイドが見えない・消えた
多くの場合、削除ではなく非表示になっているだけです。command＋;（WindowsはCtrl＋;）で表示を切り替えられます。それでも出ないときは、ガイドの色が背景色と同化していないかを環境設定（ガイド・グリッド）で確認してください。
要素がガイドにスナップしない
Photoshopは「表示」→「スナップ」がオンか、さらに「スナップ先」→「ガイド」にチェックが入っているかを確認します。Illustratorはスマートガイド（command＋U）をオンにすると、ガイドやオブジェクトへの吸着が効くようになります。
構図ガイドに関するFAQ
Q. ガイドは書き出した画像に写りますか？
写りません。ガイドは編集用の補助表示で、書き出し・保存した画像には含まれません。ただしPhotoshopでラインシェイプをガイド代わりにした場合はただのレイヤーなので、書き出し前に必ず非表示にしてください。
Q. Photoshopで斜めのガイドは引けますか？
標準ガイドは水平・垂直のみで斜めには引けません。対角線構図の補助線はラインシェイプのレイヤーで代用するか、トリミング段階なら切り抜きツールのオーバーレイ「対角」を使います。
Q. Illustratorで斜めや円形のガイドは作れますか？
作れます。直線・円・自由な曲線など任意のパスを選択して「表示」→「ガイド」→「ガイドを作成」（command＋5）を押せば、その形のままガイドになります。解除は「ガイド」→「ガイドを解除」です。
Q. 三分割と黄金比のガイドはどちらを使えばよいですか？
まずは三分割で十分です。差は数%の分割位置の違いで、バナーサイズでは体感差が小さいためです。ロゴ設計や余白を厳密に詰めたい場面だけファイ・グリッドに切り替える、という使い分けが実務的です。
Q. FigmaやCanvaでも同じことはできますか？
できます。Figmaはフレームに「レイアウトグリッド」で列3・行3を追加、Canvaは「表示設定」の定規とガイドで再現できます。構図ガイドの考え方はツールに依存しないので、本記事の手順を各ツールの機能に読み替えてください。
Q. ガイドを引いても仕上がりが良くならないのはなぜですか？
ガイドは構図を再現する道具で、構図の選択そのものは別の判断だからです。バナーの目的に合わない構図を正確に再現しても効果は出ません。目的別の構図の選び方は理論編の早見表を参照してください。
まとめ：ガイドを先に引けば構図は再現できる
構図の再現は特別な技術ではなく、「作り始める前にガイドを引く」という習慣の問題です。要点をまとめます。
- Photoshopの三分割は「表示」→「新規ガイドレイアウトを作成」で列3×行3。プリセット保存で使い回す
- 写真のトリミングは切り抜きツールのオーバーレイ（三分割・黄金比・対角）で構図に沿わせる
- Illustratorは「グリッドに分割」＋command＋5。斜め・曲線もガイド化できる
- 配置の仕上げは目視でなく整列・分布。Z型の終点にCTAを固定する
- よく使うバナーサイズはガイド付きテンプレにして、引き直しをなくす
ガイドで配置が決まったら、残る変数は配色とフォントです。制作前のあたり付けには無料のデザイン支援ツールが使えます。
日本の伝統色から配色を探せる「配色辞典」を使ってみる（無料）
見出しと本文の組み合わせを試せる「フォントペアリングプレビューアー」はこちら（無料）