黄金比 (Golden Ratio)

概要

近似値「1:1.618」で表される比率のこと。パルテノン神殿やモナ・リザなど、歴史的な建築や芸術作品に多く見られ、美の比率として広く語られることが多い（神の比率）。 デザインにおいては、長方形の縦横比、画面レイアウトの分割比率、フォントサイズのジャンプ率などに適用することで、調和のとれた視覚的バランスを作り出すことができる。

UIでは、黄金比を「正解の寸法」ではなく、比率を決めるための出発点として扱う。とくに画像のアスペクト比、カードのプロポーション、メイン領域と補助領域の幅、見出しと本文のサイズ差を検討する時に使いやすい。

UXでの活用

• カラムレイアウト: Webサイトのメインコンテンツとサイドバーの幅を「1.618 : 1」の比率（約62% : 38%）に設定することで、安定感のあるページ構成にする。
• タイポグラフィ: 見出し（H1）と本文（p）のフォントサイズ比率を1.618倍に設定する（例：本文16pxなら見出しは約26px）と、読みやすく美しい階層構造が生まれる（モジュラースケール）。
• ロゴデザイン: 円や四角形のサイズ比に黄金比を取り入れることで、シンプルながらも洗練された印象を与えるロゴを作成する（黄金比を用いて設計されたと言われる例: AppleやTwitterのロゴなど）。
• カードやサムネイル: 画像枠を黄金長方形に近づけると、横長すぎず正方形すぎない落ち着いた比率を試せる。

誤用・混乱

黄金比は、どのUIにも当てはめれば必ず美しくなる魔法の数値ではない。実務では「黄金比だから正しい」ではなく、情報の優先順位、読みやすさ、レスポンシブ時の崩れにくさを確認してから採用する。

特にスマートフォンでは、固定比率にこだわると余白が詰まったり、本文が狭くなったりする。黄金比で初期案を作ったあと、視覚的階層や余白、3分割の法則と見比べて調整するのが安全。