creatersnest

美しく見える黄金比をWebデザインにも取り入れよう!


デザインをするときに、数学的要素の「黄金比」を取り入れると、
美しいデザインを作ることが出来るということはご存知でしょうか。

 

美しいデザインには、いくつかのルールがあり、そのひとつに黄金比があります。
黄金比とは「1:1.618」からなる、最も美しいと言われている比率のことです。
目を引くデザインには、この黄金比が使われているケースが多いです。

 

日常使用するものではトランプが黄金比によってデザインされており、
ギリシアのパルテノン神殿や、サグラダ・ファミリア、ミロのヴィーナス、
モナリザなど、建築や芸術分野まで、黄金比が使われているようです。

 

この、自然界にある最も美しいデザイン比率といわれる黄金比を、
WEBデザインに取り入れることで、デザインの機能性を向上させてくれます。

 

【黄金比を取り入れたWEBサイト】

黄金比を取り入れたWEBサイトをご紹介します。

 

PUMA

puma

http://www.puma.jp/

ヘッダーからビジュアル部分にかけて黄金比が使用されています。
画像の選手に焦点を当て、流れるように視覚を誘導します。
非常にバランスの良いビジュアルです。

 

EDIFICE

EDIFICE

http://www.edifice-watches.com/jp/ja/

ビジュアルからメニューボタンに黄金比が使われています。
時計の針の部分に焦点を集め、キャッチコピーへ向かって
視線を誘導するデザインです。

 

NIKE

nike02

 

NIKE

商品詳細ページに黄金比が使われています。
シューズの画像と詳細のバランスが最適です。
商品名と価格に焦点置いた配置です。

 

ARCHI-REED

archi02

http://www.archireed.net/

TOPのビジュアル、スライドメニュー、スポンサー紹介部分を含めた
全面に黄金比が使われています。
ロゴマークに焦点がおかれています。

 

華恵オフィシャルサイト

hanae02

http://hanae-orihime.com/

ヘッダー下部からビジュアル部分にかけて、黄金比が使用されています。
モデルに焦点を置き、ビジュアル上のテキストの配置も
バランスの良く配置されています。

 

INTEGRATE(キャンペーンページ)

integrate02

 

http://www.shiseido.co.jp/ie/gofes/

ヘッダー下部から全面に黄金比が使用されています。
モデルの画像に焦点を置いて、キャッチコピーへと
視線を誘導させるようなデザインです。

 

 

TV PITA

TVpita02

 

http://www.creaform.co.jp/tvpita

ヘッダーとビジュアル部分に黄金比が使われています。
商品画像に焦点置いて、商品名と簡単な紹介文へと、
視線を誘導するデザインです。

 

NIVEA

NIVEA

http://www.nivea.co.jp/

TOPのビジュアルに黄金比が使われています。
商品名に焦点を置いています。
画像のモデルの配置が螺旋上に美しく配置されています。

 

Twitter

twitter

https://twitter.com/

画面の文章とフォームの配置に黄金比が使われています。
ツイッターは青色の鳥のロゴにも黄金比が用いられています。
背景とのバランスが素晴らしいです。

 

資生堂

shiseido

http://www.shiseido.co.jp/

TOPページ全面に黄金比が用いられており、商品画像に焦点が置かれています。
ナビゲーションが左サイドにあるパターンのサイトでも、
黄金比を取り入れることができます。

 

【まとめ】

黄金比を使ったサイトについていかがでしたか。
WEBサイトに黄金比を用いることで、見た目を美しく見せるだけではなく、
視認性をあげて、ユーザーを正しく誘導することができます。
今回はビジュアル部分をメインにご紹介しましたが、
見出しのフォントサイズや、画像のマージンなどのパーツにも黄金比使うことで、
視認性をアップさせて、美しいサイトを作成することが出来ます。
是非サイトデザインに黄金比を取り入れてみましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Illustrator】グランジ(かすれ)の表現の仕方を学ぼう!