黄金比を取り入れて美しいウェブデザインを作る5つのポイント

WordPressやwixの登場によって、今や手軽に良い構成のウェブページをデザインすることは当たり前となってきています。

リピーターが増えるECサイトデザインの教科書

良いデザインとはUI/UXの結果として生まれるものですが、UI/UXの前段階であるヴィジュアルデザインもサイトの品質を上げる要素の一ひとつです。
ヴィジュアルデザインをおこなう上で根拠のある手法として「黄金比」というものがあります。

今回は、黄金比の解説と、事例を紹介いたします。


※本記事は2014年7月25日に公開された記事をLISKUL編集部にて再編集したものです。


黄金比概要

縦と横の比率が1:1.618のものが黄金比と呼ばれ、その比率で作られた長方形を「黄金長方形」といいます。
20140725_01

黄金長方形から短辺を一辺とする正方形を取り除くと、残る部分はまた黄金長方形となる。これを繰り返すと、黄金長方形は無限個の正方形で埋め尽くされる。

この正方形の軌跡から生まれる螺旋を「黄金螺旋」といいます。

古代ギリシャの時代から、ミロのヴィーナスやパルテノン神殿、ピラミッドにまで黄金比を用いた設計が使われています。
かの有名なモナリザにも使われているそうです。
20140725_02
どこでどう使うかは個人のセンスになってしまいます。ウェブデザインに黄金比を取り入れるために、簡単な5つのチェックリストをつくりましたので、参考にしてください。

□トップ画面のFVは黄金比になっているか?
□画像サイズは黄金比になっているか?
□フォントのサイズは黄金比になっているか?
□サイドカラムとメインカラムの割合は黄金比になっているか?
□タブやリンクボタンのサイズは黄金比になっているか?

トップ画面のファーストビューは黄金比になっているか?

サイト全体を黄金比の割合で区切ることができれば理想ですが、黄金比に収めるためにコンテンツ量を増減して調整していると本末転倒です。
今回はトップページに限定して大枠を黄金比で区切りましょう。トップページの黄金比サイズを基準として、スクロール後のページや、画像やリンクボタンのサイズなどを設定していきます。

例:appleのサイト
20140725_03
20140725_04

画像サイズは黄金比になっているか?

サイトに掲載する画像も、黄金比で作ると理想です。
縦横の比率が1:1.618のサイズ。例を挙げると、元々の画像のサイズが縦500px横900pxの場合、横幅を縦幅の500pxに1.618をかけた809px、になるようにトリミングすると黄金比になります。
トリミング前
20140725_05

トリミング後
20140725_06

フォントサイズは黄金比になっているか?

フォントサイズも、黄金比でサイズを決めていくと美しいです。
20140725_07
上の画像はPCにデフォルトで入っているフォントサイズです。これだけでも「整数」のルールで美しさは存在しますが、黄金比でサイトを構成する以上、黄金比でフォントのサイズ感を設定するべきです。
20140725_08
基本となるフォントサイズが9ptであれば、黄金比である1,618を掛けて次のサイズは14.562ptとなります。次のサイズも同様です。

サイドカラムとメインカラムの割合は黄金比になっているか?

カラムの割合が2つの場合は、黄金比で構成する絶好のチャンスです。しかし、2カラムで黄金比を適用すると、横幅が960pxの場合、メニュー部分が366.7px、本体部分が593.3pxとなりメニュー部分が大きすぎて使いづらくなります。
20140725_09
1:0.618の割合が基準ですが、この場合は0.618を2乗した0.381を1の対に設定しましょう。これは黄金長方形に内包される3番目の大きさの正方形の一辺の割合です。
この計算だと、960pxの横幅のサイトの場合、メニュー部分は265px、本体部分は695pxとなります。
20140725_10

リンクボタンのサイズは黄金比になっているか?

リンクボタンにも黄金比を当てはめましょう。ボタンそのもののサイズと、外枠とボタン内の文字サイズと配置に気を使いましょう。
20140725_11
ボタンを目立たせたい時に使う、グラデーションの割合にも黄金比を当てはめましょう。黄金比をパーセント表記に直すと61.8%と38.2%。以下画像のようになります。
20140725_12


まとめ

以上、ウェブデザインに黄金比を取り入れる際に気を使うべき5つのチェックリストでした。
サイト全体に黄金比を当てはめて制作するには、緻密な計算が必要ですが、部分部分に黄金比をあてはめるだけでもサイトの改善に役立ちます。

ぜひ、ご参考ください。