良いデザインとはUI/UXの結果として生まれるものですが、UI/UXの前段階であるヴィジュアルデザインもサイトの品質を上げる要素の一ひとつです。 ヴィジュアルデザインをおこなう上で根拠のある手法として「黄金比」というものがあります。 今回は、黄金比の解説と、事例を紹介いたします。 専門家にWEB販促の相談をする（無料）／WEB販促の窓口 ※本記事はニフティ株式会社提供によるスポンサード・コンテンツです。 ※本記事は2014年7月25日に公開された記事をLISKUL編集部にて再編集したものです。
黄金比概要
縦と横の比率が1：1.618のものが黄金比と呼ばれ、その比率で作られた長方形を「黄金長方形」といいます。
黄金比概要トップ画面のファーストビューは黄金比になっているか？画像サイズは黄金比になっているか？フォントサイズは黄金比になっているか？サイドカラムとメインカラムの割合は黄金比になっているか？リンクボタンのサイズは黄金比になっているか？まとめデザインに強い制作会社を無料で見つける方法（広告）
黄金長方形から短辺を一辺とする正方形を取り除くと、残る部分はまた黄金長方形となる。これを繰り返すと、黄金長方形は無限個の正方形で埋め尽くされる。 この正方形の軌跡から生まれる螺旋を「黄金螺旋」といいます。 古代ギリシャの時代から、ミロのヴィーナスやパルテノン神殿、ピラミッドにまで黄金比を用いた設計が使われています。 かの有名なモナリザにも使われているそうです。 どこでどう使うかは個人のセンスになってしまいます。ウェブデザインに黄金比を取り入れるために、簡単な5つのチェックリストをつくりましたので、参考にしてください。 □トップ画面のFVは黄金比になっているか？ □画像サイズは黄金比になっているか？ □フォントのサイズは黄金比になっているか？ □サイドカラムとメインカラムの割合は黄金比になっているか？ □タブやリンクボタンのサイズは黄金比になっているか？
トップ画面のファーストビューは黄金比になっているか？
サイト全体を黄金比の割合で区切ることができれば理想ですが、黄金比に収めるためにコンテンツ量を増減して調整していると本末転倒です。 今回はトップページに限定して大枠を黄金比で区切りましょう。トップページの黄金比サイズを基準として、スクロール後のページや、画像やリンクボタンのサイズなどを設定していきます。 例:appleのサイト
画像サイズは黄金比になっているか？
サイトに掲載する画像も、黄金比で作ると理想です。 縦横の比率が1:1.618のサイズ。例を挙げると、元々の画像のサイズが縦500px横900pxの場合、横幅を縦幅の500pxに1.618をかけた809px、になるようにトリミングすると黄金比になります。 トリミング前 トリミング後
フォントサイズは黄金比になっているか？
フォントサイズも、黄金比でサイズを決めていくと美しいです。 上の画像はPCにデフォルトで入っているフォントサイズです。これだけでも「整数」のルールで美しさは存在しますが、黄金比でサイトを構成する以上、黄金比でフォントのサイズ感を設定するべきです。 基本となるフォントサイズが9ptであれば、黄金比である1,618を掛けて次のサイズは14.562ptとなります。次のサイズも同様です。
サイドカラムとメインカラムの割合は黄金比になっているか？
カラムの割合が2つの場合は、黄金比で構成する絶好のチャンスです。しかし、2カラムで黄金比を適用すると、横幅が960pxの場合、メニュー部分が366.7px、本体部分が593.3pxとなりメニュー部分が大きすぎて使いづらくなります。 1:0.618の割合が基準ですが、この場合は0.618を２乗した0.381を１の対に設定しましょう。これは黄金長方形に内包される3番目の大きさの正方形の一辺の割合です。 この計算だと、960pxの横幅のサイトの場合、メニュー部分は265px、本体部分は695pxとなります。
リンクボタンのサイズは黄金比になっているか？
リンクボタンにも黄金比を当てはめましょう。ボタンそのもののサイズと、外枠とボタン内の文字サイズと配置に気を使いましょう。 ボタンを目立たせたい時に使う、グラデーションの割合にも黄金比を当てはめましょう。黄金比をパーセント表記に直すと61.8%と38.2%。以下画像のようになります。 専門家にWEB販促の相談をする（無料）／WEB販促の窓口
まとめ
以上、ウェブデザインに黄金比を取り入れる際に気を使うべき5つのチェックリストでした。 サイト全体に黄金比を当てはめて制作するには、緻密な計算が必要ですが、部分部分に黄金比をあてはめるだけでもサイトの改善に役立ちます。 ぜひ、ご参考ください。
デザインに強い制作会社を無料で見つける方法（広告）
ニフティは、自社で直接審査し、厳選した全国の優良制作会社だけをパートナー化しており、この中から、貴社のご要望に合う会社を数社無料で紹介する「Web販促の窓口」というサービスを提供しています。 実施スケジュールや予算が未定でも紹介可能なので、ブランドイメージや、デザインを重視したホームページやクリエイティブの作成をご検討されている方は、ぜひともご利用ください。 デザインに強い制作会社を見つける≫ ※本記事はニフティ株式会社提供によるスポンサード・コンテンツです。
