姫路It系勉強会vol10 LT フィボナッチ数列とデザイン

フィボナッチ数列とデザイン黄金比に基づく「しっくりくる」デザイン

12年10月26日金曜日

なぜしっくりくるのか






日常で刷り込まれた感覚

if ( $要素 == ‘日常で刷り込まれた感覚’ ) {

$見た時 = ‘しっくりくる’;

} else {

$見た時 = ‘違和感を感じる’;

}


デザイナーが持ってくる半端な数字の正体

余白が13px ⬅ 10pxやったらアカンの？

144×89 の画像 ⬅ 150×90との違いは？


黄金比


黄金比

1

1.618


黄金比

1

1.618


自然界にあふれる黄金比

ミツバチはどの群れを調べてもメスがオスの数を上回り、その比率は約1.618倍

植物の茎に葉がつく配列

その他、様々な生物の構造












人体の黄金比

身長：ヘソから地面まで

肩から指先：肘から指先

脚の付け根から地面：ヒザから地面

その他、色んな部分が黄金比の近似値


人体の黄金比

身長：ヘソから地面まで

肩から指先：肘から指先

脚の付け根から地面：ヒザから地面

その他、色んな部分が黄金比の近似値


黄金比に関する調査

グスタフ・フェヒナー1876年に黄金長方形の特殊な美的特性に対する人々の反応を調べたドイツの心理学者。



0%

10%

20%

30%

40%

正方形 5:6 4:5 3:4 7:10 2:3 黄金比 13:23 1:2 2:5

長方形の好みを調査したグラフ

1876年フェヒナーの調査



0%

10%

20%

30%

40%

正方形 5:6 4:5 3:4 7:10 2:3 黄金比 13:23 1:2 2:5

長方形の好みを調査したグラフ

1876年フェヒナーの調査1908年ラロの調査


黄金比の実用的な数値

黄金比は円周率などと同じ無理数

1.618または1.61くらいの近似値を使う

5:8（1:1.6）くらい大雑把な数値もOK？

でもいちいち計算するの面倒くさい……


フィボナッチ数列の特性

1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987



1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 9871.5 1.66 1.6 1.625 1.615 1.619 1.6176 1.6181 1.6179 1.61805 1.61802 1.618037 1.618032



1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 9871.5 1.66 1.6 1.625 1.615 1.619 1.6176 1.6181 1.6179 1.61805 1.61802 1.618037 1.618032

黄金比を精密に書くと1.61803398......


フィボナッチ数で黄金比デザイン

1

1.618


フィボナッチ数で黄金比画像レイアウト



フィボナッチ数で黄金比画像レイアウト


610px

377px233px

144px


フィボナッチ数で黄金比ページレイアウト

1

1.618987px

610px377px

233px


比率さえ合っていればオリジナル数列でもOK

5:8を10:16にしても1.6倍になる

作成したいサイトに合わせて独自の数列を設定しても比率さえ合っていれば大丈夫


まとめ

「しっくりくる」デザインのポイントは「日常で刷り込まれたイメージ」

黄金比がしっくりきやすいのは実証済み

フィボナッチ数列を使うと黄金比を計算する手間を省ける


Design

姫路It系勉強会vol10 LT フィボナッチ数列とデザイン