こんにちは。毎日暑いですね…。猛暑日が続き、いよいよ夏バテがやってきそうです。夏はイベントも多く外に出たくなりやすいですが、外出の際はこまめに水分補給をしましょう！私はビール補給を毎日したいです。

さて、今日は美術やデザインを学ぶ中で一度は聞いたことはある『三分の一の法則(三分割法)』と『黄金比』について書こうと思います。皆さんはこの法則を意識してデザインをしたことがありますか？

三分の一の法則とは？

まずは三分の一の法則について。

イラストや写真、文字などの要素を１つのエリアにレイアウトするとき、画面の中を分割するようなイメージでそれぞれの範囲に役割を与えると、受け手に情報が伝わりやすくなります。例えば、「写真のエリア」「タイトルのエリア」「説明のエリア」といったイメージです。このように3つの要素を配置する際に、三分の一を意識してあげると、全体的にまとまった印象になります。

上図のように画面を三分割し、視覚的なアクセントが三分の一の境界にあたる位置に来るようにレイアウトすることを「三分の一の法則」と呼んでいます。デザインの重要な要素を美しく配置する技です。

これは昔の画家たちが構図を決める際に格子を使用したことに由来する手法です。画面の上下左右を三等分して、9つの長方形と4つの交点を作りデザイン内の主要な要素を交点に置く。

すると非対称的な構図にはなりますが、安定し美しく見えるというわけです。非対称的にすることにより人の目を引きやすくなるのもポイントです。

葛飾北斎の『神奈川沖浪裏』は見事に三分割を用いられていますね。これは北斎自身が編み出した「三ツワリの法」という3分割構図法です。

さて、三分の一の法則には大きく分けて2種類あります。

1.画面を分割する位置を3分の1の境界とする
レイアウトする際に、エリアを2:1の比率する方法です。例えばこんな感じ

線を引いてみるとこうなります。

いかがでしょう？簡単でありながらも、落ち着いた美しい構図になりますね。

2.視覚的なポイントを１つの線上に配置する
これは写真でも良く使われるテクニックです。

このような日の丸構図の写真も

線上にボールをずらしてあげるだけで…

ぐっと良くなります。

以上が三分の一の法則についての説明でした。三分の一の法則は値が黄金比に近く、簡単に割り出すことが出来ることから現在でも使われ続けています。簡単に綺麗な構図が作れちゃうので、頭の片隅にでも覚えておくと困ったとき便利かも知れないですね。

黄金比とは？

では、次は黄金比についてです。

黄金比とは近似値が1：1.618となる比率で、最も美しい比率とされています。黄金比で長辺と短辺が構成されている四角形は黄金四角形と呼ばれています。黄金四角形は安定して美しい四角形とされ、名刺やスマートフォンの画面サイズにも採用されています。

意図的にこれを意識して創作した芸術家も数多く知られています。

パルテノン神殿ノートルダム大聖堂モナ・リザ

他、ニューヨークの国連ビル、竜安寺の石庭、金閣寺にも黄金比が採用されています。

また、名刺などで余白と文字のレイアウトを黄金比にすると、安定感が強く出て、落ち着いた、堅実的なデザインにまとめることが出来ます。

Webデザインでは活用できる？

このように、黄金比や三分の一の法則を活用してデザインをすることは大切ですが、Webではどうなのでしょうか？

落ち着いて見える構図＝迫力に欠けてしまう構図、それがこの法則のポイントです。そのポイントから考えると、インパクトに重点を置いているランディングページやバナーでは、黄金比を基準にデザインする方法はあまりオススメできないのでは？と思います。

▲黄金比に従ってデザインしたバナー

▲黄金比を意識していないバナー

2つバナーを作ってみました。上は黄金比にきちんと従ってデザインしたもの。下は意識せずにデザインしたもの。同じ要素のバナーでも見え方の印象が違いますね。基本構図は似てはいますが、下のバナーは要素のサイズそれぞれに変化を与えています。このように黄金比をいかに効果的に崩すか、がWebでは重要となってくるのではないでしょうか。もちろん、適度に法則を取り入れていくことも大事です。デザインの中で法則をうまく活用できるようになれると良いですね。