移行中の知識
前景・中景・背景
Foreground, Middle Ground, and Background
定義
前景・中景・背景とは、frame内の要素を観察者からの相対的な距離によって手前・中間・奥のlayerとして捉える構図の考え方です。複数の距離層を意識すると平面上でもdepthを構成しやすくなりますが、すべてのvisualに三層が必要なわけではありません。UIのz-index階層そのものではなく、主に画像・illustration・composite内の空間構成を扱います。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
campaign key visual
product heroの三層構成
見るポイント
手前に小さな装飾要素、中景にproduct、背景に環境を置き、scale・overlap・focus差で距離層を作る。各layerが同じ強さで競合しないかを見る。
travel site
landscapeを使うWeb hero
見るポイント
foregroundの植物、中景の人物、backgroundの山という層を保つcropと、主題だけをtightに切るcropを比較する。depthとcopy spaceのどちらが目的に必要か判断する。
注意
誤解しやすい点
- 良い構図にはforeground / middle ground / backgroundの三層が必ず必要だと考える。
- layerを増やすほどdepthが豊かになると考え、主題より前景が強くなる。
- 写真の距離layerとUI componentのelevation hierarchyを同じものとして扱う。
関連
関連する概念
出典