---
title: "黄金比計算 - 黄金比・白銀比で寸法と分割を計算 | Web ToolBox"
description: 黄金比や白銀比などの比率を選び、長辺・短辺・全体のどれかを入力すると、残りの寸法と分割の割合を計算できるツールです。長方形の分割図と割合を見ながら、レイアウトや画像サイズの検討に使えます。
canonical_url: "https://web-toolbox.dev/tools/golden-ratio-calculator"
meta:
  author: K
  "og:description": 黄金比や白銀比などの比率を選び、長辺・短辺・全体のどれかを入力すると、残りの寸法と分割の割合を計算できるツールです。長方形の分割図と割合を見ながら、レイアウトや画像サイズの検討に使えます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/golden-ratio-calculator-6a38e1bc.png"
  "og:image:alt": 黄金比計算
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "黄金比計算 - 黄金比・白銀比で寸法と分割を計算 | Web ToolBox"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **黄金比計算**

黄金比・白銀比で寸法と分割を計算

## **サイズ**

**長辺**

**短辺**

**全体**

幅 + 高さ

いずれかを編集すると、比率を保ったまま残りが更新されます

長辺**1000**61.8%

短辺**618**38.2%

## **比率**

**1.618 : 1**

黄金比 / 長辺 : 短辺 / 横長

<dl>

<dt>幅</dt>
<dd>**1000**</dd>

<dt>高さ</dt>
<dd>**618**</dd>

<dt>全体</dt>
<dd>**1618**</dd>

</dl>

```
aspect-ratio: 1.618 / 1;
```

## 黄金比計算ツールとは？

黄金比や白銀比などの比率を選び、長辺・短辺・全体のどれかを入力すると、残りの寸法と分割の割合を計算できるツールです。長方形を正方形で分割した図と、全体に対する長辺・短辺の割合を見ながら、レイアウトや画像サイズの検討に使えます。

比率・寸法・CSSの`**aspect-ratio**`はコピーできます。

## 使い方

1. 比率を選びます。
2. 長辺・短辺・全体のいずれかを入力します。入力した値に合わせて、残りが計算されます。
3. 縦横を入れ替えたいときは「縦横を入れ替え」を使います。長辺・短辺の値は変わらず、幅・高さの対応と図の向きが反転します。
4. 比率と寸法、CSSの `**aspect-ratio**`をコピーします。

### 全体を使った分割

全体は幅と高さを足した長さです。全体を入力すると、選択した比率で長辺と短辺に分割した値が求まります。たとえば黄金比で全体を1440にすると、長辺は約890.2、短辺は約549.8になります。

### 分割図

選択した比率の長方形を正方形で分割した図を表示します。黄金比では、正方形を切り出すたびに残りが同じ比率になり、螺旋が連続します。ほかの比率では、長方形がどのように分割されるかを確認できます。

## 主な設定項目

### 縦横を入れ替え

幅と高さを入れ替え、縦長・横長を反転します。長辺・短辺の値は変わりません。現在の向きは結果表示で確認できます。入力中は現在の向きが保たれます。

### よく使う長辺

よく使う長辺の値を選ぶと、その値を長辺として寸法が更新されます。

## 活用シーン

- カードやバナーの比率を決める前に、縦横のバランスを確認したいとき
- 画像やキャンバスの長辺を決めて、もう片方の寸法を出したいとき
- ヘッダーやセクションを黄金比で分割したいとき
- CSSの `**aspect-ratio**`に入れる値を決めたいとき

## 使うときの注意点

- 入力欄の長辺・短辺は向きに関わらず、長い方・短い方を指します。幅・高さとの対応は結果表示で確認できます
- 長辺は1〜100000の範囲で扱います。短辺や全体の入力で長辺が100000を超える場合は、長辺が100000になるように値が調整されます
- プレビューは比率確認用で、実ピクセルの大きさを再現するものではありません
- 任意の縦横比を調べたい場合は、 [**アスペクト比計算ツール**](https://web-toolbox.dev/tools/aspect-ratio-calculator)を使うと便利です

**使ってみてどうでしたか？**

最終更新: 2026年10月21日

### **関連ツール**

- [<h4>**アスペクト比計算**</h4>](https://web-toolbox.dev/tools/aspect-ratio-calculator)
- [<h4>**ネストBorder-Radius最適化**</h4>](https://web-toolbox.dev/tools/nested-border-radius-calculator)
- [<h4>**パーセンテージ・PX計算**</h4>](https://web-toolbox.dev/tools/percentage-px-calculator)
- [<h4>**PX・Rem計算**</h4>](https://web-toolbox.dev/tools/px-rem-calculator)
- [<h4>**営業日カレンダー**</h4>](https://web-toolbox.dev/tools/business-calendar)
- [<h4>**文字数カウンター**</h4>](https://web-toolbox.dev/tools/character-counter)
- [<h4>**カラーコントラストチェッカー**</h4>](https://web-toolbox.dev/tools/color-contrast-checker)
- [<h4>**エポック秒コンバーター**</h4>](https://web-toolbox.dev/tools/epoch-converter)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/golden-ratio-calculator#webpage","@type":"WebPage","description":"黄金比や白銀比などの比率を選び、長辺・短辺・全体のどれかを入力すると、残りの寸法と分割の割合を計算できるツールです。長方形の分割図と割合を見ながら、レイアウトや画像サイズの検討に使えます。","name":"黄金比計算 - 黄金比・白銀比で寸法と分割を計算","url":"https://web-toolbox.dev/tools/golden-ratio-calculator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/golden-ratio-calculator"]}]},{"@id":"https://web-toolbox.dev/tools/golden-ratio-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"黄金比や白銀比などの比率を選び、長辺・短辺・全体のどれかを入力すると、残りの寸法と分割の割合を計算できるツールです。長方形の分割図と割合を見ながら、レイアウトや画像サイズの検討に使えます。","name":"黄金比計算 - 黄金比・白銀比で寸法と分割を計算","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.