デザインをしていると、
- 「この写真は、どのくらい大きくするか」
- 「左右の領域を、どの割合で分けるか」
- 「見出しと本文に、どのくらい差をつけるか」
といった判断を何度もします。
もちろん、画面を見ながら感覚で調整することもできます。
ただ私は、
「なんとなく、このくらいがきれいだから」
だけでは終わらせたくありません。
そこで、私がデザインを考えるうえで重要な基準のひとつとしているのが、
1：1.618
という比率です。
いわゆる黄金比です。
なぜ、この数字なのでしょうか。
実は黄金比をたどっていくと、
1、1、2、3、5、8、13、21、34、55、89……
という、とても面白い数列につながります。
今回は少しだけ数学の世界に寄り道しながら、フィボナッチ数列と黄金比、そしてそれをデザインにどう活かすかについて考えてみます。
フィボナッチ数列とは？
フィボナッチ数列とは、
1、1、2、3、5、8、13、21、34、55、89……
と続いていく数列です。
ルールは、とても単純です。
前の2つの数字を足すと、次の数字になる
1＋1＝2
1＋2＝3
2＋3＝5
3＋5＝8
5＋8＝13
8＋13＝21
このように、
直前の2つの数字を足したものが、次の数字になる。
これを繰り返しているだけです。
数式というと難しそうですが、仕組みそのものはとてもシンプルです。
ウサギの増え方で考えてみる
フィボナッチ数列を説明するときによく登場するのが、ウサギの繁殖を題材にしたモデルです。
最初に1組のウサギがいて、そのウサギが成長して子どもを産む。
生まれたウサギも成長し、さらに子どもを産んでいく。
そうして、つがいの数を追っていくと、
1、1、2、3、5、8、13……
と増えていきます。
【画像①：ウサギの増え方の図】
数字だけで見るより、図にすると規則性が分かりやすくなります。
そして、この数列にはもうひとつ、とても興味深い特徴があります。
隣り合う数字を割ってみる
フィボナッチ数列の隣り合った数字を、大きいほうから小さいほうで割ってみます。
3 ÷ 2 ＝ 1.5
5 ÷ 3 ≒ 1.667
8 ÷ 5 ＝ 1.6
13 ÷ 8 ＝ 1.625
21 ÷ 13 ≒ 1.615
34 ÷ 21 ≒ 1.619
55 ÷ 34 ≒ 1.618
89 ÷ 55 ≒ 1.618
数が大きくなるほど、
1.618……
という数字に近づいていきます。
つまり、
55：89 ≒ 1：1.618
になります。
ここで現れるのが、黄金比です。
黄金比「1：1.618」
黄金比とは、
1：1.618033988……
という比率です。
私はデザインを考えるとき、この1：1.618という関係を、とても重要な基準として扱っています。
理由は、単に「美しいと言われている比率だから」ではありません。
大きいものと小さいものの間に、適度な差をつくるための基準として使えるからです。
55：89から黄金比が見えてくる
先ほどの数列を、もう一度見てみます。
1、1、2、3、5、8、13、21、34、55、89……
最後の2つ、
55と89
の関係を見ると、
55：89 ≒ 1：1.618
となります。
もちろん、55と89そのものが黄金比というわけではありません。
フィボナッチ数列では、隣り合う数字の比率が、数が大きくなるほど黄金比へ近づいていきます。
このつながりが、とても面白いところです。
四角形にすると、関係がもっと分かりやすい
フィボナッチ数列の数字を、それぞれ正方形の一辺の長さとして並べてみます。
1、1、2、3、5、8、13、21……
すると、大きな長方形ができていきます。
【画像②：フィボナッチ数列の正方形と長方形】
大きくなるにつれて、その長方形の縦横比も黄金比に近づいていきます。
つまり、
数列として見えていた関係が、形として見えるようになる。
数学だったものが、視覚的なバランスへと変わっていきます。
さらに、螺旋が現れる
それぞれの正方形の中に、90度の円弧を描いてつなげていくと、螺旋状の曲線が現れます。
【画像③：フィボナッチ数列と螺旋】
これは一般にフィボナッチ螺旋と呼ばれるものです。
1、1、2、3、5、8、13、21……
という数字の並びが、
比率になり、面積になり、形になっていく。
私は、このつながりがとても面白いと思っています。
なぜデザインに黄金比を使うのか
ここからが、「虹色のタコになれ！」として一番重要なところです。
フィボナッチ数列を覚えることが目的ではありません。
黄金比の計算ができることが目的でもありません。
大切なのは、
1：1.618という関係を、デザインの判断にどう使うか
です。
「どのくらい差をつけるか」の基準になる
デザインでは、同じ大きさのものを並べれば、同じくらい重要に見えます。
一方、大きさに差をつければ、そこに主従関係が生まれます。
問題は、
どのくらい差をつけるのか。
です。
そこで黄金比をひとつの基準として使うことができます。
たとえば、
写真と文章の領域。
メインコンテンツとサブコンテンツ。
大きな要素と小さな要素。
こうした関係を考えるとき、
55：89
をひとつのスタート地点にすることができます。
つまり、
1：1.618
です。
「なんとなく」ではなく、基準から始める
何も基準がなければ、
「このくらいかな」
と感覚だけで決めることになります。
でも、
まず55：89を基準にしてみる。
そこから、
- 「もう少し写真を大きくしたほうが目的に合う」
- 「文章量が多いので、こちらの幅を広げたほうが読みやすい」
と調整していく。
私は、この順番が大切だと考えています。
感覚だけから始めるのではなく、まず基準を持つ。
そのうえで、目的に合わせて調整する。
黄金比は、デザインを縛るルールではなく、判断を始めるための基準です。
「1：1.618」で考えられるのは、画面分割だけではない
黄金比は、Webサイトを左右に分割するときだけに使うものではありません。
たとえば、
- 見出しと本文の大きさ。
- メインの写真と補助的な写真。
- 大きな余白と小さな余白。
- 強く見せたい情報と補足情報。
こうした2つの要素の関係性を考えるときにも使うことができます。
すべてを機械的に1.618倍にする必要はありません。
重要なのは、
「どのくらい差をつけるか」を考えるための基準を持っていること。
です。
フィボナッチ数列そのものもデザインに使える
黄金比だけでなく、フィボナッチ数列そのものをデザインのスケールとして使うこともできます。
たとえば、
8、13、21、34、55
といった数字です。
文字サイズや余白、画像の大きさなどを考えるときに、ひとつの基準として使うことができます。
もちろん、WebやUIでは4pxや8pxのグリッドを使ったほうが、実装や運用に向いている場合もあります。
だから、
必ずフィボナッチ数列を使えばいい
という話ではありません。
大切なのは、選択肢として知っていることです。
感覚を、説明できる判断に変える
「虹色のタコになれ！」では、私は何度も、
「自分が好きだから」でデザインを決めない
という話をしてきました。
ただ、デザイナーの感覚が不要だと言っているわけではありません。
経験を積んだデザイナーほど、
- 「こちらのほうがバランスがいい」
- 「ここはもう少し差をつけたほうがいい」
- と瞬間的に判断できます。
でも、その感覚を、
「なぜ？」
と聞かれたときに説明できることも大切です。
「きれいだから」で終わらせない
たとえば、
「なぜ、写真をこの大きさにしたのですか？」
と聞かれたとします。
「このくらいがきれいだから」
ではなく、
「メインとサブの関係を明確にするため、まず黄金比を基準に大きさの差を検討しました」
と説明できれば、判断の背景を共有できます。
すると、
「この案件では、もう少し差をつけたほうがいいのでは？」
という議論もできます。
デザインが、個人の好みではなく、共有できる判断になる。
私はそこがとても重要だと考えています。
「虹色のタコ」には、たくさんの判断基準が必要
黄金比だけですべてのデザインができるわけではありません。
- 色彩
- 構成
- 視覚生理
- タイポグラフィ
- 情報設計
- インタラクション
- アクセシビリティ
- ガイドライン
そして今回の、黄金比やフィボナッチ数列。
こうした知識は、どれかひとつが「正解」なのではありません。
それぞれが、
デザインを判断するための足
になります。
状況によって使う足を変える。
必要なら、複数の足を組み合わせる。
ユーザーや目的によって、自分の色も変える。
だから私は、
「虹色のタコになれ！」
と考えています。
AI時代だからこそ、判断基準を持つ
そして、この考え方は、AI時代になるほど重要になると思っています。
AIに、
- 「きれいなレイアウトを作ってください」
- 「いい感じにデザインしてください」
と指示すれば、それらしいものを作ってくれます。
でも、
- 「きれい」とは何なのか。
- 「いい感じ」とは何なのか。
そこに基準がありません。
AIに黄金比という判断基準を渡す
たとえば、
「メインとサブの領域には明確な主従をつける。まず55：89、つまり1：1.618を基準として検討する」
と伝える。
それだけでも、AIに渡す情報はかなり具体的になります。
さらに、
- 「文字量を考慮する」
- 「アクセシビリティを損なわない」
- 「ブランドガイドラインを守る」
- 「ユーザーが最初に見るべき情報を最も強くする」
といった条件を組み合わせていく。
私は、こうした判断基準の集合を、デザインハーネスとして考えています。
AIに答えを与えるのではなく、
判断するための材料を与える。
黄金比も、その材料のひとつです。
「1：1.618」を知っているだけで、ひとつ足が増える
黄金比を使えば、必ず良いデザインになる。
そんな単純な話ではありません。
でも、
1：1.618
という基準を知らなければ、それを選択肢にすることもできません。
55と89。
その比率を計算すると、およそ1：1.618になる。
そして、それはフィボナッチ数列の先に現れる黄金比へとつながっている。
この関係を知っているだけでも、
「なんとなく」以外の選択肢がひとつ増えます。
デザインには、ひとつの公式だけで導き出せる正解はありません。
だからこそ、たくさんの理論や原則を知っておく。
そして、目的に合わせて使い分ける。
黄金比も、そのための大切な判断基準のひとつです。
なぜ、この比率なのか。
その問いに答えるためのひとつの足として、
私はこれからも、
1：1.618
を大切にしていきたいと思います。
コメント