黄金比・黄金長方形計算

黄金比・黄金長方形計算

黄金比の寸法と黄金長方形の比率を瞬時に計算。φ（1.618）による調和分割、タイポグラフィのスケール設定、レスポンシブなレイアウトグリッドを生成します。

プリセット
黄金比パラメータ・基準設定
px
px
px
リアルタイム分割スライダー
A: 61.80% (890.0px)B: 38.20% (550.0px)Δ 0.000%
寸法サマリーEuclidean Precision Active
大セグメント（A）
870.192 px
≈ 54.39 rem
小セグメント（B）
537.808 px
96 DPI: 870 px
(A + B) / A = A / B = 1.61803399 (φ)
ローカル演算エンジン稼働中: φ = 1.6180339887大セグメント（A）: 870.19 px
大セグメント（A）: 870.19px (61.8%)小セグメント（B）: 537.81px (38.2%)
870.2 px
gap
537.8 px
拡大キャンバス (基準 × φ)
2,329.969 px

1440 px × 1.618034

縮小フォーカス (基準 / φ)
889.969 px

1440 px / 1.618034

目標コンテナ逆算ソルバー100.00% 有効面積カバレッジ
Major Column830.6 px
Minor Column513.4 px
Harmonic Gutter196.1 px
アスペクト比解析・トリミング効率Golden Standard: 1.618 : 1
16:991.0% 有効面積カバレッジ
16:9 Standard Widescreen
16:1098.9% 有効面積カバレッジ
16:10 Laptop & Pro Display
4:382.4% 有効面積カバレッジ
4:3 Classic TV & Tablet
1:161.8% 有効面積カバレッジ
1:1 Square Feed / Album
21:969.3% 有効面積カバレッジ
21:9 UltraWide Cinema
3:292.7% 有効面積カバレッジ
3:2 35mm DSLR Photography
選択中タブ: SPLIT数理恒等式・厳密計算式: (A+B)/A = φ
大セグメント（A）870.19 px
小セグメント（B）537.81 px
黄金比検証（φ）1.61803399

ブラウザ内ローカル高速演算

すべての幾何学演算はブラウザのメモリ内で完結し、一切の遅延なく高速処理されます。

サーバー送信ゼロの完全機密性

入力された数値や設定データは端末内にのみ保持され、外部サーバーへの通信は一切行われません。

本番実装対応のエクスポート

SVGベクター、CSS変数、Tailwindクラスなど、即座にプロジェクトへ組み込める形式で出力します。

ToolsAA•100% クライアント実行・完全プライベートWeb開発ツール
技術リファレンス・アーキテクチャガイド

黄金比計算・黄金長方形ガイド — 技術リファレンス

黄金比（φ ≈ 1.618）に基づいた寸法や黄金長方形の比率を瞬時に算出します。任意の長さを高精度に黄金分割し、タイポグラフィのモジュラースケール設計やレスポンシブなCSSグリッドレイアウトを直感的に構築できます。

黄金比計算・黄金長方形ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図
黄金比計算・黄金長方形ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図

主要パラメータと設定項目

全体寸法・基準長 (A + B)線形寸法（px / mm / in）

ユークリッドの外分公式 (A + B) / A = A / B = φ に基づき、神聖比例へと分割される全体の連続境界長です。Web/UI設計では320px〜3840px、グラフィック・DTP印刷では100mm〜1000mmが一般的な適用基準となります。

初期値: 1440 px
長辺セクション（セグメントA）主要分割域（61.803%）

全体寸法のちょうど (√5 - 1) / 2 ≈ 61.80339887% を占める大きい幾何学的セグメントです。エディトリアルデザインやUI情報設計において、メインコンテンツ、ヒーローバナー、主軸グリッドの視覚的ヒエラルキーを確立します。

初期値: 889.97 px
短辺セクション（セグメントB）補助分割域（38.197%）

全体寸法からセグメントAを差し引いた調和セグメントであり、正確に (3 - √5) / 2 ≈ 38.19660113% となります。サイドバー、補足メタデータ領域、ナビゲーションドロワー、あるいは視覚的な余白（ホワイトスペース）として機能します。

初期値: 550.03 px
黄金比定数（φ）無理数数学定数

二次方程式 x² - x - 1 = 0 の唯一の正の解であり、代数的には (1 + √5) / 2 ≈ 1.618033988749895 と定義されます。自己相似的な対数螺旋、フィボナッチ数列の極限（lim n→∞ F(n+1)/F(n)）、および自己増殖的な黄金長方形を支配する比例定数です。

初期値: 1.6180339887
基準フォントサイズルートemスケール（px / pt）

本文（ボディテキスト）の基礎となるフォントサイズです（Webアクセシビリティでは16px、印刷物では10〜12ptが標準）。この値にφ（またはモバイル向け凝縮スケール φ^(1/2) ≈ 1.272）を乗除することで、視覚的に心地よい見出し階層（モジュラースケール）を生成します。

初期値: 16 px
グリッド溝・余白（Gutter / Padding）空間分離幅（px / rem）

