構図とは?写真・イラスト・デザインで使える構図の種類一覧

構図とは?意味と大切な理由

まずは、構図という言葉の意味と、構図によって見え方がどう変わるのかを押さえましょう。

構図の意味

構図(こうず)とは、写真・絵・デザインなどの画面の中で、主役や背景などの要素をどこに、どのくらいの大きさで置くかという、全体の組み立てのことです。

英語では「composition(コンポジション)」と呼ばれ、写真や絵画の分野で広く使われている言葉です。

たとえば同じリンゴを撮る場合でも、画面の真ん中に大きく置くか、端に小さく置いて周りの空間を広く見せるかで、写真の印象はまったく変わります。

この「どこに・どのくらいの大きさで・何と一緒に置くか」を決めることが、構図を考えるということです。

構図で見る人の視線と印象が変わる

構図が大切なのは、見る人がどこから見始め、どんな印象を受けるかを、構図が大きく左右するからです。

人の目は、画面の中で大きいもの・明るいもの・周りと違うものに引き寄せられ、線や形に沿って動く性質があります。

そのため、主役をどこに置くか、線をどの向きに通すかによって、見る人の視線の流れや、落ち着いた・動きがある・広がりがあるといった印象が変わります。

構図を意識すると、偶然うまくいった1枚ではなく、伝えたいことが伝わる1枚を、狙って作れるようになります。

Webデザインのレイアウトとの関係

Webデザインでよく使われる「レイアウト」も、画面に要素を配置するという点では構図とよく似た考え方です。

写真やイラストの構図が「1枚の画面の中の配置」を指すことが多いのに対し、Webのレイアウトは、見出し・文章・ボタンなどを読みやすく並べ、ページ全体の情報を整理することまで含みます。

とはいえ、主役を決めて視線の流れを作るという考え方は共通しているので、構図の知識はバナーやWebページのデザインにもそのまま役立ちます(Webのレイアウトの基本はWebレイアウトとは?で解説しています)。

構図の種類一覧

ここからは、写真・イラスト・デザインでよく使われる代表的な構図を、図と一緒に紹介します。

図の黄色い円や形は主役、点線は配置の目安になる補助線を表しています。

日の丸構図

日の丸構図は、主役を画面の真ん中に置く、最もシンプルな構図です。

日本の国旗(日の丸)のように中央に主役があることから、この名前で呼ばれています。

主役がはっきりして何を見せたいのかがすぐに伝わるため、商品写真やアイコン、ロゴを見せる画像などに向いています。

一方で、主役以外の情報が少なく、どの写真も同じような印象になりやすいので、背景をすっきりさせたり、主役を大きく写したりして単調にならないよう工夫しましょう。

三分割構図(三分割法)

三分割構図は、画面を縦と横にそれぞれ3等分する線を引き、その線の上や、線が交わる4つの点の近くに主役を置く構図です。

主役を真ん中から少しずらすことで、周りに空間が生まれ、自然でバランスのよい印象になります。

カメラメーカーのキヤノンも、三分割法を、構図に迷ったときにまず試したい基本の方法として紹介しています(キヤノン「構図を変えてワンランクアップ」)。

風景なら地平線を上か下の線に合わせ、人物なら顔を上側の交点の近くに置くと、初心者でもまとまりのある1枚になりやすいでしょう。

二分割構図

二分割構図は、画面を上下または左右の半分に分ける構図です。

水平線や地平線を画面のちょうど真ん中に置くと、空と海、空と地面のように2つの要素が同じ重さで並び、対比や安定感を表現できます。

湖に映る景色のように、上下の対比そのものを見せたい場面に向いています。

ただし、どちらを見せたいのかがはっきりしないときに真ん中で分けると、ぼんやりした印象になりやすいので、迷ったら三分割構図にして、見せたい側を広く取るとよいでしょう。

対角線構図

対角線構図は、画面の角と角を結ぶ斜めの線に沿って、主役や線を配置する構図です。

斜めの線は、水平や垂直の線よりも動きや奥行きを感じさせるため、画面にスピード感や広がりが生まれます。

キヤノンの解説でも、対角構図は画面に躍動感や奥行き感を出せる構図として紹介されています。

道路や線路、並木道、手前から奥へ小さくなっていく並びなどを撮るときや、動きを感じさせたいバナーの背景などに向いています。

三角構図

三角構図は、主役や複数の要素を、三角形の形に収まるように配置する構図です。

