見出しの役割と要件を考える ～Blogger テンプレートを作るよ！ (12)～

こんにちはー！

前回は三日間 css を遊んでおりましたが、今回はデザインを決める前に見出しの役割と要件について、きちんと考えてみようと思いました。

（前回：『見出しデザインを考えるも結論は出ず ～Blogger テンプレートを作るよ！ (11)～』）

見出しの役割

見出しというのは 「ここからはこのテーマで話しますよ」 というのが分かりやすいように付けるものですが、それともう一点、階層構造を示すものでもあるんじゃないかと思います。

見出しの役割から考えるデザインの目的

文書の階層構造の中で、見出しのデザインは他の見出しとの関係性を示唆する目的で使います。たとえば、見出しを使って以下のような構造の記事を書いたとします。

タイトル『僕が考えた最強の食生活！』

• 朝食はなるべく食べよう！ (<h2>)
• 朝食を摂らない人が多い (<h3>)
• 朝食を摂るメリット (<h3>)
• 朝食を摂ると集中力が上がる！？ (<h4>)
• 忙しい朝に最適な料理 (<h3>)
• 簡単おいしいスムージー (<h4>)
• 買い溜めできるゼリー飲料 (<h4>)
• 昼食こそバランスが大事！ (<h2>)
• 昼食にバランスを求める理由 (<h3>)
• コンビニおにぎりにプラス一品でバランス改善 (<h3>)
• 夕食は最終調整のチャンス！ (<h2>)
• 朝昼の食事を思い返してみる (<h3>)
• 心地よい睡眠へと誘う食材 (<h3>)

（※サンプルで作ったフィクション記事であり、内容の正当性を保証するものではありません）

上記の構成では、 『僕が考えた最強の食生活』 という投稿のタイトルの子として、朝食と昼食と夕食についての見出しがあります。この三つは兄弟であり、さらに彼らにもそれぞれ子がいます。

『朝食はなるべく食べよう！』 にとって、その次の 『朝食を摂らない人が多い』 は子にあたります。また、『朝食を摂らない人が多い』 にとって、その次の 『朝食を摂るメリット』 は兄弟に当たります。

こういう風に、記事の内容はスクロールしていくと徐々に下位へ下位へ降りていくのが基本ですが、逆もあり得ます。

たとえば 『朝食を摂ると集中力が上がる！？』 にとって、その次の 『忙しい朝に最適な料理』 は叔父母にあたります。さらに、 『買い溜めできるゼリー飲料』 にとって、次の 『昼食こそバランスが大事！』 は祖父母の兄弟にあたります。

こういった階層を分かりやすくするために見出しを使い分けます。この使い方の邪魔にならないように、できればむしろ補強しつつ、サイト全体のコンセプトに則って、見た目を良くする事がデザインの目的だと思います。

デザインの要件を出してみる

デザインする上で、見た人にどんな印象を抱かせれば見出しの役割を満たせるか、そのためにはどうしたらいいか、じっくり考えた結果以下のようになりました。

• 見出しだと気付いてもらうために
• 本文との違いを明確にする
• 次の見出しが同じ階層だと気付いてもらうために
• 同じ階層の見出しは同じデザインで統一する
• 次の見出しが下の階層だと気付いてもらうために
• 上位は印象を強く、下位は印象を弱くする
• 上位と下位のデザイン差を明確にする
• 次の見出しが上の階層だと気付いてもらうために
• 上と同じ
• 次の見出しが２段階上の階層だと気付いてもらうために
• <h2> 見出しは下位世代と明らかに違うデザインにする

これを踏まえて、本文中で使用する h2, h3, h4 タグをデザインしようと思います！

できれば、投稿のタイトルやガジェット名、投稿日時のデザインも併せて考えたいところですが、次回までにそこまでできるかなー？