構図とは？
構図とは、画面や紙面の中で、要素をどのように配置するかを考えることです。
主役をどこに置くのか、画面をどう分けるのか、余白をどのくらい取るのか、視線をどこへ流すのか。
こうした配置の方向性を決める考え方が構図です。
構図は写真だけでなく、Webやバナーにも使える
構図は写真や絵画だけでなく、Webデザイン、バナー、LP、チラシ、ポスターなどにも使えます。
たとえば、商品写真を中央に置けば主役が分かりやすくなり、画面を左右に分ければ文字と写真の役割を整理しやすくなります。
構図を意識すると、感覚だけで配置するのではなく、「なぜそこに置くのか」を考えやすくなります。
構図とレイアウト・グリッドの違い
構図は、画面全体の骨組みや見せ方の方向性を考えるものです。
レイアウトは、文字や画像、ボタンなどを実際に配置して情報を整理することです。
グリッドは、要素の位置や幅、余白をそろえるための仕組みです。
構図で大きな方向性を決め、レイアウトで具体的に配置し、グリッドや整列で細かく整えると考えると分かりやすいです。
この記事で紹介する構図の種類
この記事では、構図を大きく6つに分けて紹介します。
| 分類 | 主な種類 |
|---|---|
| 基本の構図 | 日の丸構図、三分割構図、二分割構図、黄金分割構図、黄金螺旋構図 |
| 安定感を作る構図 | 三角構図、シンメトリー構図、L字構図 |
| 動きと奥行きを作る構図 | 対角線構図、放射線構図、トンネル構図、S字・C字構図、Z構図 |
| 主役を強調する構図 | 額縁構図、アップ構図、余白構図 |
| リズムと統一感を作る構図 | パターン構図、奇数構図 |
| 意味やストーリーを伝える構図 | 対比構図、レイヤー構図 |
基本の構図｜画面全体のバランスを整える
基本の構図は、主役の位置や画面全体のバランスを考えるときに役立ちます。
まずは、日の丸構図、三分割構図、二分割構図を覚えると、レイアウトの基本をつかみやすくなります。
日の丸構図｜主役を中央に置いて強く見せる
日の丸構図とは、主役を画面の中央に配置する構図です。
中央に置いた要素は視線を集めやすく、「これが主役です」と伝えやすくなります。商品写真、人物、ロゴ、キャンペーンコピーなどを強く見せたいときに使いやすい構図です。
ただし、中央に置くだけでは単調に見えることもあります。余白、背景、文字の強弱、装飾の位置まで合わせて考えると、意図のある構図になります。
三分割構図｜画面を3分割して自然なバランスを作る
三分割構図とは、画面を縦横それぞれ3分割し、その線や交点を目安に要素を配置する構図です。
主役を中央から少しずらして配置できるため、自然な余白や抜け感を作りやすくなります。Webサイトのファーストビューや、文字と写真を組み合わせるバナーにも使いやすいです。
配置に迷ったときは、画面を3つに分けて、主役や重要な情報をどこに置くと見やすいか考えてみましょう。
二分割構図｜画面を2つのエリアに分けて情報を整理する
二分割構図とは、画面を上下または左右に分け、明確に2つのエリアを作る構図です。
左にテキスト、右に写真を置く。上にビジュアル、下に説明文を置く。左にBefore、右にAfterを並べる。
このように、情報の役割を分けて見せたいときに役立ちます。
ただし、きっちり分けすぎると単調に見えることもあります。境界を少しずらしたり、片側に余白を作ったりすると、自然なバランスを作りやすくなります。
黄金分割構図｜黄金比を目安に自然な偏りを作る
黄金分割構図とは、黄金比を目安に画面を分割し、自然なバランスを作る構図です。
黄金比は、およそ1:1.618の比率です。デザインでは、メインビジュアルと文字エリアの比率、写真と余白のバランス、画面全体の分割などに応用できます。
ただし、黄金比を使えば必ず美しくなるわけではありません。数値を正確に合わせるよりも、「均等に分けすぎず、自然な偏りを作る目安」として使うと分かりやすいです。
黄金螺旋構図｜螺旋の流れに沿って主役へ視線を導く
黄金螺旋構図とは、黄金比をもとにした螺旋の流れに沿って、視線を主役へ導く構図です。
デザインでは、写真やイラストの流れ、背景の曲線、装飾、コピーから商品への視線誘導などに応用できます。たとえば、背景の曲線が商品やCTAボタンへ向かう見せ方が近いです。
最初から厳密に使いこなす必要はありません。「視線が自然に流れながら主役へ向かう構図」として理解しておくとよいでしょう。
安定感を作る構図｜落ち着きや信頼感を伝える
安定感を作る構図は、画面に落ち着きや信頼感、整った印象を出したいときに役立ちます。
企業サイト、コーポレート系のバナー、高級感のあるデザインなどと相性が良いです。
三角構図｜三角形の配置で安定感や重厚感を作る
三角構図とは、要素を三角形の形に配置する構図です。
三角形は下に重心があるため、安定感や重厚感を出しやすくなります。人物、商品、文字、装飾などを三角形のバランスで配置すると、画面がまとまりやすくなります。
3つの商品や3人の人物を配置するときにも使いやすい構図です。A構図やピラミッド構図と呼ばれることもあります。
シンメトリー構図｜左右対称・上下対称で整った印象を作る
シンメトリー構図とは、左右または上下が対称になるように要素を配置する構図です。
整った印象、静けさ、高級感、格式、信頼感を出しやすいのが特徴です。ブランドサイト、ホテル、建築、化粧品、コーポレートサイトなどで使いやすいです。
ただし、整って見える一方で、動きが弱くなることもあります。静かな印象を作りたい場面で使うと効果的です。
L字構図｜縦横の軸と余白で安定した配置を作る
L字構図とは、縦方向と横方向の軸を使い、画面の左側や下側に要素を集め、反対側に余白を作る構図です。
左側に見出しや本文を置き、右側に余白や写真を置く構成などに応用できます。画面をきっちり二分割するよりも、余白を活かして落ち着いた印象を作りやすいです。
ただし、要素が片側に偏りやすいため、写真や背景、余白の量で画面全体の重さを調整しましょう。
動きと奥行きを作る構図｜画面に流れや勢いを加える
動きと奥行きを作る構図は、画面に流れ、勢い、立体感を出したいときに役立ちます。
斜めのライン、曲線、奥へ向かう流れを使うことで、静止したデザインにも動きを感じさせやすくなります。
対角線構図｜斜めのラインで動きやスピード感を作る
対角線構図とは、画面の斜め方向に要素やラインを配置する構図です。
水平・垂直の配置よりも、動きや勢い、スピード感を出しやすいのが特徴です。セールバナー、スポーツ系のビジュアル、キャンペーン訴求などと相性が良いです。
左下から右上へ向かう配置は上昇感を作りやすく、右上から左下へ流す配置は迫力を出しやすくなります。斜線構図やダイアゴナル構図と呼ばれることもあります。
放射線構図｜一点へ視線を集めて奥行きを作る
放射線構図とは、線や要素が一点に向かって集まる、または一点から広がるように見える構図です。
視線をひとつの場所に集めやすく、奥行きや迫力を出しやすいのが特徴です。背景のライン、光の演出、装飾、図解の矢印などに応用できます。
商品に向かって背景ラインを集めると、自然に商品へ視線を誘導できます。消失点やパースを使った奥行き表現も、放射線構図に近い考え方です。
トンネル構図｜手前から奥の主役へ視線を導く
トンネル構図とは、手前から奥へ続く空間を使って、奥にある主役へ視線を導く構図です。
写真ではトンネルや通路、アーチなどで使われます。デザインでは、背景の奥行き、重なったフレーム、連続する図形などに応用できます。
額縁構図が「囲って目立たせる」構図なのに対して、トンネル構図は「奥へ誘導する」意味が強い構図です。
S字・C字構図｜曲線でやわらかい流れや奥行きを作る
S字・C字構図とは、S字やC字のような曲線の流れを使う構図です。
直線的な構図よりも、やわらかさ、自然さ、ゆったりした流れを作りやすいのが特徴です。背景の曲線、装飾、イラスト、商品配置などに応用できます。
S字構図は奥へ流れるような動きに、C字構図は主役をゆるく囲む見せ方に向いています。美容、食品、ライフスタイル系のデザインとも相性が良いです。
Z構図｜ジグザグの配置で画面全体に視線を流す
Z構図とは、画面の中にZ字のような流れを作る構図です。
左上から右上、左下、右下へ流れるように配置すると、画面全体を大きく使いやすくなります。横長のバナー、Webサイトのファーストビュー、チラシの表面などで使いやすいです。
ただし、Z構図は見る人の視線を必ずZ字に動かすものではありません。大きな写真や強い色がある場合は、そちらに視線が引っ張られることもあります。
主役を強調する構図｜見せたい要素を際立たせる
主役を強調する構図は、商品、人物、コピー、ロゴ、CTAなど、最初に見てほしい要素を分かりやすくするために使います。
額縁構図｜周囲の要素で主役を囲って目立たせる
額縁構図とは、周囲の要素で主役を囲うように配置する構図です。
写真では窓やアーチ、デザインでは図形、余白、背景、装飾、カード、枠線などを使って主役を囲みます。囲いがあると視線が内側へ向きやすくなり、商品写真、キャンペーン情報、CTAなどを目立たせやすくなります。
ただし、囲みすぎると窮屈に見えるため、主役まわりの余白も一緒に考えましょう。
アップ構図｜主役を画面いっぱいに見せて迫力を出す
アップ構図とは、主役を画面いっぱいに大きく見せる構図です。
人物の表情、商品の質感、料理、素材、ロゴ、コピーなどを強く見せたいときに使いやすいです。食品バナーで料理を大きく見せる、化粧品広告でボトルを大きく見せる、といった使い方があります。
インパクトを出しやすい反面、文字を入れる余白が少なくなりやすいため、文字の置き場所や背景とのコントラストを確認しましょう。
余白構図｜広い余白によって主役を引き立てる
余白構図とは、主役の周りに余白を作り、見せたい要素を引き立てる構図です。
余白は、主役を目立たせ、情報を読みやすくし、画面に落ち着きを作るための要素です。高級感、上品さ、静けさ、洗練された印象を出したいデザインと相性が良いです。
主役を大きく見せるだけが強調ではありません。余白の中で静かに目立たせる方法もあります。
リズムと統一感を作る構図｜複数の要素を整理する
リズムと統一感を作る構図は、カード、アイコン、商品一覧、特徴紹介など、同じような要素を複数扱うときに役立ちます。
パターン構図｜要素を繰り返して統一感を作る
パターン構図とは、同じ形、色、サイズ、間隔、要素を繰り返して配置する構図です。
繰り返しがあると、画面に統一感やリズムが生まれ、情報を追いやすくなります。カード型レイアウト、商品一覧、アイコンリスト、背景パターンなどでよく使われます。
一部だけ色や形を変えると、注目点を作ることもできます。ただし、変化をつけすぎると統一感が弱くなるため、見せたい要素だけに絞ることが大切です。
奇数構図｜3つ・5つなどの要素で自然なリズムを作る
奇数構図とは、3つ、5つ、7つのように、奇数の要素で画面を構成する考え方です。
必ず奇数にすればよいわけではありませんが、奇数にすると自然なリズムが生まれやすい場合があります。3つの特徴、3つの商品、5つのメリット、3枚のカードなどで使いやすいです。
特に「3」はデザインでよく使われる数です。3つの要素を三角形に配置すれば三角構図にもつながり、横並びにすればパターン構図にもなります。
意味やストーリーを伝える構図｜情報の関係を見せる
意味やストーリーを伝える構図は、比較、変化、奥行き、階層など、情報同士の関係を見せたいときに役立ちます。
対比構図｜違いのある要素を並べて変化や比較を伝える
対比構図とは、明確な違いのある要素を並べて、変化や関係性を分かりやすく見せる構図です。
BeforeとAfter、課題と解決策、古いものと新しいものなどを並べることで、違いを直感的に伝えやすくなります。LPの改善訴求、サービス紹介、比較表、広告バナーなどで使いやすいです。
ただし、単に違うものを並べるだけでは弱くなります。「何を比べているのか」「その違いから何を伝えたいのか」が分かるように配置しましょう。
レイヤー構図｜前景・中景・背景で奥行きと階層を作る
レイヤー構図とは、前景・中景・背景のように、複数の要素を前後関係で重ねて、奥行きや情報の階層を作る構図です。
デザインでは、背景、写真、装飾、文字、ボタンなどを重ねて、立体感や情報の優先順位を作ります。たとえば、背景の上に写真を置き、さらに手前に見出しやCTAを配置する見せ方です。
ただし、重ねすぎると読みにくくなります。文字と背景のコントラストや、要素同士の重なりに注意しましょう。
媒体別に見る構図の使い方
構図はどの媒体でも使えますが、見られ方や目的によって使いやすい構図は変わります。
Webサイトで使いやすい構図
Webサイトでは、ファーストビューや各セクションの構成に構図を使えます。
コピーと写真を整理したいときは、三分割構図や二分割構図が使いやすいです。落ち着きや信頼感を出したいときは、シンメトリー構図や余白構図が向いています。
スクロールして見られるため、1画面だけでなくページ全体の流れも意識しましょう。
バナーデザインで使いやすい構図
バナーでは、短時間で主役が伝わる構図が重要です。
商品やコピーを強く見せたいときは、日の丸構図、アップ構図、余白構図が使いやすいです。勢いやキャンペーン感を出したいときは、対角線構図やZ構図が向いています。
まず一番見せたい要素を決め、その要素を中心に構図を考えましょう。
チラシ・ポスターで使いやすい構図
チラシやポスターでは、見る距離や情報量に合わせて構図を考えます。
ポスターは遠くから見られるため、日の丸構図、アップ構図、対角線構図など、主役が分かりやすい構図が向いています。
チラシは手元で読まれるため、二分割構図、三分割構図、パターン構図、対比構図などで情報を整理すると見やすくなります。
構図を使うときの注意点
構図は、レイアウトを考えるための手がかりです。
ただし、構図に当てはめることだけを目的にすると、かえって見づらくなることがあります。
主役を決めずに配置を始めない
構図を使う前に、まず主役を決めましょう。
商品、コピー、人物、CTAなど、何を一番見せたいかによって合う構図は変わります。
複数の構図を混ぜすぎない
複数の構図を組み合わせることはありますが、混ぜすぎると画面が散らかりやすくなります。
まずはメインの構図をひとつ決め、その補助として別の構図を使うと整理しやすくなります。
デザイン初心者向け｜構図の学習ロードマップ
構図は、使いやすいものから順番に覚えると理解しやすくなります。
STEP1｜日の丸・三分割・二分割構図を覚える
まずは、日の丸構図、三分割構図、二分割構図を覚えましょう。
主役を強く見せる、自然なバランスを作る、情報を整理するという基本を学べます。
STEP2｜三角・シンメトリー・対角線構図を覚える
次に、三角構図、シンメトリー構図、対角線構図を覚えましょう。
安定感、整った印象、動きや勢いなど、デザインの印象を調整しやすくなります。
STEP3｜余白・額縁・放射線構図を使ってみる
次に、余白構図、額縁構図、放射線構図を使ってみましょう。
主役を引き立てたり、視線を一点に集めたりする考え方が身につきます。
STEP4｜黄金分割・黄金螺旋・Z構図へ広げる
基本に慣れてきたら、黄金分割構図、黄金螺旋構図、Z構図なども学んでみましょう。
自然なバランスや視線の流れを考えるときに役立ちます。最初から完璧に使う必要はなく、表現の幅を広げるために取り入れるとよいでしょう。
まとめ｜構図はレイアウトの迷いを減らす考え方
構図は、画面の中で要素をどう配置するかを考えるための骨組みです。
主役の位置、余白の使い方、視線の流れ、安定感や動きの作り方を考えるときに役立ちます。
ただし、構図は絶対のルールではありません。
大切なのは、構図名を覚えることではなく、「何を見せたいのか」「どんな印象にしたいのか」に合わせて配置を選ぶことです。
まずは、日の丸構図、三分割構図、二分割構図のような基本の構図から覚えてみましょう。