底辺が広く頂点が上にある三角形は、山のようにどっしりとした安定感を与えます。

山の風景や、人物の全身、3つの商品を並べる写真などに向いています。

反対に、頂点を下にした逆三角形にすると、不安定さや緊張感を表現することもできます。

シンメトリー構図(対称構図)

シンメトリー構図は、画面の中心の線を境に、左右または上下が鏡に映したように同じ形になるよう配置する構図です。

シンメトリー(symmetry)は「対称」という意味で、整った形は、きちんとした印象や静けさ、格式の高さを感じさせます。

建物の正面、水面に映る景色、左右対称に並べた商品などに向いています。

少しでもずれると傾いて見えやすいので、中心の線をきっちり画面の真ん中に合わせることが大切です。

放射構図

放射構図は、画面の1点から外側へ向かって広がる線を使い、その中心に視線を集める構図です。

線が中心に向かって集まって見えるため、見る人の目は自然と中心にある主役へ引き寄せられます。

花や光の筋、天井や階段を見上げた写真など、広がりや迫力を見せたい場面に向いています。

デザインでは、集中線のように中心から線を広げて、セール情報などを強く目立たせる表現にも使われます。

トンネル構図(額縁構図)

トンネル構図は、トンネルの出口や窓、木の枝など、手前にあるもので主役の周りを囲む構図で、額縁構図とも呼ばれます。

周りを枠で囲むと、枠の中にある主役に目が向き、手前と奥の距離から奥行きも生まれます。

窓越しの景色や、トンネルの先の風景、木々の間から見える建物などに向いています。

枠になる部分を暗くしたり、ぼかしたりすると、主役がより引き立ちます。

S字構図・C字構図

S字構図はS字の曲線、C字構図はC字(アルファベットのCのような弧)の曲線を画面の中に通す構図です。

曲線は直線よりもやわらかく、S字は奥へと視線を導き、C字は内側を包み込むような印象を与えます。

S字は曲がりくねった川や道、C字は海岸線や湾曲した建物、主役をぐるりと囲む料理の盛り付けなどに向いています。

イラストでは、人物の体の線をゆるいS字にすると、立ち姿に自然な動きが出ます。

黄金比を使った構図

黄金比を使った構図は、画面を黄金比で分けた線や点を目安に、主役を配置する構図です。

黄金比とは、約1:1.618の比率のことで、正確には1:(1+√5)/2という値になります(Wolfram MathWorld「Golden Ratio」(英語))。

画面の各辺を約1:1.618に分けると、分ける位置は端から約38.2%のところになり、三分割構図(約33.3%)より少しだけ中心に寄った位置になります。

キヤノンの用語解説では、黄金比にもとづく「黄金分割」の点に被写体を置く方法が、三分割法と並んで、日の丸構図ばかりになってしまう初心者にすすめられています(キヤノン「黄金分割」)。

黄金比は美しく感じられる比率として紹介されることが多いものの、どんな場面でも美しく見えると証明されているわけではないので、三分割構図と同じく「配置を決めるときの目安の1つ」として使うのがおすすめです。

構図の種類と特徴の早見表

ここまで紹介した構図の特徴と、向いている場面を一覧にまとめます。

構図	特徴	向いている場面
日の丸構図	主役を中央に置く。何を見せたいかがすぐ伝わる	商品写真・アイコン・ロゴ
三分割構図	3等分の線や交点に置く。自然でバランスがよい	風景・人物・迷ったときの基本
二分割構図	画面を半分に分ける。対比と安定感が出る	水面に映る景色・上下の対比
対角線構図	斜めの線に沿って置く。動きと奥行きが出る	道・線路・動きのあるバナー
三角構図	三角形にまとめる。どっしりと安定する	山・全身の人物・3点の商品
シンメトリー構図	左右や上下を対称にする。整って格式がある	建物の正面・水面の反射
放射構図	1点から線が広がる。中心に目が集まる	花・光の筋・見上げた建物
トンネル構図(額縁構図)	手前の枠で囲む。主役が際立ち奥行きが出る	窓越し・トンネルの先の風景
S字構図・C字構図	曲線を通す。やわらかく視線を導く	川・道・海岸線・料理
黄金比を使った構図	約1:1.618で分けた線や点に置く	三分割の代わりの配置の目安

伝えたいことから構図を選ぶ方法

構図の種類が分かったら、次は実際にどの構図を使えばよいかの選び方です。

構図は「何を・どんな印象で伝えたいか」から逆算して選ぶと、迷いにくくなります。

