ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法

ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法

はじめに

「数学は美です。」
数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。

数学ははるか昔から今日まで芸術や建築のデザインに利用されてきました。しかし、ウェブデザインではあまり利用されていませんでした。数学はクリエイティブなデザインを生産するツールです。これはすべてのデザインを数学に頼るものではなく、数学を友人としてみなすべきであるということです。
ここで紹介する数学的な要素は、すぐに実践できるようにすべてPSDファイルとしてダウンロードすることができます。
※PSDファイルは元記事にてダウンロード可です。

1. 黄金比（黄金四角形）

黄金比とは「1:1.618」からなる比率で、最も美しい比率と呼ばれています。そして、その比率をもった長方形を「黄金四角形」とよび、同じく「1:1.618」の比率を持っています。

その黄金四角形を使用したミニマリストのデザイン例をみてみます。

一列につき三つ、計六つの四角形が配置されており、サイズは299×185となっています。このサイズは299/185=1.616となり、黄金四角形が利用されています。それぞれの黄金四角形は充分なホワイトスペースが確保されており、これがサイトの雰囲気を演出していることに気が付いてください。レイアウト自体にはほとんどカラーが使用されておらず、そしてすべての要素が同じように配置されているだけですが、ナビゲーションの箇所は明白です。

適用例

黄金四角形は写真ギャラリーや作品集などプロダクト指向のウェブサイトによくマッチします。そして、黄金四角形を利用する場合は、グリッドや配置、近接、強調を使用することで更に有効に利用することができます。

2. フィボナッチ数列

フィボナッチ数列とは二つの数字0と1から始まる数列で、一つ前の数を次々に加算した数列です。フィボナッチ数列のシーケンスがより高くなると黄金比に近くなり、お互いに関連しています。

この数値を四角形の辺に割り当て、対角線を結んだ曲線が「黄金螺旋」と呼ばれています。生成された長方形は黄金比をもったものとなっています。

フィボナッチ数列をウェブデザインに取り入れる簡単な方法はレイアウトのベース幅に適用することです。下記にその例をみてみます。

レイアウトは3カラムあり、それぞれの縦列がフィボナッチ数列に対応しています。
ベースを90pxとし、最初のカラムは180px（90×2）、二番目のカラムは270px（90×3）、最後のカラムは720px（90×8）の幅を設定しています。また、フォントのサイズもフィボナッチ数列に対応しており、タイトルは55px、見出しは34px、本文は21pxで設定しています。

フィボナッチ数列を使用する際、ある特定の固定された幅のレイアウトでは注意が必要です。例えばページ幅を1,000pxとした場合、フィボナッチ数列を使用することが難しくなります。
ウェブのレイアウトにフィボナッチ数列を使用した理想的な数値には610px, 987px, 1,597pxがあり、これらの数値からおよその値を選択することになるでしょう。

適用例

フィボナッチ数列は雑誌風のレイアウトやブログなどによくマッチします。フィボナッチ数列を利用する場合は、クリエイティブを忘れないでください。さもなければデザインが単に厳格なだけになってしまい、ナビゲートすることが難しいものになってしまいます。

3. ファイブエレメンツ

ファイブエレメンツはインドの星占い「Kundli」からきたもので、正方形に対角線を二つ描き、各辺の中心を結んだものです。

下記の例は、Kundliの幾何学的なレイアウトに基づいたものです。

各エレメントをクリックすることで、それについてのインフォメーションを表示します。jQueryを使用してアニメーションで表示したり、ツールチップを使っても面白いでしょう。

ファイブエレメンツのレイアウトは複雑なものではありません。
単純な3カラムのレイアウトをベースに、ヘッダとフッタが配置されているだけです。

適用例

ファイブエレメンツはプロダクトインフォメーションやポートフォリオなどによくマッチします。そしてJavaScriptのアニメーションなどで更にスパイスを効かせることができます。

4. サインウェーブ

サインウェーブは別名sinusoidと呼ばれるもので、滑らかで反復的な振動のように波状にあらわれます。

このシンプルな波状のパターンを利用して、ページのレイアウトを作ってみます。もちろん、ウェブだけでなくグラフィックスやインフォグラフィックスなど他のデザインにも同じアプローチを使用できます。

レイアウトはヘッダとフッタ、そして五つのカラムから成っており、非常にシンプルです。jQueryを使用して、インタラクティブなコンテンツにすることもできます。

適用例

サインウェーブは水平方向のナビゲーションを活かしたレイアウトやイベントの予定表などによくマッチします。各カラムをユーザーのフォーカスに合わせてハイライトするなどインタラクティブなものにしてもよいでしょう。