フレームワーク活用ガイドひとことで言うと#
1:1.618（約5:8）の比率で要素のサイズや配置を決めることで、人が「自然に美しい」と感じるデザインを作れる。パルテノン神殿からAppleのロゴまで、古今東西のデザインに使われてきた普遍的な比率。
押さえておきたい用語#
- 黄金比（φ: ファイ）
- 1:1.618の比率。小さい方を1とすると、大きい方が約1.618になる数学的比率。
- フィボナッチ数列
- 1, 1, 2, 3, 5, 8, 13, 21…と前の2つの数を足して次を作る数列。隣り合う数の比が黄金比に近づく。
- 黄金螺旋
- 黄金比の長方形を再帰的に分割すると現れる渦巻き状の曲線。視線誘導のガイドとして使える。
- 白銀比
- 1:1.414の比率。A4用紙の縦横比で、日本の伝統建築にも多く使われている。黄金比と対をなす比率。
黄金比の全体像#
こんな悩みに効く#
- 要素のサイズ比率を「なんとなく」で決めてしまっている
- レイアウトのバランスが悪いと感じるが、どう直せばいいかわからない
- デザインの美しさに客観的な根拠を持ちたい
基本の使い方#
黄金比 = 1:1.618（φ: ファイ）。小さい方を1とすると、大きい方が1.618。
身近な例:
- 名刺のサイズ（55mm × 91mm ≒ 1:1.65）
- クレジットカード（54mm × 86mm ≒ 1:1.59）
- A4用紙（210mm × 297mm ≒ 1:1.41 ※これは白銀比）
黄金比は自然界にも多く見られる（巻き貝、ヒマワリの種の配列、銀河の渦）。人間が本能的に心地よいと感じる比率。
画面やコンテンツの分割に1:1.618を使う。
- 2カラムレイアウト: メインコンテンツ：サイドバー ＝ 1.618:1（例: 画面幅1000pxなら618px:382px）
- カードや画像の縦横比: 横:縦 = 1.618:1
- 余白の比率: ヘッダーとコンテンツの間隔を1とすると、セクション間は1.618倍
フィボナッチ数列（1, 1, 2, 3, 5, 8, 13, 21……）の隣り合う数の比が黄金比に近づくので、サイズ体系をフィボナッチ数で設定するのも実用的（8px, 13px, 21px, 34px……）。
黄金比の長方形を再帰的に分割していくと現れる黄金螺旋は、視線の自然な流れを示す。
- 写真やバナーの構図で、主要な要素を螺旋の中心付近に配置する
- ロゴデザインで、各パーツのサイズを黄金比で決める
- Webページのファーストビューで、CTAボタンを螺旋の収束点に配置する
ただし、すべてのデザインに厳密に適用する必要はない。「迷ったら黄金比」 くらいの気持ちで十分。
具体例#
ページ幅: 1200px
ファーストビュー:
- テキストエリア: 742px（1200 ÷ 1.618）
- 画像エリア: 458px（1200 - 742）
- ヒーローイメージ内で、人物の顔を黄金螺旋の中心に配置
フォントサイズ（フィボナッチベース）:
- 本文: 16px
- 小見出し: 21px（16 × 1.3 ≒ フィボナッチ数）
- 大見出し: 34px（21 × 1.6 ≒ フィボナッチ数）
余白: セクション間89px、要素間34px、内側パディング21px
数字がすべてフィボナッチ数列に基づいているため、全体にリズムと調和が生まれた。CVRは旧デザイン比で12%向上した。
依頼: カフェのロゴリニューアル。「洗練されているが温かみのある」印象を求められている。
設計:
- コーヒーカップのアイコン: 高さと幅の比を1:1.618に
- カップの取っ手の曲線を黄金螺旋に沿わせる
- テキスト（店名）のサイズとアイコンのサイズの比を1:1.618に
- アイコンとテキストの間の余白を、テキストの高さの1/1.618に設定
クライアントの反応: 「前のロゴと何が違うか言語化できないが、明らかに洗練された」。SNSのプロフィール画像変更後、フォロワーの印象調査で「おしゃれ」が42%から68%に上昇した。
課題: チーム5名のデザイナーが各自バラバラな余白を使っており、画面ごとに余白の印象が異なる。
設計: フィボナッチ数列に基づくスペーシング体系を定義。
- XS: 5px / S: 8px / M: 13px / L: 21px / XL: 34px / 2XL: 55px / 3XL: 89px
適用ルール:
- コンポーネント内部: S（8px）〜 M（13px）
- コンポーネント間: L（21px）〜 XL（34px）
- セクション間: 2XL（55px）〜 3XL（89px）
全デザイナーが同じ体系を使うことで、画面間の余白の統一感が生まれた。デザインレビューでの「ここの余白おかしくない？」という指摘が月平均14件からゼロになった。
やりがちな失敗パターン#
- 黄金比を過信する — 黄金比は「美しく見える可能性が高い比率」であって魔法ではない。コンテンツの内容や文脈に合わせて柔軟に調整する
- ピクセル単位で厳密にこだわる — 618pxと620pxの違いは人間の目にはわからない。概ね1:1.6ならOK
- 「黄金比を使っています」をアピールする — 良いデザインはユーザーに比率を意識させない。黄金比は手段であって、目的はユーザーにとって心地よい体験
- すべての要素に黄金比を当てはめようとする — テキスト量や機能要件によっては黄金比が不適切な場合もある。無理に適用して可読性やユーザビリティを犠牲にしない
まとめ#
黄金比（1:1.618）はレイアウト・サイズ・余白の決定に使える「美の基準値」。厳密さより「迷ったときの頼れる指標」として使うのが正解。フィボナッチ数列と組み合わせてデザインシステムのサイズ体系を作ると、全体に自然なリズムが生まれる。