数値を入力するだけで、黄金比・白銀比に基づいたサイズを自動計算。 レイアウト設計やロゴ制作に役立ちます。
Visual Preview
Base
Golden
比率の活用
黄金比
最も美しい比率。ロゴや名刺に。
白銀比
大和比。A4サイズや日本建築に。
青銅比
装飾的なリズムを生む比率。
計算履歴
黄金比・白銀比計算ツールとは？
本ツールは、デザインにおいて最も美しいとされる「黄金比（1:1.618）」や、日本国内で馴染み深い「白銀比（1:1.414）」に基づいた数値を一瞬で算出できるデザイン補助ツールです。 基準となる数値を入力するだけで、拡大・縮小の両パターンを計算。ロゴデザイン、バナー制作、Webサイトのレイアウト設計など、感覚に頼らない「根拠のある美しさ」を数値化するために最適です。
こんなシーンで便利です
ロゴデザイン・アイコン制作
シンボルマークとタイポグラフィのサイズ比率を黄金比に設定することで、視覚的なバランスと説得力を生み出します。
Webデザインのグリッド設計
メインコンテンツとサイドバーの横幅比率、またはセクション間の余白（マージン）に比率を適用し、美しいグリッドを構築します。
バナー・広告クリエイティブ
人物とキャッチコピーの配置比率を白銀比（大和比）にすることで、日本人の感性に響きやすい安定した構図を作れます。
写真・動画の構図決定
トリミングやクロップを行う際のガイド数値として使用。三分割法よりも一段上のプロフェッショナルな比率を適用できます。
使い方は簡単 3ステップ
- 「基準となる数値」に、幅や高さ（px、mmなど）を入力します。
- 「拡大（×）」か「縮小（÷）」の計算方向を選択します。
- 表示された結果をコピーし、デザインソフト（Illustrator、Figma等）に反映させます。
※青銅比など、他の貴金属比も自動で算出されるため、最適なバランスを比較検討できます。
ご利用時の注意点
- 単位の制限なし：px（ピクセル）、mm（ミリ）、remなど、あらゆる単位でそのままお使いいただけます。
- 小数点以下の扱い：ツール上では小数点第二位まで表示していますが、デザインソフトで入力する際は整数に四捨五入しても比率の美しさは損なわれません。
- 白銀比と大和比：日本建築（法隆寺など）やアニメのキャラクターデザインにも多く採用されている、日本文化に非常に相性の良い比率です。
デザインで使える比率・サイズの早見表
Webデザインやバナー制作でよく使われる基準値に対する、黄金比・白銀比の算出結果です。
| 基準サイズ | 黄金比 (1:1.618) | 白銀比 (1:1.414) | 活用イメージ |
|---|---|---|---|
| 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横 (297) | 481 mm | 420 mm | パンフレット・印刷物 |
【黄金比と白銀比の使い分け】
黄金比（Golden Ratio / 1:1.618）は、パルテノン神殿やAppleのロゴにも使われる「西洋的な究極の美」とされます。 一方、白銀比（Silver Ratio / 1:1.414）は「大和比」とも呼ばれ、A4用紙や法隆寺、ドラえもんのキャラクターデザインなど、日本人に馴染み深い「安心感のある美しさ」を生み出すのに最適です。
【デザインソフトへの応用】
IllustratorやFigmaでレイアウトを決める際、幅（W）に対して「*1.618」や「/1.414」と入力する手間を、この早見表でショートカットできます。 バナーの文字配置や余白（ホワイトスペース）に迷った際、これらの比率を適用することで、感覚に頼らないロジカルなデザインが可能になります。
※数値は小数点以下を切り捨て・四捨五入して表示しています。デザインの現場では整数値に調整して使用するのが一般的です。
メディアクエリやコンポーネント設計への応用：FigmaからCSS実装までの貴金属比活用スキーム
ツールで算出した黄金比や白銀比のデータを、単なる構図の目安で終わらせず、フロントエンド実装やUI/UXコンポーネントの設計へと落とし込むための実戦的なテクニックです。
UIコンポーネントにおけるタイポグラフィのジャンプ率と行間設定の数値設計
見出し（H1/H2/H3）と本文（Body）のフォントサイズ比率（ジャンプ率）に黄金比を適用することで、CSSの設計がロジカルに最適化されます。
たとえば、本文の基準サイズを16pxとする場合、H2のサイズを26px（16×1.618）に設定し、さらに読みやすさを左右する行間（line-height）を白銀比ベースの1.414倍（約1.4）に指定することで、直感的な美しさとテキストの視認性を両立させた厳密なUI設計が可能になります。
コンポーネント設計を効率化するFigmaのオートレイアウトと8の倍数ルールの統合
FigmaやAdobe XDでカード型UIやバナーのコンポーネントを設計する際、本ツールで算出した縦横比の数値をそのまま使うと、フロントエンド実装時にピクセル端数が発生します。
これを防ぐため、黄金比（1:1.618）や白銀比（1:1.414）でモックアップの基礎寸法を出した後は、Webデザインの標準である8の倍数（あるいは4の倍数）に最も近い整数値へ丸めてください。
Figmaのオートレイアウト（Auto Layout）のパディングやギャップ値へスムーズに反映でき、コンポーネントの再利用性と実装速度が劇的に向上します。
レスポンシブ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のロゴ、Twitterの青い鳥のロゴなどに使われる「西洋の美」とされる黄金比率（1:1.618）だけが正義だと思い込み、日本国内向けのサービスサイト、ランディングページ（LP）、和風バナー、アニメキャラクターのアイコン制作にも黄金比を乱用した結果、ターゲット層にどこか「冷たい・親しみにくい」という違和感や不信感を与えて離脱率が高まる失敗です。
💡 対策・解決策を見る▼
ロゴデザインやタイポグラフィのパーツ単体に比率を当てはめ、全体の錯視（視覚補正）を忘れる
シンボルマーク、フォントの文字幅、アスペクト比、外枠のバウンディングボックスのサイズに、本ツールの比率計算ツールから得た数値を幾何学的に正しくレイアウトしたものの、人間の目の特性による「錯視（文字や円が小さく見える、重心が下がって見える現象）」を考慮していないため、完成したロゴのバランスが直感的に悪く見えてしまう後悔です。
💡 対策・解決策を見る▼
解像度やアスペクト比（16:9・4:3）に数値を無理やり合わせ、窮屈なホワイトスペース（余白）になる
PC用メインカラム（800px）や高解像度メインビジュアル（1200px）などの基準サイズから、本ツールの早見表を元にセクションの高さやバナーの文字・画像の配置位置を割り出した結果、余白（ホワイトスペース）の比率まで強制的に固定されてしまい、テキストの視認性が悪化したり、文字サイズが小さすぎて広告クリエイティブのクリック率（CTR）が激減する失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.入力した数値やデザインデータが外部に送信されて情報が漏洩することはありますか
A. 一切ありません。本ツールの計算処理はすべてお使いのブラウザ内で行われる完全ローカル処理型です。入力された数値などのデータが外部のサーバーへ送信されたりデータベースに保存されたりすることは一切ないため、公開前のロゴ制作や機密性の高いWebレイアウト設計でも安心してご利用いただけます。
Q.ピクセルやミリメートルなど入力する数値の単位に制限はありますか
A. 単位の制限はありません。本ツールは純粋な比率の計算を行うため、Webデザインで使われるピクセルや印刷物のサイズであるミリメートル、または相対単位であるレムなど、どのような単位の数値でもそのまま入力して拡大縮小のサイズを算出できます。
Q.デザインソフトへ数値を入力する際に小数点以下のピクセル値はどう扱えばよいですか
A. 小数点以下は四捨五入して整数値に調整して使用するのが一般的です。ツール上では正確な比率を維持するために小数点第二位まで表示していますが、デザインの現場やコーディング時に数ピクセルの誤差があっても比率の美しさが損なわれることはありません。
Q.黄金比や白銀比のほかに自動計算される青銅比などの貴金属比とは何ですか
A. 青銅比をはじめとする各種の貴金属比は、黄金比や白銀比と同様に特定の数式から導き出されるデザインの調和比率です。本ツールでは基準となる数値を入力するだけでこれらの比率も一括で自動算出されるため、最適な視覚バランスを比較検討できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。