大阪・兵庫・京都・奈良のホームページ制作、ECサイト制作、ランディングページ制作、WEB集客なら安心の「リエイト」へ

06-7662-8688
定休日 土日祝
受付時間 10時〜18時

homepage

ホームページ制作

ホームページ制作2017.12.25

黄金比を活用したホームページを簡単に作れるフレームワーク

img

デザインには、原理原則というものがあります。世の中に公表されているプロダクトのなかでも、いまひとつ垢抜けない感じがするものとしっかりした印象を受けるものがあるかと思いますが、しっかりした印象を受けるものは、この原理原則にしたがっているものが多いです。

ホームページ制作に関しても、使用することが望ましい原理原則というのは確かに存在しています。こうした原理原則をある程度丸々覚えてしまって、適切に利用することは、ホームページの質の維持と効率的な運用につながります。原理原則でがちがちに固められたホームページなんてつまらない、という方もいらっしゃいますが、個人的には、原理原則を覚えているからこそオリジナリティが発揮されるのであって、原理原則を完全に無視したデザインは単なる自己満足に終わってしまう可能性が高くなります。

さて、このような原理原則のうちのひとつに黄金比というものが挙げられます。この記事では、黄金比の概要から、簡単にホームページに適用して活用するための知識までをご紹介できればと思います。

黄金比とは


黄金比とは、この世でもっとも美しいとされている比率のひとつで、数多くの芸術品や、プロダクトに利用されています。

私たちの身近なところでいうと、アップルのロゴマークや、キャッシュカードやパスポートのサイズが黄金比によって構成されています。

黄金比は、1:1.6(近似値)の比率で、人が見て無条件に美しいと感じる比率です。
うまくデザインに取り入れていくことで、根拠があり秩序のあるデザインを比較的容易に作成することができます。

ちなみに、黄金比と似たような比率に、白銀比や青銅比というものが存在しています。
白銀比については、1:1.4(近似値)の比率のことで、日本における芸術品やプロダクトに多く使われており、別名を大和比と言います。

日本のコピー用紙のサイズもこの大和比によって作られているので、馴染みがある方も多いかと思います。

黄金比、白銀比、青銅比は、まとめて貴金属比と呼ばれます。

こうした貴金属比を、ホームページによってうまく使い分けていくことで、出したいイメージを論理的に導き出すことができます。

ホームページにおいては、以下のような要素が貴金属比で構成されていることが望ましいです。

・ カラムが分かれている場合は、各カラムのサイズの比率
・ 画像の縦と横のサイズの比率
・ 文字のサイズと行間の比率


とくに、最後の文字のサイズと行間の比率は、line-height:1.6;(黄金比)やline-height:1.4;(白銀比)を適用することで簡単に実装することができますので、一度試していただければと思います。

上記のような行間が確保されているホームページは、読みやすさのうえでも優れています。
美しくても読みにくければお客さまに優しいホームページとは言えません。

このあたりは、個々人のセンスに依存することも多いですが、うまく取り入れてデザインを制作していきたいところです。

黄金比を利用したフレームワーク


さて、この記事で紹介している黄金比ですが、実際にデザインの現場で、逐一計算しながらデザインをしていくのには限界があると思います。

また、すべての要素をすべからく黄金比にすることは難しいので、どこに黄金比を適用してどこに適用しないなどを考える手間が発生するでしょう。

こうした問題を解決してくれるのが、最初から黄金比のことを考慮に入れて作成されたフレームワークの存在です。

以下に紹介しているフレームワークは、レスポンシブ対応のCSSフレームワークになります。
このフレームワークは、いわゆるグリッドレイアウトを採用していて、使用されているグリッドが黄金比となっています。

そのため、利用してデザインをおこなっていれば、自然と黄金比で構成されたホームページを制作することができます。

黄金比を採り入れたいけれども時間的な制約で厳しいという方は是非試してみてください。

Less Framework 4
http://kojika17.com/2011/08/type-of-ratio.html

黄金比を簡単に算出してくれるジェネレーター


フレームワークを利用しない場合は、自分で計算しながらサイズなどの数値を指定していく必要があるわけですが、この作業についても、手作業でおこなうよりは、インターネット上で公開されているジェネレーターをうまく活用したいところです。

黄金比はデザインの世界において非常に有名な比率で、計算を楽にするサービスがたくさん公開されています。

そのなかでも使いやすいジェネレーターを以下にご紹介します。

黄金比(第1貴金属比)ジェネレーター
http://web-dou.com/tool/css_gen_ratio_silver.php

使いどころを考えてうまく黄金比を使いこなそう


黄金比や白銀比をはじめとする貴金属比は、法則に従って数値を指定するだけで美しいと感じるデザインをいとも簡単に作り出すことができるとても便利な存在です。

しかし、貴金属比にすることにとらわれすぎて、必要がないところに無理に使おうとしてしまったり、計算に時間がかかったりするようでは本末転倒です。

慣れるまでは、デザインを制作してみたけどしっくりこないというような時にスポットで使うぐらいの意識の方がよい結果を生んでくれるでしょう。

関連記事

RELATED ARICLE

img