自身を数学者だと考えるUXデザイナーはほとんどいないでしょう。私の経験では、ほとんどのデザイナーは数学を軽視しています。デザイナーの情熱は、数字やデータのような冷たい客観性とは対照的な、芸術やデザインなどの主観的なクリエイティビティの領域に注がれるからです。
しかしUXデザイナーに限らず、すべてのデザイナーは、絵筆や鉛筆、タッチパッドを使用するたびに数学の原則を用いています。事実、もっとも基本的なデザインの技術のいくつかは、数学的な概念に基づいています。あなたも知らず知らずのうちに、数学的な要素を適用しているかもしれません。
ではなぜ今更、それを学ぶ必要があるのでしょう？
芸術とデザインの背後にある数学を理解することで、意識的にあなたの作品に適用できるようになります。数学は、高校時代には頭痛の種でしたが、芸術家にとってもUXデザイン会社にとってもかけがえのないツールになります。
以下では、これから紹介する３つの数学的原理が、全体としてデザインにどう関連しているのか、そしてWebやUXデザインの領域にどうやって正しく適用するのかを説明します。これらの原理は古いですが、現代社会においても重要なものです。
私たちは、すべてがつながっているように見える時代に生きています。しかし、つながりのほとんどが大昔から存在してきたことは、見逃してしまいがちです。
１. 黄金比
モナリザとGoogleロゴの共通点は何でしょうか？ （おそらく）歴史上もっとも象徴的な絵画と、1998年に公開された技術の象徴との間には、どんな関係があるのでしょうか？
答えは、モナリザもGoogleのロゴも、「神授比例法（神意によって授けられた秘法）」として知られる黄金比を採用していることです。数学者は黄金比を約1.618としています。
Wikipediaによれば、２つの数の比率が、大きい方の数と２つの数字の合計の比率と同じ（編注：a>bのときa:b=a+b:a）であれば、黄金比が成立します。
黄金比（画像資料：Goldennumber）
幸いなことに、芸術家や建築家、デザイナーにとっては、黄金比をより簡単に、人間の目が直観的に好む割合として説明できます。 以下の図のように黄金長方形として表されるのが、もっとも有名でしょう。
黄金比でできている長方形は、黄金長方形と呼ばれます。（画像資料：Wikipedia）
確かに、黄金比は取るに足らないように見えますが、黄金比は広く普及している普遍的なものです。黄金比はどこにでも存在し、自然に人間の目を引きつけます。 多くのロゴやフォント、レイアウトのデザインが採用している原則であり、UXを作成する際に重要なデザイン要素です。
Googleとダビンチはそれぞれ黄金比と黄金長方形を適用しています。（画像資料：Pavan A via LinkedIn）
前出の通り、Googleのロゴは２つの円の円周に黄金比を使用しています。加えて、UXに有益だとしてこの原則を使用したのは、Googleだけではありません。
ほかの有名なロゴも、黄金比に基づいています。（画像資料：OJ Harper）
黄金比はどこにでも存在します。黄金比は、デザインに数学がひそかに影響していることを示すもっともわかりやすい例です。
２. フィボナッチ数列
フィボナッチ数列とは、前に並ぶ２つの数字の合計が、次に並ぶ数字になるような数列です。 ゼロから始めると、次のようになります。
0,1,1,2,3,5,8,13,21,34,55,89,144...
この数列はフィボナッチデザインの基礎で、ブログやオンライン出版物など、コンテンツが多いWebサイトで特に効果的です。以下のSmashing Magazineの例を見てください。
(画像資料: Smashing Magazine)
このブログはシンプルですが、綺麗にデザインされています。 内容は上手に配置されていて、フォントサイズも読みやすくバランスがとれており、レイアウト自体が鮮明で美しく見えます。フィボナッチデザインの優れた例です。
(画像資料: Smashing Magazine)
たとえば、３つの列の幅は、それぞれフィボナッチ数（２，３，８）でデザインされています。 左にある２列の幅の比は２：３で、右にある２列の幅の比は３：８です。
(画像資料: Smashing Magazine)
フィボナッチ数列は、フォントサイズにも適用できます。Smashing Magazineの例では、ページ見出しのフォントサイズは55ピクセル、見出しは34ピクセル、内容は21ピクセルです。その結果、ページ上のすべてのテキストのバランスがとれて美しく配列されています。
デザインでフィボナッチ数列を考えるもう１つの方法は、魅力的なレイアウトのサイトを作成するために、フィボナッチ数を「建築ブロック」として使うことです。 下の長方形は、フィボナッチ数（１，１，２，３，５）の小さい正方形から構成されたものです。
長さがフィボナッチ数（１，１，２，３，５）の正方形
これは恐らく誰でも実際に見て使用したことがある、非常に人気のあるWebサイトのデザインです。実例として、FastCompanyのWebサイトを見てみましょう。
Fast CompanyのWebサイト。（画像資料：Joshua Garity）
このサイトでは、コンテンツはもっとも大きい１の正方形のブロックに配置されており、ブロック２にはそのほかのナビゲーションが配置されています。
最後に、フィボナッチ数列で数字を加算して次の数字を生み出していくと、あるパターンが現れます。ある数を前の数で割った値は、黄金比として知られる1.618に近づいていきます。
３. ３分の１の法則
黄金比やフィボナッチ数列とは異なり、３分の１の法則は、デザイン業界の外でもよく知られている原則です。UXデザイナーが今更この法則を学ぶ必要はありませんが、Webデザインにおける数学の役割を書く上で、３分の１の法則に言及しないわけにはいきません。
３分の１の法則では、等間隔な２本の垂直線と水平線で、９つの等しい領域に構成を分割します。３分の１の法則を使うと、コンポジションに重ね合わせて基本のグリッドを形成して、レイアウトで重要な部分を強調することができます。
(画像資料: Photography Mad)
たとえば、グリッドにある４つの交点は、目立たせたいデザイン要素を配置するのに最適な場所です。 Webデザインにおいては、左上の交点がもっとも強力な場所になります。ページを見るとき、最初に人間の目が向かう場所だからです。
(画像資料: MotoCMS)
上図のEQRecのホームページを見てください。左上の交点には、このホームページでもっとも重要な、世界最高のレコーディングスタジオを訪れるためのCTA（コールトゥアクション）が配置されています。ページの残りの部分は、特にページの上部と下部のナビゲーションバーなど、綺麗に３分の１の法則に従っています。
３分の１の法則は、特に印象深いわけではなく、フィボナッチデザインや黄金比のように繊細ではないかもしれませんが、数学がUXに与える影響として優れた例です。
数字が生み出すUX
もちろん、すべてのデザインがこれらの数学の原則に基づいているわけではりません。これらの原則は、テンプレートではなくガイドライン、つまりデザインの手段の１つなのです。 UXデザインの過程において、数学がどれほど重要な役割を担っていても、ユーザー体験にクリエイティブな努力が必要なことに変わりはありません。
しかし、主なUXデザインの機関は、デザインの本質として、数学を理解することを重要視しています。 UXの分野での数学の役割を軽視するのではなく、数学から学べることを受け入れようとしているのです。
もちろん、これら３つの原則だけが、UXにおける数学の要素ではありません。
むしろUXデザイン全体で数学が果たす最大の役割は、図形や幾何学ではなく、むしろ統計的データと経験的証拠ですが、それはまた次の機会にお話しましょう。
