ブログ記事の「見出し」のデザインは、読みやすさに直結する大切な要素だと思いませんか?
大きい文字にしたり、下線を引いたり、帯を引いたり、一風変わったデザインでブログのイメージを引き立てたり。今回はそんな「見出し」のデザインについてまとめてみました。
- 「見出し」の役割について考えること
- 「ジャンプ率」についての知識
- 見出しのよくあるデザイン
この記事は2023年5月9日公開で、2024年10月18日にリライトしたものでございます。
目次
「見出し」とは
そもそも見出しとはなにか。“新聞・雑誌などで、記事内容が一見してわかるように、文章の前に示す簡単な言葉。標題。タイトル。”(weblio)ということです。
英語では「heading」。h1 などの HTML 要素の h は、ここからくるものだと考えられます。似た用語で「header」というものありますが、これはまた別物です。
「見出し」と言えば新聞
新聞の全ての記事に「見出し」があり、大きさや文字数などによってニュースの重要度(見せたい度)に差がつけられています。特に大きい見出しには、「主見出し」+「脇見出し」、「肩見出し」などで構成されています。いずれにしても、記事の内容が一目でわかるような文章、そして興味が湧くような文章にするようです。
(熊本日日新聞)
ブログでの「見出し」の役割は?
ブログの「見出し」には、ユーザーを迷わせずに、目的の情報に素早くたどり着かせる「ナビゲーション」のような役割があると私は考えます。ブログ特有の「縦に長い構造」と「部分読み」という特徴から、新聞や雑誌の「見出し」とは少し異なる役割が求められると思います。
ほとんどのブログは上から下に読む縦長のレイアウトです。長い記事を読んでいる途中にこんな風に思うことがありませんか?
・『話の結論はどこに向かっているのか?』
・『自分は何を知りたかったのか?』
・『この話はいつ終わるのか?』
・『読み進めて答えを得られるのだろうか?』
など
ブログはピンポイントで知りたい情報を探しながら読んだり、興味のない部分を飛ばすこともよくありますよね。その結果、どこを読んでいたか分からなくなり、記事を離脱してしまうことも少なくありません。だからこそ、「見出し」がうまく使われているブログは、ユーザーにとってストレスなく読み進めやすい存在になります。ユーザーを迷わせず、目的の情報にたどり着かせる「ナビゲーション」として、見出しを活用していきましょう。
SEOの観点でも重要な「見出し」
「見出し」はユーザーのためだけではなく、検索エンジンにとっても重要です。検索エンジンは見出しの内容をもとに、そのページがどのような情報を提供しているかを判断します。h1、h2、h3 などの階層構造を適切に使うことで、検索エンジンがコンテンツを正しく理解できて、結果的に検索順位の向上にもつながる可能性があります。
「見出し」に求められるデザイン
「見出し」に求められるデザインで重要なことは、ユーザーにブログのテーマやイメージ、ジャンルなどに合ったあった印象を与えることです。
「見出し」で印象をコントロール

用語として、
見出しと本文の文字サイズの違い、比率のことを「ジャンプ率」と言います。ジャンプ率の高い低いによって、ユーザーに受け取ってほしい印象を調整します。
ジャンプ率が高い:「躍動感」「若々しさ」「インパクト」「安っぽさ」など

新聞や雑誌のように見出し部分をさっと目を通して興味のある記事だけ読むような媒体では、ジャンプ率を高く設定する傾向が見受けられます。こちらのブログ様で、実例と共にまとめられておりとても勉強になりましたので、参考リンクを掲載いたします。ぜひご覧ください!
ジャンプ率が低い:「落着き」「高級」「専門的」など

学術書や小説などのしっかりと“読ませたい”ものには、ジャンプ率を低めに設定することが多いようです。
ブログに最適なジャンプ率は高め?
「ジャンプ率」というのは、読んで字のごとく、パパパッっとジャンプするように読むから、そう名付けられたものなのかなぁと私は考えます。
ブログ記事はたいてい、何かの情報を探しているユーザーが、超広大なネットの海に漂う大量の記事の中から“読み流すもの”にすぎないと考えると、ジャンプ率は高めの方が相性が良さそうな気がします。
もちろん、
ブログのユーザー層やジャンル、PV数などのさまざまな状況によって、ジャンプ率も柔軟に変えていかなければなりません。ことハウツー系のブログに至っては、検索流入が多いと思いますので、なおさら“読み流される”と考えられます。
よくある装飾
一般的なブログの見出しでよく使われる基本的な装飾を6つほどピックアップして、特徴をまとめてみました。
帯
横いっぱいに太い帯が引かれていて視覚的に項と項の境目がわかりやすくできます。強調のカラーを取り入れて目立たせたり、ブログのテーマカラーと組み合わせて全体のデザインを整えたりできますね。

アンダーライン
カラーや太さによってイメージを調整しやすいデザインだと思います。こちらも帯と同じくラインを横いっぱいまで引いてあげると項と項の境目も比較的わかりやすくできますね。

大サイズ
シンプル。
文字だけのレイアウトの美しさが引き立つデザインにできそうですね。シンプルだからこそ一番扱いが難しいと思います。英文なんかのサイトにはピッタリだと思います。

リストマーカー
ワンポイントでシンプルな Web デザインを締めるのにも有用です。(“リストマーカー”と呼んでいいのかはわかりませんがここではそうしておきます。)アイコンなんかを付ければブログを楽しく彩ることができますね。

より自由なデザイン
ブログのイメージをより自分らしく表現することができると思います。また、ブログが出来上がったときの満足感を味わえて、ブログの楽しさも感じられますね。

枠外
よくあるブログ感を感じさせないデザインにすることができます。特にサイドバーがないブログとは相性が良さそうです。こちらも完全に章が分かれているので見やすさは抜群だと思います。

大雑把にまとめてみましたが、もっと細かく見て「文字の揃え」や「フォント」、「カラー」など様々な要素が組み合わさって千差万別のデザインが生まれます。理屈だけ眺めていても良いデザインは作れないので、ぜひぜひいろいろな「見出し」を作っていきましょう!
まとめ
「見出し」とは記事内容が一見してわかるようなタイトルみたいなものです。ユーザー(読者)に一文で興味を持ってもらえるようなものが求められます。
見出しのデザインは、「見出し」と「本文」の大きさの比率である「ジャンプ率」を調整することでユーザーへの印象をコントロールするというテクニックを使うことが重要です。そして装飾などにもこだわり、「読みやすさ」や「ナビゲーション」としての役割をもった「良い見出し」を作っていきましょう!
また、HTML 要素としての見出しも別記事でまとめてありますのでよかったらご覧ください。
参考・出典
weblio. 「見出し」. https://www.weblio.jp/content/見出し, 2023年5月9日閲覧。
熊本日日新聞. 「一目で内容がわかる?!魔法の『見出し』」. https://kumanichi.com/service/shinbunkatsuyo/manual/2017006, 2023年5月9日閲覧。
賢者の印刷用語集. 「ジャンプ率」. https://www.well-corp.jp/solution/janpuritsu/, 2024年10月18日閲覧。
プリント日和. 「【ゼロから始めるDTP講座・第3回】デザインを学ぶのに絶対必須、ジャンプ率とは?」. https://www.brother.co.jp/product/printer/home/magazine/kiji65/index.aspx, 2024年10月18日閲覧。
マミオン. 「新聞・雑誌は3~5倍!『ジャンプ率』を意識して、見やすいWebサイトをデザインしよう」. https://mamion.net/2012/08/ジャンプ率を意識して見やすいwebサイトをデザイ/, 2023年11月22日閲覧。