基本的な考え方は同じ。ウェブデザインと黄金比の関係とは

2024.03.08

web制作の基本

#UX #webサイト

webサイトのレイアウトを考える上でセンスが重要だと考える人が多いでしょう。センスはもちろん重要な要素なことは確かですが、ある一定のルールのようなものを意識しながらレイアウトを作成していくことが重要です。これらを無視して、いくら工夫をしたところでプロが作ったようなwebサイトに仕上げることは難しいということです。

AI要約

ChatGPT4で要約生成中

webサイトのレイアウトを手がける人なら絶対に知っておく必要があるものに“黄金比”があります。
実際に私たちの脳の中では黄金比に沿ったレイアウトやイメージを好む傾向があるようです。
数学の授業などで誰しもが一度は耳にしたことがあると思いますが、図を用いて説明すると下のようになります。
一本の線を二つに分け、長い方(A)を短い方(B)で割ったものの値=1.618
A+Bの合計をBで割ったものの値=1.618
これが黄金比の考え方です。

黄金比

こちらの図形も黄金比です。赤線部分と青線部分の比率が1.618:1となっています。

黄金比が実際に使われている事例

実際に、私たちの身近なものの中に黄金比の比率が使われているものがたくさんあります。
具体的にキャッシュカードや名刺などのカード類があげられます。

黄金比の比率は何年も前から使われてきました。
ピラミッドやパルテノン神殿なども黄金比の考え方を元に作られたそうです。
ちなみにモナリザの絵にも黄金比が使われているようです。

人間が最も美しいと感じる比率は“黄金比”といえるでしょう。
したがって、webサイトのデザインを考える上でも“黄金比”の考え方が重要になってくるのです。

webデザインに黄金比を取り入れるにあたって

では、webデザインに黄金比を取り入れるにあたって何を意識すればよいのか紹介していきます。webデザインにおいては下の項目を意識して黄金比を取り入れるといいでしょう。
1. TOPページ前面のレイアウト
2. 商品ページの画像と詳細のバランス
3. サイドカラムとメインカラム
4. タブなどのボタンのサイズ

では、実際にwebサイトに黄金比を使った事例を見ていきましょう。

webサイトに黄金比を使った事例

商品ページの画像と詳細のバランスが綺麗な事例の一つです。
NIKEの商品詳細ページでは綺麗に黄金比を取り入れています。

シューズの画像と右側の詳細部分が黄金比になっていることが分かりますね。
詳細部分のレイアウトも上下に分かれており、黄金比になっていることが分かります。

画像イメージと商品の説明を大きく二つに分け、説明部分に関しても概要部分と詳細部分それぞれに黄金比を適用していくことがポイントのようです。
こちらはshiseidoのカテゴリページの一部です。

画像と説明の位置が先ほどと逆になっていますね。
ですが、NIKEと同じく画像と商品の説明部分が黄金比になっていることが分かりますね。こちらの商品ページの場合、下の構造をとっていると捉えることができます。

画像の下には余白部分がありますが、あえて余白にしているのでしょう。
次に、内部リンクに黄金比を取り入れたレイアウトを紹介します。
こちらは海外のサイトですが、黄金比を取り入れていることが分かります。
下のように黄金比を取り入れていると捉えることができます。

無意識に見ている人が多いと思いますが、こうやってみるとレイアウトが綺麗なものは黄金比を取り入れています。

補足
フォントサイズに関しても同様に黄金比を取り入れていきましょう。
ベースサイズとして指定したフォントサイズに対して黄金比となるフォントサイズを算出してくれるツールがあるので、是非活用してみてください。
(便利なツール)

まとめ

今回はwebデザインと黄金比について紹介しました。私たちの身近でもよく見られる黄金比ですが、数学的な要素を備えている比率だといえます。
レイアウトを考える際にはセンスが重要だと思われがちですが、ある一定のルールがあることがお分かりいただけたと思います。
web制作を担当する人が全てのページに対して黄金比を細かい部分まで計算しているとは言い切れませんが、細かく見ていくと自然に黄金比が取り入れられていることが分かります。
直感でなんとなく考えるのではなく、比率を意識しながらレイアウトを作成することで自ずとセンスが身についてくると思います。