美大卒じゃなくても知りたい、Webデザインを調和させる『黄金比』の活用法

Webデザイナーは必ずしも美大や専門学校を出ているとは限りません。独学で学んだ人や、仕事をする中で自然と職になっていった人もいるでしょう。

数学の基礎理論や芸術科学はデザインにおいてもさまざまな形で応用されますが、その中でもメジャーなのが黄金比と呼ばれる比率です。

この記事では、黄金比の考え方と、Webデザインにおける効果的な活用法をご紹介します。

黄金比とは

世の中にある全てのものはバランスのもとに成り立っています。人類は自然の中にある法則を解き明かすために、今までさまざまな研究をしてきました。

その試みの中で発見されたのが、人類にとって最も美しいとされる比率である黄金比です。黄金比の約1:1.618という比率をあらわす貝のような形の渦巻きは、Web上でも目にする機会が多いはずです。

Mariya Tereshkova / Prototyper

黄金比という概念は4000年以上前から存在していると考えられています。古代建築や有名な美術品に黄金比が適用されており、レオナルド・ダ・ヴィンチとサルバドール・ダリもデザインに黄金比を多くの作品に用いたことで知られています。黄金比は現代に至るまで、建築、芸術、写真、デザインなどさまざまな分野で取り入れられてきたのです。

黄金比が引き出す、Webデザインの調和

Webデザインの魅力を最大限引き出すためには、アイコンのような小さなパーツも含めて全体のバランスがとれていることが重要です。多くのグラフィックデザイナーやUIデザイナーがすでに実践しているように、黄金比を取り入れることによって全体を調和させることができます。

黄金比は有名な概念なので、特にグラフィックデザイナーは黄金比を取り入れてロゴなどを作成する傾向があります。

ブランドの顔であるロゴやアイコンのデザインのように細部まで注意を払うことが必要がある場合も、黄金比を用いることによって魅力的で調和のとれたデザインが可能になるのです。

黄金比はUIデザインをどのように変えるのか？

黄金比はUIデザインにおいても活用されてきました。まず、ワイヤーフレームの段階で黄金比を用いることができます。

レイアウトを組み立てたり、UIコンポーネントのサイズや配置を決める際に黄金比が役立ちます。さらに、写真などの画像をトリミングしてバランスを決める際にも活用できます。

Tubik Studio

しかし、黄金比を取り入れるためには計算をしなければなりません。黄金比は本当に退屈に思える計算をしてまで活用する価値があるものなのでしょうか。その価値を確かめるために、以下で黄金比を活用することによって可能になることをご紹介します。

a. コンテンツのバランスをとる

プロダクトがさまざまなコンテンツを大量に含んでおり、しかもそれぞれが重要で置き換えができないという場合に、黄金比が役立ちます。

コンポーネントを適切に構成するために、1:1.618の割合でレイアウトを異なるセクションに分割し、重要度に応じて配置するのです。こうすることによって、ユーザーが利用しやすいレイアウトにすることができます。

b. ビジュアルヒエラルキーをクリアにする

コンテンツの構成においてはビジュアルヒエラルキーも重要です。ビジュアルヒエラルキーとは、コンテンツを効率的に構造化して優先度をつける技術を指します。

黄金比とビジュアルヒエラルキーというふたつの技術を組み合わせることによって、より優れたデザイン構成が可能になります。

Sergey Vailukh / Tubik Studio

c. 適切なフォントサイズを見つける

ユーザーが閲覧しやすい環境を作るには、見出し、小見出し、本文、キャプションなど、文字の種類に応じてフォントサイズを変える必要があります。

黄金比を取り入れれば、それぞれの文字について適切な大きさを割り出すことができます。例えば、見出しの文字の大きさを1.618で割ることによって、小見出しの文字の適切な大きさを計算することができます。

d. 魅力的な第一印象を与える

ユーザーがはじめてプロダクトを目にしたとき、まず本能的な反応で数秒以内に第一印象が決定してしまいます。

この反応は意識的に好き嫌いを判断する前に起こってしまうため、自分自身では認識することができません。だからこそデザインに黄金比を活用し、まず第一印象でユーザーの心を掴む必要があるのです。

e. 十分な空白を意識しやすくなる

デザイナーはUIデザインの構成要素だけではなく、その間にある空白の部分についても気を配らなければいけません。黄金比を活用してデザインに適した空白を割り出せば、空白の割合や場所を考える作業を効率化することができます。

Tubik Studio

レイアウトはUIデザインにとって非常に重要な要素です。黄金比は数式なのでとっつきにくい印象があるかもしれませんが、取り入れることによってユーザーにとって使いやすい、実用性と美しさを兼ね備えたデザインに一歩近づくことができます。

それほど難しい概念ではないので、敬遠せずにまずチャレンジしてみることをおすすめします。

（翻訳：Asuka Nagajima）