Golden Ratio（黄金比）計算機

見栄えが良くなる「黄金比（おおよそ1:1.618）」を使って、要素のサイズや余白の数値を計算します。

このツールについて

入力した数値を「黄金比（約1:1.618）」で美しく分割・拡張できる計算ツールです。レイアウトの幅や余白、ロゴのプロポーションを決める際に、自然で調和のとれたサイズを簡単に導き出せます。

モナ・リザやパルテノン神殿にも使われていると言われる「黄金比」。人が見て最も美しいと感じる比率を、あなたのウェブデザインにも取り入れてみませんか？ 基準となる要素の幅や高さ、フォントサイズなどを入力するだけで、「大きい方のサイズ」と「小さい方のサイズ」を瞬時に算出します。メインコンテンツとサイドバーの幅の比率を決めるときなどにもおすすめです。

ツール操作

大きい方 (φ/(1+φ)) —
小さい方 —

黄金比の計算方法（1:1.618）とレイアウトへの当て方

黄金比 φ（ファイ）は (1 + √5) / 2 ≈ 1.618033…。ある長さを「大きい方 : 小さい方 = 全体 : 大きい方」になるよう分けると、視覚的に安定した比率が得られます。上の計算機はその割り算を一瞬でやります。

計算式（手計算でも同じ）

全体の長さを N とすると:

  • 大きい方 ≈ N × 0.618（正確には N × φ / (1+φ)）
  • 小さい方 ≈ N × 0.382（大きい方を引いた残り）

逆に、短い辺 a から長い辺を求めるなら a × 1.618。長い辺から短い辺なら a / 1.618（≈ a × 0.618）。

実務例: コンテンツ幅 1200px を黄金比で分割

用途 計算 結果（概算）
メイン + サイドバー 1200 × 0.618 / 0.382 742px / 458px
ヒーロー高さ（幅基準） 1440 / 1.618 約 890px
タイポ段階（16px基準） 16 × 1.618 約 26px（見出し）

上のツールに 1200 を入れると同じ分割が即出ます。端数は px に丸めて使えば十分です。

CSS への落とし込み（競合が強いポイント）

黄金比の矩形をそのまま CSS にするなら aspect-ratio が最短です。 

/* 横長の黄金長方形 */
.hero {
  aspect-ratio: 1.618 / 1;
}

/* 2カラム: fr で近似（742:458 ≈ 1.618:1） */
.layout {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 1.5rem;
}

厳密なピクセルが欲しいときは計算機の数値をそのまま width / max-width に使う方が直感的です。

黄金比と白銀比の使い分け

日本の用紙や和風レイアウトでは 白銀比（1:√2 ≈ 1.414） の方が馴染むことがあります。A4 の縦横比がまさにそれです。黄金比ツールで「しっくりこない」ときは 白銀比計算機 を試してください。

もっと深く読む

使い方

  1. 数値（幅・高さ・フォントサイズなど）を入力します
  2. 黄金比で分割した大きい方・小さい方の2つの値が即座に表示されます
  3. レイアウト・ロゴ・タイポグラフィのプロポーション設計に活用できます

いつ使うか

レイアウトの余白設計、ロゴのプロポーション、デザインの段階設計に。

使用例

1000 → 618.03 と 381.97、16 → 9.89 と 6.11。

よくある質問

黄金比とは？

約1.618の比率。a:b = (a+b):a となる比で、自然界や美術でよく見られる美しい比率です。

黄金比の計算式は？

数値Nを分割する場合、大きい方 = N / (1+φ) × φ ≈ N × 0.618、小さい方 = N - 大きい方。

黄金比の値は？

φ（ファイ）= (1+√5)/2 ≈ 1.618。無理数で、小数点以下は無限に続きます。

黄金比はデザインでどう使う？

余白の分割、ロゴのプロポーション、タイポグラフィの段階（1, 1.618, 2.618...）、レイアウトの比率設計に使われます。

黄金比と白銀比の違いは？

| 項目 | 黄金比 | 白銀比 |
| 比率 | 約1.618 | 約1.414（√2） |
| 用途 | 西洋美術・レイアウト | 日本建築・A4用紙 |
| 代表例 | パルテノン神殿 | 大和絵・畳 |
このツールは黄金比専用。白銀比は数値×0.707で小さい方を算出できます。

黄金比でレイアウトを分割するには？

幅1000pxなら、618pxと382pxに分割。大きい方をメインコンテンツ、小さい方をサイドバーなどに使えます。

黄金比の由来は？

古代ギリシャのパルテノン神殿やレオナルド・ダ・ヴィンチの作品で使われたとされる。自然界の螺旋や花弁の配置にも現れます。

黄金比の逆数は？

1/φ ≈ 0.618。黄金比で分割したときの「小さい方」の割合になります。

フォントサイズに黄金比を使うには？

基準を16pxとすると、26px（1.618倍）、42px（2.618倍）のように段階を設けると調和したタイポグラフィになります。

黄金比計算機の使い方は？

数値（幅・高さ・フォントサイズなど）を入力するだけで、黄金比で分割した2つの値が即座に表示されます。

Golden Ratio（黄金比）計算機は無料ですか？

無料・登録不要で利用できます。

入力データはサーバーに送られますか？

データは端末内で処理され、当サイトのサーバーには保存されません。

対応ブラウザは？

Chrome、Edge、Firefox、Safari の最新版で動作確認しています。

オフラインで使えますか？

オフラインでも基本機能は動作します（初回読み込み後）。

CLIやデスクトップアプリとの違いは？

Golden Ratio（黄金比）計算機は、コマンドラインやデスクトップアプリの代替として、インストール不要ですぐ使えるオンラインツールです。

いつ使うツール？

こんなときに使います: レイアウトの余白設計、ロゴのプロポーション、デザインの段階設計に。

使用例は？

具体例: 1000 → 618.03 と 381.97、16 → 9.89 と 6.11。

主な機能は？

黄金比分割の即時計算、大きい方・小さい方の両方表示、任意の数値に対応

他の類似ツールとの使い分けは？

Golden Ratio（黄金比）計算機はブラウザ完結・インストール不要が強みです。CLIやIDE拡張と併用し、手元ですぐ試したいときに使うのが効率的です。

検索キーワード・別名

黄金比、デザイン、レイアウト、プロポーション、黄金比 計算、黄金比 計算方法、1.618 黄金比、1:1.618

基本的な使い方（ワークフロー）

  1. 数値（幅・高さ・フォントサイズなど）を入力します
  2. 黄金比で分割した大きい方・小さい方の2つの値が即座に表示されます
  3. レイアウト・ロゴ・タイポグラフィのプロポーション設計に活用できます

具体的な使用シーン

  • レイアウトの余白設計、ロゴのプロポーション、デザインの段階設計に。
  • 入力した数値を「黄金比（約1:1.618）」で美しく分割・拡張できる計算ツールです。レイアウトの幅や余白、ロゴのプロポーションを決める際に、自然で調和のとれたサイズを簡単に導き出せます。
  • 黄金比分割の即時計算
  • 大きい方・小さい方の両方表示

プライバシーとデータの扱い

データは端末内で処理され、当サイトのサーバーには保存されません。

注意点

  • コピーした結果を本番環境にそのまま貼る前に必ず再確認する
  • ブラウザ拡張機能がページ動作を妨げる場合はシークレットウィンドウで試す
  • 大量データ入力時はタブを閉じずに処理完了を待つ

関連する解説記事

関連する学習コンテンツ

関連ツール