先生、HTMLの基本は理解できましたが、実際にWebサイトを作る時に気をつけるべきことはありますか？
とてもいい質問だね！HTMLを書けるようになったら、次は「良いHTML」を書く方法を身につける必要がある。これを「ベストプラクティス」と呼ぶんだ。
ベストプラクティスって何ですか？普通にHTMLを書くのとは違うんですか？
ベストプラクティスとは、長年の経験から生まれた「より良いコードを書くための指針」のことだよ。保守しやすく、パフォーマンスが良く、誰にでも使いやすいWebサイトを作るためのルールや習慣なんだ。今日はそれを学んでいこう。
HTMLベストプラクティスとは
HTMLベストプラクティスとは、プロのWeb開発者が長年の経験から培った「高品質なHTMLコードを書くための指針」です。単にWebページが表示されるだけでなく、将来的な保守・拡張、パフォーマンス、ユーザビリティを考慮した、持続可能なHTML設計の方法論です。
HTMLベストプラクティス 3つの柱
保守性
将来的にコードを変更・拡張しやすい設計
パフォーマンス
高速で効率的なWebサイトの実現
アクセシビリティ
誰もが使いやすいWebサイトの設計
結果：すべての人にとって使いやすいWebサイトに！
長期間にわたって価値を提供し続ける、持続可能なWeb体験の実現
保守性
将来的にコードを変更・拡張しやすい設計を実現するための要素です。
- 明確な構造と命名 セマンティックなHTML要素とBEM記法による一貫した命名
- 適切なコメント コードの意図と機能を明確に説明するドキュメント
- モジュール化した設計 再利用可能で独立したコンポーネント構造
- 一貫したコーディング規約 チーム全体で統一されたルールと手法
パフォーマンス
高速で効率的なWebサイトを実現するための最適化手法です。
- 最適化された画像 WebP/AVIF形式とsrcsetによるレスポンシブ画像
- 効率的なリソース読み込み preload、deferによる読み込み順序の最適化
- 軽量なHTML構造 不要な要素を排除したクリーンなマークアップ
- CDNとキャッシュ活用 配信ネットワークとブラウザキャッシュの戦略的利用
アクセシビリティ
誰もが使いやすいWebサイトを設計するための配慮事項です。
- セマンティックHTML 意味のある要素選択による支援技術への適切な情報提供
- 適切なalt属性 画像の内容を的確に説明するテキスト
- キーボード操作対応 マウスを使わない操作環境への配慮
- 高いコントラスト比 視覚に制約のある方にも読みやすい色彩設計
ベストプラクティスを身につけることで、趣味レベルのWebサイトからプロレベルのWebサイトへと品質を向上させることができます。これは単なる技術的なスキルではなく、ユーザーや開発チーム全体への配慮を示すプロフェッショナルな姿勢の現れでもあります。
保守性を高めるHTML設計
構造の明確化
良いHTMLコードの基礎は、明確で理解しやすい構造にあります。HTMLの階層構造は建物の設計図のようなもので、将来の拡張や修正を容易にします。
悪い例：構造が不明確
<div>
<div>ニュース</div>
<div>
<div>記事タイトル</div>
<div>記事内容...</div>
</div>
<div>
<div>記事タイトル2</div>
<div>記事内容2...</div>
</div>
</div> 良い例：セマンティックで明確な構造
<section class="news-section">
<h2>最新ニュース</h2>
<div class="articles-container">
<article class="news-article">
<h3 class="article-title">重要な発表について</h3>
<div class="article-content">
<p>記事の内容をここに記載します...</p>
</div>
</article>
<article class="news-article">
<h3 class="article-title">新サービスのお知らせ</h3>
<div class="article-content">
<p>新サービスの詳細について...</p>
</div>
</article>
</div>
</section>セマンティックHTMLの詳しい使い方については、第5章：セマンティックHTMLで詳しく解説しています。
命名規則の統一
一貫した命名規則は、チーム開発や長期保守において極めて重要です。class属性だけでなく、id属性の命名も統一することで、JavaScriptやCSSからの参照が明確になります。
class属性の命名（BEM記法）
悪い例：class命名が不統一
<div class="productCard">
<div class="Card-Header">
<h3 class="title_product">製品紹介</h3>
<button class="btnClose small-btn">×</button>
</div>
<div class="cardBody">
<p class="product_desc">製品の詳細説明...</p>
</div>
<div class="footer">
<button class="button-primary">詳細を見る</button>
<button class="btn_secondary">後で見る</button>
</div>
</div> 良い例：BEM記法による統一命名
<div class="card">
<div class="card__header">
<h3 class="card__title">製品紹介</h3>
<button class="card__close-btn card__close-btn--small">×</button>
</div>
<div class="card__body">
<p class="card__description">製品の詳細説明...</p>
</div>
<div class="card__footer">
<button class="card__action-btn card__action-btn--primary">詳細を見る</button>
<button class="card__action-btn card__action-btn--secondary">後で見る</button>
</div>
</div>id属性の命名規則
悪い例：id命名が不統一
<form>
<!-- 命名規則がバラバラ -->
<input type="text" id="UserName">
<input type="email" id="user_email">
<input type="tel" id="phone-number">
<textarea id="MESSAGE_CONTENT"></textarea>
<button type="submit" id="btn1">送信</button>
</form> 良い例：kebab-caseによる統一命名
<form id="contact-form">
<!-- 全て kebab-case で統一 -->
<input type="text" id="contact-name">
<input type="email" id="contact-email">
<input type="tel" id="contact-phone">
<textarea id="contact-message"></textarea>
<button type="submit" id="contact-submit">送信</button>
</form>- class命名（BEM記法） Block__Element—Modifier の形式で一貫性を保つ
- id命名（kebab-case） ハイフン区切りの小文字で統一（例：
main-content） - 接頭辞の活用 用途に応じて接頭辞を付ける（例：
js-toggle、form-input） - 意味のある名前 見た目ではなく機能や目的を表現する名前を選択
適切なコメントの活用
実用的なコメントは、コードの意図を明確化し、将来のメンテナンスを効率化します。現場では簡潔で必要最小限のコメントが好まれます。
悪い例：不要なコメント
<!-- ここからナビゲーション開始 -->
<nav>
<!-- リスト開始 -->
<ul>
<!-- ホームリンク -->
<li><a href="/">ホーム</a></li>
<!-- 会社概要リンク -->
<li><a href="/about">会社概要</a></li>
</ul>
<!-- リスト終了 -->
</nav>
<!-- ナビゲーション終了 -->- HTML要素の役割が明確なのに冗長なコメント
- 単純な構造に対する過度な注釈
- コードの可読性を下げる情報量の多さ
良い例：必要な情報のみのコメント
<!-- メインナビゲーション：モバイルでハンバーガーメニューに変化 -->
<nav class="main-navigation" aria-label="メインメニュー">
<!-- JavaScript でトグル制御 -->
<button class="nav__hamburger" aria-expanded="false" aria-controls="nav-menu">
<span class="nav__hamburger-line"></span>
<span class="nav__hamburger-line"></span>
<span class="nav__hamburger-line"></span>
</button>
<ul id="nav-menu" class="nav__menu">
<li><a href="/" class="nav__link">ホーム</a></li>
<li><a href="/about" class="nav__link">会社概要</a></li>
<li><a href="/contact" class="nav__link">お問い合わせ</a></li>
</ul>
</nav>- 複雑なレスポンシブ動作の説明（ハンバーガーメニューへの変化）
- JavaScript/CSSとの連携ポイントを明示
- コードだけでは分からない動的な挙動を補足
- 簡潔で必要最小限の情報のみを記載
最適なコメントの5つの基準
- 意図の説明 コードから読み取れない「なぜそうするのか」を説明する
- 動作の補足 JavaScriptやCSSとの連携、レスポンシブ対応などの動的な挙動を明記
- 制約・注意事項 将来の変更時に気をつけるべきポイントや制限事項
- 簡潔性 必要最小限の文字数で要点を伝える（冗長な説明は避ける）
- メンテナンス性 後から見た人（未来の自分を含む）が理解しやすい表現
パフォーマンス最適化の基本
効率的なリソース管理
Webサイトのパフォーマンスは、ユーザーエクスペリエンスに直結する重要な要素です。HTMLレベルでの最適化が基盤となります。
<!-- パフォーマンスを考慮したHTML -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 重要なリソースを優先読み込み -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- クリティカルCSSをインライン化 -->
<style>
/* 初期表示に必要な最小限のCSS */
body { font-family: system-ui; margin: 0; }
.header { background: #fff; padding: 1rem; }
</style>
<!-- 非クリティカルCSSは遅延読み込み -->
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">
</head>
<body>
<!-- コンテンツ... -->
<!-- JavaScriptは後から読み込み -->
<script src="/js/main.js" defer></script>
</body>
</html> インラインCSSとpreloadの使い分け
- インラインのみ 小規模/初期表示最優先でHTTP往復を最小化
- preload + 外部CSS 共有スタイルをキャッシュ活用したい中〜大規模
- 併用 Above the Fold最小限をインライン + 残りを通常読み込み
この例では説明を簡潔にするため critical.css の preload を省略し、最小限スタイルのみインライン化しています。長期保守か初期表示速度か、目的に応じて選択しましょう。
リソースの優先読み込み（preload）
重要なリソースを最優先で取得し、ページ読み込み速度を向上させる技術です。
<!-- フォントファイルの事前読み込み -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- 重要なCSSファイルの事前読み込み -->
<link rel="preload" href="/css/critical.css" as="style">- preload ブラウザにリソースを最優先で取得するよう指示
- crossorigin フォント読み込み時のCORS対応（必須）
- as属性 リソースタイプを明示してブラウザの最適化を支援
クリティカルCSSのインライン化
初期表示に必要な最小限のスタイルをHTMLに直接埋め込む手法です。
<style>
/* 初期表示に必要な最小限のCSS */
body { font-family: system-ui; margin: 0; }
.header { background: #fff; padding: 1rem; }
</style>- クリティカルCSS ページの初期表示（Above the Fold）に必要なスタイル
- インライン化 HTTPリクエストを削減し、即座にスタイルを適用
- 最小限に抑制 ファイルサイズ増加を避けるため必要最小限のみ記述
非クリティカルCSSの遅延読み込み
初期表示に不要なスタイルを後から非同期で読み込む最適化技術です。
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">- media=“print” 一時的にメディアクエリを偽装してダウンロードのみ実行
- onload=“this.media=‘all’” 読み込み完了後に全メディアに適用
- 非ブロッキング ページの初期描画を遅延させない
JavaScriptの遅延実行
HTML解析を妨げないよう、スクリプトの実行タイミングを制御する手法です。
<script src="/js/main.js" defer></script>- defer属性 HTML解析完了後にスクリプトを実行
- async vs defer deferは順序保持、asyncは並列実行
- ページ下部配置 HTML解析のブロックを避ける
画像の最適化
適切な画像最適化は、ページ読み込み速度に最も大きな影響を与える要素の一つです。
<!-- ✅ 最適化された画像の実装 -->
<!-- レスポンシブ画像（srcset使用） -->
<img
src="/images/hero-800.webp"
srcset="
/images/hero-400.webp 400w,
/images/hero-800.webp 800w,
/images/hero-1200.webp 1200w,
/images/hero-1600.webp 1600w
"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="製品の詳細画像：高品質な素材を使用したデザイン"
loading="lazy"
decoding="async"
width="800"
height="600">
<!-- 重要な画像は事前読み込み -->
<link rel="preload" as="image" href="/images/logo.webp">
<!-- Picture要素での形式最適化 -->
<picture>
<source srcset="/images/banner.avif" type="image/avif">
<source srcset="/images/banner.webp" type="image/webp">
<img src="/images/banner.jpg" alt="キャンペーン情報" loading="lazy">
</picture>レスポンシブ画像（srcset・sizes）
デバイスの画面サイズに応じて最適な解像度の画像を自動選択する技術です。
<img
src="/images/hero-800.webp"
srcset="
/images/hero-400.webp 400w,
/images/hero-800.webp 800w,
/images/hero-1200.webp 1200w,
/images/hero-1600.webp 1600w
"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="製品の詳細画像：高品質な素材を使用したデザイン"
loading="lazy"
decoding="async"
width="800"
height="600">- srcset属性 複数の解像度の画像を用意し、ブラウザが自動選択
- sizes属性 画面サイズに応じた表示幅を指定
- 400w, 800w 画像の実際の幅をピクセル単位で指定
- loading=“lazy” 画面に表示される直前に画像を読み込み（遅延読み込み）
- decoding=“async” 画像デコード処理を非同期で実行し、レンダリングをブロックしない
- width/height属性 レイアウトシフト防止のため画像サイズを明示
- 帯域幅削減 小さな画面には小さな画像を配信して通信量を節約
重要画像の事前読み込み
ユーザーが最初に目にする重要な画像を優先的に読み込む手法です。
<!-- head内で重要画像を事前読み込み -->
<link rel="preload" as="image" href="/images/logo.webp">- preload指定 ブラウザに重要度の高い画像として認識させる
- LCP改善 Largest Contentful Paint（最大コンテンツ表示時間）を短縮
- ヒーロー画像 ファーストビューの大きな画像に適用
- ロゴ・アイコン 即座に表示したいブランド要素に活用
次世代画像形式の活用
従来のJPEG/PNGより大幅に軽量な画像形式を使用する最適化手法です。
<picture>
<source srcset="/images/banner.avif" type="image/avif">
<source srcset="/images/banner.webp" type="image/webp">
<img src="/images/banner.jpg" alt="キャンペーン情報">
</picture>- AVIF形式 最新の画像形式で最高の圧縮率を実現
- WebP形式 従来形式より30-50%軽量化が可能
- フォールバック 古いブラウザ向けにJPEG/PNGを用意
- picture要素 ブラウザ対応状況に応じて最適な形式を自動選択
アクセシビリティの実装
すべての人が使いやすいWebサイトを作るためには、アクセシビリティを考慮したHTML設計が不可欠です。これは特別な機能ではなく、正しいHTMLマークアップの基本でもあります。
アクセシビリティって具体的にはどんなことを気をつけるんですか？
アクセシビリティについては第5章で詳しく解説しているけれど、ここでは特に重要なポイントを確認しておこう。まずは基本的な考え方から始めよう。
アクセシビリティの基本原則
- alt属性の適切な使用 画像には説明テキスト、装飾画像には空文字を指定
- 見出し構造の論理化 h1→h2→h3の順序を守り、文書構造を明確に
- フォーカス管理 キーボード操作で現在位置が分かるようにする
- ARIA属性の補完 HTMLだけで伝えられない情報を適切に補足
- 色に依存しない情報設計 色以外でも重要な情報が伝わるように
実装例
<!-- 基本的なアクセシビリティ対応 -->
<main>
<article>
<header>
<h1>ニュース記事のタイトル</h1>
<time datetime="2025-09-11">2025年9月11日</time>
</header>
<!-- 適切なalt属性 -->
<img src="chart.png" alt="売上データのグラフ：1月から12月まで右肩上がり">
<!-- フォーカス可能な要素 -->
<button aria-label="記事をお気に入りに追加">
<i class="fas fa-heart" aria-hidden="true"></i>
</button>
<!-- 関連リンク -->
<a href="/articles/related">関連記事：Web開発のトレンド</a>
</article>
</main> 詳しいアクセシビリティ学習
アクセシビリティの詳細な技術と実践方法については、以下で包括的に学習できます：
- alt属性の正しい書き方と使い分け
- 見出し構造の重要性と論理的階層
- キーボードナビゲーションの実装
- ARIA属性の使い方と注意点
- スクリーンリーダー対応の具体的手法
- 実装例と理解度チェック
アクセシビリティは「思いやりの技術」です。基本から応用まで体系的に学んで、すべての人が使いやすいWebサイトを作りましょう。
実践：小さなリファクタ課題
学んだ内容をすぐ手を動かして定着させよう。以下のマークアップを改善して、セマンティック・命名・アクセシビリティ・パフォーマンス（画像lazy）を意識した構造に書き換えてみてね。
改善前コード
<div class="wrap">
<div class="box1">記事</div>
<div class="list">
<div class="itm">
<div class="ttl">夏祭りのお知らせ</div>
<img src="matsuri.png">
<div class="txt">8月開催予定</div>
</div>
<div class="itm">
<div class="ttl">新製品発売</div>
<img src="product.png">
<div class="txt">近日公開</div>
</div>
</div>
</div>- 観点 セマンティック要素 / BEM記法 / alt属性 / 見出し階層 / lazy
- 目的 構造の意味付与と保守性・読みやすさ向上
- 注意 目的が明白なdiv羅列を避ける
HTMLコード:
<section class="articles" aria-labelledby="latest-articles-title">
<h2 id="latest-articles-title" class="articles__heading">最新情報</h2>
<ul class="articles__list">
<li class="articles__item">
<article class="article" aria-labelledby="article-matsuri-title">
<h3 id="article-matsuri-title" class="article__title">夏祭りのお知らせ</h3>
<img src="matsuri.png" alt="夏祭りの屋台イメージ" loading="lazy" class="article__image" />
<p class="article__summary">8月開催予定</p>
</article>
</li>
<li class="articles__item">
<article class="article" aria-labelledby="article-product-title">
<h3 id="article-product-title" class="article__title">新製品発売</h3>
<img src="product.png" alt="新製品の外観" loading="lazy" class="article__image" />
<p class="article__summary">近日公開</p>
</article>
</li>
</ul>
</section>理解度チェッククイズ
HTMLベストプラクティスについて学んだことを確認してみよう。実際のHTML作成で役立つ知識ばかりだよ。
HTMLベストプラクティス理解度チェック
HTMLベストプラクティスの3つの柱として正しい組み合わせはどれですか？
次のclass命名規則で、BEM記法として正しく記述されているのはどれですか？
<!-- ① -->
<div class="card">
<h3 class="card__title">タイトル</h3>
<p class="card__content card__content--large">内容</p>
</div>
<!-- ② -->
<div class="card">
<h3 class="card-title">タイトル</h3>
<p class="card-content large">内容</p>
</div>パフォーマンス最適化において、重要でない画像に推奨される属性はどれですか？
次のHTML構造で、最も保守性とアクセシビリティが高いコードはどれですか？
<!-- ① -->
<div id="main-article">
<div class="big-text">記事タイトル</div>
<img src="image.jpg">
<div>記事の内容...</div>
</div>
<!-- ② -->
<article class="news-article">
<h1 class="article__title">記事タイトル</h1>
<img src="image.jpg" alt="記事に関連する画像の説明">
<div class="article__content">記事の内容...</div>
</article>レスポンシブ画像でsrcset属性を使用する主な目的は何ですか？
HTMLのコメントを書く際のベストプラクティスとして最も適切なのはどれですか？
まとめ
ベストプラクティスって、最初は覚えることが多くて大変そうに思えましたが、実際は論理的で理にかなったルールなんですね。
保守性、パフォーマンス、アクセシビリティの3つの観点で考えると、何をすべきかが明確になりますね。
ベストプラクティスは闇雲に覚えるものではなく、「なぜそうするのか」の理由があるんだ。これらの習慣を身につけることで、君たちのHTMLスキルは確実にプロレベルに近づいていくよ。
今日学んだHTMLベストプラクティス要点
- 保守性向上の技術 BEM記法による命名規則（Block__Element—Modifier）、セマンティックHTML要素の選択、適切なコメントの書き方
- パフォーマンス最適化 loading=“lazy”による画像遅延読み込み、srcsetとsizesによるレスポンシブ画像、preloadによる重要リソースの優先読み込み
- アクセシビリティ実装 意味のあるalt属性の記述、キーボード操作対応、適切なHTML構造による支援技術への対応
- 実践的な使い分け 場面に応じた技術選択、チーム開発での規約統一、継続的な品質向上
- プロレベルの思考 ユーザー視点での設計、長期的な保守性の考慮、技術的根拠に基づく判断
次回は、これまで学んだHTMLの全技術を活用した最終プロジェクトに挑戦します。君だけのオリジナルWebサイトを作って、HTMLマスターの道を完成させよう！