WEBデザインの『迷い』が消える黄金比ルール
- 3 時間前
- 読了時間: 2分
デザインはセンスではなく比率ってしってました？
このルールを知るだけで色などデザインに迷いがなくなり、安定したデザインを作ることができるんです！
配色の黄金比「70：25：5」
センス不要でプロっぽくなる色の配分を紹介します。
ベースカラー（70%）： 背景など、最も面積を占める色（基本は白や淡い色）。
メインカラー（25%）： ブランドを象徴する色。
アクセントカラー（5%）： お問い合わせボタンなど、一番目立たせたい場所。
この比率を崩さないだけで、画面が散らかる地味なストレスから解放されます
フォントの黄金比「1.618」
1.618倍（黄金比）が美しいと言われても、いちいち覚えてられないし、デザインの最中に計算なんてしてられませんよね。
ざっくり「1.6倍」……と言いたいところですが、それでも計算は面倒。 そこで、WEBデザインで最もよく使う「本文16px」を基準にした、計算不要のセットリストを作りました。
これさえメモしておけば、もう迷いません。
本文が16pxの場合の「黄金セット」
本文：16px（すべての基本）
見出し3（小見出し）：26px （1.6倍）
見出し2（中見出し）：42px （26pxの1.6倍）
見出し1（大見出し）：68px （42pxの1.6倍）
ぶっちゃけ、見出し1が68pxはデカすぎる！と感じるかもしれません。
そんな時は、1.6倍じゃなくて「1.5倍」で計算するのもアリ。
大事なのは「毎回バラバラな数値にせず、自分の中でルールを固定してしまうこと」です。
ちなみに、行間のルールは 本文のフォントサイズの 1.5倍〜1.9倍 を行間に設定すると、バランスよくなります。
迷いを消すための「3つの自分ルール」
さらに踏み込んだ、デザイナーならではの効率化Tipsを。
フォントの種類は2つまで： 種類を絞るだけで、統一感が格段に上がる。
純粋な「黒（#000000）」を使わない： 少しグレーを混ぜるだけで、目に優しい高級感が出る。
「余白」を数値で固定する： 8px単位（8, 16, 24, 32...）で余白を管理すると、パズルを組むようにデザインが速くなる。
デザインに迷うのは、選択肢が多すぎるからです。ルールという『型』に自分をはめることで、作業スピードは劇的に向上し、クオリティも安定します。
黄金比も夢じゃない！ 神ツールTypescale
計算ツールに頼るのが一番速い！
「毎回計算するのが嫌」という私のような人のために、『Typescale（タイプスケール）』という神サイトがあります。
本文のサイズと『1.618』を選ぶだけで、すべての見出しサイズを自動で出してくれるんです。 あぁぁ。もっと早く知りたかった。
