写真のデザイン構成

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

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

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 うさうさ研修工房

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 うさうさ研修工房

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

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 うさうさ研修工房 フィボナッチ数列に由来する比率。三分割法の近似値であり 、人が「美しい」と感じるレイアウト比率として実験的に支 持されている。

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 うさうさ研修工房

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

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

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 — 認知科学・構図研究の実践的統合 うさうさ研修工房 視線の動線を設計

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

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