hタグを昔話に例えて分かりやすくしよう!

こんにちは!ディアントの三宅です。

みなさんhタグってご存知ですか?

 

hタグとは、

<H1>~<H6>のHとはHeadingの略で、見出しを意味します。 <H1>が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となります。 <H6>が最下位の見出しです。

HTMLクイックリファレンスより

コンテンツを製作する上で欠かせない見出し。

しかしこの見出しの使い方がいまいちわからないというご相談を多々受けるので、今回ディアントで昔話にhタグを当てはめて理解を深めてみよう!

というコンテンツをご用意いたしました!最後までお読みいただければ幸いです。

 

hタグを当てはめる昔話は…

今回hタグを当てはめて考える昔話の題材は「桃太郎」です!

おじいさんとおばあさんが居て、おばあさんが川で洗濯をしていると大きなモモを見つけて家に持ち帰って割ってみると中に赤ん坊が居て、桃太郎と名付けて育て大きくなり、鬼が悪さをしているので桃太郎は鬼退治に行く決心をし、おばあさんが作ってくれた特製のきび団子を持ち途中で出会った犬、サル、キジを仲間にし、鬼ヶ島へ行きばったばったと鬼をなぎ倒し鬼が持っていた宝を持ち帰りおじいさんとおばあさんといつまでも仲良く暮らしましたとさ

 

っというお話です。

それではhタグを当てはめてみましょう!

※内容に昔話「桃太郎」にはない内容が含まれていますが、目的はhタグの理解の為です。ご了承ください。

 

 

「hタグ解説用桃太郎」

それでは始めます。

 

桃太郎…h1タグ

まず大見出しです。コンテンツのタイトルにはh1タグを使用します。

 

序章…h2タグ

h1直下のh2タグを使用します。

むかしむかしあるところにおじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯へと行きました。

 

柴を刈り倒すおじいさん…h3タグ

序章(h2タグ)の直下の見出しであるのでh3タグを使用します。

おじいさんは自慢の脚力で山を駆け上がり柴を刈りまくります。それはもう鬼の形相で…

 

洗濯に命を懸けるおばあさん…h3タグ

先ほどと同じく序章の直下であるのでh3を使用します。

村のコインランドリーの異名を持つおばあさんは自慢の洗濯板でありとあらゆる洗濯物を洗濯しました。得意なのはふわっと仕上がりコースです。

 

巨大桃との遭遇…h2タグ

ここで話が変わります。序章から巨大桃との遭遇へと見出しは変化します。

おばあさんが川で洗濯をしていると大きな桃がどんぶらこと流れてきました。おばあさんはふわっと仕上がりコースをやめて大きな桃を獲得。大きな桃を自宅へと持ち帰りました。

 

誕生。桃太郎。…h2タグ

ここでまた見出しは桃太郎の誕生へと変わります。タグはh2タグです。

家に持ち帰りおじいさんとおばあさんは大きな桃をまっぷたつに割りました。すると大きな桃の中から赤ん坊が出てきました。二人はその赤ん坊を「桃太郎」と名付け育てました。

 

鬼襲来・桃太郎の決心…h2タグ

桃太郎青年期にまで一気に話を飛ばします。なので見出しはh2タグです。

鬼が村や町を荒らしては私欲の限りを尽くしているという噂が流れ始めました。それを聞いた青年になった桃太郎は鬼を退治しようと決意しました。

 

きび団子に懸ける希望…h3タグ

決意を決めた桃太郎の出発までの話を書くので、h3タグの小見出しできび団子のお話を挿入します。

桃太郎の決心を知ったおばあさんは、きびだんごを生産しました。もはや村のコインランドリーは見る影もありません。

 

仲間との出会い…h2タグ

ここで出発後の桃太郎の情景を描くため見出しh2タグで見出しを変更します。

桃太郎はきびだんごをこさえて鬼ヶ島へと出発をしました。

 

犬との出会い…h3タグ

仲間との出会いの中の犬との出会いなのでh3タグです。

背後から桃太郎に忍び寄ったのは「犬」でした。

 

~以下猿・キジは省略します~

猿との出会い…h3タグ

キジとの出会い…h3タグ

 

いざ鬼ヶ島へ…h2タグ

鬼は鬼ヶ島で待ち構えています。桃太郎は現地の方の船を借りて鬼ヶ島へと行きました。船を借りた方とはちょっとだけもめました。

 

青鬼との闘い…h3タグ

青鬼は強さでいえばまぁまぁ強いのですが、4対1なので数的不利で倒されました。

 

赤鬼との闘い…h3タグ

赤鬼は青鬼が倒されたのを見て交渉に入ることにしました。

 

赤鬼との話し合い…h4タグ

ここでh4タグの登場です。鬼ヶ島へ(h2)の赤鬼との闘い(h3)の中の話し合いなのでh4タグになります。

話し合いは5時間にも及びました。桃太郎は村のみんなに色々言いふらしたので手ぶらでは帰れないし、こっちには来ないでほしいし要求ばかりです。甘やかされて育ったのが影響しています。

 

財産分与と誓約書…h3タグ

ここはh3タグです。ここの見出しは赤鬼との闘い(h3タグ)の中の話ではないので、再度h3タグが登場します。

赤鬼は仕方がないので自身の財産の半分を桃太郎に譲渡し村や町へは行かないという誓約書を書かされました。

 

地元への凱旋とその後…h2タグ

お話の最後です。ここは鬼ヶ島でのお話ではないのでh2タグを使います。

桃太郎は赤鬼からもらった財産の半分と誓約書を手に持ち帰り、その財産を資産運用に回しおじいさんとおばあさんと幸せに暮らしましたとさ。

 

以上で桃太郎のお話は終わりです。

 

見出しの構成と一覧

見出しの一覧と構成を作ってみました。

160717-02

コンテンツを製作する上で重要なのが見出しの構成です。

どこの部分で話が変わり、その話の中でも見出しとして分けた方が良い話であればh3タグなどの見出し構成にするべきです。

 

コンテンツを執筆する前にこのような見出しマップを作ることで話の流れや構成、全体像が見えてきます。

これらを修正、補修してあげることでより一層読みやすく質の高いコンテンツの制作ができます。

 

ユーザーが読みやすくわかりやすくするために。

見出しタグの必要性は、ウケ狙いではありません。

あくまでも「えっ!いつの間にか話が変わっている!」等とならないように見出しを作り、読みやすくそしてインデックスしやすくするためのツールです。

 

多用しすぎても見づらくなってしまうので、コンテンツの全体を作ってから見出しを配置してあげるようにしても良いかもしれません。

 

いいね!&シェアお願いします!

関連記事

  1. CI / VIデザインとはなんだろう?

  2. 自営業者必見!ホームページ更新を代行してはいけない理由

  3. 似ている色で配色づくり!類似性を生かした配色テクニック

  4. ロゴって必要?ロゴの重要性について考える

  5. 著作権を守るクリエイティブコモンズとは

  6. SNSだけで集客本当にそれでいいの?特性で見るホームページとSNSの違…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA