黄金比・白銀比の計算

WebデザインやDTPに使える黄金比・白銀比・第2白銀比などの計算ツールです。px/rem変換、CSSコードの生成、フォントサイズ設計（タイポグラフィスケール）に対応しています。

白銀比（1:√2・A判の比率）だけを詳しく見る

4つの計算モード
  • 横長 / 縦長モード
    作りたい図形の向きを選択します。入力した数値を「幅」にするか「高さ」にするかを指定して、理想のサイズを算出します。
  • 分割 (Split Mode)
    入力値を「全体幅」とし、黄金比などで2分割（A:B）します。Webレイアウトのメイン:サイドバー比率などに。
  • 文字 (Typography Mode)
    基準サイズ（16pxなど）から、モジュラースケールに基づいた文字サイズ（h1・h2・h3・本文・小さい文字の5段）を一括生成します。
Web制作・DTPへの活用

計算結果は単なる数値だけでなく、以下の形式でコピー可能です。

  • CSS Variables: :root { --h1: 2.4rem; ... } 形式でコピー。
  • aspect-ratio: モダンなCSSアスペクト比プロパティを生成。
  • Flexbox: 分割モード時、flex-basis の値を生成。
  • 単位変換: 入力した値を px・rem・mm・inch・pt に換算して表示（rem は 1rem＝16px で計算）。
Tips: 黄金比カードの右上にある ボタンを押すと、正確な黄金螺旋ガイドが表示されます。

デザインに使用される代表的な比率（貴金属比）の一覧と、それぞれの特徴・用途です。

名称 比率 (近似値) 特徴と主な用途
黄金比
Golden Ratio		 1 : 1.618 (1 + √5) ÷ 2 の比率。ロゴや見出しなど、印象をつくる要素の設計によく使われます。巻貝やパルテノン神殿、有名な企業ロゴに使われているという説明もよく見かけますが、後から測って当てはめたものとする指摘が多く、作り手が意図した確かな根拠はありません。
白銀比 (大和比)
Silver Ratio		 1 : 1.414 「ルート2」の比率。A4・B5などの用紙サイズ規格（JIS P 0138）に使われていて、日本では大和比とも呼ばれます。法隆寺などの伝統建築に使われているという説明もありますが、諸説あり確かではありません。
第2白銀比
Silver Ratio 2		 1 : 2.414 白銀比の派生形。正八角形の構成要素としても知られ、独特な鋭さと安定感を持ちます。
青銅比
Bronze Ratio		 1 : 3.303 非常に横長（または縦長）な比率。強いコントラストや、洗練されたモダンなレイアウトを作る際に用いられます。
16:9
Wide		 1 : 1.778 現代の標準的なモニター、YouTubeサムネイル、ハイビジョン放送の比率。Webデザインのヒーローエリアによく使われます。
OGP画像
SNS Card		 1.91 : 1 FacebookやX(Twitter)のシェア画像（OGP）で広く使われている比率（1200×630px）。正方形に切り取って表示するサービスもあります。

黄金比 (1:1.618) は、自然で有機的な美しさや、豪華さ・ゆとりを表現したいデザイン（アート、ロゴ、余白の多いLP）に向いています。
白銀比 (1:1.414) は、規則正しく整った印象や、情報の整理整頓が求められるデザイン（A4書類、管理画面、日本の伝統的な和風デザイン）に向いています。

「文字 (Typo)」モードを使い、基準となる本文サイズ（例: 16px）を入力してください。比率を選ぶことで、調和の取れた見出しサイズ（h1, h2...）を自動計算できます。 一般的に、ブログ等はMajor Third (1.250)、インパクト重視のLPはGolden Ratio (1.618)などが推奨されます。

