売れる!ネットショップの作り方

3. ぶれないデザイン(黄金比・白銀比)

デザイナーを採用したはいいが、フォトショップとイラストレーターそしてドリームウィーバーが使える人、デザイナーというよりも職人が来たという話はよく聞きます。アプリケーションがどんどん進んで便利になりイメージを作成することはできるが、全体を見渡して色味やレイアウトを考えながらWEBデザインが出来る人はかなか居ないのが、実情だと感じています。

そもそも色味やレイアウトっていうのはデザイナーのセンスであり、「売り」の部分です。これは持論ですが、センスは磨くことが出来るものだと思っています。ただし、磨くためには多種多様なデザインに触れないと磨くことができないために人によって時間がかかるものだと思います。今回はセンスに関係なくこれにそって製作すればそれなりに綺麗に見える法則を説明いたします。

世の中には気がつかないけど「しっくりくる」レイアウトというものが存在しています。それは日本と西欧では若干異なり、西欧文化でしっくりくるレイアウトが今回ご説明する黄金比であり、日本文化でしっくりくるレイアウトが白銀比だと私は思っています。それぞれ数学からその考えが発生しているものであったり、歴史的な美術品がこの比率によって作られていることは今回は省略いたします。

  • 黄金比
  • 1:1.618の比率を黄金比と言います。たとえば身近にあるもので、黄金比を利用したレイアウトは「名刺」、「新書」、「パスポート」、「漫画の単行本」などがそうです。縦が1、横が1.618のレイアウトもしくは縦が1.618、横が1のレイアウトのものです。
  • 白銀比
  • 黄金比は西洋の美術品でよく見ることが出来るレイアウトですが、一方この白銀比は日本の建造物によく見られる比率です。例えば自社仏閣でこの白銀は多用されていたり、A4用紙の縦横のレイアウトでも使われています。このレイアウトの比率はというと1:√2なので1:1.414というレイアウトになります。

これらの比率をWEBデザイン活用するとしたら下記のようなことが出来ます。

  • サイトの上部、ヘッダー部分を縦1と横1.618もしくは1.414で分ける
  • サイトの横幅を1:1.618もしくは1.414で分割し、ナビゲーション部分(カラム)と本文部分(ボディ)を分ける
  • 本文部分(ボディ)の中ではテキストと画像の比率を横もしくは縦で1:1.618もしくは1.414の比率でわける
  • 本文部分(ボディ)の画像を横もしくは縦で1:1.618もしくは1.414の比率のレイアウトで作成する

サイトデザインに迷ったり、困ったらこういう比率を使って問題を解決するのも一つの手段として考えられます。一度自社のサイトの比率を確認してみてはどうでしょうか?

このページのトップへ