数値を入力するだけで、黄金比・白銀比に基づいたサイズを自動計算。 任意の比率での算出や、既存サイズが何の比率かを調べる逆算にも対応しています。
1 : 1.4140
Visual Preview（黄金比）
Base
Golden
この寸法は黄金比？比率の逆算チェック
既存のバナーやロゴの2辺を入力すると、実際の比率と最も近い貴金属比、そして合わせるための補正値がわかります。
実際の比率
1 : 1.778
最も近い比率
白金比
乖離 2.6%（ほぼ一致）
短辺1080.00を固定 → 長辺
1870.61
長辺1920.00を固定 → 短辺
1108.51
モジュラースケール（見出し・余白の連続サイズ）
基準値に比率を累乗して、本文から見出しまでのフォントサイズや余白を一貫したスケールで設計できます。比率は上のカスタム欄（未入力時は黄金比）が使われます。
比率の活用
黄金比1:1.618
最も美しい比率。ロゴや名刺、Appleのプロダクトにも。
白銀比1:1.414
大和比。A4サイズや法隆寺など日本建築に。
白金比1:1.732
1:√3。正三角形に由来する落ち着いた比率。
第二白銀比1:2.414
数学上の白銀比（1+√2）。横長のバナー向き。
青銅比1:3.303
装飾的なリズムを生む比率。ワイド構図に。
計算履歴
黄金比・白銀比 計算ツールとは？
本ツールは、デザインにおいて最も美しいとされる「黄金比（1:1.618）」や、日本国内で馴染み深い「白銀比（1:1.414）」に基づいた数値を一瞬で算出できるデザイン補助ツールです。 基準となる数値を入力するだけで拡大・縮小の両パターンを計算できるほか、任意の比率を指定した計算、既存サイズが何の比率かを調べる逆算チェック、 見出しや余白の設計に使うモジュラースケールの生成にも対応。ロゴデザイン、バナー制作、Webサイトのレイアウト設計など、感覚に頼らない「根拠のある美しさ」を数値化するために最適です。
こんなシーンで便利です
ロゴデザイン・アイコン制作
シンボルマークとタイポグラフィのサイズ比率を黄金比に設定することで、視覚的なバランスと説得力を生み出します。
既存デザインの比率チェック
手持ちのバナーやサムネイルの2辺を入力するだけで、実際の比率と最も近い貴金属比、そして補正すべき数値がわかります。
見出し・余白のスケール設計
本文サイズを基準にモジュラースケールを生成し、H1からH3までのフォントサイズや余白を一貫したリズムで定義できます。
バナー・広告クリエイティブ
人物とキャッチコピーの配置比率を白銀比（大和比）にすることで、日本人の感性に響きやすい安定した構図を作れます。
使い方は簡単 4ステップ
- 「基準となる数値」に、幅や高さ（px、mmなど）を入力します。
- 「拡大（×）」か「縮小（÷）」の計算方向と、丸めモード（整数・8の倍数など）を選択します。
- 黄金比・白銀比・青銅比などの結果が並ぶので、必要な数値をクリックしてコピーします。
- 既存サイズを調べたい場合は、逆算チェックに2辺を入力して比率と補正値を確認します。
※カスタム比率の欄に「1:1.414」などを入力すると、任意の比率でも同時に計算・スケール生成が行えます。
ご利用時の注意点
- 単位の制限なし：px（ピクセル）、mm（ミリ）、remなど、あらゆる単位でそのままお使いいただけます。
- 丸めモードについて：小数第2位・整数・4の倍数・8の倍数から選択できます。実装効率を優先する場合は8の倍数への丸めが実務では一般的です。
- カスタム比率の入力形式：「1:1.414」「1/1.618」「1 1.414」「1.732」のいずれの記法でも解釈されます。
- 白銀比と大和比：日本建築（法隆寺など）やアニメのキャラクターデザインにも多く採用されている、日本文化に非常に相性の良い比率です。なお数学分野で白銀比と呼ばれる1+√2（約2.414）は「第二白銀比」として別途算出しています。
黄金比・白銀比のサイズ早見表（1:1.618 / 1:1.414）
Webデザインやバナー制作でよく使われる基準値に対する、黄金比・白銀比の算出結果です。
| 基準サイズ | 黄金比 (1:1.618) | 白銀比 (1:1.414) | 活用イメージ |
|---|---|---|---|
| 16 px | 26 px | 23 px | 本文16pxに対する見出し |
| 300 px | 485 px | 424 px | 正方形バナーの拡大 |
| 500 px | 809 px | 707 px | アイキャッチ画像・ロゴ |
| 640 px | 1036 px | 905 px | スマホ用コンテンツ幅 |
| 800 px | 1294 px | 1131 px | PC用メインカラム |
| 1000 px | 1618 px | 1414 px | セクションの高さ・背景 |
| 1200 px | 1942 px | 1697 px | 高解像度メインビジュアル |
| A4短辺 (210) | 340 mm | 297 mm | A4用紙（白銀比の実例） |
【黄金比と白銀比の使い分け】
黄金比（Golden Ratio / 1:1.618）は、パルテノン神殿やAppleのロゴにも使われる「西洋的な究極の美」とされます。 一方、白銀比（Silver Ratio / 1:1.414）は「大和比」とも呼ばれ、A4用紙や法隆寺、ドラえもんのキャラクターデザインなど、日本人に馴染み深い「安心感のある美しさ」を生み出すのに最適です。A4用紙が210mm×297mmで比率がちょうど1:1.414になっているのは、半分に折っても同じ比率が保たれる白銀比の性質を利用しているためです。
【デザインソフトへの応用】
IllustratorやFigmaでレイアウトを決める際、幅（W）に対して「*1.618」や「/1.414」と入力する手間を、この早見表と丸めモードでショートカットできます。 バナーの文字配置や余白（ホワイトスペース）に迷った際、これらの比率を適用することで、感覚に頼らないロジカルなデザインが可能になります。
※数値は整数に四捨五入して表示しています。ツール上では小数第2位・整数・4の倍数・8の倍数を切り替えて算出できます。
メディアクエリやコンポーネント設計への応用：FigmaからCSS実装までの貴金属比活用スキーム
ツールで算出した黄金比や白銀比のデータを、単なる構図の目安で終わらせず、フロントエンド実装やUI/UXコンポーネントの設計へと落とし込むための実戦的なテクニックです。
モジュラースケールによるタイポグラフィのジャンプ率と行間設定の数値設計
見出し（H1/H2/H3）と本文（Body）のフォントサイズ比率（ジャンプ率）に黄金比を適用することで、CSSの設計がロジカルに最適化されます。
たとえば、本文の基準サイズを16pxとする場合、比率を累乗したモジュラースケールにより26px（16×1.618）、42px（16×1.618²）という連続したサイズが導かれます。
さらに読みやすさを左右する行間（line-height）を白銀比ベースの1.414倍（約1.4）に指定することで、直感的な美しさとテキストの視認性を両立させた厳密なUI設計が可能になります。
既存クリエイティブの比率監査とリサイズ時のトリミング基準の策定
運用中のバナーやサムネイルを改善する際、まず現状の縦横比を測定してどの貴金属比に最も近いかを把握することが出発点になります。
たとえば一般的な動画サムネイルの16:9は約1.778であり、白金比（1:1.732）との乖離が3％以内に収まるため、白金比を基準にした構図設計と相性が良いという判断ができます。
逆算チェックで乖離が10％を超える場合は、短辺または長辺のどちらを固定するかを決めたうえで、算出された補正値へリサイズすることで、既存の素材を活かしたまま構図の安定感を高められます。
コンポーネント設計を効率化するFigmaのオートレイアウトと8の倍数ルールの統合
FigmaやAdobe XDでカード型UIやバナーのコンポーネントを設計する際、算出した縦横比の数値をそのまま使うと、フロントエンド実装時にピクセル端数が発生します。
これを防ぐため、黄金比（1:1.618）や白銀比（1:1.414）でモックアップの基礎寸法を出した後は、Webデザインの標準である8の倍数（あるいは4の倍数）に最も近い整数値へ丸めてください。
本ツールの丸めモードを「8の倍数」に切り替えれば、この変換を計算段階で完了できるため、Figmaのオートレイアウトのパディングやギャップ値へスムーズに反映でき、コンポーネントの再利用性と実装速度が劇的に向上します。
レスポンシブWebデザインにおけるメディアクエリと可変グリッドの比率維持手法
PC画面でメインカラムとサイドバーの横幅を固定の黄金比（例：61.8%と38.2%）で構築している場合、スマホ画面へのブレイクポイント（一般的に768pxや480px）において比率の維持が難しくなります。
モダンWeb開発では、CSSのaspect-ratioプロパティを活用してコンポーネント自体に「1 / 1.618」などの値を指定するか、フレックスボックス（Flexbox）の伸長係数を制御して、デバイスの画面幅に合わせて可変（リキッドレイアウト）でありながらも常に美しさを損なわないグリッドシステムを構築するのが最適解です。
黄金比・白銀比の計算でよくある失敗と対策
「黄金比」にこだわりすぎて、Webデザインのコーディング効率やレスポンシブ崩れが多発
FigmaやIllustrator、Photoshopなどのデザインカンプ制作で、バナーサイズやWebレイアウトのコンテンツ幅に「1:1.618」の純粋な黄金比率を厳密に適用した結果、ピクセルパーフェクトに固執しすぎてコーディング時のブレイクポイント設定が複雑化し、スマホ表示時の余白（マージン）やパディングでレスポンシブデザインが崩壊する失敗です。
💡 対策・解決策を見る▼
既存デザインを感覚で「黄金比っぽく」修正し、かえってバランスを崩す
すでにあるバナーやロゴを黄金比に近づけようとして、現状の比率を測定しないまま感覚的に幅や高さを伸縮させてしまい、結果的にどの比率にも当てはまらない中途半端な寸法になってしまう失敗です。元のデザインが実は白銀比で整っていた場合、黄金比へ無理やり寄せることで安定感が失われることもあります。
💡 対策・解決策を見る▼
ユーザーの属性（ターゲット）を無視して、すべて「黄金比（西洋の美）」で構図を決めてしまう
パルテノン神殿やAppleのロゴなどに使われる「西洋の美」とされる黄金比率（1:1.618）だけが正義だと思い込み、日本国内向けのサービスサイト、ランディングページ（LP）、和風バナー、アニメキャラクターのアイコン制作にも黄金比を乱用した結果、ターゲット層にどこか「冷たい・親しみにくい」という違和感を与えて離脱率が高まる失敗です。
💡 対策・解決策を見る▼
ロゴデザインやタイポグラフィのパーツ単体に比率を当てはめ、全体の錯視（視覚補正）を忘れる
シンボルマーク、フォントの文字幅、アスペクト比、外枠のバウンディングボックスのサイズに、比率計算から得た数値を幾何学的に正しくレイアウトしたものの、人間の目の特性による「錯視（文字や円が小さく見える、重心が下がって見える現象）」を考慮していないため、完成したロゴのバランスが直感的に悪く見えてしまう後悔です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.入力した数値やデザインデータが外部に送信されて情報が漏洩することはありますか
A. 一切ありません。本ツールの計算処理はすべてお使いのブラウザ内で行われる完全ローカル処理型です。入力された数値などのデータが外部のサーバーへ送信されたりデータベースに保存されたりすることは一切ないため、公開前のロゴ制作や機密性の高いWebレイアウト設計でも安心してご利用いただけます。
Q.黄金比と白銀比の数値は具体的にいくつですか
A. 黄金比は1対1.6180339887、白銀比は1対1.4142135624です。黄金比は（1＋√5）÷2で求められる無理数で、パルテノン神殿やAppleのロゴに用いられています。白銀比は√2の値そのもので大和比とも呼ばれ、A4やB5といったコピー用紙の縦横比、法隆寺の五重塔などに採用されています。本ツールではこのほか白金比の1対1.732、第二白銀比の1対2.414、青銅比の1対3.303も同時に算出します。
Q.1対1.414のような任意の比率を指定して計算することはできますか
A. はい、カスタム比率の入力欄で指定できます。1:1.414のようなコロン区切り、1/1.618のようなスラッシュ区切り、スペース区切り、あるいは1.732のような数値のみの入力にも対応しています。入力した比率は他の貴金属比と並べて計算結果が表示されるほか、モジュラースケールの生成にもそのまま適用されます。
Q.すでにあるバナーやロゴのサイズが黄金比になっているか調べられますか
A. はい、比率の逆算チェック機能で調べられます。縦横2辺の実寸を入力すると、実際の比率が算出され、黄金比・白銀比・白金比・第二白銀比・青銅比のうち最も近いものと、そこからの乖離が何パーセントかを判定します。さらに短辺を固定した場合の長辺、長辺を固定した場合の短辺という補正値も表示されるため、既存デザインを美しい比率へ近づける具体的な数値がその場でわかります。
Q.ピクセルやミリメートルなど入力する数値の単位に制限はありますか
A. 単位の制限はありません。本ツールは純粋な比率の計算を行うため、Webデザインで使われるピクセルや印刷物のサイズであるミリメートル、または相対単位であるレムなど、どのような単位の数値でもそのまま入力して拡大縮小のサイズを算出できます。
Q.デザインソフトへ数値を入力する際に小数点以下のピクセル値はどう扱えばよいですか
A. 丸めモードの切り替えで自動的に調整できます。小数第2位までの正確な値のほか、整数への四捨五入、Webデザインで標準的に用いられる4の倍数や8の倍数への丸めをワンクリックで切り替えられます。数ピクセルの誤差があっても比率の美しさは損なわれないため、実装効率を優先して8の倍数に揃えるのが実務では一般的です。
Q.見出しと本文のフォントサイズを比率で設計することはできますか
A. はい、モジュラースケール機能で設計できます。基準値に比率を累乗した連続的なサイズが生成されるため、たとえば本文16ピクセルを基準に黄金比を適用すると、26ピクセル、42ピクセル、68ピクセルといった見出しサイズが自動で導き出されます。余白やコンポーネント間のギャップ設計にも同じスケールを適用することで、画面全体に一貫したリズムが生まれます。
Q.黄金比や白銀比のほかに自動計算される青銅比などの貴金属比とは何ですか
A. 青銅比をはじめとする各種の貴金属比は、黄金比や白銀比と同様に特定の数式から導き出されるデザインの調和比率です。青銅比は（3＋√13）÷2で約3.303となり、横に長い装飾的なリズムを生みます。本ツールでは基準となる数値を入力するだけでこれらの比率も一括で自動算出されるため、最適な視覚バランスを比較検討できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。