勘とハッタリで答えに辿り着くウェブ屋講座02 – HTML完全に理解する

勘とハッタリで答えに辿り着くウェブ屋講座02 – HTML完全に理解する

Google AdSenseさん曰く
「貴方のブログの広告掲載を停止します!理由はもちろんお分かりですね?あなたがPINコードの送信先住所を間違えたまま再送付を怠り、4ヶ月に渡って放置したからです!覚悟の準備をしておいて下さい」

…というわけで、約一ヶ月の間広告がない快適なブログ閲覧が可能になっていました。今は直しましたが。

ついでに言うと更新サボってた間にエックスサーバーの更新料を払い忘れて「貴方は滞納者です!404表示される楽しみにしておいてください!」ってな具合で数日間ブログ自体が死んでたこともあります。ものぐさすぎだろ

なお前回記事はこちら

完全に理解する前書き

じゃあまたやっていこうかなと思うんですけど。皆さんはダニング・クルーガー効果ってご存知ですか? 名前の由来はダニングさんとクルーガーさんが生み出した言葉だからなんですけどまあそれはどうでもよい。

ダニング・クルーガー曲線

要するに”未熟者ほど自分が未熟であるという自覚がない”っていうわりと言うまでもないようなことを実際に調査して明らかにし、言語化したっていう心理学用語ですね。

じゃあ突然ですけど本日の名言行きますか。いや決してシリーズ化させようという意図はないけど!

あなたが無能なら、あなたは自分が無能であることを知ることはできない。正しい答えを生み出すために必要なスキルは、正解が何であるかを認識するために必要なスキルと同じである。

―― デイヴィッド・ダニング(社会心理学者)

「前回は記事の締めくくりとして名言を引用していたのに今回は冒頭で使うなんて!?」だって? 名言ってのはいつでもどこでもぶっ込まれるものなんだ。油断してるとやられるぞ(?)

耳の痛い言葉を拝借していますが、まあなんていうか”自分の拙さに無自覚な素人”のことをこき下ろしたいわけではなくて。

というのも、ダニング・クルーガー効果だなんて言って「ちょっと勉強しただけで良い気になってるヤツ」などを馬鹿にするのは簡単ですけども。物事を学んでいく過程で、自信の有頂天から急転直下して無力感の無間地獄を彷徨い続けるのは精神衛生的なコスパが悪すぎるんでね。

さりとて、深く学ぶことから逃げて半可通の知識で生きていくのが正しいキャリアプランなのかというとそれもまた疑問符なんで我々は日々研鑽を積んでいくわけですわな。

まァーそんなわけで、この記事群は『完全に理解した』気分を超えて本当の意味で『完全に理解した』を目指す(しかし永遠に辿り着くことはない)人の助けになればいいなと思って書いております。

HTMLの書き方を学ぶ前に

んで、HTMLの話をしますと書いておきながらいきなりp要素だのdiv要素だのの説明をしないのがこのブログの流儀です。冗長で申し訳ないんですが、まず最初にウェブサイトの基本構造について触れていきます。

なんでこういう回りくどい話をするかっていうとですね。リファレンスを見れば分かるような要素の使い方より要素を用いた実画面の作り方についてレクチャーした方がイメージ湧きやすいじゃないですか。ほらアレ、魚をあげるよりも釣り方を教える方が…ってちょっと違うか? まあいい。

ウェブサイトの基本構造01 「カラム」について

PCサイトの基本構造はだいたいシングルカラムレイアウトマルチカラムレイアウトに大別することができます。

なに? 「なぜPCの話からする? モバイルファーストはどうしたんだ?」と?

【用語解説】モバイルファースト
スマホの画面を先に作って、PC画面はスマホの内容を拡張・補強する感じでデザインしようぜという思想。デカいPCの画面を作った後にスマホの画面を作ろうとすると様々な災いが起きたためこのような考え方が生まれた。

ウェブサイトはねぇ クライアントの目眩ましのために派手なPC画面から先に作ってスマホ画面は後追いで作るべきではないんだよ スマホがさき PCは後

まああれだ…、現実問題PC画面から作ることが多いので…。なんでモバイルファーストという優れた思想があるにも関わらずそれが採用されることが少ないのか、は今回の本旨から逸れるので省きますが。

シングルカラムレイアウト

1カラムレイアウトとも呼ばれることがあります。カラムというのは日本語で直訳すると「縦列」になります。

1列のレイアウトということはつまりそのまんまで、上から下にコンテンツが並んでいくレイアウトということですね。じゃあせっかくなんでファイーエブレム 風花雪月の公式サイトでも見てみましょうか。

ページの主要な内容が全て1つの“列”に収まっている - 『ファイアーエムブレム 風花雪月』ムービーページよりトップとかだと分かりづらいので一番構造がシンプルなページを貼っています。ちなみに最初に選んだのは金鹿

これだけだとピンと来ないと思いますが、次の2-3カラムレイアウトの例を見てもらえば違いは分かることかと思います。

マルチカラムレイアウト

ページの構成が右と左で分かれているものを2カラムレイアウトと呼びます。領域の広い方にはそのページの主たるコンテンツ内容を、狭い方にはナビゲーションやサイト内検索、バナーなど主に他のページへ移動するための付帯的なものが配置されます(それ以外のものが配置される場合もあります)。

ページ構成が2列に分かれていて、右側には各記事へのリンクなど付帯的な情報を表示しているこのブログのPC版の表示も実は2カラムレイアウトです。

2カラムレイアウトには、以下のようなものが設置されていることが多いです。

