姫路IT系勉強会HiStudy第10回でライトニングトークの際に使用したスライド。 フィボナッチ数列を利用した黄金比のwebページレイアウトについてさくっと解説。

1. フィボナッチ数列とデザイン
黄金比に基づく「しっくりくる」デザイン
12年10月26日金曜日

2. なぜしっくりくるのか
12年10月26日金曜日

3. なぜしっくりくるのか
12年10月26日金曜日

4. なぜしっくりくるのか
12年10月26日金曜日

5. 日常で刷り込まれた感覚
if ( $要素 == 日常で刷り込まれた感覚 ) {
$見た時 = しっくりくる ;
} else {
$見た時 = 違和感を感じる ;
}
12年10月26日金曜日

6. デザイナーが持ってくる
半端な数字の正体
余白が13px 10pxやったらアカンの？
144 89 の画像 150 90との違いは？
12年10月26日金曜日

7. 黄金比
12年10月26日金曜日

8. 黄金比
1
1.618
12年10月26日金曜日

9. 黄金比
1
1.618
12年10月26日金曜日

10. 自然界にあふれる黄金比
ミツバチはどの群れを調べてもメスがオスの
数を上回り、その比率は約1.618倍
植物の茎に葉がつく配列
その他、様々な生物の構造
12年10月26日金曜日

11. 自然界にあふれる黄金比
ミツバチはどの群れを調べてもメスがオスの
数を上回り、その比率は約1.618倍
植物の茎に葉がつく配列
その他、様々な生物の構造
12年10月26日金曜日

12. 自然界にあふれる黄金比
ミツバチはどの群れを調べてもメスがオスの
数を上回り、その比率は約1.618倍
植物の茎に葉がつく配列
その他、様々な生物の構造
12年10月26日金曜日

13. 人体の黄金比
身長：ヘソから地面まで
肩から指先：肘から指先
脚の付け根から地面：ヒザから地面
その他、色んな部分が黄金比の近似値
12年10月26日金曜日

14. 人体の黄金比
身長：ヘソから地面まで
肩から指先：肘から指先
脚の付け根から地面：ヒザから地面
その他、色んな部分が黄金比の近似値
12年10月26日金曜日

15. 黄金比に関する調査
グスタフ・フェヒナー
1876年に黄金長方形の特殊な美的特性に
対する人々の反応を調べたドイツの心理
学者。
12年10月26日金曜日

16. 黄金比に関する調査
1876年 フェヒナーの調査
40%
30%
20%
10%
0%
正方形 5:6 4:5 3:4 7:10 2:3 黄金比 13:23 1:2 2:5
長方形の好みを調査したグラフ
12年10月26日金曜日

17. 黄金比に関する調査
1876年 フェヒナーの調査
1908年 ラロの調査
40%
30%
20%
10%
0%
正方形 5:6 4:5 3:4 7:10 2:3 黄金比 13:23 1:2 2:5
長方形の好みを調査したグラフ
12年10月26日金曜日

18. 黄金比の実用的な数値
黄金比は円周率などと同じ無理数
1.618または1.61くらいの近似値を使う
5:8（1:1.6）くらい大雑把な数値もOK？
でもいちいち計算するの面倒くさい……
12年10月26日金曜日

19. フィボナッチ数列の特性
1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987
12年10月26日金曜日

20. フィボナッチ数列の特性
1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987
1.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
12年10月26日金曜日

21. フィボナッチ数列の特性
1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987
1.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......
12年10月26日金曜日

22. フィボナッチ数で
黄金比デザイン
1
1.618
12年10月26日金曜日

23. フィボナッチ数で
黄金比画像レイアウト
グスタフ・フェヒナー
1876年に黄金長方形の特殊な美的特性に
対する人々の反応を調べたドイツの心理
学者。
12年10月26日金曜日

24. フィボナッチ数で
黄金比画像レイアウト
144px
グスタフ・フェヒナー
1876年に黄金長方形の特殊な美的特性に
対する人々の反応を調べたドイツの心理
学者。
233px 377px
610px
12年10月26日金曜日

25. フィボナッチ数で
黄金比ページレイアウト
233px
1
610px
377px
1.618
987px
12年10月26日金曜日

26. 比率さえ合っていれば
オリジナル数列でもOK
5:8を10:16にしても1.6倍になる
作成したいサイトに合わせて独自の数列を設
定しても比率さえ合っていれば大丈夫
12年10月26日金曜日

27. まとめ
「しっくりくる」デザインのポイントは「日
常で刷り込まれたイメージ」
黄金比がしっくりきやすいのは実証済み
フィボナッチ数列を使うと黄金比を計算する
手間を省ける
12年10月26日金曜日