黄金比と白銀比の計算｜レイアウト寸法の出し方

「黄金比 計算」と「白銀比 計算」は検索キーワードが近いのに、出てくる数値が違います。ここでは両方の式と、レイアウトへの当てはめを並べて整理します。

2つの比率を並べる

黄金比：計算例

基準幅 800px のカードを黄金比の縦横にしたい場合：

高さ = 800 ÷ 1.618 ≒ 494px

2カラム（合計1200px）なら：

広いカラム = 1200 ÷ 1.618 ≒ 742px
狭いカラム = 1200 - 742 = 458px

フォント階層（本文16px）：

小見出し = 16 × 1.618 ≒ 26px
大見出し = 26 × 1.618 ≒ 42px

詳しい手順は 黄金比の計算方法 を参照してください。

白銀比：計算例

A4は 210mm × 297mm。比率を確認すると：

297 ÷ 210 ≒ 1.414

半分に折るとA5になり、同じ比率が保たれます。これが白銀比の実務での最大のメリットです。

Webで「A4っぽい」サムネイルを作るなら、幅 400px のとき：

高さ = 400 × 1.414 ≒ 566px

黄金比で同じ幅なら 400 × 1.618 ≒ 647px と、かなり縦長になります。印刷物っぽさなら白銀比、画面のバランスなら黄金比、と覚えると選びやすいです。

レイアウト寸法の決め方（実務フロー）

1. 基準値を1つ決める — コンテナ幅、本文フォント、カードの短辺など
2. 比率を選ぶ — 画面UIなら黄金比、用紙・和風なら白銀比
3. 掛け算か割り算か決める — 長辺が欲しいか短辺が欲しいか
4. ツールで検算 — 黄金比計算 に入力して確認
5. 微調整 — 8の倍数に丸める、グリッドに合わせる

デザインシステムでは、黄金比で出した数値をそのまま使わず 8pxグリッドにスナップ することも多いです。494px → 496px、のように。

CSSでの表現

/* 黄金比2カラム */
.golden-columns {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
}

/* 白銀比（A4風）のアスペクト比 */
.a4-ratio {
  aspect-ratio: 1 / 1.414;
  /* または aspect-ratio: 210 / 297; */
}

aspect-ratio が使えるなら、白銀比は分数で書いた方が誤差が少ないです。

1.618 と 1.414 を混同しないコツ

検索では「1.618 黄金比」と「白銀比 計算」が別クエリとして来ます。メモ用に：

• 1.618 → 黄金。φ。画面・タイポ向き
• 1.414 → √2。A4。折り畳み用紙向き

電卓に 1.618 と 1.414 を登録しておくと、ミスが減ります。

関連記事

トピック	記事
黄金比の基礎計算	黄金比の計算方法｜1.618の求め方
白銀比ツール	Silver Ratio（白銀比）計算機
アスペクト比全般	Aspect Ratio 計算｜16:9・4:3 解像度一覧