また、左+中央+右のような構造のページは3カラムレイアウトと呼びます。2カラムレイアウトに更に1列増えるのですから、その分メインコンテンツの領域は狭めになってしまいますが、代わりにサイト全体の一覧性は上がるというメリットがあります。

3カラムレイアウトの例みんな大好きBootstrapのドキュメントページとかが分かりやすいんじゃないでしょうか。僕は好きじゃないですけど。

左右のうち、広い方には2カラムの例でも挙げたものが配置され、狭い方にはよりプライオリティの低めな情報(たとえばSNSのシェアボタン、類似のページや現在開いているページの目次など)が並ぶことが多いです。あくまで傾向の話なのでサイトの形態によっても使われ方が変わりますが。

このようにページを複数の列に分けたレイアウトをマルチカラムレイアウトと呼びます。

左(メイン)+右1+右2のような変則的な3カラムレイアウトや4カラム以上のレイアウトもあるっちゃあるけど普段作ることはあんまないので覚えなくていいです。他にも、右or左のナビゲーションが2列ある4カラムレイアウト…とかもなくはない。カオスなデザインになりがちなのでオススメできないですが。

スマホはどうなの?

大きめのタブレットならまだしも、スマホの激狭縦長画面でマルチカラムレイアウトが実現できるだろうか(反語)。ということで現代的なウェブサイトのスマホ画面の設計はシングルカラムレイアウトにするものだと思ってもらっていいです。

PC画面でマルチカラムレイアウト表示になっている場合、スマホ画面では下記のような方法を用いることが多いです。

  • サイドナビの内容はスマホ画面では非表示にしてしまう
  • サイドナビの内容を、ハンバーガーメニューと呼ばれるタップ展開可能なヘッダー内に表示させる
  • サイドナビの内容をメインコンテンツ下部に配置する
  • 表示を簡略化するなどしてヘッダー内に配置する(例:サイト内の主要コンテンツを示すアイコンのみ並べる)

【用語解説】ハンバーガーメニュー
横棒3つのアイコンをタップするとメニューが表示される、スマホサイトでよく見かけるやつ。3本の線をハンバーガーに見立ててこう呼んでいる。

10年代半ばあたりから爆発的に普及した一方で、「ウェブの知識がない層にはボタンの意味が分からない」とか「開くまでメニューの内容が分からない」、「タップ回数が増える」とか批判の声もそれなりにある。

ハンバーガーメニューの例

大体こんな感じの動作をします。

また、これはカラムの話からは少し脱線した補足ですが、メインのコンテンツ内容もスマホ画面に合わせて配置を並べ替えたり表示内容を変更したりすることがあります。PCのレイアウトをそのまま持ってくるとスマホで読みづらい場合もあるのでね。


では、それぞれの長所と短所を考えてみましょう。

シングルカラムレイアウトの特徴

  • スマートフォン/タブレットでもレイアウトが大きく変わらない
    → マルチデバイス対応がしやすい
  • 大きな写真や見出しを配置したり、余白を大胆に使うことができる
    → 画面の幅に囚われない柔軟なデザイン・配置が実現できる

上記のような長所がある一方で、ページスクロール量が多くなる・関連するページを見つけるのが難しくなるという欠点もあります。

ページ数の少ないサイト意匠性などの訴求力で勝負したいサイトスマホでの閲覧を前提としたサイトなどに向いていると言えるでしょう。

向いている例:
LP,ブランド/サービスサイト,(中小企業の)コーポレートサイト,キャンペーンページ,若年層向けのコンテンツなど…

マルチカラムレイアウトの特徴

  • 画面の左右に各ページへの導線が表示されている
    → サイト全体の回遊性(閲覧性)が上がる
  • ページ全体を無駄なく使うことができる
    → ページスクロール量を減らすことができる

上記のような長所がある一方で、ありふれたデザインになりがち・PCとスマホで画面レイアウトが大きく変わってしまうという欠点もあります。

ページ数・コンテンツ量の多いサイトや商品に関する様々な情報を掲載する必要のあるECサイト機能の多いウェブサービスなどに向いていると言えるでしょう。

向いている例:
ECサイト,公的機関のサイト,多機能なウェブサービス/アプリ,ブログ,FAQ(よくある質問)ページなど…

その他の潮流

シングルカラムレイアウトとマルチカラムレイアウトが世のウェブサイトを大半を締めていますが、最近はスプリットレイアウトというものもプチ流行しています。

下記の画像は東京農業大学公式サイトの例ですが、PCでは画面を右と左の二つに分割し、スマホではシングルカラムレイアウトのようにコンテンツを縦積みしていますね。

スプリットレイアウトの例

マルチカラムレイアウトとの大きな違いは、「主体となるコンテンツが設置される広いカラム・ナビゲーションなどを表示させるための副次的なカラム」という区分けがなく、どちらのカラムも同程度の領域を持っている点ですかね。

縦や斜めといった大胆な画面分割を用いることで画面領域を有効に活用する・視覚的インパクトを与えるといった効果があります。なお、作り方的にはマルチカラムレイアウトの派生型みたいな感じになります。


他には、ブロークングリッドなんかも流行りですね。あー、まず前提にグリッドレイアウトというものがありまして、そいつはそれぞれの要素を格子状(グリッド)に並べることでページ全体に整った印象を与えるというものです。カードとかタイルとかそんな感じのものが画面を無駄なく敷き詰めるようなイメージです。

グリッドレイアウトの例

ポケットモンスター オフィシャルサイトより。ページ空間を無駄なく利用することができます。ちなみに買ったのは盾の方です。ポニータが可愛かったんでね。

