web制作の基本

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

  • このエントリーをはてなブックマークに追加

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

CONTENTS

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

黄金比

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制作を担当する人が全てのページに対して黄金比を細かい部分まで計算しているとは言い切れませんが、細かく見ていくと自然に黄金比が取り入れられていることが分かります。
直感でなんとなく考えるのではなく、比率を意識しながらレイアウトを作成することで自ずとセンスが身についてくると思います。

  • このエントリーをはてなブックマークに追加

記事の著者が提供するサービス

SEO対策・リスティング広告等のWEBマーケティング基礎攻略ならウェブクマ

運営会社情報


ウェブクマは「WEBプロモーションを活用して費用対効果を劇的にアップする方法」と題して、ウェブプロモーションをご担当される方にブックマークされいつも参照されるようなサイトを目指しております。
長年培ってきたSEOの実績やリスティング広告の智見、WEB制作の経験をもとに貴社のWebプロモーションの問題を解決する記事を多く掲載しております。
SEOベンダーとして、またWEB広告代理店として第一線で活躍する社員自らの経験を惜しみなく公開しておりますので、お困りの際は是非参考にしてみてください。 ウェブクマは株式会社DYMが運営しております。

webマーケティングのことならお問い合わせください

DYMでは様々なインターネット上のサービスを提供しております。興味をお持ちいただいた方は、気軽にご相談ください

  • 最新情報を受け取る
  • SEO対策・リスティング広告等のWEBマーケティング基礎攻略ならウェブクマ

    最新の情報をSNS・メールでご購読いただけます!

    各SNSからご購読いただけます

    メールから最新情報を
    受け取ることができます

  • 最新情報を受け取る