レイアウトに困ったら

~黄金比を使ってみよう!

印刷用ページを表示する

関連タグ

,

( 2008/6/6 グリニッジ有限会社 金井佳子 )

美しい矩形とは?

人間が一番美しいと感じると言われている、四角形の比率をご存じでしょうか。
黄金比と呼ばれるもので、約 「 1 : 1.618 」です。
このままですと計算しにくいので、100:160 とし、大体「 5 : 8 」で計算すると解りやすいと思います。
映画でも話題になったこの黄金比、実は、名刺やたばこのパッケージといった、多くのデザインに取り入れられています。

バナーなどを作成する際、どのくらいの間隔でレイアウトを決めるか、迷った事はありませんか?
感覚的に奇麗な配置が解れば良いのですが、どうもしっくりこないが、どこが悪いのか解らない・・という場合もあるかと思います。

そんな時に活用して頂きたいのが、この黄金比です。
例えば、フォントのサイズが16pxのボタンを作る場合、余白に黄金比を取り入れると、上下10px、左右16pxとなります。
黄金比.gif

また、最近流行の透明感があるグラデーションを作る際にも、この比を取ると上手くいくようです。(参考:黄金比グラデーション・白銀比グラデーション - DesignWalkerより)
グラデーション.jpg

(例では大体の比率で計算しています)

この様に、取り入れ方は様々です。
レイアウトで困った時に使ってみてはいかがでしょうか。

実際にやってみよう!

黄金比を使ったバナーを作成してみました。

まず、背景画像とテキストを準備し、大体1:1.6の比率になるように画面を上下と左右に分割します。
今回は父の日スペシャルギフトを一番伝えたいので、一番面積が大きくなるよう、この分割になりました。
バナー1.gif

次にフォントなどを整えます。少し上品にするために明朝体に変更し、各分割に入り切る事を条件に、フォントサイズを調整します。
少し、コントラストに欠けるので、最後にスペシャルギフトの上限まで、緑を入れ、柔らかさを出すために曲線にしました。

バナー2.jpg

トラックバックURL

コメントをどうぞ

※初回のみ、管理者の承認が必要となります。