ブログ記事の見出しのデザイン

ブログ記事の「見出し」のデザインって、ブログの見やすさに直結する大切な要素だと思いませんか?大きい文字にしたり、下線を引いたり、帯を引いたり、、一風変わったデザインでブログのイメージを引き立てたり。今回はそんな「見出し」のデザインについてまとめてみました。
目次
見出しについて
まずそもそも見出しとは何かですが、“新聞・雑誌などで、記事内容が一見してわかるように、文章の前に示す簡単な言葉。標題。タイトル。”(weblio)ということです。
見出しと言えば新聞
新聞の全ての記事に「見出し」があり、大きさや文字数などのデザインによってニュースの重要度(見せたい度)に差をつけられていて、特に大きい見出しには、「主見出し」+「脇見出し」、「肩見出し」などで構成されています。いずれにしても、記事の内容が一目でわかるような文章、そして興味が湧くような文章にするようです。
(熊本日日新聞)
ブログにおける見出しの役割ってなんだろう?
ではブログにおける「見出し」って何だろうっと考えてみたところ、SEO的な部分はさておき、ことハウツー系の記事においては、私の考えですが、「今どんな内容の記事を読んでいるんだっけ」ってならないため(迷子にならないための)であったり、「ここは知ってるから読み飛ばしてもOK」、「ここの部分が知りたい」などの目印、付箋みたいな役割が大きいのではないかなぁと思います。もっとふさわしいワードとしては“目次”でしょうか。(WordPressでも見出しを目次として表示させる機能もありますね。)
というのも最近こうしてブログを作ったりしているため、よくハウツー系のブログを見ながらサイトを作ったり記事を書いたりしています。そしてよく思考が迷子になります。
最初から記事を全部読めばいいのですが、ピンポイントで知りたい部分を探したいと思ってザーッと記事を“流し見”して、良さそうだなぁって思ったらちゃんと読む、みたいな調べ方をして、当然知識がないので、読解できず離脱みたいなことを繰り返しています。そもそも真偽不明な情報があふれている今のネットで、すべての記事を全部読んでいる余裕なんてないですよね。
一番重要だと思うこと
なので、ブログにおける「見出し」の役割で一番重要なのは、その章の内容が一目でわかるようにしてあげることだと思います。
結局新聞の「見出し」と一緒じゃないか?ってなりますが、違うところは、キャッチーである必要はないのかなぁと思いました。新聞でいうところの“見出し”の役割は、記事名(title)で、完結しているので、記事内の見出しごとにインパクトの強い内容にするというよりも、わかりやすさが重要だと思います。
ブログの見出しに求められるデザインってなんだろう?
前章でも触れたのですが、見出しそのものが“目印”でもあるべきだと思います。長い記事だと視覚的にも迷子になりがちなので、「見出し」のデザインは目立っていたほうが、自分が今何を読んでいるのかを見失わずに読めるのかなぁと思いました。
雑に言えば、目立つ!デカい!派手!みたいな笑
よくあるブログの見出しデザインをまとめてみました
よくあるブログの見出しデザインを6つピックアップして、特徴をまとめてみました。

おび
バシッと横いっぱいに太い帯が引かれていて視覚的に章と章の境目がわかりやすくできます。カラーをうまく取り入れて、より目立たせたり、ブログ全体のデザインを整えやすいデザインだと思います。
アンダーライン
カラーや太さによってイメージを調整しやすいデザイン。こちらも帯と同じくラインを横いっぱいまで引いてあげると章と章の境目も比較的わかりやすくできますね。
大サイズ
シンプル。文字だけのレイアウトの美しさが引き立つデザインにできそうですね。シンプルだからこそ一番扱いが難しいと思います。英文なんかのサイトにはピッタリだと思います。

リストマーカー
ワンポイントでシンプルなWebデザインを締めるのにも有用です。(“リストマーカー”と呼んでいいのかはわかりませんがここではそうしておきます。)
より自由なデザイン
ブログのイメージをより自分らしく表現することができると思います。また、ブログが出来上がったときの満足感を味わえて、ブログの楽しさも感じられますね。
枠外
よくあるブログ感を感じさせないデザインにすることができます。特にサイドバーがないブログとは相性がいいですね。こちらも完全に章が分かれているので見やすさは抜群だと思います。
本サイトの見出しデザインを決めました
本サイトでは、わかりやすさを重視して「おび」ベースに「リストマーカー」を加えたようなデザインにすることにしました。

“おび”だけだと、いまいちしっくり来なかったので、やはり頭に装飾がついている方が“見出し感”が出る気がします。普段何かメモを取るときも、見出しの頭に■とか●とかつけて書いたりしませんか?そういうのが潜在的に刷り込まれていて、この方がしっくりくるのかもしれません。。

まとめ
ブログの見出しの内容はキャッチーさよりもわかりやすさがが重要、見た目はWebサイトに合わせてデザインするけど、章と章の境目としての機能するようなデザインにして、読みやすいブログにしたいですね。
出典
weblio. 「見出し」. https://www.weblio.jp/content/見出し, 2023年5月9日閲覧。
熊本日日新聞. 「一目で内容がわかる?!魔法の『見出し』」. https://kumanichi.com/service/shinbunkatsuyo/manual/2017006, 2023年5月9日閲覧。