この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。

Webデザインにおいて、文字サイズの調整はとても大切です。色やデザインにこだわっていても、文字サイズが適切ではないと、ユーザーに内容が伝わりづらくなります。

そこで今回は、文字サイズを設定するとどんな効果があるのか、また、簡単に文字サイズを変更できる方法をお伝えします！

文字サイズを設定することによる、3つの効果

①アクセシビリティ（誰でも使いやすい設計）の向上

高齢者や視覚に障害があるユーザーにとっても文字が読みやすくなり、より多くのユーザーがWebサイトを快適に利用できるようになる。

②ブランドイメージの向上

ユーザーに安心感を与え、ブランドの信頼性を高める事ができる。

③視覚的な階層化で、重要な情報を強調できる

例えば、見出しは大きく、本文は標準的なサイズにすることで、重要な情報を強調できるようになる。

フォントサイズはどれくらいが最適？

• 読む環境や目的によって異なりますが、基本は16px～18px。本文であれば、Googleも推奨している16pxがおすすめです。
• タイトルや見出しは、本文より大きめのサイズである24px~36pxにすることが多いです。

読む人の年齢やデバイス、照明の条件によっても最適なサイズは変わりますので、調整しながら決めることをお奨めします。

フォントサイズの種類

文字サイズを変更することができる単位を簡単に4つ紹介します。

1. px：pxは、数字を指定すればその数字の大きさになる絶対値です。
2. em：emは、親要素のフォントサイズに基づく相対値です。
3. rem：remは、タグのフォントサイズに基づく相対値です。
4. %：%は、親要素のフォントサイズに基づく相対値です。

フォントサイズの指定方法

今回は、px（ピクセル）の単位で文字サイズの指定をしていきます。下記の例では、見出し［h1］ の文字サイズを50px、見出し［h2］の文字サイズを30px、段落［p］タグの文字サイズを16pxに設定しています。

HTML

<h1>h2タグのフォントサイズ50pxです</h1>
<h2>h2タグのフォントサイズ30pxです</h2>
<p>pタグのフォントサイズ16pxです</p>

CSS

h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}

このように、文字サイズの変更は、CSSを使って簡単に行うことができます。

適切な単位と設定を選び、また、レスポンシブデザインにも対応させることで、すべてのユーザーにとって使いやすく魅力的なWebサイトを作成することができます。ぜひ試してみてください！