対するブロークングリッドではあえてその規則的な配置方式をぶっ壊すんですね。画面全体の余白を大きく取り、コンテンツの配置をずらしたり重ねたりすることでスタイリッシュな印象を与える…ことも出来るかもしれない手法です。

ブロークングリッドの例

長崎大学公式サイトより。カッコいいですね。

余談【「作って終わり」じゃないウェブ制作】
カッコいいのはいいんですけど、恐らくかつて地図が表示されていたであろう領域に『エラーが発生しました』っていう悲しいメッセージが表示されていますね…(2020年02月現在)。実はGoogle Maps APIって有料化してるんですけど、どうやら古い設定のまま放置状態なようです…(※月200$分までの利用は無料だが、どうあれクレジットカードの登録等が必須)。

…このように、リリースした当初はバッチリでも「API側の仕様変更でかつて表示されていたものが消えてしまった」とか「運用による更新が積み重なってデザイン崩れが起きた」とかそういう事故はウェブの世界ではままある話です。サイトを作った担当者が退職していてもう誰にも対処できない…なんてことにならないよう、将来の事を見据えた体制作りなんかも大事なんですねー(ウェブ制作そのものの話からは逸れますが)。なお、もし読者の中に長崎大学の関係者がおりましたら申し訳ありません許してください(削除要請にも応じます)。それはそれとして、ご連絡いただければ有償で上記マップの設定を請け負います。よろしければいかがでしょうか?

ブロークングリッドから更に先鋭化してノングリッドデザインなんてのも登場したりしています。ブロークングリッドにせよノングリッドデザインにせよ、無秩序に配置すると残念なだけの見た目になってしまうのでそこはちゃんとデザインセンスのある方に設計を考えてもらいましょう。マルチデバイスでの見え方なんかも注意が必要です。

で、こうして流行り物を列挙すると「いっぱい覚えることあるじゃ~んウェーン」と思うかもしれませんが(事実そうではある)、結局モノを作る上ではシングルカラムの作り方かマルチカラムの作り方かに大別されるので、基本さえ理解しておけば現状のトレンドに沿ったデザインを実現することも可能です。ブロークングリッドも結局のところシングルカラムレイアウトの中だとこういうのもありますよーという話なのでね。

ウェブサイトの基本構造02 ヘッダーとフッター

ところで、シングルカラムレイアウトだろうとマルチカラムレイアウトだろうと大体設置されているパーツがいくつかありまして。それがヘッダーとフッターです。

ヘッダー

ページの最上段に設置されている領域をヘッダーと呼びます。ヘッダーには、主にロゴやグローバル・ナビゲーションが配置されます。サイト内検索の入力欄や申し込み等のボタンが添えられている場合もあります。

上記サイトではヘッダー部分がページスクロールに応じて追従するが、こうしたヘッダーをスティッキーヘッダーと呼ぶ(同様に追従するサイドナビはスティッキーナビゲーションなどと呼ばれたりもする)。アリアリ言う人のスタンドや名前の元ネタになったアルバムは特に関係ない。

グローバル・ナビゲーション

サイト内の主要ページを記したメニューのことです。専らヘッダーに設置されることが多いです(ヘッダー以外に配置されることもありますが)。グローバル・ナビゲーションだと長いのでグ ロ ナ ビ(shita red big)グローバルナビと略されることもあります。英語だとgnavみたいな感じで略記されることも。

余談【ナビ? メニュー?】
グローバルナビは専ら”ナビ”呼びが定着していますが、マルチカラムレイアウトのサイド部分に設置される項目は、『サイドナビ』と呼ばれることもあれば『サイドメニュー/サブメニュー』などと呼ばれることもあります(あるいは『サイドバー』など)。メニューは「選択可能な項目」、ナビゲーションは「目的地までの経路を示すもの」というような意味合いなので、なんとなくナビゲーション⊇メニューという感じのイメージでしょうか。筆者はヘッダーにあるやつorそのサイトの主要コンテンツだけを列挙した誘導的なメニューをナビゲーション、それ以外の項目の羅列をメニューと呼んでいますが、ナビでもメニューでも意味は通じるのでどっちの言葉を使ってもいいです。

グローバルナビには様々な種類があり、サイトの形態やトレンドによってその最適解も異なります。また、グローバルナビの形状や構造によって作り方や実装のめんどくささが変わってくるので、どういうものがあるのか把握しておいた方がいいので、主流なものをいくつか紹介しておきます。

ハンバーガーメニュー

さっき説明しましたね。ちなみに、展開時に画面外からニュッとスライドインしてくるやつは『ドロワーメニュー』というものに分類されます(”引き出し”が語源)。

ドロワーメニュー例ドロワーメニューの動作イメージはこんな感じ。スクショ元はWebデザイナーならブックマークしてる人も多いであろう、PhotoshopVIPのスマホ画面。

メガナビゲーション

メガメニュー・ドロップダウンメニューと呼ばれることもある。

クリック/ホバー/タップなどのアクションを起こすとメニューが元のナビゲーションを拡張するような形で展開されるナビゲーションで(大項目の下に付帯的な項目が表示されるプルダウンメニューなどの派生型)、画面の横幅いっぱいに広がったりするものも多いです。

メガナビゲーション例渋谷区公式サイトの例。ページ数の多いサイトで実装されることが多い。

タブナビゲーション

各項目にアイコンなどを添えて簡略化したナビゲーションで、スマホ表示などに向いています。画面下部に引っ付いているデザインのものも多く、こうしたものはボトムナビゲーションと呼ばれます。

シングルページアプリケーション(ページ遷移しないウェブアプリ;SPAとも略される)などでもよく採用されます。

