センスを理論に変える。基準となる数値を入力するだけで、デザインの調和を支配する比率に基づいたスケールを自動生成します。
Current Formula
1.618Golden Ratio
黄金比・白銀比レイアウト計算ツールが選ばれる理由
プロのデザイン現場では、要素の大きさや余白を「なんとなく」で決めることはありません。 本ツールは、数学的に最も美しいとされる黄金比（フィボナッチ数列関連）や白銀比（大和比）をベースに、入力した基準値から拡大・縮小された数値セットを一瞬で導き出します。 計算の煩わしさを排除し、論理的な美しさを備えたデザイン構築に集中できる環境を提供します。
こんなシーンで便利です
ロゴデザインのシンボル構築
黄金比に基づいた円（黄金円）を組み合わせることで、Appleのロゴのように時代を問わず洗練されたシンボルマークを設計できます。
UIデザインのグリッド・余白設計
メインコンテンツとサイドバーの比率、あるいはセクション間のパディングを比率に沿ってスケールさせることで、視覚的な一貫性が生まれます。
タイポグラフィのジャンプ率決定
本文のフォントサイズを基準に、見出しのサイズを黄金比や白銀比で算出。情報の優先順位が明確になり、可読性が劇的に向上します。
バナー・サムネイルの構図最適化
テキストボックスのサイズや画像のトリミング範囲を比率に合わせることで、直感的に『心地よい』と感じるレイアウトを爆速で作成できます。
使い方は簡単 4ステップ
- 「基準値」に、現在のフォントサイズやアートボードの幅などを入力します。
- 「比率」メニューから、黄金比・白銀比・青銅比のいずれかを選択します（カスタム設定も可能）。
- プレビューで視覚的な重なりを確認しながら、Stepごとの数値リストを参照します。
- 個別の数値をコピー、またはリストを一括コピーしてデザインツールに適用します。
※基準値（Base）から上下にスケールされた数値が表示されるため、ミクロな調整からマクロなレイアウトまで対応可能です。
ご利用時の注意点
- 黄金比 (1:1.618)：自然界にも存在する普遍的な比率。神秘的、高級、プロフェッショナルな印象に。
- 白銀比 (1:1.414)：日本人に馴染みの深い『大和比』。落ち着き、安定、機能的な印象に（A4サイズ等）。
- 青銅比 (1:3.303)：デザインにさらなるダイナミズムや変化を加えたい際の新基準として。
- プライバシー保護：すべての計算はブラウザ上で行われ、入力内容が外部サーバーに送られることはありません。
主要なデザイン比率と推奨サイズ早見表
Webデザインやグラフィックで頻用される比率と、基準サイズに対する計算例です。
| 比率名 | 比率（近似値） | 基準1000pxの時 | 主な利用シーン |
|---|---|---|---|
| 黄金比 | 1 : 1.618 | 618px / 1618px | ロゴ制作・LPのメインビジュアル |
| 白銀比 | 1 : 1.414 | 707px / 1414px | キャラデザ・印刷物（A4用紙） |
| 青銅比 | 1 : 3.303 | 303px / 3303px | ジュエリー・建築的デザイン |
| 白金比 | 1 : 1.732 | 577px / 1732px | カードデザイン・長方形の構成 |
| ルート長方形 | 1 : √2 | 707px / 1414px | コピー用紙・書籍のレイアウト |
Webレイアウトへの応用例
- ・幅1200px（OGP等）を黄金分割 ＝ 約742px : 458px
- ・幅1080px（インスタ）を白銀分割 ＝ 約764px : 316px
- ・2カラム配置：メイン 1 : サイドバー 0.618 の比率
印象の使い分け
- ・黄金比（1.618）：神秘的、高級、西洋的、完璧主義
- ・白銀比（1.414）：安定、親しみ、日本的、可愛い（ドラえもん等）
- ・正方形（1.000）：強固、正直、静止、SNSアイコン
※当ツールでは、これらの複雑な無理数計算を瞬時に行い、デザインツール（Figma, Adobe XD, Illustrator, Photoshop）でそのまま使えるピクセル値として出力します。
デザインシステムとCSS設計への落とし込み：数学的比率を実装コードへ変換する実践アプローチ
ツールで算出した黄金比や白銀比の数値スケールを、単なるモックアップの数値で終わらせず、Figmaの変数（Variables）やモダンCSSの実装コンポーネントへシームレスに組み込むための高度な開発ノウハウを解説します。
デザインシステムにおけるトークン化とFigma Variablesでのスケール管理
本ツールで導き出した比率ベースの数値は、デザインシステムにおける共通のデザイントークンとして定義するのが効率的です。
FigmaのVariables（変数）機能を利用し、基準値をベースとしたステップごとの数値（例：space-scale-1、space-scale-2）を設定することで、デザイナー間での主観的な余白設定のブレをなくし、一貫性のあるUIコンポーネントの構築が可能になります。
モダンCSSとTailwind CSSによる比率に基づいたレイアウトのコード設計
算出した比率をコーディングへ適用する際は、マジックナンバーを避け、CSS変数（カスタムプロパティ）やコンポーズ可能なユーティリティクラスとしてマッピングします。
Tailwind CSSのコンフィグファイル（tailwind.config.js）の拡張（extend）機能に変数を登録するか、CSSのcalc関数やclamp関数に比率（例：1.618）を定数として組み込むことで、画面幅に応じたレスポンシブな比率レイアウトが完全に自動化されます。
マルチデバイス対応における流動的タイポグラフィとモジュラースケールの統合
画面サイズが動的に変化するモダンWebでは、フォントサイズに比率を適用するモジュラースケール（Modular Scale）の概念が不可欠です。
最小画面幅時のフォントサイズと最大画面幅時のフォントサイズに対してそれぞれ当ツールでスケールを算出し、それらをCSSのclamp関数でシームレスに補間させることにより、スマートフォンから高解像度モニターまで破綻しない美しいジャンプ率のタイポグラフィが実現します。
よくある失敗と対策
「黄金比 計算」の無理数をFigmaやIllustratorに直入力してピクセルが小数点でズレる
黄金比（1.618）や白銀比（1.414）の無理数をそのままグリッドやアートボードサイズに適用し、FigmaやAdobeツールで小数点以下のピクセル（サブピクセル）を発生させ、書き出し時に画像が滲む失敗です。
💡 対策・解決策を見る▼
ロゴデザインで「黄金比の円」を組み合わせる順番を間違えて構図の調和が崩れる
フィボナッチ数列や黄金螺旋を意識してロゴをトレースする際、パーツの比率を「1:1.618」の倍率に正しく拡大縮小させず、感覚的にオブジェクトを配置してしまい、数学的な根拠のある美しいロゴにならない失敗です。
💡 対策・解決策を見る▼
UIデザインの「フォントサイズ（ジャンプ率）」と「余白マージン」の比率を混在させる
Webサイトのレイアウト設計で、フォントサイズには黄金比（1:1.618）を使い、セクション間のパディング（余白）には白銀比（1:1.414）を使うなど、1つの画面内に複数の異なるデザイントンマナ比率を混在させて一貫性が失われる失敗です。
💡 対策・解決策を見る▼
バナーやSNSサムネイルの制作で「なんとなく」要素を配置して視線誘導に失敗する
Instagramの投稿やYouTubeサムネイル、バナー広告のデザインで、視覚的な主役（メインビジュアル）と文字要素の配置を感覚だけでレイアウトし、ユーザーが直感的に「見づらい」と感じてクリック率（CTR）が下がる失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.黄金比と白銀比はデザインによってどちらを選べばいいですか
A. 西洋的な神秘性や高級感、普遍的な美しさを強調したい場合は黄金比が最適です。一方で、日本人に馴染み深く落ち着きや安定感、可愛いキャラクターデザインや機能性を重視する場合は白銀比が向いています。
Q.ピクセルパーフェクトな画面設計でも数値をそのまま使えますか
A. はい、使えます。計算結果はピクセルベースのUI設計に適用しやすいよう、小数点以下を四捨五入して整数に整理して表示しています。FigmaやAdobe各種ツールでの数値入力にそのままご活用いただけます。
Q.カスタム比率の設定機能はどのような用途に使いますか
A. 黄金比などの代表的な比率以外に、プロジェクト独自の変則的な比率でサイズスケールを作りたい場合に使用します。チーム開発やブランド固有の一貫性のあるデザインシステム構築、余白のトークン化に役立ちます。
Q.入力した数値やデザインデータが外部に送信され漏洩するリスクはありますか
A. ありません。当ツールは完全ローカル処理型の安全設計を導入しており、入力された基準値や選択した比率データが外部のサーバーへ送信されたりデータベースに保存されたりすることは一切ありません。処理はすべてブラウザ内で完結しページを閉じれば消去されます。
Q.青銅比や白金比などの特殊な比率はWebデザインのどこで活用できますか
A. 青銅比は比率の開きが大きいため、ジュエリーなどのダイナミックな高低差をつける要素に有効です。白金比はクレジットカードなどの縦横比に近く、SNSのバナーや縦長カード型UIコンポーネントを構成する際の縦横比率の最適化に適しています。
Q.印刷物のレイアウト設計でもこの計算ツールの数値を応用できますか
A. はい、応用可能です。特に印刷物や冊子のレイアウトで広く使われるA4やB5などの用紙サイズは白銀比と同一のルート長方形で構成されているため、本ツールで算出した白銀比の数値スケールはエディトリアルデザインの余白や文字組の設計に直結します。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。