レイアウトのパターン

IDIA.JP > レポート > レイアウトのパターン
レイアウトのパターン

グラフィックデザインやWebデザインでよく用いられるレイアウトのパターンについてまとめた。

分割

面を分割して要素を配置する。同格を表現するのに便利。

二等分割

二等分割

上下や左右で等分する。両方の要素が拮抗することでバランスや緊張感を生む。

二等分割の例
二等分割の例 二等分割の例

三等分割

三等分割

上下や左右で三等分する。二等分割よりも緊張感が軽くなる。3つを同格に扱うことも、1:2で扱うこともできる。

三等分割の例
三等分割の例 三等分割の例

四等分割

四等分割

上下、左右に等分する。三等分割よりもさらにシステマティックな印象になる。4つを同格に扱うことも、2:2や1:3で扱うこともできる。

四等分割の例
四等分割の例 四等分割の例

黄金分割

黄金分割

黄金比(1:1.618)で分割する。安定感や心地よさに優れる。

黄金分割の例
黄金分割の例 黄金分割の例

対称と軸

点や線を基準として要素を配置する。中心点や基準線が視線を誘導する。

線対称

線対称

シンメトリーのレイアウト。安定感があり、誘目性も高い。シンメトリー(対称)の中にアシンメトリー(非対称)を作ると、魅力や誘目性をさらに高めることができる。動きを作るには一部の対称性を崩す。

線対称の例
線対称の例 線対称の例

点対称

点対称

点対称のレイアウト。動きと安定感が両立する。基準点を通る対角線に沿って視線が誘導される。

点対称の例
点対称の例 点対称の例

軸

画面上に仮想の軸を持たせて、それに沿わせて要素を配置するレイアウト。線対称に比べて緊張感が出る。

軸の例
軸の例 軸の例

動きと反復

X軸やY軸、Z軸を定めず、自由に要素を配置する。あるいは同じリズムで配置する。

ランダム

ランダム

仮想の軸をできる限り作らないようにするレイアウト。動きや勢いを表現できる。

ランダムの例
ランダムの例 ランダムの例

レイヤー

レイヤー

要素に他の要素を重ねて構成するレイアウト。他のレイアウトと同時に使うこともできる。重なりから認識できる形を作るとゲシュタルトの要素も生まれる。

レイヤーの例
レイヤーの例 レイヤーの例

反復

反復

テキスタイルやモノグラムのように同じ要素、似た形の要素を繰り返し配置する。アクセントを付けると効果的。

反復の例
反復の例 反復の例

任意の型に収まるよう要素を配置する。あるいは要素で形を構成する。

円/放射

円/放射

円の中に要素を配置する。円は中心が明確なため、視線を誘導できる。また、放射状に配置するのも同じ効果が得られる。

円/放射の例
円/放射の例 円/放射の例

三角形

三角形

三角形の中やそれぞれの頂点に要素を配置する。辺を下にすると安定感が、頂点を下にすると緊張感が生まれる。

三角形の例
三角形の例

孤立

孤立

余白を十分に設けて、要素を配置する。誘目性も高くなるため、要素を大きくする必要がなくなる。

孤立の例
孤立の例 孤立の例

ゲシュタルト

ゲシュタルト

要素を並べて認識できる図形を描く。ゲシュタルトの法則に基づく。

ゲシュタルトの例
ゲシュタルトの例

参考

記事のデータ

公開日2014年9月27日
カテゴリー
タグ
関連する記事

記事を共有する