タブナビゲーション例スマホブラウザ版のPinterestの例。Twitterとかもこんな感じですよね。

フロアナビゲーション

単一で完結していて最下部までのスクロール量が多いページ(LPなど)でよく採用されるナビゲーションで、自分の見ている位置がページ全体のどの辺りかを確認できます。

フロアナビゲーションはヘッダー内に設置されないことが多く、作り方も他のグローバルナビとは異なる点が多いです。また、デザイン的には(スクロールに応じて背景or前面のコンテンツが少しずつ切り替わるなど、)パララックスエフェクト(=視差効果で奥行きを表現する手法)と組み合わせて実装されがちな傾向にあります。

フロアナビゲーション例ソフトバンク運営のブランドサイトの例とか。分かりづらいけどスクロールすると次のCHAPTERに画面が切り替わるという仕組み。右下のメニューが現在位置を示している。


これらが全てではなく、他にもフルスクリーンナビゲーションとか、ゲームみたいに展開すると円形に広がるメニューとかもあります。

いっぱいあってワケが分かりませんね!でも大丈夫。これもやっぱり作り方は大まかには2種類! HTML的に考えなきゃいけないことはヘッダーの中に作るか、それ以外の領域に作るかだけなんで大丈夫です。

今回はウェブサイトの構造に関する大枠について触れたいので詳しい作り方の話は一旦置いておいて、次はフッターの話をします。

フッター

ページの下部にある領域。パンくずリストやコピーライト表記、「ページ先頭へ戻る」ボタン(様々な呼称があるが正式名称は特にないっぽい)などが配置されることが多い。サイトマップのように各ページをへのリンクを羅列しているタイプのフッターはファットフッターと呼ばれる。

ファットフッターの例窓の杜なんかはファットフッターを採用してますね~。

【用語解説】パンくずリスト
パンくずリストとは、サイト内で今自分が開いているウェブページの階層を示すものです。

階層とはなんじゃいって話ですが…そうですね。
ウェブの世界ではトップページを第一階層、その直下の…たとえば「製品一覧」を第二階層、製品一覧から飛んだ先の各「製品詳細」を第三階層…なんて感じで数えるのですね。

大規模サイトだとこの階層がどんどん深くなっていくので、利用者が迷わないようこうしたパンくずリストが設置されることが多いです。名前の由来は童話の『ヘンゼルとグレーテル』だそうです。

パンくずリスト例

上記は弊ブログに設置してあるパンくずリストの例です(この場合だとフッターには設置していませんが)。ハンバーガーメニューといい、ウェブ屋は食べ物の名前つけるのが好きなのだろうか…。

ところで。余談ですが、先ほどの『ファイアーエムブレム 風花雪月』公式ページではグローバルナビがヘッダーではなくフッターに設置されていますね。

これは結構レアケースなんですが、折角なので解説してみます。

実は、フッターにグローバルナビを設置するのは本来であれば悪手なんですよね。なんでかっていうと、他のページに遷移したい時に一回一回ページ最下部までスクロールしなきゃならないからです。一言でいうと回遊性が落ちるってことです。しかし、任天堂傘下の新作ゲーム公式サイトでそんなやらかしをするのか? ここにUI設計の妙味があります。

確かにフッターにグローバルナビがあるのは『ウェブサイト的には』悪手なんです。でも……えー、ゲームの画面…たとえばそうですね、ドラクエやポケモンの戦闘画面を思い浮かべてみてください。あれのコマンド操作部分ってゲーム画面の下部にありますよね?

ナビゲーションが画面の下にあるのは『ゲーマー的には』馴染み深いものなんですね~。また、「わざわざゲームの公式サイトをチェックするってことは購買意欲が高い層だろうから、恐らくページコンテンツのすべてを読んでくれるだろう」という算段もあるわけです。このように、対象となる利用者層によって最適な画面設計やデザインは大きく変わるってことは一つ覚えておくとよいです。

ま、これは皆さんにUIの面白さを紹介するために書いただけであって、実を言うと今から書く内容の方が真実かもしれません。この『ファイアーエムブレム 風花雪月』公式ページ群は任天堂公式サイトの配下に存在しているのですが、これらの配下サイトには全ページ共通のヘッダーが設置されています。だから、「1ページに2つもヘッダーがあったらキモいやん」って事情でグローバルナビをフッター内に置いているのでは、って説。まあ理由はどっちでもいいんです、ケース・バイ・ケースで例外はあるよってお話でございます。

HTMLの基本構造

ヘッダー部分を明示するためにHTMLではheader要素を、フッター部分を明示するためにfooter要素を用います。そのまんまですね。

で、ヘッダーとフッターの間に挟まれるコンテンツが言うまでもなくメインmain要素)となるわけです。なお、マルチカラムレイアウトの場合は付帯的なメニュー部分がnav要素かあるいはaside要素になります。

HTML構成例

ヘッダーやフッターの話は結構したので、メイン部分の中でHTMLをどう構築していくべきか…ってところを掘り下げていきましょう。

余談【文中のheaderとfooter】
一般的なウェブサイトではbody要素の上部にheader要素・下部にfooter要素が設置されていることが多いのですが、たま~に文中にもheader・footerが用いられることがあります。具体的には、article要素やsection要素といったセクション(意味の区切り;詳しくは後述)内で使われることがあります。前者は「ページ全体のヘッダー・フッター」として使われているのに対し、後者は「その文章・文脈内の付帯情報」をヘッダー・フッターとして記していると思ってもらえればよいです。イメージとしてはWord文書におけるヘッダー・フッターみたいな感じです。

見出しとセクショニング・コンテンツ

