https://idea-hack.com/blog/40513/
見出しと本文サイズの比率の求め方(黄金比)

見出しと本文サイズの比率の求め方(黄金比)

見出しと本文サイズの決め方を黄金比を参考に決める方法について解説しています。

WEBデザインでもポスターの作成でも、試行錯誤しがちなのが、タイトルと本文の求め方です。

これらの要素は,ある程度完成した後でないと、適切だったかどうかがわかりづらく、完成間近の状態で「なんかイケてない」と思う原因だったりします。

紹介される機会が少ないので、知らない人もいると思いますが、タイトルと本文のフォントサイズには計算方法があります。

  • 黄金比
  • 白銀比
  • フィボナッチ数列
  • 8の倍数方式

今回は「黄金比」を利用するやり方に関して説明したいと思います。

黄金比とは?

Wikipediaを引用すると

黄金比(おうごんひ、英語: golden ratio)は、

の比である。近似値は1:1.618、約5:8。
線分を a, b の長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b のことであり、最も美しい比とされる。貴金属比の1つ(第1貴金属比)。

Wikipedia

と書かれています。

黄金比は特定の2つの要素の要素を比較したときに、誰もが心地良く感じる比率のことを指します。

有名な例は 黄金長方形

皆さんが、資料やイラストを作るときに何気なく利用している長方形ですが、縦横の適切なサイズがわからなくなるときが良くあると思います。

そんなとき、デザインに詳しい人はみんな「黄金長方形」の概念を利用します。

黄金長方形の比率

この概念は図形だけでなく、画像などにも利用することができ、丁寧に画像を用意していけば、それだけできれいなページが出来上がります。

黄金比をWEBフォントに反映

私はこの黄金比の法則をいつもWEBページのフォントサイズを決める参考に使っています。

例えば、2019年8月26日現在、この記事の本文と見出しH2の関係性は以下の通りです。

H2は本文の1.618倍

本文を基準にして、見出しH2の大きさを1.618倍にしています。

*ただし、H1は記事タイトルにのみ適用しており、この本文とは別の枠組みとして捉えているので、黄金比は適用していません。

H3以下はどうするの?

ここまでで、黄金比をH2と本文の間に適用したのですが、本文の関係はH2と本文だけではありません。H3 ~ H6まであります。

私のサイトでの話になりますが、私は基本的にH2とH3しか使わない方式を採用しています。

なので、H3は本文サイズの1.309倍・・・つまり、H2と本文の間の倍率を適用しています。

本文を1倍として、H2を1.618倍、H3を1.309倍にしているのです。

例えば、2019年8月26日現在、この記事の本文と見出しH3の関係性は以下の通りです。

H3は本文の1.309倍

まとめ

ついつい感覚に頼りがちですが、黄金比の知識があると、フォントサイズの大きさを決めやすくなります。