黄金比・白銀比計算ツール | Webデザイン・タイポグラフィ・CSS生成

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

4つの計算モード
  • 横 (Width Mode)
    入力値を「幅」とし、比率に基づいた「高さ」を算出します。画像のトリミングやバナー作成に最適です。
  • 縦 (Height Mode)
    入力値を「短辺（幅）」とし、「長辺（高さ）」を算出します。スマホ画面やポスター制作に。
  • 分割 (Split Mode)
    入力値を「全体幅」とし、黄金比などで2分割（A:B）します。Webレイアウトのメイン:サイドバー比率などに。
  • 文字 (Typography Mode)
    基準サイズ（16pxなど）から、モジュラースケールに基づいた見出しサイズ（h1〜h6）を一括生成します。
Web制作・DTPへの活用

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

  • CSS Variables: :root { --h1: 2.4rem; ... } 形式でコピー。
  • aspect-ratio: モダンなCSSアスペクト比プロパティを生成。
  • Flexbox: 分割モード時、flex-basis の値を生成。
  • 単位変換: px, rem, %, mm, inch などをリアルタイム相互変換。
Tips: 黄金比カードの右上にある ボタンを押すと、正確な黄金螺旋ガイドが表示されます。

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

名称 比率 (近似値) 特徴と主な用途
黄金比
Golden Ratio		 1 : 1.618 最も美しいとされる比率。自然界（巻貝、植物）や歴史的建造物（パルテノン神殿）、Appleのロゴなどに広く見られます。
安定感 審美性
白銀比 (大和比)
Silver Ratio		 1 : 1.414 「ルート2」の比率。A4・B5などの用紙サイズ規格や、法隆寺など日本の伝統建築に使われる「日本人に馴染み深い」比率です。
実用的 日本的
第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）に最適な比率。見切れを防ぐための標準規格です。

黄金比 (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...)
白銀比 第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 (Instagram / 縦)
21:9 (ウルトラワイド)
2.35:1 (シネマ)
1:1 (スクエア)
単位換算 (DPI基準)

比率の逆引き