UIXHERO

黄金比 (Golden Ratio)

「1:1.618」の比率。自然界に多く見られるこの比率をレイアウトやタイポグラフィに取り入れることで、人間が本能的に美しいと感じる調和の取れたデザインを作ることができる。

2026年1月23日
更新: 2026年8月27日
7
by Dengen Yosho(DGYS)
黄金比 (Golden Ratio)

この記事の要点(UIXHERO視点) XHEROでは、黄金比を「美しさを保証する、自然界の隠れたメロディ」と捉える。 本記事では、1:1.618という魔法の数字をタイポグラフィやレイアウトに潜ませ、無意識レベルで「心地よい」と感じさせる調和の技術を整理する。

黄金比とは?

(約1:1.618、ギリシャ文字のφファイで表される)は、人間が最も美しいと感じるとされる比率です。 パルテノン神殿、モナ・リザ、Appleのロゴ、Twitterの旧UIなど、時代や分野を超えて優れたデザインの基礎となっています。

Webデザインにおいては、コンテンツ領域とサイドバーの幅の比率や、フォントサイズのジャンプ率(本文と見出しの比率)などに活用されます。

UXデザインでの活用事例

1. レイアウト構成

画面全体を「メインコンテンツ」と「サイドバー」に分ける際、黄金比(約61.8% : 38.2%)を適用すると、安定感のある構図になります。 幅960pxの場合、コンテンツ約593px、サイドバー約367pxとなります。

2. タイポグラフィ(文字サイズ)

本文のフォントサイズに1.618を掛けて見出しのサイズを決めると、美しい階層構造が生まれます。 例:本文16px × 1.618 ≒ 見出し26px

3. 余白 (Spacing)

要素間のにもこの比率を適用することで、リズム感のある配置が可能になります。

実装例: 黄金比に基づいたレイアウトとタイポグラフィ

以下のでは、黄金比を適用した「調和の取れたレイアウト」と、適当な比率のレイアウトを切り替えて比較できます。

倫理的配慮 (Ethical Considerations)

  • 絶対視しない: 黄金比はあくまで美しさの「」であり、絶対的な正解ではありません。コンテンツの内容やユーザビリティ(読みやすさ)を犠牲にしてまで、数理的な正確さに固執する必要はありません。
  • 文化的な違い: 西洋美術で好まれる比率は、全ての文化圏やで最適とは限りません。白銀比(1:√2、日本の法隆寺などに見られる比率)の方が馴染む場合もあります。

実装チェックリスト

更新のお知らせ

サイトに載せていない実例や、新しい記事のお知らせはこちらで出しています。

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

関連する用語 (Glossary)

参考文献

  • Elam, K. (2001). Geometry of Design: Studies in Proportion and Composition. Princeton Architectural Press. Amazon
  • Friedman, V. (2008). "Applying Divine Proportion To Your Web Design." Smashing Magazine. Article Link

記事をシェア

メールでお知らせを受け取る

最終更新: 2026年8月27日

この記事を書いた人

Dengen Yosho(DGYS)

Dengen Yosho(DGYS)

UI/UXデザイナー兼デザインエンジニア デザイン歴25年以上 情報設計〜UIデザイン〜React/TypeScriptによる実装までを一気通貫で担当 大手企業のDXプロジェクトや決済アプリ領域で、デザインリードとして改善と構築を経験 現在はフリーランスとして、プロダクトのUI/UX改善とデザインシステム構築を支援 長年の実務の中で感じてきたのは、 「良いUI」はセンスではなく、再現可能な判断の積み重ねであるということ UIXHEROは、 心理学や行動科学の知見を、現場で使える設計言語に翻訳するための場所 関心領域は「ユーザーの行動が変わるUI」 人の認知・注意・意思決定の構造を理解し、 “なぜそのUIが機能するのか”を言語化することを目指している

あわせて読みたい

この記事に関連する記事をご紹介します

視覚的階層 (Visual Hierarchy)

情報の重要度に応じて、大きさ・色・配置に強弱をつけることで、ユーザーの視線を「見るべき順序」通りに誘導するデザイン原則。

2026年1月23日
5

スキューモーフィズム(Skeuomorphism)とは?意味・UI例・フラットデザインとの違い

Skeuomorphism(スキューモーフィズム)とは、現実世界の形や質感をUIに取り入れる考え方。意味、具体例、フラットデザインとの違い、現代UIでの使いどころを解説します。

2026年1月23日
9

テスラーの法則と複雑性保存の法則

テスラーの法則(Tesler's Law)とは、すべてのシステムには誰かが負担しなければならない「減らせない複雑さ」が存在するという複雑性保存の法則です。UXでユーザー負担を減らす判断軸を解説します。

2026年1月23日
8

もっと深く知りたいですか?

ここに掲載されていないトピックについても、リクエストがあれば解説記事を追加します。 わかりにくい点や、具体的な事例について知りたいことがあれば教えてください。

リクエストを送る