rem はルート要素（通常はhtmlタグ）のフォントサイズを基準とした相対単位です。 Webアクセシビリティの観点から、ユーザーがブラウザ設定で文字サイズを変更した場合に正しく追従するため、現代のWeb制作では px よりも rem の使用が推奨されています。このツールでは自動的にpxをremに変換して出力します。
入力値の適用先:
黄金比 (1 : 1.618...)
白銀比 (1 : 1.414...)
カスタム比率
:
単位換算 (DPI基準)
白銀比 第2 (1 : 2.414...)
青銅比 (1 : 3.303...)
白金比 (1 : 1.732...)
1:2 (ダブルスクエア)
16:9 (ワイド)
16:10 (PC / Mac)
1.91:1 (OGP / SNS)
4:3 (クラシック)
3:2 (写真)
4:5 / 5:4 (Instagram)
21:9 (ウルトラワイド)
2.35:1 (シネマ)
1:1 (スクエア)

比率の逆引き

黄金比・白銀比とは？デザインで使う「比率」の基礎

黄金比（約 1:1.618）と白銀比（約 1:1.414）は、レイアウトや文字サイズを決めるときに使われる比率です。 白銀比は日本では大和比（やまとひ）とも呼ばれ、A4・B5 といったコピー用紙の縦横比そのものになっています。 このツールは数値を1つ入力するだけで、黄金比・白銀比・第2白銀比・青銅比の各値と、そのまま貼れる CSS のコード（CSS変数・aspect-ratio・flex-basis）を生成します。 計算はすべてブラウザの中で完結するため、入力した数値がサーバーに送られることはありません。登録もインストールも不要です。

白銀比（大和比）とは？A判の紙と1:√2

白銀比は、短い辺と長い辺の比が 1:√2（約 1:1.41421…）になる比率です。日本では大和比とも呼ばれます。A4（210×297mm）や B5（182×257mm）など、A判・B判の用紙はこの比率をミリ単位に丸めた寸法で決められています。長い辺を半分に折ると、できた紙もまた 1:√2 になるため、A3 を半分にすると A4、A4 を半分にすると A5 というように、形を保ったまま大きさだけが変わります。 長い辺は「短い辺 × 1.4142」、短い辺は「長い辺 ÷ 1.4142」で求められます。A判・B判の寸法表や白銀比だけの計算は、白銀比の計算ページにまとめています。

白銀比と黄金比の違い（図）

短い辺をそろえた白銀比と黄金比の長方形の比較 短い辺 1 白銀比 1 : 1.414 黄金比 1 : 1.618 1.414 1.618
短い辺を同じ長さにそろえると、白銀比のほうが短く、正方形に近い形になります。黄金比は約 14% 長く伸びます。

黄金比・白銀比・第2白銀比の違い

比較項目 黄金比 白銀比 第2白銀比
比の値 1 : 1.6180… 1 : 1.4142… 1 : 2.4142…
数式 (1 + √5) ÷ 2 √2 1 + √2
別名 φ（ファイ） 大和比 白銀数
身近な例 名刺やカードの縦横比に近い A4・B5 などのコピー用紙 短冊・縦長のバナー
半分に折ると 比率が変わる ◎ 同じ比率のまま 比率が変わる
向いている場面 ロゴ・見出しなど印象をつくる要素 書類・印刷物など実務的な紙面 縦に長い領域の分割

「半分に折っても同じ形になる」のは白銀比だけが持つ性質です。紙の規格に採用されているのはこのためです。

白金比・青銅比・貴金属比の一覧

「貴金属比」は、長方形から正方形を n 個切り取ったとき、残りが元と同じ形になる比率の仲間です。第 n 貴金属比は (n + √(n² + 4)) ÷ 2 で表され、n = 1 が黄金比、n = 2 が白銀比、n = 3 が青銅比です。 ただし日本のデザインの分野では 1:√2 を「白銀比」と呼ぶことが多いため、このツールでは数学でいう白銀比（1 + √2）を「第2白銀比」と表記しています。

