黄金比の計算方法｜1.618の求め方と実務での使い方

「黄金比 計算方法」「1.618 黄金比」で検索する人は、理論より今のデザインの数値を出したいことが多いです。フィボナッチ数列の話は後回しにして、まず計算の手順から入ります。

黄金比の数値

黄金比（φ）は無理数で、小数は終わりません。実務では 1.618 か 1:1.618 で十分です。

φ = (1 + √5) / 2 ≒ 1.6180339887...

LISKULの記事では、二次方程式から導く方法やフィボナッチ数列（5と8なら8÷5=1.6）で近似する方法も紹介されています。デザインの現場では 1.618を掛ける・割る で事足ります。

計算の2パターン

パターンA：短い辺が分かっている → 長い辺を求める

長い辺 = 短い辺 × 1.618

例：カードの幅が 240px のとき、黄金比に近い高さは

240 × 1.618 ≒ 388.3px

パターンB：長い辺（または全体）が分かっている → 短い辺を求める

短い辺 = 長い辺 ÷ 1.618

例：コンテナ幅が 1000px のとき、メインとサイドを黄金比で分けるなら

メイン ≒ 1000 ÷ 1.618 ≒ 618px
サブ  ≒ 1000 - 618 = 382px

Gojikaraの黄金比計算機でも、短辺1.000・長辺1.618・全体2.618、という関係が整理されています。

よくある計算例

基準	計算	結果
縦 100mm	×1.618	横 ≒ 161.8mm
横 300px	÷1.618	縦 ≒ 185.4px
本文 16px	×1.618	見出し ≒ 26px
本文 16px	×1.618²	大見出し ≒ 42px

フォントサイズは 16px → 26px → 42px のように、1.618倍を重ねるとタイポグラフィの階層が作りやすいです。Xerobitの英語記事でも、CSS変数で --phi: 1.618 を定義して calc() する例が紹介されています。

:root {
  --phi: 1.618;
  --font-base: 1rem;
  --font-lg: calc(var(--font-base) * var(--phi));
  --font-xl: calc(var(--font-base) * var(--phi) * var(--phi));
}

Webレイアウトへの当てはめ

2カラムレイアウトで「メインがやや広い」バランスにしたいとき、61.8% : 38.2% は黄金比の分割です（618:382 ≒ 1000pxの例と同じ）。

.layout {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 2rem;
}

ヒーロー画像のクロップで「横1000pxなら縦は？」と聞かれたら 1000 ÷ 1.618 ≒ 618px と答えれば、黄金矩形に近い比率になります。

ツールで確認する

手計算でもよいですが、黄金比計算ツール に数値を入れると、大きい方・小さい方・合計が一度に出ます。デザインカンプの数値を入れて、CSSにそのまま転記する使い方が多いです。

黄金比を使うときの注意

• 1.618に縛られすぎない — 読みやすい行間やタップ領域の方が優先されることもあります。
• 8:5は近似 — フィボナッチの5:8（1.6）は黄金比の簡易版として使われます。
• 白銀比（√2）との使い分け — A4用紙は白銀比。和風レイアウトは 白銀比の記事 を参照。

デザインの「正解」ではなく、最初の案を出すためのレールとして使うのが現実的です。

関連記事

トピック	記事
白銀比との比較	黄金比と白銀比の計算｜レイアウト寸法の出し方
デザイン全般	Golden Ratio 黄金比｜レイアウトと typography