BiNDではじめてホームページを作ったという方の多くはそもそも「見出しタグって何？」という方も少なくないのではないでしょうか。出張BiND教室で伺った時にお話をしたり、ご依頼を頂いたお客様の依頼時のホームページを見てみると、h3タグだけ何回も使われていたり、順番などがバラバラだったりということは実際多いです。
見出しタグって何なの？
見出しタグで検索すればいっぱい出てきます。そんな中、個人的にわかりやすいと思っているページがこちらです。
サルワカ：【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？
https://saruwakakun.com/html-css/basic/h1-h2-h3
サルワカさんはどのページもわかりやすくて本当に参考になると思います。ホームページ初心者のかたでもわかるくらい、わかりやすくまとまっていると思います。
その名の通り、見出しを作るタグのことで、<h1>や、<h2>、<h3>などで挟んであげることで、その挟まれた文字等が見出しであることを伝えます。誰に伝えるのか？それはもちろんGoogle先生とページを見てくれている人です。
八百屋さんに例えてみましょう
例えば、「りんご」という見出しがあることで、ここからりんごのことが書いてあるんだな。とわかりやすくなります。りんごについて書いてあるブロックを探しやすくなることもありますし、りんごについて書いてあるブロックだと思いながら読むことができます。何について書いてあるのかわからないまま読み進めるよりは断然わかりやすくなります。これはサイトを見てくれている人はもちろん、Googleにもわかりやすいことになります。
八百屋さんのページを例に考えてみます
お店で売っている商品について説明するとします。売り場でも「野菜」と「果物」で売場のエリアを別けていたりしますよね。そして、「野菜」のエリアに行けば、白菜、ナス、ピーマンなどが置いてあり、その商品には「白菜 198円」のようなフダがついていると思います。
りんごを買いにお店に来たら、まず「果物」売場のエリアに行き、そのエリアで「りんご」が置いてある棚を探します。そして、多く並んでいるりんごの中から「つがる・早生ふじ・紅玉・世界一」のフダを見ながら買う商品を選びます。
ホームページも同じで、果物について書いてあるページに行き、「りんご」という見出しがあるブロックを探します。そして、そのりんごのブロックの中を読みながら商品を選ぶのか、「つがる見つけた！」のように買うものが決まっているのか。いずれにしても、見出しがあることで目的の場所（ブロック）を見つけやすくなります。
h1：果物
h2：いちご
h3：とちおとめ
h4：特徴
h4：オススメの食べ方
h4：保存の仕方
h3：あまおう
h4：特徴
h4：オススメの食べ方
h3：紅ほっぺ
h4：特徴
h4：保存の仕方
h2：りんご
h3：つがる
h4：特徴
h4：オススメの食べ方
h4：保存の仕方
h3：早生ふじ
h4：特徴
h4：オススメの食べ方
h3：紅玉
h4：特徴
h4：オススメの食べ方
h4：保存の仕方
h3：世界一
h4：特徴
h4：オススメの食べ方
h4：保存の仕方
h2：バナナ
見出しは一定のルールでわかりやすく
そして、野菜・果物の売場案内は大きなオレンジの看板に白文字で書いて天井から吊るし、りんご・バナナなどの案内は白い厚紙にかわいい文字でポップを置いている（ドンキのような感じ）、つがるなどの商品別のフダははがき大の黄色の紙に茶色の明朝体でだいたい十円玉サイズくらいの文字サイズで書く。
というようなルールの元で作っていきます。意図的ににぎやかな装飾をしている場合を除けば普通は統一性のあるルールに従ってフダなどを作っていきます。それぞれが勝手に作ってしまうと統一感がなく、わかりにくくなってしまいます。
ホームページでも同じように、h1はページの一番上に太字で30px、青文字の明朝体。h2は背景にベージュの色をつけて茶色のゴシック体、24px。そんな感じです。
こうすることで、統一感があり見やすくなるだけでなく、同じ見栄えで繰り返すことで例えばどこまでがりんごのブロックかが感覚的にもわかりやすくなります。
ページを作っている人の都合で、hタグの順番や見栄えを一部だけ変えてしまうとそれは違和感になり、ページの中がどうなっているのかわかりにくくなります。りんごの「紅玉」は一番売りたい商品だから「紅玉」はh2タグにして大きくして、オススメの食べ方は大きな字で強調したいからh2タグのサイズがちょうどいい！なんてやらないように。
こうやって読んでいると「そんなこと、普通しないでしょ」と思われると思いますが、BiNDで作っている方の中で、「見出しって知らないや。見栄えだけで選んじゃいました。」ってセリフ、よく聞きます。
BiND専門のホームページ制作会社
BiNDism
https://bindism.com
好みのブロックデザインを自由に組み合わせて、ホームページが作れます。
Block Design
https://bindism.com/blockdesign
