1. TOP
  2. WEBサイト制作
  3. 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 2〜レイアウト編〜

【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 2〜レイアウト編〜

 2018/03/19 WEBサイト制作 コーディング Fumio Sakurai
この記事は約 14 分で読めます。 516 Views

サイト制作の肝「レイアウト」について

見やすいサイトにするためには、ユーザーにとって見やすいレイアウトを考えなければなりません。

同時にサイトを検索でひかかりやすくするためには、検索エンジン(Google)のマシンが理解しやすい構造にする必要があります。

検索エンジンは「ユーザーが必要としている情報にたどり着きやすいか」という視点で行動します。

なので、レイアウト構造がどうなっているのかをまず見ていきましょう。

基本レイアウト(サイトの骨格)

html5 マークアップ例(PC・スマホ比較)

左がパソコン、右がスマホでの基本的なレイアウトです。

以下の3点がポイントです。

  • スマホでは、navタグはメニュー内に格納する(メニューボタンを押したら表示)
  • スマホでは、asideタグはmainタグの下に配置する。(asideはメインの補足だから)
  • header → main → footerの流れはどんなときも崩してはいけない

本メディアのレイアウト構造はこのようになっています。

記事一覧ページでは、ユーザーの回遊率を高めるためにこのようなレイアウトが一般的です。

ユーザーの回遊率とは、ユーザーが1回のアクセス(セッション)でサイト内のページをどれだけ見たかという指標です。

サイトの目的は待っているユーザーに「情報を伝える」ことなので、回遊率が高いほど、ユーザーに価値を感じてもらっていると言えるでしょう。

HTML5マークアップ実例|StakeholderSuccess

 

基本レイアウトで使用するタグ一覧<HTML5準拠>

サイトの構造を検索エンジンに伝える時、主に以下の7つのタグを使います。

header ヘッダー ・サイトのロゴ/サービス名
・キャッチ画像/動画
nav ナビゲーション ・ナビゲーションメニュー
・コンタクト情報
・アクセス情報
main メイン ・記事などのコンテンツ
・サイトの中身の説明
aside アサイド ・サイドバー
・補足説明
・関連する記事
・広告など
footer フッター ・会社(運営者)情報
・個人情報保護規定
・プライバシーポリシー
・サイトマップ
・フッターロゴ
section セクション ・意味や機能のひとまとまり
・章など
article アーティクル ・記事

HTML5から実装されたこれらのタグはサイトの構造を検索エンジンに伝えやすくするために生まれました。

以前は、<div id=”header”>…</div>といった形で、idなどで使いわけながらも、基本的にはブロック要素である<div>で全てをレイアウトしてしまっていたため、コーダーごとに使い方もバラバラで、検索エンジンにサイトの構造をきちんと伝えることができませんでした。

2018年現在は主要ブラウザは全てHTML5準拠になっています。

逆に言えば、HTML5できちんとマークアップ(構造化)していなければ、検索エンジンからは「見づらいサイト」と認識されてしまうことになります。

非常にシンプルな内容なので、この機会にきちんと理解して忘れずに対応しましょう。

以下それぞれのタグの使い方のポイントを解説します。

① header<ヘッダー>タグ

headerタグとは

headerタグは、ヘッダーを表すために用います。

ヘッダーとは、どのページや、どの記事においても常に上部に表示されるものを指します。

ヘッダータグ設置のポイント

ヘッダーを設置する際には、主に以下の点を意識します。

  1. WEBページを目立たせる(アイキャッチ画像など)
  2. ブランドを認知させる(ロゴの設置など)
  3. CTA:ユーザーが行動しやすくする(お問い合わせ・申込)

ブランディングにおいては「価値観」を明確に打ち出していくことが非常に重要であり、

ヘッダーは必ず上部に表示されることから、ユーザーの目に止まり易いです。

「人の第一印象は会ってから3〜5秒で決まり、見た目の影響が55%」で有名な「メラビアンの法則」同様、サイトにおいても第一印象は非常に重要です。

その第一印象を左右するのがヘッダーなのです。

使い易いヘッダーとUX

そのヘッダーを目立たせる方法として、最近主流となっているのが、

「ヘッダー要素(の一部)」を画面上部に固定表示する

方法です。

具体的な実例は以下のサイトがわかりやすいです。(javascriptで実装)

グローバルナビをスクロール時に固定する方法

実装例はこちらをご確認ください。

ヘッダーにメニューを設置しておくことで、ユーザーは他のメニューに遷移しやすくなり「回遊率」の向上にも役立ちます。