本題に入る前に前提として言っておきたいのですが、HTMLの要素はそれぞれに意味があります。いや、文書的な意味を持たない要素もあるんですが、それはそれで「意味がない」という意味があるんですが…ややこしいのでその話は置いときましょう。前にセマンティック・ウェブの話をしましたが、要はそれを実現するにはこう書けばいいんやでって話をします。

まず最初に覚えてもらいたいのはhX要素(hXと表記しているのは、<h1>, <h2>, <h3>, <h4>, <h5>, <h6>と全6種類あるためです)。これはそのページ内の「見出し」を意味します。6種類ある理由は、h1要素の中にそのページの中で一番重要な語句や文章が書かれ、次点でh2、h3…とページ作成者が情報のランク付けを行うためです。

ページの要点を端的に表すものとして使われるため検索エンジンもこのhX要素を重要視していて、…って。あー、やっぱこの話は避けて通れないか。ちょっと脱線するけど…SEOについて説明します!

SEOとは

Search Engine Optimizationの略語です。日本語訳すると「検索エンジン最適化」。検索エンジンが何か…は説明するまでもないですよね!? GoogleとかYahoo!とかそういうやつです。で、ウェブの世界において、検索エンジンの検索結果で1番目/1ページ目に載ることは栄誉であり最も価値のあることとされているのです…ってのは言いすぎですがまあ重要です。

20ページ先の検索結果とか死ぬほど暇な時じゃないと確認しませんでしょ? ってことで、サイト制作者やアナリストはみんな検索エンジンの順位とかを気にするわけですよ。ナンバーワンよりオンリーワンとか言ってられないんでね。

弊ブログは手続きを怠って広告剥がされるような場て所なんでそんなん気にして書いてませんけど。それぞれの記事を200倍ぐらい希釈して「いかがでしたか」で〆りゃあ10記事ぐらい量産できてアクセス数も恐らく倍増するだろうなんてことを分かっちゃいるんですがね。そんなことしても楽しくないのでやりません。

ここまでの話をまとめると「SEOっていうのはとにかく検索上位に載せるための施策なんやな~」って思われるかもしれませんが、それは半分正解で半分間違いです。より正確に言うなれば、表面上の答えとしては正しいですが本質的に誤りです。

というとですね…「検索エンジンの上位に載りさえすれば何やってもええんや! テキストを水増ししろ! 記事をパクりまくれ! 同じような内容のページを量産しろ!」ってな感じで業者が好き放題やった結果、ウェブの世界が滅茶苦茶になってしまいGoogleがブチギレて検索アルゴリズムを変更したっていう経緯がありまして(パンダアップデート)。絨毯爆撃みたいなヤクザ戦法を取ったり、セコい裏技に頼ったりしてもすぐ対策されてしまうのですよ。

まあそんなわけで、現代的なSEO対策というのは「そのページの情報を望むユーザーに、適切な手段・方法で、信頼性の高い情報を提供する」というのが最も効果的です。身も蓋もない言い方をすればSEO対策どうこう躍起になる前に、ちゃんとコンテンツの内容とその設計で勝負せんかいってことですね。

hX要素とSEO

で、前の記事にも書いたtitle要素とmeta description、そしてhX要素はSEOの要になってくるわけですね(それらが全てというわけではありませんが)。要になってくるからこそ、使い方については注意が必要ということです。

たとえば、さして重要でない語句にh1要素やh2要素を多用してたら即ペナルティ食らって検索順位が落ちたり検索結果から表示されなくなってしまいます。あとは、ページ全体をhXで囲ったり、100文字も200文字もある文章にhX要素を用いるのもご法度です。「見出し」だっつってんだろ。

ま、最近の検索エンジンは優秀なんで、多少hX要素の使い方が適当でもコンテンツがしっかりしてればきちんと評価してくれるんですけどね。矛盾することを言っているようですが、要はHTMLが文書であることを意識して適切にhX要素を使えば基本的に問題なしってことです。

ここでいう”多少適当”とは、「本来であればここに何某かの見出しを置いた方が文脈的に整うのだが、設置されていない」のようなレベルの話で、先述のような常識の範囲を逸脱した無秩序な使い方はヤバいです。


余談ですが、hX要素を適切に使い分けることがなぜ大事なのか少し深く考えてみましょう。…まあ、「SEO対策で大事とされているから」という答えでも間違いではないのですが。

たとえば、Twitterみたいに140文字しかないページコンテンツだったらタイトル+本文でも事足りるかもしれません。でも…想像してみてください、「見出し」の消えた世界を。どこまで読んだか皆目検討つかない、ただ文字が羅列されているだけの論文や技術書! いつの間にか節が変わって何の脈絡もなく時系列や視点が切り替わる小説! 何がその日で一番重要なニュースなのか識別できない新聞! この世の地獄ですね!!

文章で人に何かを伝えるということは存外に大変で、自分の考えや何某かの情報を正確かつ誤解のないように伝えようとするとどうしても文字数が多くなってしまいます。それはウェブページでも同じことでして。それゆえに前の記事からずっと「HTMLは文書である」と口酸っぱく言ってきたわけなんですね。

ゆえに。見出しタグが重要ってよりは、文章において見出しは欠かせないものだから、必然的に見出しが重要性を帯びる、っていう因果関係になりますかね。見出しが全くない、あるいは作り手都合で著しく不適当な使い方をしているページでは、さっき挙げたような地獄をユーザーに体験させているというわけです。

