グラフィックデザインやWebデザインでよく用いられるレイアウトのパターンについてまとめた。
分割
面を分割して要素を配置する。
二等分割
上下や左右で等分する。両方の要素が拮抗することでバランスや緊張感を生む。
二等分割の例
三等分割
上下や左右で三等分する。二等分割よりも緊張感が軽くなる。3つを同格に扱うことも、1：2で扱うこともできる。
三等分割の例
四等分割
上下、左右に等分する。三等分割よりもさらにシステマティックな印象になる。4つを同格に扱うことも、2：2や1：3で扱うことも出来る。
四等分割の例
黄金分割
黄金比（1：1.618）で分割する。安定感や心地よさに優れる。
黄金分割の例
対称と軸
点や戦を基準として要素を配置する。
線対称
シンメトリーのレイアウト。安定感があり、誘目性も高い。シンメトリー（対称）の中にアシンメトリー（非対称）を作ると、魅力や誘目性をさらに高めることが出来る。
線対称の例
点対称
点対称のレイアウト。動きと安定感が両立する。基準点を通る対角線に沿って視線が誘導される。
点対称の例
軸
画面上に仮想の軸を持たせて、それに沿わせて要素を配置するレイアウト。線対称に比べて緊張感が出る。
軸の例
動きと反復
X軸やY軸、Z軸を定めず、自由に要素を配置する。あるいは同じリズムで配置する。
ランダム
仮想の軸をできる限りも作らないようにするレイアウト。動きや勢いを表現できる。
ランダムの例
レイヤー
要素に他の要素を重ねて構成するレイアウト。他のレイアウトと同時に使うことも出来る。重なりから認識出来る形を作るとゲシュタルトの要素も生まれる。
レイヤーの例
反復
テキスタイルやモノグラムのように同じ要素、似た形の要素を繰り返し配置する。アクセントを付けると効果的。
反復の例
型
任意の型に収まるよう要素を配置する。
円／放射
円の中に要素を配置する。円は中心が明確なため、視線を誘導できる。また、放射状に配置するのも同じ効果が得られる。
円／放射の例
三角形
三角形の中やそれぞれの頂点に要素を配置する。辺を下にすると安定感が、頂点を下にすると緊張感が生まれる。
三角形の例
孤立
余白を十分に設けて、要素を配置する。誘目性も高くなるため、要素を大きくする必要がなくなる。
孤立の例
ゲシュタルト
要素を並べて認識できる図形を描く。ゲシュタルトの法則に基づく。
ゲシュタルトの例
参考
記事を共有する
トラックバックURL
管理者の承認後に表示します。
この記事へのコメント
コメントフォーム