Webデザインで使われる代表的な比率は3つです。黄金比（約1:1.618）・白銀比（約1:1.414）・白金比（約1:1.732）で、いずれも「長辺 ÷ 短辺」の答えがその数値になる長方形を指します。逆に言えば、手元のバナーやロゴの長辺を短辺で割るだけで、そのデザインがどの比率に乗っているかを判定できます。
この記事が扱うのは「比率そのもの」です。三分割法・対角線・日の丸といった配置のパターンは バナーデザインの構図パターン が、PhotoshopやIllustratorで実際にガイドを引く操作手順は Photoshop・Illustratorで構図を再現する方法 が担当します。本記事は「どの数値で、何を、どう割るか」に絞って解説します。
先に結論として、3つの比率の違いを一覧にまとめます。
| 比率 | 長辺÷短辺 | 数学的な由来 | 与える印象 | 向く用途 | 身近な実例 |
|---|---|---|---|---|---|
| 黄金比 | 1.6180339887… （1+√5）÷2 | 正方形を切り取ると同じ比率の長方形が残る | 動きがあり、視線が渦の中心へ寄る | 2カラムの幅配分、カードUI、ヒーロー画像 | 正五角形の対角線÷1辺 |
| 白銀比 （大和比） | 1.4142135624… √2 | 半分に折っても元と相似（自己相似） | 正方形に近く、動きが小さくて安定 | 縦型バナー、A4想定の紙面、ロゴの外枠 | A4用紙（297×210mm） |
| 白金比 | 1.7320508076… √3 | 正三角形の高さ÷（底辺の半分） | 3つで最も横長。水平に視線が流れる | 横長ヒーロー、PC用横長バナー | 30度・60度・90度の直角三角形 |
大切なのは、これらの数値に厳密に合わせること自体が目的ではないという点です。比率は良し悪しを決める正解ではなく、迷ったときに立ち返れる基準であり、あとから電卓1回で検算できる根拠です。記事の後半で、その検算手順と合否ラインをまとめます。
黄金比（約1:1.618）｜視線を渦の中心に集める比率
黄金比とは、長辺 ÷ 短辺 = 1.6180339887… になる比率です。数式では（1 + √5）÷ 2 で求まります。特徴は「全体 : 長いほう = 長いほう : 短いほう」が成り立つこと。つまり黄金比の長方形から短辺を1辺とする正方形を切り取ると、残った長方形もまた黄金比になります。この入れ子構造の角をつないだものが、上図の渦（黄金螺旋）です。
3つの比率のなかでは中間の細長さです。正方形に寄りすぎず横長にも振り切らないため、縦・横どちらの構図にも使い回しやすいのが利点になります。
黄金比の由来｜どこまでが事実か
黄金比を「神聖な比」として体系的に紹介した書物が、ルカ・パチョーリの『De divina proportione（神聖比例）』です。1498年に執筆され、1509年にヴェネツィアで印刷されました。この本の挿絵およそ60点（多面体の立体図）を担当したのが、当時パチョーリから数学を学んでいたレオナルド・ダ・ヴィンチです（Thinking 3D: Luca & Leonardo／1509年版の複製（Internet Archive））。
一方で、よく語られる「レオナルドが自作の絵画に黄金比を用いた」「パルテノン神殿や法隆寺は黄金比で設計されている」といった話については、そう記した一次資料は確認されていません。数学書の挿絵を描いた事実と、自作に適用した事実は別のものです。デザインの根拠として黄金比を持ち出すときは、歴史的な権威づけではなく「分割が再現できて、あとから検算もできる」という実務上の利点で説明したほうが誠実です。
黄金比の使いどころ
- カードUIやサムネイルの縦横比
- メインカラムとサイドカラムの幅配分
- ヒーロー画像とテキストブロックの高さ配分
- 本文幅と左右余白の関係
とくに扱いやすいのが2カラムの幅配分です。1:1.618は、全体を100%としたとき 61.8% : 38.2% に相当します。全幅960pxなら593.3px : 366.7px、丸めて593px : 367px。全幅1200pxなら741.6px : 458.4px、丸めて742px : 458pxです。どちらも丸めたあとの合計が全幅（960px／1200px）にぴったり戻ります。
カラムを何本立てるか、ガター（列間の余白）をいくつにするかといった土台の設計は グリッドレイアウト完全ガイド にまとめています。比率はそのグリッドの上で「どこで割るか」を決めるための道具です。
白銀比（約1:1.414）｜半分に折っても形が変わらない比率
白銀比とは、長辺 ÷ 短辺 = √2 = 1.4142135624… になる比率です。最大の特徴は、長辺を半分に折った長方形が元と相似（同じ縦横比）になること。何度半分にしても形が変わらないため「自己相似」の長方形とも言えます。この性質があるからこそ、紙のサイズ規格に採用されています。
「白銀比」には定義が2つある｜英語資料で混乱しやすい点
ここは日本語と英語の資料で食い違うところなので、先に押さえておきます。「白銀比」と呼ばれる数値には次の2つがあり、どちらも間違いではありません。
| 呼び名 | 数値 | 定義 | 主に使われる文脈 |
|---|---|---|---|
| 白銀比（大和比） | 1 : 1.4142… （√2） | 半分に折ると元と相似になる長方形 | 日本の紙規格・木造建築・キャラクター造形。日本語のデザイン記事で「白銀比」といえば通常こちら |
| 第2貴金属比 （英: silver ratio） | 1 : 2.4142… （1+√2） | 貴金属比の並びで黄金比の次に来る数 | 英語圏の数学資料。1.414とはまったく別の数値 |
英語で silver ratio を調べると 2.414 が出てくるため、「1.414と書いてある日本語記事は間違いなのでは」と迷いがちですが、そうではありません。日本のデザイン文脈でいう白銀比＝大和比＝1:√2（約1.414）です。本記事も以降は1:1.414の意味で使います。海外の資料を参照するときは、名前ではなく数値そのものを見て判断してください。
白銀比の由来｜A判用紙とJIS規格
いちばん身近な実例がA判用紙です。A4は297mm × 210mmで、297 ÷ 210 = 1.414286。√2（1.414214）との誤差はわずか +0.005% しかありません。A列・B列の仕上寸法は JIS P 0138:1998「紙加工仕上寸法」 で規定されており、A列はISO 216と同じ体系です。
A4を半分に折るとA5、さらに半分でA6と、どこまで折っても同じ形が保たれます。印刷物のレイアウトをサイズ違いへ展開しても構図が崩れないのは、この性質のおかげです。同じ理由で、サイズ違いを量産するバナーやアイキャッチとも相性が良い比率です。
白銀比の使いどころ
- 縦型バナー・チラシなど、A4を想定した紙面
- 正方形寄りで安定させたいカードUI
- ロゴのバウンディングボックス（外枠）
- サイズ違いを量産するバナー・アイキャッチ
「日本人が好む比率」「落ち着いた年齢層に向く」と説明されることが多い比率ですが、そうした好みの差を裏づける調査データは見当たりません。確実に言えるのは次の2点です。ひとつは、日本ではA判・B判の紙を通してこの形を日常的に目にしているため見慣れていること。もうひとつは、3つのなかで最も正方形に近く、視覚的な動きが小さいことです。安定感を出したい場面に向く、という説明までにとどめるのが安全です。
白金比（約1:1.732）｜3つのなかで最も横長な比率
白金比とは、長辺 ÷ 短辺 = √3 = 1.7320508076… になる比率です。正三角形の高さを底辺の半分で割った値がちょうど√3になることに由来します。数値を並べると 1.732 > 1.618 > 1.414 で、3つのなかで最も横長です。横に伸びるぶん視線が水平に流れやすく、シャープでモダンな印象になります。
なお、黄金比（1.618）や第2貴金属比（2.414）が属する「貴金属比」の系列（1.618／2.414／3.303…）に√3は含まれません。白金比は正三角形から導かれる、別系統の呼び名です。
白金比の由来｜正三角形から出てくる数値
正三角形の1辺の長さをaとすると、高さは（√3 ÷ 2）× a、底辺の半分は a ÷ 2 です。高さ ÷（底辺の半分）を計算すると a が約分されて √3 が残ります。つまり三角形の大きさに関係なく、必ず1.732になるのが白金比です。正三角形を半分に切った直角三角形（30度・60度・90度）の辺の比 1 : √3 : 2 と同じ関係、と覚えると忘れません。
白金比の使いどころ
- ファーストビューの横長ヒーロービジュアル
- PC向けの横長バナー
- 高級感を出したいロゴの外枠
- 情報量を絞った1行見出しのブロック
ここで注意したいのが 16:9との混同です。16 ÷ 9 = 1.7778 で、白金比の1.7321とは +2.64% ずれています。数値としては近いものの同じではないため、16:9の動画枠やスライドを「白金比で組んだ」と説明するのは正確ではありません。どこまでを同じ比率と見なしてよいかは、次の章の合否ラインで判断できます。
作ったバナー・ロゴが比率に乗っているか、電卓1回で判定する
比率の解説が実務で空回りしやすいのは、「使いましょう」で終わって、できあがったものが本当にその比率になっているかを確かめる手順が書かれていないからです。ここは割り算1回で終わります。
判定の手順
- 作ったバナー・ロゴ・カードの外形寸法（幅と高さ）をpxで書き出す
- 長いほうの辺 ÷ 短いほうの辺 を計算する
- 出た数値を 1.618（黄金比）／1.414（白銀比）／1.732（白金比）と見比べ、いちばん近いものを選ぶ
- 誤差を「（実測値 − 比率）÷ 比率 × 100」で%に直す
手順4まで出せば、次の表で合否が決まります。
| 誤差（絶対値） | 判定 | 扱い方 |
|---|---|---|
| 2%以内 | ✅ その比率で組めている | 「黄金比で設計した」と説明してよい |
| 2%超〜5% | ⚠️ 近いが別物 | 比率の名前は使わない。その比率にしたいなら数値を直す |
| 5%超 | ❌ その比率ではない | 別の意図で決まった寸法。無理に寄せない |
なぜ合否ラインが「±2%」なのか
このラインは「目視で違いが分かるか」で引いています。幅1200pxのバナーを黄金比で組むと、高さは 1200 ÷ 1.618 = 741.6px です。ここから±2%は ±約15px（726.8px〜756.5px）。この幅は、小数の四捨五入、8pxグリッドへのスナップ、枠線や影の分などで日常的に発生する範囲で、2枚並べても目視では区別できません。
一方±5%は ±約37px（704.6px〜778.7px）になり、並べれば明らかに違って見えます。だから2%までを同一視、5%超を別物とし、あいだを「近いが別物」としています。ツールの端数処理で生じる程度のズレを気にして延々と調整しない、という線引きでもあります。
外れていたときの直し方
直し方は1つで足ります。幅を固定したまま、高さを「幅 ÷ 比率」で置き直すことです。幅はカラム幅・広告枠・配信先の仕様といった外側の制約で決まっていることが多く、自由に動かせるのは高さのほうだからです。よく使う幅の早見表を置いておきます。
| 幅W | 黄金比の高さ W ÷ 1.618 | 白銀比の高さ W ÷ 1.414 | 白金比の高さ W ÷ 1.732 |
|---|---|---|---|
| 1200px | 742px | 849px | 693px |
| 960px | 593px | 679px | 554px |
| 728px | 450px | 515px | 420px |
| 300px | 185px | 212px | 173px |
値は小数第1位を四捨五入しています。たとえば幅728pxのバナーを白銀比にしたいなら高さは515px、白金比なら420pxです。置き直したら手順2に戻ってもう一度割り算し、2%以内に入ったことを確認します。ここまでで検証は完了で、それ以上の追い込みは不要です。
よくあるハマりどころ
実務で使う定番寸法を、あらかじめ判定しておきます。「比率に合わせたつもりが実は別物だった」の大半は、この表で潰せます。
| よくある寸法 | 長辺÷短辺 | 最も近い比率 | 誤差 | 判定 |
|---|---|---|---|---|
| A4（297×210mm） | 1.4143 | 白銀比 1.4142 | +0.01% | ✅ 白銀比そのもの |
| 16:9（1920×1080） | 1.7778 | 白金比 1.7321 | +2.64% | ⚠️ 近いが違う |
| OGP画像（1200×630） | 1.9048 | 白金比 1.7321 | +9.97% | ❌ 比率理論の適用対象外 |
| 3:2（写真の定番） | 1.5000 | 白銀比 1.4142 | +6.07% | ❌ 比率を名乗らない |
| 4:3 | 1.3333 | 白銀比 1.4142 | −5.72% | ❌ 比率を名乗らない |
| 正方形（1080×1080） | 1.0000 | 該当なし | — | 外形では使えない。分割線側へ移す |
要注意なのが16:9とOGP画像です。とくにOGP画像の1200×630は、最も近い白金比に対しても約10%ずれており、外形に比率理論を当てはめる対象ではありません。SNSの表示仕様で決まっている寸法なので、比率は外形ではなく内部の分割線（テキスト領域と余白の境目など）に使います。
正方形バナー（1080×1080など）も同じ考え方です。外形は1:1で固定されているため比率を名乗れませんが、内部を61.8% : 38.2%に割れば黄金比の分割として機能します。1080pxなら667px : 413pxです。
分割線を検算する
外形ではなく内部の分割に比率を使った場合も、手順は同じです。全幅960pxを黄金比で2分割すると 593.3px : 366.7px（61.8% : 38.2%）。丸めて593px : 367pxとすると、593 ÷ 367 = 1.6158 で黄金比との誤差は −0.14%、合計は 593 + 367 = 960px で全幅に一致します。全幅1200pxなら742px : 458px（合計1200px、742 ÷ 458 = 1.6201、誤差 +0.13%）です。
丸めの都合で合計が1〜2pxずれることがあるため、比率の確認と足し算の確認は必ずセットで行ってください。余白そのものの取り方は Webデザインにおけるホワイトスペースの重要性、カンプに入る前に決めておくウィンドウ幅・コンテンツ幅の考え方は デザインカンプ前に決めるWebデザインのルール にまとめています。
まとめ｜比率は「正解」ではなく「検算できる基準」
3つの比率は、デザインの良し悪しを決めるルールではありません。値が固定されているおかげで、感覚で決めた寸法をあとから数値で検算できることが最大の利点です。「なんとなくこの高さ」を「1.618に対して+1.2%」と言い換えられるようになると、レビューでの説明も、次に同じ雰囲気を再現するのも楽になります。
実務ではロゴやバナーの外形、ワイヤーフレームのブロック配分、余白の設計といった場面で使います。Figma・Illustrator・Photoshopのいずれでも、レイアウトグリッドやガイドの数値として直接入力できます。なお、比率設計の解説では長らくAdobe XDが定番ツールとして挙げられてきましたが、Adobeは現在XDをメンテナンスモード（新機能の開発・提供を行わない状態）と公式に案内しています。これから始めるならFigma、Illustrator、Photoshopのいずれかを選ぶのが無難です。
同じ考え方は文字サイズの階層にも使えます。基準16pxに1.618を掛けていくと 16px → 25.9px → 41.9px となり、倍率が一定なので見出しの大小関係が崩れません。書体選びや行間まで含めた設計は タイポグラフィの基本とデザイン活用術 を参照してください。
よくある質問（FAQ）
Q. 黄金比をWebデザインに使う方法は？
黄金比（1:1.618）は、メインカラムとサイドカラムの幅配分、画像の縦横比、余白と本文幅の関係に使えます。全幅960pxなら、メイン593px・サイド367px（61.8% : 38.2%）で黄金比の分割になります。丸めたあとに 593 + 367 = 960px と合計が全幅に戻るかを必ず確認してください。
Q. 白銀比と大和比は同じものですか？
日本のデザイン文脈ではほぼ同じ意味で使われ、どちらも1:√2（約1:1.414）を指します。ただし英語の silver ratio は 1:(1+√2)（約1:2.414）という別の数値を指すため、海外の資料を読むときは名前ではなく数値そのものを確認してください。
Q. 比率のズレは何パーセントまで許容されますか？
目視で判別できるかを基準にすると、誤差2%以内なら「その比率で組めている」と扱って問題ありません。幅1200pxの黄金比で±2%は高さ±約15pxにあたり、丸めやグリッドへのスナップで日常的に生じる範囲だからです。2%超〜5%は近いが別物、5%超はその比率とは呼べません。
Q. 正方形バナーには比率理論を使えますか？
外形が1:1で固定されているため、外形に対しては使えません。使う場所を内部の分割線に移してください。1080×1080の正方形なら、テキスト領域と余白の境目を667px : 413px（61.8% : 38.2%）にすると黄金比の分割になり、合計も1080pxに戻ります。
Q. 白銀比と黄金比の違いは？
白銀比（1:1.414）は黄金比（1:1.618）より正方形に近く、視覚的な動きが小さいぶん安定して見えます。性質も異なり、白銀比は半分に折っても同じ形になる（A判用紙の仕組み）、黄金比は正方形を切り取ると同じ比率の長方形が残る、という違いがあります。
Q. フォントサイズの階層設計にも比率を使えますか？
使えます。基準を16pxとして1.618を掛け続けると、16px → 25.9px → 41.9px → 67.8px という階層になります。重要なのは倍率を一定に保つことで、途中で1.6と1.617のように違う数値を混ぜると大小関係のリズムが崩れます。
関連ガイド
構図まわりの記事は、担当範囲を分けています。バナーデザインの構図パターン は三分割・対角線・日の丸といった要素の置き方、Photoshop・Illustratorで構図を再現する方法 はガイドやグリッドを引くツール操作の手順、そして本記事が寸法を決める数値です。3本を順に読むと、決める→引く→置くの流れがつながります。
レイアウトの土台は グリッドレイアウト完全ガイド と デザインカンプ前に決めるWebデザインのルール、余白と文字は ホワイトスペースの重要性 と タイポグラフィの基本とデザイン活用術 をどうぞ。
構図・配色・作業効率化ツールを体系的にまとめた デザインガイド もあわせてご覧ください。