バナーデザインの構図とは、伝えたい情報の優先順位に沿って視線の流れを設計し、要素を配置する「型」のことです。写真の世界で体系化されてきた写真構図（三分割法・日の丸構図・対角線構図など）は、バナーやアイキャッチ制作にそのまま転用できます。
「配色もフォントも悪くないはずなのに、なぜか素人っぽく見える」。バナー制作のこの悩みの多くは、色でも書体でもなく配置——つまり構図で説明がつきます。要素をどこに置くかが決まらないまま作り始めると、視線の行き先が定まらず、伝えたい順番で情報が届きません。
この記事では、写真の定番として整理されている9つの写真構図をバナーデザイン向けに翻訳し、赤線の図解つきで解説します。読み終わる頃には、参考バナーを見て「どの構図で組まれているか」を言語化でき、自分のデザインにも根拠を持って要素を配置できるようになります。
バナーデザインに「写真構図」が効く理由
写真とバナーは「限られたフレームの中で、一瞬で主役を伝える」という点でまったく同じ課題を抱えています。写真構図は、その課題に対して先人が長い年月をかけて体系化してきた答えです。日の丸・三分割・対角線など、写真の定番構図は9つに整理できます。本記事では、この9つをバナーデザインの言葉に翻訳して解説します。つまり構図はセンスではなく、学べば誰でも再現できる「型」です。
デザイン学習では配色やフォントから入る人が多いですが、視線の設計はそれより手前にある土台です。構図を学ぶと、次の3つが一度に手に入ります。
- 要素の置き場所に根拠を持てる（「なんとなく中央」がなくなる）
- 参考デザインを構図で分解できるため、模写や引き出しの吸収が速くなる
- 写真素材の選び方・トリミングまで、一貫した基準で判断できる
構図は近接・整列といったデザイン原則と矛盾するものではありません。原則が「要素同士の関係の整え方」だとすれば、構図は「画面全体の視線の設計図」です。デザイン原則をまだ整理できていない場合は、UI/UXデザインの質を上げる6つの基本原則と合わせて読むと理解が深まります。
前提知識：視線誘導のZ型・F型
個別の構図に入る前に、人の視線がどう動くかを押さえます。視線誘導とは、人の目が画面上を移動する既定のパターンを利用して、情報を見せる順番をコントロールする技術です。バナーの構図はすべて、この視線の動きを前提に組み立てます。
Z型は「左上→右上→左下→右下」とアルファベットのZを描く動きで、ビジュアル主体のレイアウトを眺めるときに現れやすいパターンです。静止画のバナー・ポスターはZ型を前提に設計するのが基本で、「左上にロゴや主役、右下にCTAボタン」という定石はこの動きから来ています。
F型はテキスト主体のページで現れる動きで、ユーザビリティ研究機関Nielsen Norman Groupのアイトラッキング調査（2006年）で報告されました（出典：F-Shaped Pattern For Reading Web Content）。上の行ほどよく読まれ、下に行くほど左端しか見られなくなります。テキスト量の多い縦長バナーや記事型LPはF型を意識して組みます。
- ビジュアル主体の横長バナー → Z型で設計する
- テキスト主体・縦長のバナーやLP → F型で設計する
- どちらの場合も「視線の終点にCTA」を置くのが原則
三分割法：迷ったらこれ
三分割法とは、画面を縦横それぞれ3等分し、分割線と4つの交点に主要な要素を配置する構図です。1797年に画家ジョン・トーマス・スミスが著書『Remarks on Rural Scenery』で提唱したとされる、最も歴史のある構図のひとつで、写真・絵画・デザインを問わず使われ続けています。
主役を画面中央ではなく交点にずらすと、空いた側に余白が生まれ、画面にリズムと情報の置き場所ができます。バナーでは「主役ビジュアルを片側の交点、コピーを反対側の空間」という役割分担が基本形です。
- 商品写真を右側の交点に置き、左側の空間にキャッチコピーを組む
- 人物写真は顔（特に目線）を上側の交点に合わせる
- CTAボタンは下側の分割線に沿わせると、Z型の視線の終点に自然に入る
「迷ったら三分割法」が実務の答えです。FigmaでもPhotoshopでも、ガイドを3等分に引くだけで再現でき、適用できないレイアウトがほとんどないほど汎用性があります。
日の丸構図：1メッセージを最速で届ける
日の丸構図とは、画面の中央に主役を1つ置く構図です。国旗の日の丸のように視線が迷う余地がなく、伝えることが1つしかないバナーでは最速で最強の選択肢になります。「50%OFF」のセール告知や、1商品だけを押し出すキャンペーンバナーが典型例です。
弱点は単調に見えやすいことです。写真の世界で「日の丸構図は初心者っぽい」と言われるのは、中央に置いただけで工夫が止まるためで、中央配置そのものが悪いわけではありません。次の工夫で単調さは回避できます。
- 主役の周囲に余白をたっぷり取り、中央への圧を作る
- 背景と主役の明度差・彩度差を強くして浮き上がらせる
- 円形の座布団（背景シェイプ）や集中線で中央を補強する
対角線構図：動きとスピード感を作る
対角線構図とは、画面の対角線上に要素を並べて動きと奥行きを作る構図です。水平・垂直だけで組んだレイアウトに比べ、斜めの流れは躍動感やスピード感を生みます。タイムセールの斜め帯、商品を斜めに傾けた配置、人物の動きのある写真などと相性抜群です。
注意点は可読性です。読ませたい文字まで斜めにすると一気に読みにくくなります。動きは写真・シェイプ・背景で作り、キャッチコピーや価格などの文字情報は水平に保つのが実務のバランスです。
シンメトリー構図：信頼感とフォーマルさ
シンメトリー構図とは、中心軸に対して左右（または上下）対称に要素を配置する構図です。対称性は人の目に安定感・信頼感・フォーマルさの記号として働くため、士業・金融・ブライダルなど信頼を訴求したい業種のバナーに好相性です。
もうひとつの得意分野が比較です。ビフォーアフター、プランAとプランB、旧製品と新製品——2つを並べて見せるバナーは、中心軸を境にしたシンメトリー構図がそのまま設計図になります。対称を少しだけ崩して片側を強調すると、比較しつつ推したい側へ視線を誘導できます。
三角構図：要素が多いバナーを整理する
三角構図とは、要素を三角形の頂点に沿って配置し、底辺の広がりで安定感を、頂点で視線の集約を作る構図です。山や建物の写真で使われる型ですが、バナーでは「載せたい要素が3つ以上ある」ときの整理術として真価を発揮します。
商品3点、特典3つ、ステップ3段階——これらをただ横並びにすると平坦になりますが、三角形に組めば「頂点＝いちばん伝えたいもの」「底辺＝支える情報」という優先順位が視覚化されます。逆三角形にすれば視線が下の頂点へ落ちるため、CTAへ視線を送りたいときにも使えます。
点構図：余白で高級感を作る
点構図とは、広い余白の中に主役を小さく置く構図です。写真では風景のスケール感を出す型ですが、バナーでは「余白の高級感」を作る型として機能します。ハイブランドの広告が余白だらけなのは偶然ではなく、余白そのものが「詰め込まなくていい余裕」の記号として働くからです。
ミニマル・上質・洗練を打ち出したいブランディングバナーや、ロゴと一言だけのティザーバナーに向きます。主役が小さいぶん置く位置がすべてなので、三分割の交点に合わせると画面が締まります。
トンネル構図：視野を絞って1点に集める
トンネル構図とは、周囲を囲む要素で視野を絞り、中央の主役へ視線を押し込む構図です。写真では木々や窓枠で被写体を囲みますが、バナーではフレーム装飾・周辺減光（ビネット）・円形の切り抜きがその役割を担います。
視線の逃げ場をなくすため、誘導力は全構図の中でもトップクラスです。クーポンコードや限定オファーなど「絶対に見てほしい1点」があるときに使います。ただし囲みを太くしすぎると窮屈になるので、フレームは控えめに、中央の余白は十分に確保するのがコツです。
放射線構図：勢いと注目を演出する
放射線構図とは、1点から放射状に伸びる線で視線をその点へ集める構図です。マンガの集中線と同じ原理で、勢い・爆発力・注目の演出に直結します。
「本日最終日」「ポイント10倍」のような勢いで押すセールバナーの定番です。背景に集中線素材や放射状のグラデーションを敷くだけで再現でき、日の丸構図と組み合わせて「中央の主役＋放射背景」にすると効果が倍増します。多用すると安っぽくなるため、押すべき場面に絞って使います。
曲線構図：柔らかさと自然な流れを作る
曲線構図とは、S字やC字の曲線に沿って要素を配置し、柔らかさと自然な流れを作る構図です。直線で組んだレイアウトに比べて、優しい・有機的な印象を与えます。
コスメ・オーガニック食品・リラクゼーションなど、柔らかさが価値になる商材と好相性です。曲線は写真の中の道や川だけでなく、あしらいの曲線シェイプや商品を並べる軌跡でも作れます。視線が曲線を辿った先の終点にCTAを置くと、流れがそのまま導線になります。
黄金比・白銀比は「比率の構図」として使う
黄金比（1:1.618）や白銀比（1:1.414）は、線の引き方ではなく、画面や要素の縦横比・分割比に使う「比率の構図」です。三分割法の分割位置を黄金比に寄せたファイ・グリッドという派生もあり、ロゴやレイアウトの縦横比を決める場面で役立ちます。
比率ごとの性格や具体的な使い方は黄金比・白銀比・白金比の使い方｜バナーやロゴに応用できるデザイン理論で詳しく解説しています。本記事ではまず「基本は三分割法、こだわりたい箇所だけ比率を検討する」という優先順位だけ覚えておけば十分です。
目的別・構図の選び方（早見表）
ここまでの構図を「バナーで何を達成したいか」から逆引きできるよう整理しました。制作前にこの表で型を決めてから手を動かすと、迷いが大きく減ります。
| バナーの目的 | おすすめ構図 | ねらい |
|---|---|---|
| 1つの商品・メッセージを強く押す | 日の丸構図 | 視線を中央の主役に集中させる |
| 主役ビジュアルとコピーを両立させる | 三分割法 | 主役と情報の置き場所を分ける |
| セール・キャンペーンの勢いを出す | 対角線構図 | 斜めの流れで躍動感を作る |
| 信頼感・フォーマルさを演出する | シンメトリー構図 | 対称の安定感を利用する |
| 2案を比較して見せる | シンメトリー構図 | 中心軸を境に並列で見せる |
| 要素が3つ以上あって整理したい | 三角構図 | 優先順位を三角形で視覚化する |
| 余白で高級感を出す | 点構図 | 小さな主役と広い余白の対比 |
| 絶対に見てほしい1点がある | トンネル構図 | 囲みで視野を絞る |
| 勢い・お祭り感で押す | 放射線構図 | 集中線の誘導効果 |
| 柔らかく自然に流したい | 曲線構図 | S字の動きで印象を和らげる |
| テキスト主体で読ませる | F型設計 | 読み進む導線に沿わせる |
なお、この表は1枚のバナーを対象にした選び方です。Webページ全体の段組みやカラム設計に踏み込む場合は、グリッドレイアウト完全ガイドの考え方と組み合わせてください。
よくある失敗と直し方
構図を知った直後に陥りやすいつまずきを3つ挙げます。いずれも「構図は骨組みであって、置けば終わりではない」ことが原因です。
全要素を目立たせて視線が迷子になる
コピーも価格も写真もボタンも全部大きい——依頼側の要望をそのまま全部強調すると、視線の行き先が消えます。直し方は、主役を1つ決めて構図の主点（交点・中央・頂点）に主役だけを置くこと。残りの要素は脇役として構図線に沿わせ、サイズと明度で一段落とします。
なんとなく中央寄せで単調になる
意図せず日の丸構図になっているパターンです。直し方は二択で、三分割の交点に主役をずらして余白を作るか、日の丸構図と割り切って余白とコントラストを作り込むか。「中央に置いた理由を説明できるか」が判断基準になります。
写真だけ構図に沿わせ、文字を隙間に流し込む
写真のトリミングは三分割法なのに、コピーやボタンは空いたところに詰め込む——これでは構図が半分しか効きません。文字ブロックも構図の一要素として分割線や交点に載せてください。ただし可読性は最優先で、文字自体は水平を保ちます。
バナーデザインの構図に関するFAQ
Q. バナーデザインに構図の知識は本当に必要ですか？
必要です。構図は要素配置の根拠になる土台で、配色やフォントの知識だけでは「どこに置くか」が決まりません。構図を先に決めてから作り始めると、制作スピードと仕上がりの両方が安定します。
Q. どの構図から練習すればよいですか？
三分割法から始めてください。ガイドを引くだけで再現でき、適用範囲が最も広い構図です。三分割法で組めるようになってから、日の丸構図や対角線構図に広げるのが近道です。
Q. 構図はバナー以外のWebデザインにも使えますか？
使えます。ヒーローセクション、アイキャッチ、OGP画像、LPのファーストビューなど「1画面で伝える」場面すべてに転用できます。ページ全体の段組み設計はグリッドレイアウトの領域なので、構図と使い分けてください。
Q. 写真構図とデザインの構図は何が違いますか？
原理は同じで、対象が違うだけです。写真は現実の被写体をフレームに収める配置の技術、デザインは文字・写真・ボタンなどの要素をゼロから配置する技術です。デザインの方が要素を自由に動かせるぶん、構図の型がそのまま設計図として機能します。
Q. 構図どおりに配置したのに垢抜けないのはなぜですか？
多くの場合、余白と強弱の不足が原因です。構図は骨組みであり、交点に置いた主役が背景に埋もれていれば効果は出ません。主役と脇役の明度差・サイズ差をはっきりつけ、構図線の周りの余白を確保してください。
Q. FigmaやPhotoshopで構図のガイドは引けますか？
引けます。Figmaはレイアウトグリッドで3カラム×3行を設定、Photoshopは「表示→新規ガイドレイアウトを作成」で列数・行数に3を指定すれば、三分割法のガイドが一発で引けます。ツール別の具体的な手順は続編の実装編で解説予定です。
まとめ：構図が決まれば配置に迷わない
写真構図は写真のための知識に見えて、実際は「1画面で伝えるすべてのデザイン」の共通言語です。最後に要点をまとめます。
- 構図とは視線の流れを設計する型。センスではなく再現できる技術
- バナーは原則Z型を前提に、視線の終点へCTAを置く
- 迷ったら三分割法。1メッセージなら日の丸、動きなら対角線・曲線、信頼ならシンメトリー、要素が多いなら三角、余白で魅せるなら点、集中させるならトンネル・放射線
- 黄金比・白銀比は「比率の構図」として要所だけに使う
- 構図の主点に置く主役は1つ。余白と強弱で構図を活かす
構図で配置が決まったら、次に迷うのは配色とフォントです。手を動かす前に、無料のデザイン支援ツールであたりを付けておくと制作がさらに速くなります。
日本の伝統色から配色を探せる「配色辞典」を使ってみる（無料）
見出しと本文の組み合わせを試せる「フォントペアリングプレビューアー」はこちら（無料）