vol.10 ウェブサイトのレイアウトや要素に黄金比を利用する

デザイナーの小池です。
これまで「バランスのいい形を作る」と題して、黄金比や白銀比を使ったデザインの例を挙げてきました。

今回はその更に応用として、ウェブサイト制作でよく使用するレイアウトや要素に黄金比を当てはめてみました。

1.ページの基礎レイアウト

2カラム横幅960pxに対しての比率です。 メインビジュアルにキャッチコピーを置くときにも活用できるかと思います。
ig5.jpg

2.記事のタイトルと本文

タイトルと本文の比率です。
22px : 14pxで1.6 : 1になっています。 余白もタイトルの高さを1とし、1.6倍をスペースとし確保しています。
ig4.jpg

3.ボタン

文字の高さを1.6とし、上下余白を1としています。 下の正方形のボタンはページネーション系のボタンになります ig1.jpg

4.テキスト&画像

写真、テキスト、どちらが1でも1.6でも問題ないかと思います。
ig2.jpg

5.リストテキスト

リストアイコンの高さを1とし、テキストの高さを1.6としました。
アイコンと余白も1.6:1の比率の間隔になっています。 ig3.jpg

まとめ

黄金比が全てではないので、アイデアの一つとして考えれば良いかと思います。
あと黄金比と白銀比を混合する使い方はやめたほうがいいかなと思います。 ig6.jpg イラストを見てもらえれば分かる通り、この0.2の差が若干違和感を感じました。
黄金比は黄金比、白銀比は白銀比と同じルールでまとめたほうが良さそうです。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