---
title: 写真のデザイン構成
tags:  #写真  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4JQYL6GX7P.jpg?width=480
description: 2026/06/24
published: June 24, 26
canonical: https://image.docswell.com/s/yukiko_it/KY88D9-2026-06-24-074107
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4JQYL6GX7P.jpg)

P H O T O G R A P H Y
×
D E S I G N
写真のデザイン構成
Why × What × How
査読済み論文にもとづく
うさうさ研修工房
IT研修講師のための視覚設計入門
面白きこともなき世を面白く


# Page. 2

![Page Image](https://bcdn.docswell.com/page/K74WD452E1.jpg)

WHY
なぜ「構図」を学ぶのか？
うさうさ研修工房


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LJ1YZ4WKEG.jpg)

V I S UA L
CO GN I TI ON
構図は「感性」ではなく「認知科学」
視覚的注意の先読み
認知負荷と流暢性
研修資料への直結
人の目は画面内の特定パターン（エ
ッジ・コントラスト・顔）を 50ms
以内に捕捉する。構図はこの「先読
み」を制御する設計行為。
「良い構図」は認知負荷を下げ、情
報処理の流暢性（Fluency）を高め
、受け手の印象・信頼感を向上させ
る。
スライドは「写真の縮図」。構図原
則を知る講師は、視覚情報の配置を
意図的に操作し、受講者の集中と理
解を底上げできる。
Wolfe & Horowitz, 2004, Nat Rev Neurosci
Reber et al., 2004, Ps ychol Bull
Mayer, 2009, Multimedia Learning
うさうさ研修工房


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJWG9X6P72.jpg)

GA ZE
&
A TTE N TI ON
視線は「誘導できる」――アイトラッキング研究が示す事実
3秒
講師が知るべき
「視線の法則」
最初の視線固定が
情報理解の 60% を決定
① 左上から右下へ
2.6×
構図ありの画像は
無構図より再認率が高い
Z字スキャンが基本動線
② コントラストが高い点に最初に跳ぶ
③ 顔・テキスト・矢印は他要素より先に見られる
50m
s
④ 「余白」は視線の休憩所であり強調装置
良い構図を「美しい」と
判断するまでの時間
⑤ 対称は安定、非対称は動きと緊張感を生む
Henderson & Hollingworth, 1999, Annu Rev Psychol; Arnheim, 1974, Art and Visual
Perception
うさうさ研修工房


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4EZL96Y673.jpg)

WHAT
構図の主要原則とは？
うさうさ研修工房


# Page. 6

![Page Image](https://bcdn.docswell.com/page/Y76WK2DL7V.jpg)

R UL E
OF
TH I RD S
/
GO LD E N
R A TI O
三分割法と黄金比 ── 最も検証された構図原則
三分割法 (Rule of Thirds)
画面を縦横3分割した交点に主要素を配置。中央配置より自
然な安定感と動きを生む。写真・スライド両方で最頻用いら
れる原則。
黄金比 (Golden Ratio ≈ 1:1.618)
三分割法グリッド
● 交点 = 被写体・主要情報の最適配置点
Palmer et al., 2013, Psychol Sci; McManus et al., 2011, Empirical Studies of the Arts
うさうさ研修工房
フィボナッチ数列に由来する比率。三分割法の近似値であり
、人が「美しい」と感じるレイアウト比率として実験的に支
持されている。


# Page. 7

![Page Image](https://bcdn.docswell.com/page/G75MP23M74.jpg)

L EA D I NG
LI N E S
/
FR AMI N G
/
N E GA TI V E
S P A CE
3大構図テクニック ── 視線を「設計」する
誘導ライン
(Leading Lines)
フレーミング
(Framing)
ネガティブ
スペース（余白）
道路・廊下・矢印など、目を主役へ
向かわせるライン。研修スライドで
は矢印・区切り線・進行図として応
用。
枠（窓・アーチ・図形）で被写体を
囲み、視線を固定。カードUI・強調
ボックスの設計に直結する原則。
「何もない空間」が主役を引き立て
、認知負荷を下げる。情報過多スラ
イドの最大の処方箋。
Nodine & Krupinski, 1998, Academic Radiology
Locher et al., 2007, Spatial Vision
Lidwell et al., 2010, Universal Principles of Design
うさうさ研修工房


# Page. 8

![Page Image](https://bcdn.docswell.com/page/9J2964ZRER.jpg)

N G
v s
OK
よくある「構図の失敗」と改善例
NG
やりがちな失敗
OK 構図原則を活かした改善
被写体を必ず中央に置く
三分割の交点に配置し、余白で「動き」を与える
スライド全面を文字・画像で埋める
余白を意図的に確保。空白＝強調
コントラスト無視の単調配色
主役と背景のトーン差を明確に設定する
方向性のない要素の羅列
誘導ラインや矢印で「読む順序」を設計する
うさうさ研修工房


# Page. 9

![Page Image](https://bcdn.docswell.com/page/DEY49MR5JM.jpg)

HOW
実践的な使い方
うさうさ研修工房


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VJNYLWD478.jpg)

P RA C TI C A L
A P P LI C A TI ON
IT研修スライドへの転用 ── 5ステップ
01
主役を決める
02
各スライドで「最も伝えたい1要素
」を決定。それ以外はすべて脇役と
割り切る。
04
三分割で配置
03
主役を三分割の交点付近に配置し、
残りの3/4を呼吸するための余白と
して確保する。
コントラストで強調
主役と背景のトーン差を明確に。色
・サイズ・フォントウェイトの差が
「注目の入口」になる。
05
矢印・番号・配色で「読む順序」を
左上→右下の自然動線に合わせて設
計する。
余白で引き算
「ここに何かを足せるか？」ではな
く「何かを削れるか？」を自問。空
白は弱さでなく強調力。
Mayer, 2009; Lidwell et al., 2010; Arnheim, 1974 — 認知科学・構図研究の実践的統合
うさうさ研修工房
視線の動線を設計


# Page. 11

![Page Image](https://bcdn.docswell.com/page/YE9P4XG4J3.jpg)

C HE C K LI S T
スライド完成前の「構図チェック」10項目
このスライドの「主役」は1つに絞れているか？
誘導ライン・矢印・番号で流れを設計できているか
？
主役は三分割の交点または強調エリアにあるか？
フレーミング（枠・カード）で焦点が絞れているか
？
視線の動線（読む順序）が意図通りか？
情報を「1つ削れるか」を自問したか？
コントラスト（色・サイズ・太さ）で階層が伝わる
か？
印刷・プロジェクター両環境で視認できるコントラ
ストか？
余白（ネガティブスペース）が呼吸できる量あるか
？
「なぜこのレイアウトか」を30秒で説明できるか？
うさうさ研修工房


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GE8DQ2VVED.jpg)

S U M M A R Y
3つのキーメッセージ
WHY
構図は「感性」ではなく認知科学。視線は設計できる。
WHAT
三分割・誘導ライン・余白が最も研究で支持された原則。
HOW
5ステップで研修スライドに即日転用可能。引き算で完成。
面白きこともなき世を面白く
うさうさ研修工房
またお会いしましょう。