Golden Ratio 黄金比｜レイアウトと typography

（更新: 2026年7月19日 ） 黄金比 デザイン Typography
結論

黄金比は「見た目のバランス」の出発点。全体を φ で割ってメイン／サイドを決め、厳密な px は計算機で出す。

黄金比とは（計算の核）

φ = (1 + √5) / 2 ≈ 1.618。長さ N を分割するとき:

  • 大きい方 ≈ N × 0.618
  • 小さい方 ≈ N × 0.382

例: コンテンツ幅 1200px → メイン約 742px、サイド約 458px。

レイアウトへの当て方

  1. 2カラム: grid-template-columns: 1.618fr 1fr で近似、または計算機の px を固定幅に
  2. ヒーロー: 幅 ÷ 1.618 で高さを決める（横長の黄金長方形）
  3. タイポ: 本文 16px → 見出し ≈ 26px（×1.618）。段階を飛ばしすぎない

CSS で矩形そのものを扱うなら:

.card {
  aspect-ratio: 1.618 / 1;
}

白銀比との違い

日本の用紙・和風レイアウトでは 白銀比（1:√2 ≈ 1.414） の方が馴染むことがあります。迷ったら両方試す。

ツールで試す

黄金比計算 はブラウザ内で完結し、入力データをサーバーに送信しません。基準値を入れると大きい方・小さい方が即表示されます。

関連記事

トピック記事
計算の詳細黄金比の計算方法・1.618の求め方
白銀比との比較黄金比と白銀比｜レイアウト寸法
行間読みやすい行間の決め方
縦横比Aspect Ratio 計算