白銀比（1:1.414）の計算方法と黄金比との違い・レイアウト活用
デザイン CSS レイアウト
日本伝統の建築やA4/B5用紙規格、Webデザインで美しく心地よい比率を生み出す「白銀比（第1白銀比 / 1 : 1.414）」の計算方法、計算式、および白銀比計算ツールでの活用テクニックです。
2. 白銀比（1 : √2）の計算式
白銀比には2種類ありますが、一般的なデザイン・用紙サイズで用いられるのは第1白銀比（ルート長方形 / 1 : 1.414）です。
短辺 A から長辺 B を求める
B = A × √2 ≈ A × 1.414
長辺 B から短辺 A を求める
A = B / √2 ≈ B × 0.707
計算例（幅 200px の要素に適用する場合）
- 長辺: 200 × 1.414 = 282.8 px
- 短辺: 200 ÷ 1.414 = 141.4 px
3. 白銀比 vs 黄金比 比較
| 項目 | 白銀比（Silver Ratio） | 黄金比（Golden Ratio） |
|---|---|---|
| 比率 | 1 : 1.414 (1 : √2) | 1 : 1.618 (1 : 1.618) |
| 主な用途 | A4/B5などのISO用紙規格、和風デザイン、日本建築 | 西洋美術、ロゴデザイン、モダンWebレイアウト |
| 特徴 | 半分に折っても同じ比率が維持される ($1 : \sqrt2$) | 人間が最も調和を感じやすいとされる美的比率 |
4. Webデザインにおける白銀比の活用例
- A判・B判用紙比率のWeb再現: パンフレットやPDFプレビューの表示枠を A4 同様の $1 : 1.414$ に設定。
- カード型UIの縦横比:
aspect-ratio: 1 / 1.414;を CSS に指定することで安定感のある長方形カードを作成。