伝えたい印象別の選び方

構図を選ぶときは、まず見る人にどんな印象を持ってほしいかを決めましょう。

構図ごとに、安定感・動き・広がりといった得意な印象が違うからです。

伝えたいこと	合う構図
主役そのものをはっきり見せたい	日の丸構図・放射構図
自然で落ち着いた雰囲気にしたい	三分割構図・黄金比を使った構図
安定感や信頼感を出したい	三角構図・シンメトリー構図
動きやスピード感を出したい	対角線構図・S字構図
奥行きや広がりを出したい	トンネル構図・対角線構図・S字構図
2つのものを比べて見せたい	二分割構図・シンメトリー構図

たとえば、新商品を一目で伝えたい広告なら日の丸構図、旅行先の空気感を伝えたいなら三分割構図やS字構図、というように選べます。

目的から配置を決める考え方は、目的から逆算するレイアウトの決め方でも詳しく解説しています。

構図を決める手順

構図は、次の順番で考えると、写真でもイラストでもデザインでも同じように決められます。

1. 主役を1つ決めます。
   何を一番見せたいのかが決まらないと、構図も決まりません。
2. 伝えたい印象を決めます。
   落ち着き・動き・安定感など、上の表から近いものを選びます。
3. 構図の型を選び、主役を置く位置を決めます。
   迷ったときは三分割構図から試してみましょう。
4. 主役以外の要素(背景や脇役)を、主役の邪魔にならない位置に置きます。
   主役と脇役の大きさに差をつけると、どこを見ればよいかがはっきりします。
5. 余計なものが入っていないかを確認し、必要なら画面の端を切り取って(トリミングして)整えます。

主役と脇役の差のつけ方は主役と脇役とは?、大きさの差による強調はジャンプ率で変わるメッセージの伝わり方で解説しています。

写真・イラスト・デザインで違うところ

構図の考え方は共通ですが、写真・イラスト・デザインでは、構図を決めるタイミングと自由度が違います。

写真は、目の前にあるものを撮るため、立ち位置やカメラの角度を変えて構図を探し、撮った後にトリミングで整えるのが基本です。

イラストは、何をどこに描くかを最初から自由に決められるので、描き始める前に小さなラフ(下描き)で構図をいくつか試してから選ぶと、失敗が少なくなります。

デザインは、写真やイラストに加えて文字やボタンも配置するため、文字が読みやすい空間を残しながら構図を決める必要があります。

Webデザイン・バナーに構図を活かす方法

構図の考え方は、写真やイラストだけでなく、Webページやバナーのデザインにも活かせます。

ここでは、視線の流れ・余白・比率という3つの視点から、デザインでの使い方を紹介します。

構図と視線誘導(Z型・F型)の関係

デザインに構図を活かすときは、見る人の視線の流れに合わせて、主役やボタンを置く位置を決めましょう。

デザインで見る人の目の動きを想定し、伝えたい順に目を導くことを「視線誘導」と呼び、構図は視線誘導の土台になるからです。

横書きのバナーやWebページでは、左上から右へ、そして左下から右下へと目が動く「Z型」や、文字の多いページを上から流し読みする「F型」の視線の流れがよく知られています。

F型は、ユーザビリティの調査会社Nielsen Norman Groupの視線追跡調査で知られるようになったパターンで、同社は、見出しや太字などの手がかりがないときに起こりやすく、右側の大事な情報が読み飛ばされる原因になると注意しています(Nielsen Norman Group「F-Shaped Pattern of Reading on the Web」(英語))。

たとえば、Z型の流れに三分割構図を重ねて、左上の交点近くに主役の写真、右下の交点近くに申し込みボタンを置くと、見る人の目が自然に最後のボタンまで届きます。

Z型・F型の詳しい特徴や、色・大きさで視線を導く方法は視線誘導とは?、どこに重要な情報を置くかは重要な情報はどこに置く?で解説しています。

余白も構図の一部として考える

構図を考えるときは、何も置かない空間である「余白」も、構図の一部として扱いましょう。

主役の周りに余白があると主役が引き立ち、余白の広さの違いで、見る人に読む順番や区切りが伝わるからです。

たとえば三分割構図で主役を片側に寄せると、反対側に広い余白が生まれ、その余白にキャッチコピーを置くと、写真と文字がぶつからずに両方を見せられます。

人物の写真を使う場合は、人物が向いている側に余白を取ると、視線がその先に流れて自然に見えます。