余談【適切な見出しによる恩恵(その他)】
ユーザーに読みやすいってことは作り手としても読みやすいってことで、見出しがきちんと割り振られているページはわりとメンテナンス性が高いです。文章を後から編集する上でも見分けがつきやすいですしね。また、適切な見出しの存在はウェブアクセシビリティ(万人にとっての利用性)的観点でも重要になります。たとえば、視覚障害者の方はウェブ閲覧時に音声読み上げを利用するのですが、いちいちページの全ての内容を聴いていたら時間がかかってしまいます。ですから、まず見出しの内容を聞いて、文書全体のうちどの部分に求めている情報が書かれているか把握してから詳細を掘り下げていく…というフローをとるのです。ゆえに、見出しとそれに付属する文章を適切に区分していくこと…すなわち情報設計がウェブ制作において超大事なんです。CV至上主義や見かけ上の美しさ、クライアントの要望ばかりが優先されて疎かにされがちですが…。

暗黙的アウトラインとその問題点

じゃあ見出し要素をキッチリカッチリ使い分ければHTMLの文書構造はマスターしたも同然! …あー、いや。ごめんまだあるの。下記のような場合は問題ないんですよ。

こんな具合で文書全体の意味合い(セクション)が構築されるわけでして。これを暗黙的アウトラインっていうんですけど。検索エンジン君やブラウザ君たちはhX要素に応じて文章を自動で解釈してくれるわけですが…これだと困る場合があるんですね。例えばこんな感じのHTML構造の場合です。

A-2の内容とは直接関係ないにも関わらず「Bへの導入」がA-2の文脈として解釈されたり、B-2-2の内容とは深く関係があるわけでもないのに「AとBの比較」や「比較を踏まえた上でのCへの言及」がB-2-2に含まれていると解釈されると困ることがあるんですな。

また、現実のウェブサイト制作においては、本文以外のサイドバー部分などにもhX要素が使われることがあります。そうした「各ページ共通の汎用的なパーツとしての見出し」と「その本文固有の見出し」が同等の意味的重要度・同様の文脈として検索エンジンに解釈されてしまうと嫌ですよね。

こうしたケースで対処するにはどうすればよいか。ご説明いたしましょう。

セクショニング・コンテンツ

article要素section要素ってものを使います。どっちを使うかは状況によりけりですが、上記の例の場合はsectionを使います。以下のように。

「Aに関する内容」「Bに関する内容」「Cに関する内容」をsection単位で区切ってくれるので、より各文の意味の切り分けが明瞭化するというわけなのです。

このように見出し(hX要素)の範囲を定義することができる要素セクショニング・コンテンツと言いまして。

厳密には見出しおよびフッターの範囲を定義するコンテンツですけど。まあ基本的には見出しの範囲を明示化する目的で使います。

sectionとarticleの使い分け

実は、section要素もarticle要素も”見出しの範囲を定義してくれる役割を持つ”という点においてはほぼ同じなのです。では、どう違うかというと。「その部分だけを切り取って成立するなら」article、そうでなければsection…ってな感じですかね。

たとえばさっきのソースコードを改変してarticleを使ってみるなら、こんな感じになります。

分かりました?分かんない?ああそう。sectionで括ってる部分はそこだけ抜き出しても意味が分からないけれど(話の内容が前後の文脈に依存しているから)、articleで括ってる部分だけで抜き出したらそれ単体で文章として成立するよね、っていう違いになります。

WHATWGのLiving Standardも読んでみましょうか。こういう分かりにくい問題にぶち当たった時は権威に頼るもんだ。

article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿コメント、インタラクティブなウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。

“ユーザーの投稿コメント”とあるので、さっきのサンプルコードのコメント欄部分もdivでなくarticleで囲ってもいいかもしれませんね。ただ、その箇所を配布したいという意図やその箇所が何某かの形で再利用されうる可能性がなければarticle要素で括る必要はないと個人的には解釈しています。…まあここら辺は後述の引用文をどう捉えるかという思想の違いがちょっと出る部分ですね。

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。

要素のコンテンツを配給することが理にかなう場合、著者はsection要素の代わりにarticle要素を使用するよう推奨される。

…上記の引用文以上に説明することもないのですが、一つアドバイス。body直下をarticleで囲んじゃダメです。たとえば本文の範囲をarticleで定義しようと思ったにしても、各ページ共通で使いまわしているヘッダーやフッターまで本文と見做すの雑な考えでしょうよ…ってなワケで。

そのページから切り取っても独立したコンテンツとして成立する部分を定義するためにarticle要素を使うのでね。『独立性』がarticle要素を使う上でのキーワードです。

その他のセクショニング・コンテンツ

実はsectionとarticleの他にもセクショニング・コンテンツに分類される要素があります。nav要素とaside要素って子です。

この2要素もまたセクショニング・コンテンツではあるんですが、section・article要素とは違って見出しが必須でない(必ずしもhX要素が内包されている必要がない)という特徴があります。

ただし、ここでいう”必須でない”とは、「見出しの表記を略してもよい」というニュアンスであり、本来は見出しを含むものだと理解しておくとよいです。たとえば見出しを入れることで不自然となるような部分(単なる引用文・挿入句など)にaside要素とかを使うのはアウトです。

nav要素

nav要素の持つ意味は読んで字の如しで、ナビゲーション・目次などの範囲を定義するために使われます。ただし、リンクの羅列ならばなんでもかんでもnav要素を使えばいいというわけではないことは覚えておくとよいでしょう。

ヘッダー内のグローバルナビやファットフッター内のサイトマップなど、”範囲を明示するまでもなく自明な”リンクリストとかはわざわざ使わなくてもよいって感じです。あくまでもそのサイト or そのページで主要なナビを明示するために使われるっていう立ち位置です。

