ブログ
文字の「大小の差」で伝わるサイトに。2026年タイポグラフィ活用術
▼ここから下をカスタムHTMLブロックに貼り付け
写真もデザインもそれなりに整えたのに、なぜか「何をしている会社か」が伝わらない。そんなときは、画像を足す前に「文字の大きさの差」を見直してみてください。
ホームページの文字は、ぜんぶ同じ大きさで並べると、どこから読めばいいのか分かりにくくなります。逆に、「いちばん伝えたいこと」を大きく、「補足」を小さくするだけで、見る人は迷わず読み進められます。これを、文字の「大小差」と呼ぶことにします。
2026年のデザインのトレンドでも、文字の大きさや太さで個性や分かりやすさを出す考え方が注目されています。写真を撮り直したり、デザインを作り直したりしなくても、文字の大きさを変えるだけならすぐに試せます。この記事では、見比べ図を使いながら、小さな会社のサイトでの使い方を紹介します。
まずは見比べてみましょう:大小差があるとこう変わる
下の2つは、同じ工務店のトップページの文字を、同じ内容のまま作ったものです。違うのは文字の大きさだけです。
変更前:ぜんぶ同じ大きさ
株式会社〇〇工務店
暮らしに合わせて、直せる家を。
注文住宅・リフォーム
埼玉県深谷市
どれが一番大事なのか分からず、目が迷います。
変更後:大小差をつけた
株式会社〇〇工務店 | 埼玉県深谷市
暮らしに合わせて、直せる家を。
注文住宅・リフォームのご相談はこちら
お問い合わせ
いちばん伝えたい一文が、最初に目に入ります。
文字の内容はほとんど同じなのに、右のほうが「何をしてくれる会社か」がすぐ分かります。会社名や地域は小さくして、「お客さまにとってのメリット」を大きく見せているのがポイントです。
大きくしすぎ・小さくしすぎも見てみましょう
「大小差が大事」といっても、差をつければつけるほど良いわけではありません。見出しの大きさを3パターンに変えて、本文(14px)と並べてみました。
差が小さすぎる
暮らしに合わせて、直せる家を。
地元の工務店が、住まいの困りごとに寄りそいます。
見出しが目立たず、流し読みされにくい。
ちょうどいい
暮らしに合わせて、直せる家を。
地元の工務店が、住まいの困りごとに寄りそいます。
見出しで内容が分かり、本文も読みやすい。
大きすぎる
暮らしに合わせて、直せる家を。
地元の工務店が、住まいの困りごとに寄りそいます。
折り返しが多く、かえって読みにくい。
目安としては、見出しは本文の1.5倍〜2倍くらいから試してみてください。まずはここから始めて、画面で見ながら調整するのがおすすめです。
本文は「小さくしすぎない」のが鉄則
見出しを目立たせようとして、本文を小さくしてしまう方が少なくありません。下は、同じ文章を3つの大きさで並べたものです。
12px:小さすぎ
地元の工務店が、住まいの困りごとに寄りそいます。水まわりの修理から増築まで、お気軽にご相談ください。
スマホでは目が疲れます。
16px:読みやすい
地元の工務店が、住まいの困りごとに寄りそいます。水まわりの修理から増築まで、お気軽にご相談ください。
多くのサイトで標準的な大きさです。
20px:大きすぎ
地元の工務店が、住まいの困りごとに寄りそいます。水まわりの修理から増築まで、お気軽にご相談ください。
1行が短くなり、落ち着かない印象に。
本文は16px前後が目安です。大きな見出しとの差は、本文を小さくするのではなく、見出しを大きくして作りましょう。
迷ったら「3段階」だけ決めればOK
文字の大きさは、細かく何種類も作る必要はありません。次の3段階だけ決めておけば、サイト全体がすっきりまとまります。
① 見出しいちばん伝えたいこと
② 本文説明や詳しい内容。読ませる文章はここ。
③ 補足会社名、住所、注意書きなど、なくても困らない情報。
ページの中で「これは①、これは②、これは③」と迷わず分けられると、見る人も迷いません。
サイズを細かく刻みすぎると、どれが大事なのか逆に分からなくなるので注意してください。
色は「ひとことだけ」にそっと足す
大小差に慣れてきたら、大事な言葉だけに色をつけると、さらに伝わりやすくなります。ポイントは、色を使うのを「1か所だけ」に絞ることです。
色を使いすぎ
暮らしに合わせて、直せる家を。
どこが大事か、かえって分かりません。
1か所だけ
暮らしに合わせて、直せる家を。
「直せる家」が強みだと一目で伝わります。
全体の色の割合は、ふだんの文字色が約7割、背景が約2割、強調の色が約1割くらいを目安にすると、落ち着いた見た目になります。
- 文字色 #222222(約70%)
- 背景 #F5F5F2(約20%)
- 強調色 #E4572E(約10%)
スマホで見ると、見え方が変わります
パソコンの画面できれいに見えても、スマホでは幅がせまいため、大きな文字が何行にも折り返してしまうことがあります。スマホの画面を想定して、同じ見出しを2つの大きさで比べてみます。
大きすぎ(36px)
暮らしに合わせて、直せる家を。
ちょうどいい(22px)
暮らしに合わせて、直せる家を。
公開前には、必ずスマホの実機で見て、見出しが読みやすく収まっているかを確認しましょう。いまはスマホから見る人も多いため、このひと手間が大切です。
WordPressなら、文字の大きさはここで変えられます
WordPressでは、ブロックエディタで文字を選ぶと、右側の設定から「サイズ」を変えられます。2026年に公開されたWordPress 7.0では、フォント(書体)を管理する「フォントライブラリ」が、すべてのテーマで使えるようになったと紹介されています。お使いのテーマやバージョンで使える機能は変わるため、更新する前にはバックアップを取り、表示を確認してから進めてください。
まとめ:今日から試せる3つのこと
- いちばん伝えたい一文を、大きくするトップページの最初に、「誰に、何をする会社か」を一文で書いて、大きく表示します。
- 文字の大きさは「見出し・本文・補足」の3段階にそろえる本文は16px前後、見出しは本文の1.5〜2倍を目安にします。
- スマホで見て、折り返しや読みにくさをチェックする見出しが何行にも割れていないか、本文が小さすぎないかを確認します。
文字の大きさは、お金をかけずにすぐ変えられて、効果を感じやすい部分です。自社サイトの文字づかいに迷ったときは、お気軽にご相談ください。
参考情報:
Web design trends for 2026: kinetic type, broken grids and the return of visual personality(Envato) https://www.google.com/url?q=https://elements.envato.com/learn/web-design-trends&source=gmail&ust=1790908704996000&sa=E
The 11 Biggest Web Design Trends of 2026(Wix Blog) https://www.google.com/url?q=https://www.wix.com/blog/web-design-trends&source=gmail&ust=1790908704996000&sa=E
WordPress 7.0 Has Arrived: Here’s Everything You Need to Know(WordPress.com) https://www.google.com/url?q=https://wordpress.com/blog/2026/06/04/wordpress-7-0-armstrong/&source=gmail&ust=1790908704996000&sa=E