余白の役割は余白とは?、余白で読む順番を作る方法は視線を誘導する余白とは?で詳しく解説しています。

面積と比率でバランスを整える

構図のバランスは、置く位置だけでなく、それぞれの要素が占める面積の比率でも決まります。

同じ色や同じ形でも、大きく使うか小さく使うかで、見る人が受ける印象や目立ち方が変わるからです。

Webページのレイアウトでは、たとえばメインの記事欄とサイドバーの幅を黄金比に近い比率にするという使い方もあり、CSSのグリッドレイアウトでは次のように書けます。

.layout {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
}

このコードは、.layoutの中を2列に分け、左の列と右の列の幅を約1.618:1にする指定です。

frは、使える幅を比率で分ける単位なので、画面の幅が変わっても比率が保たれます(列の間にすき間を設定した場合は、すき間を除いた幅が分けられます)。

ただし、比率はあくまで目安なので、実際の画面で見て、内容が読みやすい幅になっているかを確かめましょう。

色の面積による見え方の違いは色の面積による見え方とは?で解説しています。

構図の注意点とよくある質問

最後に、構図を使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 主役を決めないまま構図を当てはめてしまうことがあります。
  構図は主役を引き立てるための型なので、先に「何を一番見せたいか」を決めましょう。
• 1枚の画面に、いくつもの構図を詰め込んでしまうことがあります。
  使う構図は基本的に1つに絞り、ほかの要素はその構図を邪魔しないように置きましょう。
• 画面の端ぎりぎりに、主役や文字を置いてしまうことがあります。
  端に寄りすぎると窮屈に見え、バナーでは表示される場所によって切れてしまうこともあるので、端から少し内側に置きましょう(詳しくはバナーの外側の余白とは?で解説しています)。
• 水平線や建物の線が、わずかに傾いてしまうことがあります。
  意図しない傾きは不安定に見えるので、撮影や配置の後に、水平・垂直がそろっているかを確認しましょう。
• 黄金比などの比率を、正確に守ることにこだわりすぎてしまうことがあります。
  比率は目安なので、最後は実際の見え方で判断しましょう。

よくある質問

• Q. 構図は英語で何と言う?
  A. 英語では「composition(コンポジション)」と言います。
  三分割構図は「rule of thirds」、シンメトリー構図は「symmetry」など、構図の種類にもそれぞれ英語の呼び方があります。
• Q. 日の丸構図は避けたほうがいい?
  A. 避ける必要はありません。
  主役をはっきり見せたい商品写真やアイコンなどでは、日の丸構図が最も伝わりやすいこともあります。
  ただ、どの写真も日の丸構図ばかりだと単調になるので、三分割構図なども試して使い分けましょう。
• Q. 三分割構図と黄金比、どちらを使えばいい?
  A. 初めのうちは、線の位置が分かりやすい三分割構図から始めるのがおすすめです。
  黄金比で分けた位置は三分割の線より少し中心寄りになるだけなので、慣れてきたら両方を試して、見え方のよいほうを選びましょう。
• Q. スマホのカメラで構図の補助線を出すには?
  A. 多くのスマホのカメラには、画面を縦横3等分する線(グリッド)を表示する設定があります。
  設定の場所は機種やOSのバージョンによって違うので、お使いのスマホのカメラの設定や公式の説明書で「グリッド」を探してみましょう。
• Q. 構図を身につけるにはどう練習すればいい?
  A. 気に入った写真やバナーを見つけたら、主役がどこにあり、どの構図に近いかを考えてみるのが近道です。
  同じ被写体を日の丸構図・三分割構図・対角線構図など複数の構図で撮ったり描いたりして、見比べてみるのも効果的です。

まとめ

構図とは、画面の中に主役や背景をどこに、どのくらいの大きさで置くかという組み立てのことです。

構図によって、見る人の視線の流れや、安定感・動き・広がりといった印象が変わります。

日の丸構図・三分割構図・対角線構図など代表的な構図の特徴を知っておくと、伝えたいことに合わせて、狙って画面を組み立てられるようになります。

迷ったときは、主役を1つ決めて三分割構図から試し、Webデザインやバナーでは視線の流れと余白もあわせて考えましょう。

デザイン全体を体系的に学びたいときは、デザイン初心者のための学習ロードマップも参考にしてください。

まずはスマホのカメラでグリッドを表示して、身の回りのものを日の丸構図と三分割構図の2通りで撮り、見比べてみましょう。