要は、ユーザーにとって使いやすく設計されていることが重要なのです。

この考え方をUX(ユーザーエクスペリエンス)と言います。

顧客体験を向上させることは、ユーザーを囲い込むために必須です。

日ごろから使いやすいサイト、使いにくいサイトの違いを意識する習慣をつけることがUXスキル向上に役立ちます。

ヘッダーのサイズ

4G(LTE)を代表とする通信の高速化により、高画質・大サイズの画像の表示ができるようになり、ヘッダーに大きな画像を表示するサイトが増えてきました。

ただ大きすぎる画像は、ユーザーがスクロールしなければならない量を増やしてしまうことになり、閲覧する人が逆に不快になることも有ります。

1つの画面にどこまでの情報を表示するのかを意識する癖をつけましょう。

② nav<ナビ>タグ

navタグとは

navタグは、ページ内の主要なナビゲーションであることを示します。

主要ナビゲーションとは、以下のようなリンクのまとまりを指します。

  • サイト内で共通で使われているグローバルナビゲーション
  • ブログのサイドメニューにあるカテゴリー一覧など
  • 現在見ているページを示すパンくず

navタグの設置について

navタグは、その性質上以下の3箇所に設置するケースが多いです。

  • headerタグ内に、グローバルナビゲーションとして設置
  • asideタグ内に、サイドメニューとして設置
  • headerタグまたはmainタグ内に、パンくずとして設置

navタグは「主要なナビゲーション」を示すために使うため、使いすぎないように、1ページあたり上記の3つを目安にするのがいいと思います。

参考:[HTML5] 新要素まとめ【2014/2/14版勧告候補】

③ main<メイン>タグ

mainタグとは

mainタグは、ページのメインコンテンツであることを示します。

メインコンテンツとは以下の2点を満たすものを指します。

  • ページの主題となる内容(コンテンツ)である
  • そのページ固有のものである

この点で重要になってくるのが以下の記事で解説した「カノニカル」の設定です。

SEO対策もバッチリなhead&meta要素(2018決定版)

mainタグ内の内容は「固有」であるべきなのに、同じような内容のページがたくさんある場合、検索エンジンは、コンテンツの質が低いと判断します。

mainタグ設置のポイント

mainタグはその性質上、設置の際に以下の2点を気をつけてください。

  • mainタグは、1ページで1つしか使えません。
  • mainタグは、headerタグ, navタグ, footerタグ, asideタグの「子タグ」にはなれません。

以上のようなルールは、W3Cという、よりスムーズな開発や品質向上を目標にWeb技術の標準化を行う非営利団体により、ガイドラインとして示されています。

④ aside<アサイド>タグ

 asideタグとは

asideタグは、その部分が内容(コンテンツ)に対する「補足」や「余談」であることを示します。

この補足や余談とは、内容とは関連しているが区別して表示すべき内容のことです。

例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。

asideタグ設置のポイント

asideタグは主に「サイドバー」で使うことが多いタグです。

その際に、よく悩むケースとして「広告枠」の取り扱いがあります。