header内やfooter内で使うのがNGというわけではないですが、使わなくてもよいなら使わないのをオススメという感じですかね。たとえばheader内であれやこれやを出し分けててHTML構造が複雑そうな場合とかは使ってもいいと思います。

上記と同じ理由でパンくずリストやページネーションに使うのもあんま適してないかもですねー。

【用語解説】ページネーション
ページングまたはページャーとも呼ばれることもあります。端的に言うとこれ(下記)。

ページネーションの例 Googleの検索画面下部

項目の表示件数が多い場合に記事一覧ページや商品一覧ページなどで用いられがちな、よく見かけるアレのことです。各ページへのリンクと現在ページ位置の表示、前後(および最初・最後)のページへのリンクが設置されます。

aside要素

asideというのは「余談」「脱線」を意味する英単語です。で、aside要素も言葉の意味通りで、本文から外れた部分を定義するために用いられます。具体的には脚注・参考文献・筆者の独白、あとは広告欄とかですかね。

身も蓋もない言い方をすると、最悪省いてもいいような場面で用いられます。裏を返せば、本文に依存するような内容や本文から参照されるような内容で使うのはよろしくないです。この辺も本文からの『独立性』で判断していただければなと思います(その辺の判断がつかない不安な部分に関しては使用しない方がいいといえるかもしれません)。


なお、リンク一覧部分にaside要素を用いている例もあります(このサイトも実はそう)。で、リンクに用いる場合のnav要素との使い分けの勘所について私見ですが述べさせていただきますと。

そのページに関連深い項目の一覧や目次など、サイト内/階層内/ページ内の主要なコンテンツへのリンク郡だったらnav。最新の記事一覧やアーカイブといったとりあえず他のページを回遊させるためのリンク郡ならasideでいいと思います。

この辺はまた思想によりけりな部分がありますが、そのページの本旨・本論から外れている部分は基本asideになるかな~、と。

おわりに

長過ぎるのでここで締めとします。尻切れトンボすぎないかって? いやいや、ここでちょうどいいんですよ。ここからはCSSの話も混ざってきますから。HTMLはCSSの存在なくして語ることはできないのでね。

えー、では…次回予告的な話をしておきましょう。ここまでHTMLの骨子をどのように組み立てるかという話をしてきましたが、現実には先述の要素だけではまだまだウェブサイトを作ることは出来ないのです。。HTMLが『文書』として完成しても、実際には『ウェブサイト』として完成させなければいけないので……。

流れとしては、HTML側で任意のclass属性を設定し、そのclassに対してCSS側であれやこれやの装飾を施すと…あら不思議。見目麗しいウェブサイトの誕生だァー!感じです。まあ次回に詳しく説明しますが。

おまけ:h1要素は複数回使ってもいいの?(ダメなの?)

h1要素についてネットで調べると「h1要素を1ページに複数回使ってはイカン!」と「h1要素を複数回使っても別にいいんじゃ」という二つの意見を目にすることかと思います。

結論から言うと「複数回使っても別にいい(ただし、慣習的な理由で使わない方がいいと考える派閥がある)」って答えになります。

なぜこのような二つの意見に分かれているのかというと、理由がありまして。それを今からご説明いたします。

HTMLの仕様はどこからくるの?

さっきからHTMLの要素にはそれぞれ意味があり、意味に応じた正しい使い分けをしないとダメだとしつこく書いてますけれども、「じゃあその”意味”とやらを決定してるのはどこのどいつだよ」って思いませんか?まあ思わなくてもいいんですけど。

この仕様を決めていたのが、W3C(World Wide Web Consortium;ワールド・ワイド・ウェブ・コンソーシアム)という非営利団体”でした”。いや、今も存在している組織ではあるのですが。

W3C発足の経緯とその現状

Web技術の標準化を推進するため、1994年にティム・バーナーズ=リーによって設立された団体がW3Cです。前回の記事でも出てきたティムニキですね(?)。

黎明期にブラウザ側でなんでもかんでも勝手に機能追加していった結果、「このブラウザではこのタグが使えるけど、このブラウザではそもそも表示がぶっ壊れる」とかそういう問題が起こったんで、「ウェブ標準のルールが必要だべ」ってなったのが発足の経緯です。

W3Cの面々でツラ突き合わせて…かどうかは分かりませんが喧々諤々の議論を行い、草稿→草案→(勧告)候補→勧告案を経た後、実際に勧告として「ブラウザ屋のみなさん次はこんな機能を標準実装としましょう」みたいなお触れ書きを発令するというフローになっております。

反逆のWHATWG

組織っつーのは肥大化すれば硬直化するし権威主義的になるのはいつの時代も同じモンでして。W3Cもその例に漏れずってなわけでWikipediaから引用。

W3Cの標準策定作業は大企業の意向が強く反映されているとの批判記事が掲載される事がある。

W3CはHTML 4.01の勧告を行った後、XHTMLというものを普及させようと企みました。XHTMLが何なのかは…もう今の時代に学ぶ必要がないことなので割愛しますが、W3C側が強く推していたこれは結局色々あって普及しなかったのでした。

んで、このXHTMLの規格を巡って企業間で対立が起き、W3Cから枝分かれするように誕生したのがWHATWG(Web Hypertext Application Technology Working Group)ってコミュニティです。ワットワーキンググループまたはワットダブルジーと読むそう。

具体的にはAppleやMozilla・Operaのウェブ開発者たちが反旗を翻したわけです。なお、ご存知ない方のために補足しておくと、MozillaはFirefoxの開発元です(更に遡るとNetscapeの後進でもある)。

