デザインを「黄金比」で整える
「デザインのバランスが、なんだか決まらない……」
そんなとき、センスに頼るのを一旦やめて、「数字」に頼ってみませんか？
今回は、デザインをプロっぽく見せる魔法の比率、「黄金比」を今日から実務に取り入れるための3つのテクニックをご紹介します！
そもそも黄金比って何？
黄金比とは一言で言うと、「人間が本能的に『あ、これ綺麗だな』と感じてしまう比率」のこと。数値で言うと1:1.618です。
視覚的に表すと、有名な「黄金螺旋（ゴールデンスパイラル）」になります。
どこかで見たことある気がしますよね。
パルテノン神殿からAppleのロゴ、さらには自然界のオウムガイの殻まで、世の中の「美しいもの」には高確率でこの数字が潜んでいます。いわば、視覚的な「正解の型」なんです。
実践！今日から使える黄金比テクニック
「計算なんて面倒くさい！」という方でも大丈夫。
もっとも簡単な3つの活用法をまとめました。
① 写真のトリミングに迷ったら「2クリック」で解決
写真をなんとなく感覚で切り抜いていませんか？
切り抜き方に迷ったら、黄金比のガイドに頼ってみましょう。
やり方： 「切り抜きツール」を選択中、上部オプションバーにある「オーバーレイ」設定を「黄金比」に変えて、 ガイドの交差点に「主役（モデルの瞳や商品のロゴなど）」を重ねて切り抜いてみましょう。
▼黄金比のガイド
▼黄金螺旋のガイド
効果：黄金比のガイドを元に「視線の逃げ場を作りつつ、主役を強調する」ことで、一瞬でプロっぽい構図が完成します。
黄金螺旋で切り抜いてみたのがこちら。
目立たせたい猫ちゃんを拡大しつつ、黄金螺旋のうずうずの付近に設定しています。
人間は、画面を見たときに無意識に「黄金比の渦巻き（スパイラル）」に沿って目を動かす習性があるそうで、黄金螺旋を利用して「見せたいもの」へ自然に視線を誘導できるようになるんですって。おもしろいですよね。
② 文字サイズの「1.6倍」ルール
「本文に対して見出しを何pxにすればいいか」で悩む時間はもったいない！
そんなときは1.6倍ルールで設定してみましょう。
やり方： 「本文のサイズ × 1.6」 を見出しのサイズにする。
本文を 10px にしたら、見出しは 16px 前後にする。
効果： 視覚的なリズムが整い、情報の優先順位がハッキリします。
例：
16 ｘ 1.618 = 25.888 … 約26px
計算が面倒なら、Golden Ratio Typography Calculator などのツールを使うのもアリです！
Golden Ratio Typography Calculator
https://grtcalculator.com/
② レイアウトを「3：5」で分ける
黄金比（1：1.618）を計算機で叩くのは面倒ですよね。そこで使えるのが、近似値である「3：5」の法則です。合計が「8」になるので、画面を「8等分」して考えると一気にラクになります。
例えばこんな感じ
やり方は「ピザを分ける」くらい簡単！
画面やバナーを、横または縦に8等分します。
そのうちの「3つ分」をサイドバー（または文字）に。
残りの「5つ分」をメイン画像に割り振るだけ！
効果： 厳密な 1:1.618を計算しなくても、近似値である「3：5」を意識するだけで、画面に圧倒的な安定感が生まれます。
１辺から黄金比を計算してくれるこんなサイトもあります。
https://keisan.site/exec/system/1255063343
黄金比は「答え」ではなく「ヒント」
黄金比は「絶対に守らなければならないルール」ではありません。
「どうしてもバランスが取れない」「もっとクオリティを上げたい」と思ったときに、そっと背中を押してくれる強力なガイドラインです。
「なんとなく」で作るのをやめて、理論に基づいた「美しさ」を味方につける。
さっそく、今日作るバナーや資料のフォントサイズから、黄金比を取り入れてみませんか？
この記事を書いた人