大きくは以下の2通り考えられると思います。

  1. サイドバー内の広告(コンテンツとの関連性は低い
  2. コンテンツに関連するバナー広告など

上記の通り、asideタグは、コンテンツとの関連性を表します。

なので、コンテンツとの関連性を中心に以下のように設置することが望ましいです。

(困ったら無理にasideを使わなくてもsectionやdivでも大丈夫です。)

1のサイドバー自体をasideで作成する場合に含まれている広告は、メインコンテンツとの関連性が低い場合が多いので、sectionかdivで囲えばいいと思います。

2のコンテンツに関連するバナー広告の場合は、asideを使うことで関連性を表すことができます。

下記のコードサンプルは、記事(article)の中に、タイトルとコンテンツがあり、それに付随するバナー広告も記事のまとまりとして表示するケースです。

以上のように、asideタグは関連性を意識して運用することが重要です。

サイドバー以外の項目については、そこまで無理に使わなくてもいいと思います。

⑤ footer<フッター>タグ

footerタグとは

footerタグは、ページ全体のフッターや、section・articleのフッターを示します。

フッターとは、以下のようなページに付随する情報のことを指します。

  • 作者/運営者の情報
  • コピーライト
  • 関連ページへのリンク
  • サイトマップ

footerタグ設置のポイント

footerタグはその性質上以下の3点に気をつけて設置してください。

  • footerタグは、一般的にページまたはそのsection・articleの最後に情報を記載します。
  • footerタグは、ページ内で複数使うことができます。
  • footerタグは、headerタグ、mainタグ、footerタグを内包してはいけません。

Wordの文書作成でよく目にするヘッダーとフッターと基本的な意味は同様です。

また、footerタグに設置するサイトマップは、ユーザーだけではなく検索エンジンがサイト構造を理解する上でも重要です。

なるべくサイトマップは設置するようにしましょう。

⑥ section<セクション>タグ

sectionタグとは

sectionタグは、ページ内のその部分が、1つのセクションであることを示します。

セクションとは、文書やウィジェットなど、意味や機能のひとまとまりのことです。

sectionタグ設置のポイント

sectionタグは、一般的なセクションを定義するタグなので、上記にて解説してきた各タグ(header, nav, main, aside, footer)のように用途を限定されません。

そのため設置には以下のポイントを意識してください

  • レイアウト目的で用いるなら、sectionタグではなく、divタグを使用する
  • sectionは意味のまとまりなので、原則、見出しをつける(見出しをつけることができない場合は、適切ではない)
  • 上記2点をクリアして、セクションであることが明確な場合であっても、より具体的な意味をもつ(header, article, footer, aside, nav)の方がふさわしい場合は、これらのタグを利用する

sectionについては特にarticleとの使いわけで悩むケースが多いため、こちらは後ほど解説します。

⑦ article<アーティクル>タグ

articleタグとは

articleタグは、以下のように内容が単体て完結するセクションであることを示します。

  • 記事
  • ブログのエントリ
  • コメント
  • フォーラムの投稿

articleタグ設置のポイント

articleタグは記事を指すので、1ページに1つだと思っている人をよく見かけます。

しかし、以下のような場合は、articleタグは1ページに複数使います。

  • articleタグで括られたブログのエントリ内に、articleタグで括られたコメントがある場合
  • 記事一覧ページなど、複数の記事が並んでいる場合

記事一覧については、sectionタグとの使い分けをする際にいい題材です。

sectionタグとarticleタグの使いわけ

使い分けのポイント

sectionタグとarticleタグの使い分けについて迷う人が大勢います。

ポイントは以下の2つです。

  • 内容が単体で完結するならarticle(記事・コメント・投稿など)
  • sectionタグ内にarticleタグがあっても、逆にarticleタグ内にsectionタグがあってもいい。

①記事一覧の場合

上記のコードは、新着記事一覧という「記事」の中に、「記事1」と「記事2」が含まれているという構造を検索エンジンに伝える構成になっています。

(※上記のように記事を並べる場合は、h1タグを1ページ内で複数使っても構いません:記事が完結しているため)

②サイトのTOPページなどに記事の埋め込みをする場合

上記のコードは、サイトなどのTOPに記事を引用して設置しているケースです。

以上の2パターンで見てきたように、sectionとarticleはどちらが親タグで、どちらが子タグになるかが自動的に決まっている訳ではありません。

どのような意味のまとまりで考えるのか。

この意味のまとまりという癖付けを意識してください。

ブロック(レベル)要素とインライン要素

レイアウト要素の最後は、ブロックレベル要素とインライン要素についてです。

(参照)HTMLクイックリファレンス「ブロックレベル要素とインライン要素」

htmlの<body> ~ </body>の要素の大半は、ブロックレベル要素とインライン要素に分けられます。

ブロックレベル要素について

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。

ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

覚えておくべきブロック要素は以下の通りです。

  • div
  • p
  • h1 ~ h6
  • form(フォーム)
  • ol
  • ul
  • table
  • blockquote(引用)

フォームについては、この講座のPart3で解説します。

インライン要素について

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。

例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。

一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

覚えておくべきインライン要素は以下の通りです。

  • a
  • span
  • img
  • strong
  • フォームで使うもの(input, textarea, select, label, button)

ブロックレベル要素とインライン要素の決まりごと

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。

一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。

まとめ

昔はレイアウトといえば、divをこねくり回していました。

それを意味要素ごとに使い分けるというのがHTML5の一番の特徴ですね。

こうやってまとめ直していると、CSS3の登場で、使われなくなったhtmlタグのあまりの多さに驚きます。

コーディングの世界もまさに適者生存ですね。

 

Make the world better place

シェア大歓迎です!

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • CSSトレーニング①「レスポンシブで崩れにくいレイアウトの基本」

  • 事業家に必要な「置換え」スキル

  • サイト制作における「断捨離」

  • スマホ・PCのデザインはどう違うか

  • 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 3〜コンテンツ・SNS連携編〜

  • レスポンシブデザインについて