名称 比の値・数式 性質・メモ
黄金比
第1貴金属比		 1 : 1.6180…
(1 + √5) ÷ 2		 正方形を1つ切り取ると、残りが元と同じ形になる
第2白銀比
第2貴金属比		 1 : 2.4142…
1 + √2		 正方形を2つ切り取ると同じ形が残る。正八角形の1辺と、向かい合う辺どうしの距離の比でもある
青銅比
第3貴金属比		 1 : 3.3027…
(3 + √13) ÷ 2		 正方形を3つ切り取ると同じ形が残る
第4貴金属比 1 : 4.2360…
2 + √5		 正方形を4つ切り取ると同じ形が残る
白銀比（大和比） 1 : 1.4142…
√2		 貴金属比の仲間ではない。半分に折ると同じ形になり、A判・B判の用紙に使われている
白金比 1 : 1.7320…
√3		 貴金属比の仲間ではない。正三角形の底辺の半分と高さの比。呼び名は資料によって異なる

このツールでは、ここに挙げた比率のうち第4貴金属比以外をすべてカードで計算できます。

よくある質問 (FAQ)

短い辺と長い辺の比が 1 : √2（約 1 : 1.414） になる比率です。日本では「大和比」とも呼ばれます。 A判・B判のコピー用紙、文庫本などがこの比率で、日本人にとって最も見慣れた長方形と言えます。 正方形に近い落ち着いた印象になるため、情報量の多い紙面や画面で扱いやすい比率です。

数値は黄金比が約 1:1.618、白銀比が約 1:1.414 で、白銀比のほうが正方形に近い形になります。 性質面での最大の違いは「半分に折ったとき」で、白銀比は折っても同じ比率を保ちますが、黄金比は変わります。 印象としては、黄金比はやや細長くダイナミック、白銀比は安定して端正、という違いが出ます。 どちらが優れているというものではなく、作りたい印象で選ぶものです。

半分に折っても同じ比率を保てる唯一の比率だからです。 A4（210×297mm）を半分にすると A5（148×210mm）になりますが、どちらも縦横比は約 1:1.414 のままです。 この性質のおかげで、拡大・縮小コピーをしても余白が出ず、紙を無駄なく分割できます。 実用上の要請から生まれた規格であり、「美しいから選ばれた」わけではない点が黄金比との違いです。

第2白銀比は 1 : (1 + √2)＝約 1:2.414、青銅比は 約 1:3.303 です。 黄金比・第2白銀比・青銅比はまとめて「貴金属比」と呼ばれ、それぞれ第1・第2・第3貴金属比にあたります（日本でいう白銀比 1:√2 は、この仲間には含まれません）。 第2白銀比は縦に長い形になるため、サイドバーやバナーなど細長い領域の設計に使われることがあります。

このツールでは 1 : √3（約 1:1.732） を白金比として扱っています。正三角形の底辺の半分と高さの比にあたる比率です。 黄金比や青銅比と違って数学の「貴金属比」には含まれず、呼び名も資料によって異なります。黄金比（1:1.618）よりも少し細長い形になります。

よく使われるのはレイアウトの分割と文字サイズの設計の2つです。 前者は、コンテンツ領域とサイドバーの幅を 1:1.618 で分ける、といった使い方をします。 後者は、本文サイズに比率を掛けて見出しサイズを決める方法（タイポグラフィスケール）で、 サイズの飛び方が揃うため統一感が出ます。このツールで生成される CSS のコード（CSS変数・aspect-ratio など）は、そのまま貼って使えます。 なお比率は出発点であって絶対の正解ではないので、最後は実際の見え方で微調整してください。

諸説あり、断定はできません。 古代建築や名画に黄金比が使われているという説明は広く知られていますが、 後から測って当てはめただけとする指摘も多く、制作者が意図した証拠が残っているものは限られます。 人が黄金比を好むかを調べた心理学の実験でも、結果は一貫していません。 実務的には「多くの人が見慣れていて破綻しにくい比率」として扱うのが妥当で、 従うべき法則ではなく、迷ったときの出発点として使うのが現実的です。

他の CSS ジェネレーター