Webサイトの文字が小さく感じる原因を調べる。computed styleで確認したこと

2026年10月7日2026年11月3日

WEB

MANIARUのHOMEを見直していたとき、ページ全体が少し細かく見えるのが気になりました。ただ、見出しも本文も一律に小さいとは限りません。感覚だけで全体の文字を大きくすると、これまで作ってきた情報の強弱や、余白を生かした雰囲気まで変わってしまいます。

そこで、PCとスマートフォンの実表示を見ながら、ブラウザに最終的に適用されたcomputed styleを確認しました。調べて分かったのは、原因が一つのfont-sizeではなく、小さい文字がいくつかの場所へ集中していたことでした。

最初に「全部を大きくする」を外した

今回の目的は、HOMEを大型文字のデザインへ変えることではありません。通常の文章を読みやすくし、見出し、本文、操作するリンク、補助ラベルの役割が自然に分かれる状態を作ることです。

そのため、文字を次の五つの役割へ分けました。

補助情報が小さいこと自体は問題ではありません。問題になるのは、通常の説明文や操作に必要なリンクまで同じように弱くなり、どこを読めばよいか分かりにくくなる場合です。

確認では、CSSファイルに書かれた値だけで判断しませんでした。テーマの標準スタイル、追加CSS、画面幅ごとの指定が重なると、最後に表示される値は宣言を一つ見ただけでは分からないからです。

ブラウザの開発者ツールで対象を選び、主に次の値を確認しました。

PCは1280px前後、スマートフォンは390px前後で確認しました。同じ要素でも画面幅によって値が変わるため、両方を分けて見ています。

実測すると、Heroの主見出し、セクション見出し、PROJECTタイトル、ABOUT本文は、役割に対して十分な大きさがありました。通常の説明文も、HOME全体で一律に小さい状態ではありませんでした。

一方で、次の場所には12〜14pxの文字が集まっていました。

一つずつなら補助文字として成立するサイズです。しかし、CATEGORYカードやPROJECTの進捗カードでは複数の小さい文字が続きます。ページ全体が小さいというより、「小さい文字の集合」が一部にできていたことが、細かく感じる主な原因でした。

文字の読みやすさは、font-sizeだけでは決まりません。同じ14pxでも、行間、太さ、色、周囲の余白によって印象は変わります。

今回のHOMEでは、文字色や行間が原因で読めない箇所が広がっているわけではありませんでした。むしろ、スマートフォンでPC用の情報階層が狭い幅へ収まり、説明文、ボタン、進捗ラベルがまとめて弱く見えることが問題でした。

特に主要ボタンは、押せる領域そのものがあっても、文字が12pxだと周囲の説明文より目立ちません。タップ領域と文字の認識しやすさは、別々に確認する必要がありました。

監査のあと、変更する価値が高い箇所だけを五つに絞りました。数値は固定ルールにするのではなく、実画面を見ながら使った目安です。

HeroのH1、セクションのH2、PROJECTタイトル、ABOUT本文、HeaderとFooterは変更対象から外しました。問題が見つからなかった部分まで触らないことで、MANIARUの見た目を保ったまま、読みづらさにつながる場所だけを調整できます。

PROJECTの進捗UIには、STEP番号、短縮名、公開済みやCURRENTといった状態が並びます。すべてを同じ大きさにすると情報が重くなりますが、小さくしすぎるとカード全体が細かな注記の集まりに見えます。

そこで、STEP番号は既存の強さを残し、短縮名と状態だけを一段読みやすくしました。公開済みリンク、未公開表示、CURRENT、COMPLETEDという構造やリンク先は変えていません。文字の役割を保ちながら、読める下限だけを上げる考え方です。

調整後は、PCとスマートフォンでもう一度HOMEを確認しました。CATEGORY説明文、Hero説明文、主要ボタンが読み取りやすくなり、PROJECTカードの中でも番号、タイトル、状態、操作の順序を追いやすくなりました。

同時に、カードの高さ、進捗表示の密度、PROJECT間の区切り、横方向のはみ出しも確認しました。文字を大きくすることで別の崩れを作っていないかまで見て、変更範囲をそこで止めています。

HOME全体の導線を整理した過程は、WEB 05「WordPressのトップページ導線を整理する」でまとめています。実際に公開後の画面を使って改善点を見つけた流れは、WEB 01「公開したWordPressサイトを実際に使ってUXを改善してみた」につながります。

「文字が小さく感じる」という最初の違和感は、数値としては一つではありませんでした。通常本文は十分でも、小さい説明文や補助ラベルが近い場所へ集まれば、ページ全体が細かく見えます。

感覚をそのまま全体変更へ結び付けず、役割ごとに分け、computed styleで確かめる。そうすると、直す場所と残す場所を選べます。今回は、HOME全体を作り直さず、五つの限定した調整で読みやすさを整えることができました。