WHATWG設立が2004年なので、この頃Google Chromeは生まれていませんでしたが後にGoogleもこれに参入します。一方、我が道を行くMicrosoftだけは静観を貫いていたのでした……2017年なってにようやく参加しますが。まあ当時(2004年)つったら完全にIEの天下だったんで静観するのも分からなくはないっすけどねー。

当初はXHTMLについてW3Cと対立していたWHATWGでしたが、互換性や普及度の点において難があったXHTMLに見切りをつけ、1999年にW3C勧告されて以来放置され続けてきたHTMLの仕様を更新するよう方針転換しました。これが後のHTML5になるわけです。

HTML5の登場

このHTML5と過去のHTML(HTML 4.01)との違いは色々あるんですが。一つマークアップ的なところでの大きな違いを上げるとするならば、この記事で説明していたようなheader要素やfooter要素、セクショニング・コンテンツなどが追加されたことです。裏を返せば、従来HTMLではそれらの要素が無かったのです。

ヘッダーもdiv!フッターもdiv!サイドナビもdiv!セクションもdiv!全部div!下手したらtable!ってな具合で、意味上の区分けなど存在せず全てがdiv要素で組まれてたのが過去のHTMLなのでした。

だからそのー…「HTMLの要素にはそれぞれ意味がある」って言ってきたんですけど、それって実はHTML5の時代になってからの話なんすよね。過去のHTMLだとfont要素とかcenter要素とか、文章的な意味合いは特にないただ装飾するためだけの要素とかがザラにあったんで。

あとmarquee要素とかね(厳密にはこれIEが独自に追加したタグなのですが…)

何せ1999年に決められた規格が2014年に手直しされたわけですから、マークアップ的な部分以外でも強化されており、それはもう大層イカしたアップデートだったわけです。で、HTML5はW3Cから勧告されたわけですが…あれ?WHATWGは??

What is HTML 5.X?

元々対立していたW3CとWHATWGですが、なんやかんやあって協力してHTML5を作っていきましょうという形になったのですね。W3CからしたらXHTMLがコケてその地位がグラつきつつあり、WHATWGからしたらW3Cの権威的なものを借りてHTML5を普及させるチャンスだったので双方に利があったわけです。で、これでウェブの未来はめでたしめでたし…と思いきやそうはなりませんでした。

W3Cが定めたHTML5勧告を日本語訳したサイトがあるので見てみましょう。何やら奇妙な注意書きがありますね…。

この仕様は後続のWHATWG HTML仕様によって廃止されています。WHATWG HTML日本語訳も参照することができます。

この仕様の後続仕様として策定を意図されていた、W3CによるHTML 5.15.2および5.3仕様は既に廃止されたか、廃止予定です。詳細については、関連するW3C Newsエントリー等を参照ください。

この日本語訳も歴史的な意義しかなく、それ以外の目的で利用してはなりません。

ま、結論から言いますとW3C勧告したHTML5は廃止されまして、WHATWGが勧告したHTML5(HTML Living Standard)こそがウェブ制作において参照すべき正しい情報になります。

いきさつを説明しますとー。 HTML5を規格として”完成”させることに拘泥したW3C(HTML5をリリース→5.1→5.2にと逐次勧告を予定していた)と、HTML5を時代に応じてアップデート・補強していくべきだと考えていたWHATWG(HTML Living Standardを随時更新していく考え)で微妙に噛み合わないところがあり、なんと仕様面において異なる部分があったのですね。

ルールが二つあったら困るのでどちらかが生き残りどちらかは消える運びとなりまして、この思想バトルの顛末は以下の記事にある通りです。
HTML標準仕様の策定についてW3CとWHATWGが合意 今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に

HTMLとDOMのリビングスタンダード、すなわちつねにアップデートされていく標準仕様はWHATWGがメンテナンスをし、W3Cはそれに協力していくこと、W3Cは今後単独でのHTMLとDOMの仕様策定をやめ、WHATWGの標準仕様がW3Cの勧告になることなどが示されています。

つまり今時HTML 5.2とか言ってる記事とか、HTML5について触れているのにソースがW3Cだったりする記事とかは全部ワザップ正しくない情報ということになります。まあこうした決定がなされたのが2019年6月の出来事なので、ウェブの最新事情を追ってない人は知らない話かもしれませんが。

結局h1要素は複数回使ってもいいのかい?

本題に戻しまして。h1要素を複数回使うのはHTML 4.01の時代ではアウトでした。そしてW3C勧告のHTML5においてもアウトでした。しかし!HTML Living Standard(つまり、現行のHTML5と呼ばれている仕様)においてはh1は複数回使ってもよい、というのが結論でございます。

使い方の例は下記ソース参照。

参考:HTMLのセクションとアウトラインを理解する

ただ、「従来このような書き方がされていなかった」「SEO対策における効果が不安」という意見もあり、中々このh1要素を複数回使う書き方は普及していないのもまた事実であります(2016年頃のまとめですがTogetterでもこんな議論がされてました)。

ま、実際問題GoogleもWHATWGに加入してるんでh1要素を複数回使ったらダメな気がするってのは、「周りがやってないからなんとなくダメな気がする」レベルの杞憂でしかないんですがね。

もしh1要素を複数回使う書き方でマークアップする場合は、これまでの慣習と大きく異なる書き方をしているということを留意しておいた方がよいでしょう。

W3Cの記載を出典に「h1要素を複数回使うなんて間違ってる!」なんて言ってくる時代遅れのウェブ担当者といちいちレスバトルすんのもアホらしいでしょ?ってことで。別にh1要素を複数回使わなくてもマークアップはできるので、まあケースバイケースでどっちか選べばいいんじゃねってのが現状です。