見出し画像

[UI design] Headingって何が大事なの？

Osaki

WEBサービスのデザイナーやフロントエンドエンジニアは、LPの構築やサイトの構築でHeadingタグをよく利用していると思います。そういえば、モバイルアプリケーションのデザインではHタグベースで文字サイズを変えることはしなかった気もします。公開されているデザインシステムなんかを見ると、Headingタグを使わず文字サイズを指定しているのをよくみます。
それでは、Headingは何のために使われているのでしょうか。文字サイズを何種類か指定して使い分けること何が違うのでしょう。

Headingとは

Heading（ヘッダー）は各ページ、セクションのタイトルを指定するためのHTMLタグです。<h1>から<h6>までの6種類を設定することができます。h1タグをメインヘッダー、h2以下をサブヘッダーと呼ぶこともあります。

h1タグ（メインヘッダー）とは

そのWebページの中で一番伝えたい内容（コンテンツのタイトル）を示すHTMLタグ。ほとんどの場合ページで一番最初に見るヘッダーテキストのことです。LPではファーストビューにあたる、ヒーローセクションに使われたりすることが多いです。h1タグはページ全体のタイトルに当たるので、1ページに1つの利用に限ることがベストプラクティスとされています。

h2タグ（サブヘッダー）とは？


h1タグはページで一番重要なタイトルに使われますが、そのページの構成要素である各セクションはh2以下のタグで囲みます。これをまとめてサブヘッダーということもあります。サブヘッダーはh2が一番ランクが高く、h6が一番低くなっています。
サブヘッダーはh6まで設定できますが、通常h4以下を設定することはあまりないです。また、サブヘッダーはh1と違い何度でも使うことができますが、<h2>の下に<h4>を置くなど、階層を飛ばしたりせず、必ず以下のように階層化して利用しましょう。

<h1> H1 element </h1>
    <h2> H2 element 1 </h2>
        <h3> H3 element 1-1 </h3>
        <h3> H3 element 1-2 </h3>
        <h3> H3 element 1-3 </h3>
    <h2> H2 element 2 </h2>
        <h3> H3 element 2-1 </h3>
        <h3> H3 element 2-2 </h3>
        <h3> H3 element 2-3 </h3>
    <h2> H2 element 3 </h2>
        <h3> H3 element 3-1 </h3>
        <h3> H3 element 3-2 </h3>
        <h3> H3 element 3-3 </h3>
             <p>Some text...</p>

 Headingを利用する理由

Headingについて理解したところで、Headingタグを利用する理由について調べてみましょう。どうやら以下の3つの理由がありそうです。

1. アクセシビリティの向上

一つはどんな人でも利用できるようにアクセシビリティを向上させるためです。特に、目の見えない方のためのスクリーンリディング（コンテンツの音読み）機能において役に立ちます。Headingタグでページ内の文章の構造を指定してあげることで、スクリーンリーダーが構造に沿って文章を読み上げることができます。スクリーンリーダーは階層のレベルに沿って読んでいくため、ヘッダーの階層を飛ばしてh1の次にh4を利用してh2に戻ったりすると、このスクリーンリーダーの一つの機能である、ヘッダーから次のヘッダーへのスキップを認識しずらくしていまします。そのため、階層に沿ってヘッダーを配置することが大事です。

2. GoogleはH1タグをタイトルタグとして利用することがある

GoogleがHTMLの中にタイトルタグを見つけられなかった場合、H1タグを、ページの中で最もタイトルに適切なテキストとして認識することがあります。このような時にもH1タグは役に立ちます。

3. SEO対策

Gooleの検索ボットはページ内のコンテンツを読み込んでページを評価します。ヘッダーを利用して構造化されたページはGoogleのボットがコンテンツを理解し、SEOを強化するのに役立ちます。また、ヘッダーにヒットさせたい検索キーワードが設定されていると、Googleがそのキーワードをページの検索ワードとして認識するのに役立ちます。特に、H1やH2などランクの高いところにキーワードを配置すると、そのキーワードが強化されやすいようです。言い換えると、H1やH2タグにヒットさせたいキーワードが多く使われていると検索ランキングを上げるのに役立ちます。

このように、Headingはページの見た目の分かりやすさを目的として文字の大きさを変える目的だけではなく、アクセシビリティの向上やSEOの強化などシステムを向上させる面でも役に立っています。

今回調べてみて、今までHeadingを見た目のわかりやすさを分けるために使っていたことに気づきました。WEB開発やデザインではサイトの構造に注目し、Headingを適切に利用することが大事になりそうです。

参考サイト

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

https://www.w3.org/WAI/tutorials/page-structure/headings/

https://anneyha.ca/blog/h1-h2-h3-understand-how-to-use-heading-tags-in-seo

この記事が気に入ったらサポートをしてみませんか？