黄金分割されたカラム間に設けるマージン（溝幅）です。短辺セグメントやフィボナッチ数列のステップ（16px、24px、32pxなど）に比例した溝幅を保つことで、CSS subgrid や flexbox における圧迫感を防ぎ、61.8対38.2の明瞭な対比を維持します。

初期値: 32 px

現場のベストプラクティス・実践Tips

厳密な1.618倍のモジュラースケールはモバイル画面で見出しの肥大化を招く

可読性の高い16pxの本文フォントに純粋な黄金比（1.618）を乗算すると、H3は25.9px、H2は41.9px、H1は67.8pxに達します。1440px以上のデスクトップディスプレイでは美しく映える一方、375px幅のスマートフォン画面では68pxのH1は極端な折り返しや単語の意図しない改行を引き起こします。AppleのHuman Interface GuidelinesやMaterial Designなどの優れたデザインシステムでは、モバイルビューポート向けに黄金半比（φ^(1/2) ≈ 1.272）や長三度比（1.250）を採用し、フルスケールの1.618倍は広幅デスクトップ専用として使い分けています。

黄金分割グリッド（1:0.618:1）は三分割法（1:1:1）よりも視覚的安定感に優れる

写真や構図で広く使われる「三分割法」は画面を33.3%と66.7%で等分するため、交点や分割線が外側に偏りすぎる傾向があります。一方、黄金比に基づくファイグリッド（Phi Grid）は画面を38.2%と61.8%で分割します。これにより視覚的な焦点（交点）が画面中心部へ約5%寄り、ポートレートや建築写真、UIヒーローエリアにおいて無駄な周辺余白を削減し、より自然で引き締まった視覚的求心力を生み出します。

浮動小数点サブピクセル丸めによるCSS Flexbox黄金グリッドの折り返し崩れに注意

1440pxのコンテナで黄金分割を行うと、889.967pxと550.033pxのような端数ピクセルが発生し、ブラウザのレンダリングエンジン（Blink、WebKit、Gecko）ごとに丸め処理が異なります。flexboxやマルチカラムで両カラムが0.5pxずつ切り上げられると（890px + 551px = 1441px）、サイドバーが予期せず2行目に落ちてしまいます。常に box-sizing: border-box を指定した上で、flex: 1 1 0 やパーセント幅 width: 61.8034%、calc(100% - 61.8034% - var(--gutter)) を使用して、安全なサブピクセル描画を保証してください。

ISO 216規格用紙（A4/A3）は白銀比（1:1.414）であり、黄金比とは異なる

初学者のデザイナーが陥りやすいミスとして、A判などの規格用紙を黄金長方形と混同することが挙げられます。日本の公的規格や国際標準ISO 216（A4/A3など）はリヒテンベルク比、いわゆる「白銀比（大和比・ルート矩形 1:√2 ≈ 1:1.4142）」を採用しており、半分に裁断しても縦横比が不変となる性質を持ちます。A4幅（210mm）の真の黄金長方形を作る場合、高さは339.8mm必要となり、標準のA4（297mm）より42.8mm長くなります。規格紙で黄金比を活かす際は、用紙自体をカットするのではなく、紙面内部のマージン設計やグリッド割りに黄金比を適用するのが鉄則です。

よくある落とし穴とトラブルシューティング

⚠️レスポンシブCSSにおけるサブピクセル計算誤差と意図しない段落ち（カラム落ち）

カラム幅に小数の固定ピクセル値（例: width: 889.97px）を直接指定すると、Retinaや高DPI環境（2x/3x DPR）でのピクセル累積誤差によりコンテナ幅を超過し、右側のカラムが下に押し出される現象が発生します。親flexコンテナに min-width: 0 と overflow-wrap: break-word を付与し、各カラムは flex-basis: 61.8034% および flex-basis: calc(38.1966% - var(--gutter)) のようにCSSパーセンテージ指定とcalc関数を併用して解決します。

⚠️黄金螺旋の巻き方向が一般的なWeb視線誘導（Fパターン）と逆行する問題

黄金螺旋（フィボナッチスパイラル）の中心収束点を左下や右下に無計画に配置すると、左上から走査を開始するWebユーザーの視線動線（FパターンやZパターン）と衝突し、視覚的な違和感が生じます。黄金螺旋を用いる際は、最大の円弧が左上のロゴやメインキャッチコピーを通過し、視線が自然に収束する右下のコンバージョンボタン（CTA）やキービジュアルへ向かって巻き込まれるようにスパイラルの向き（回転・反転）を調整してください。

⚠️低次フィボナッチ数列による近似計算と真の黄金比定数（φ）との誤差乖離

フィボナッチ数列の小さな数値（例: 3/2 = 1.500 や 5/3 = 1.667）をそのまま黄金比としてレイアウト計算に使うと、真のφ（1.618034）に対して最大7.3%もの寸法誤差が発生します。フィボナッチ比が0.1%以内の精度に収束するのは 89/55（1.61818）以降です。厳密なUIグリッドや高精度なデザインシステムを構築する際は、初期の整数比で妥協せず、無理数定数 φ = (1 + √5) / 2 に基づく正確な計算式を使用してください。

よくある質問 (FAQ)

2つの数値から黄金比を計算するにはどうすればよいですか？▼

2つのセグメント間の黄金比を計算するには、大きい方の数値（A）を小さい方の数値（B）で割った値が 1.618034 に等しくなり、かつ合計（A + B）を大きい方の数値（A）で割った値も 1.618034 に等しくなる必要があります。数式では (A + B) / A = A / B = φ = (1 + √5) / 2 ≈ 1.6180339887 と表されます。例えば、大きいセクションが 100px の場合、小さいセクションは 100 / 1.618034 ≈ 61.8px となり、全体の長さは 161.8px となります。

画面の幅や高さを黄金比で2分割するにはどうすればよいですか？▼

任意の寸法（コンテナ幅など）を黄金分割するには、全体の数値に 0.618034 を掛けて大きいセクション（A = 全体 × 0.618034）を求め、0.381966 を掛けて小さいセクション（B = 全体 × 0.381966）を求めます。例えば、幅 1200px のWebコンテナを分割する場合、メインコンテンツエリアは 741.64px、サイドバーは 458.36px となります（741.64 + 458.36 = 1200px）。

黄金比（ファイグリッド）と三分割法の違いは何ですか？▼

黄金比（ファイグリッド）は空間を 1 : 0.618 : 1 の比率（約 38.2% / 23.6% / 38.2%）で分割するのに対し、三分割法（Rule of Thirds）は空間を完全に均等な 1 : 1 : 1（約 33.33% / 33.33% / 33.33%）の3等分に分割します。三分割法はカメラのファインダーなどで素早く構図を決めるための簡易的な近似手法ですが、黄金比グリッドは視覚的な交点が中央寄りに約5%位置するため、四隅の無駄なデッドスペースを減らし、よりバランスの取れた洗練された構図を生み出します。

標準的な1920×1080pxや1440pxの画面における黄金比寸法はどうなりますか？▼

横幅 1920px のディスプレイの場合、水平方向の黄金分割はメインステージが 1186.62px、サイドバーが 733.38px となります。標準的な 1440px 幅のPC画面では、長辺が 889.97px（61.8%）、短辺が 550.03px（38.2%）です。また高さ 1080px を垂直分割すると、ヒーロー領域が 667.48px、下部サブ領域が 412.52px になります。なお、高さ 1080px に完全一致する黄金長方形を作る場合の横幅は 1747.48px（1080 × 1.618034）となり、一般的な 16:9 ワイド画面（1920px）より約9%スリムなプロポーションになります。

黄金比を活用してフォントサイズの階層（タイポグラフィスケール）を決める方法は？▼

黄金モジュラースケールを構築するには、基準となる本文サイズ（例: 16px）を起点に、φ（1.618）を乗算して見出しを拡大し、除算して注釈などを縮小します。計算例として、本文 = 16px の場合、H3 = 16 × 1.618 ≈ 26px、H2 = 26 × 1.618 ≈ 42px、H1 = 42 × 1.618 ≈ 68px と展開します。なお、画面幅が狭いモバイル端末では1.618倍だと文字が大きくなりすぎるため、φの平方根（√φ ≈ 1.272）を用いた準黄金比スケール（本文 16px、H3 ≈ 20px、H2 ≈ 26px、H1 ≈ 33px）が実務で広く利用されています。

関連開発者ツール

全ツール一覧 →
ニューモーフィズムCSS生成デザイン

ニューモーフィズム（Soft UI）の凸面・凹面・インセット陰影を直感デザイン。光の照射角・ぼかし・コントラストをリアルタイムに微調整し、最適化されたCSS・Tailwind・SCSSコードを即座にコピーできます。

ツールを開く→
カラーパレット調和・配色生成デザイン

補色、類似色、三色配色、分裂補色などの調和パレットを瞬時に生成。リアルタイムなWCAGコントラスト比検証とCSS/Tailwindエクスポートに対応したブラウザ完結型配色ツール。

ツールを開く→
CSSグラスモーフィズム生成デザイン

backdrop-filterのぼかし、透明度、ボーダー、陰影をリアルタイムに調整し、モダンなCSSグラスモーフィズムやすりガラスUIコードを即座に生成・コピーできます。

ツールを開く→
画像圧縮・写真サイズ縮小デザイン

画質を落とさずにブラウザ上で画像を高速圧縮。JPG、PNG、WebPのファイル容量をサーバー送信ゼロで軽量化。目標KB逆算機能やZIP一括書き出しにも対応しています。

ツールを開く→
インタラクティブCSSグラデーション生成ツールデザイン

CSS linear、radial、conicグラデーションの完全な構文ガイド。二重位置カラーストップ、OKLCH色空間補間、放射形状制御、テキストマスク、Tailwind CSS / SVG連携まで網羅。

ツールを開く→
多重レイヤー CSS ボックスシャドウ ジェネレーターデザイン

自然で美しい光学多層シャドウを作成。アンビエントオクルージョン、インセット、ブラー拡散、多重階層を直感的に調整し、TailwindやCSSコードを即座に出力します。

ツールを開く→