AIでHTML構造を設計する
AIでセマンティックHTMLを構築する——ページ構造、フォーム、ナビゲーション、アクセシビリティ、SEOに強いマークアップ。
プレミアムコースコンテンツ
このレッスンはプレミアムコースの一部です。Proにアップグレードすると、すべてのプレミアムコースとコンテンツを利用できます。
- すべてのプレミアムコースを利用
- 1,000以上のAIスキルテンプレート付き
- 毎週新しいコンテンツを追加
セマンティックHTML:意味のある構造
🔄 Quick Recall: 前のレッスンではAI活用Web開発のワークフロー(計画→プロンプト→レビュー→テスト→反復)を学んだ。ここからは実践——まずはすべての土台であるHTML構造。
HTMLは画面に表示するためだけのものではない——コンテンツに意味を与えるためにある。AIはどんなHTMLでも生成できるが、品質は構造をどれだけうまく説明できるかに依存する。
ページスケルトン
すべてのウェブページは同じ基盤から始まる:
[ページタイプ:ランディングページ / ブログ記事 / ポートフォリオ / 製品ページ]の
セマンティックHTML5ページ構造を作成。
含める要素:
1. DOCTYPEとhtml lang属性
2. Head: meta charset、viewport、title、meta description
3. Bodyのセマンティック要素:
- header(サイトブランディング+ナビゲーション)
- main(メインコンテンツ領域)
- footer(著作権、リンク、連絡先)
4. 必要なランドマークロール
5. アクセシビリティ用スキップナビゲーションリンク
CSS・JavaScriptは含めない——クリーンなセマンティックHTMLのみ。
✅ Quick Check: なぜプロンプトで「CSS・JavaScriptなし」と指定するのか?
関心を混ぜた早期のプロンプトは散漫なコードを生む。AIがHTML、CSS、JavaScriptを一緒に生成すると、スタイリングを速くするためにHTML構造の手を抜きがちだ。HTMLのみをリクエストすることで、適切なセマンティクスとアクセシビリティ——他のすべてが依存する基盤——に集中させる。
ナビゲーション
ナビゲーションは正しく作るのが最も複雑なHTMLコンポーネント:
以下のページを持つウェブサイトのセマンティックナビゲーションを作成:
- ホーム
- 会社概要
- サービス(ドロップダウン:コンサルティング、トレーニング、サポート)
- ブログ
- お問い合わせ
要件:
- nav要素にaria-label付き
- 順序なしリスト構造
- ドロップダウンはキーボードアクセシブル
(Enter: 開く、Escape: 閉じる、矢印キー: ナビゲーション)
- ドロップダウントリガーにaria-expandedとaria-haspopup
- 現在のページをaria-current="page"でマーク
- モバイル対応構造(CSSは後で追加)
HTMLのみ——CSS・JavaScriptはまだ書かない。
誰にでも使えるフォーム
フォームはアクセシビリティが最も重要な場所:
[目的:お問い合わせ / 登録 / 決済 / アンケート]用のHTMLフォームを作成。
フィールド:
1. [フィールド名] — [タイプ: text/email/tel/select/textarea/checkbox/radio] — [必須/任意]
2. [フィールド名] — [タイプ] — [必須/任意]
3. [繰り返し]
アクセシビリティ要件:
- すべてのinputにfor/idで紐付けたlabel要素
- 必須フィールドにaria-required="true"と視覚的表示
- 各inputにaria-describedbyで紐付けたエラーメッセージコンテナ
- 関連グループ(ラジオボタン、チェックボックス)にfieldset/legend
- 送信ボタン(input type="submit"ではなくbutton)
- aria-labelまたはaria-labelledbyによるフォームのアクセシブル名
プレースホルダーは価値がある場合のみ(ラベルの代替としてではない)。
コンテンツセクション
記事とブログ投稿の構造
ブログ記事ページのセマンティックHTMLを作成:
コンテンツ構造:
- 記事タイトル(h1)
- 著者名と公開日(time要素使用)
- アイキャッチ画像(説明的なalt属性付き)
- 記事本文:
- h2見出し付きの3〜4セクション
- 引用ブロック
- 順序付きリスト
- コードスニペット(pre + code要素使用)
- タグ/カテゴリセクション
- 著者紹介ボックス
- 関連記事セクション(タイトル、抜粋、リンク付きカード3枚)
article、section、aside、figure、figcaption、time要素を適切に使用。
カードとリスティングページ
[製品 / ブログ記事 / チームメンバー / ポートフォリオ]のリスティングページの
セマンティックHTMLを作成:
ページ構造:
- ページ見出し(h1)とアイテム数
- フィルター/ソートコントロール(form要素使用)
- カードのグリッド、各カード:
- alt属性付き画像
- タイトル(h3、リンク付き)
- 概要
- [メタデータ:価格 / 日付 / 役割 / タグ]
- CTAリンクまたはボタン
- ページネーション(aria-label="ページネーション"付きnav要素)
カードグリッドに順序なしリスト(各カードにli)。各カードはarticle要素。
HTML検証チェックリスト
AIがHTMLを生成した後、このチェックリストを実行:
このHTMLの品質とアクセシビリティをレビュー:
[HTMLを貼り付け]
確認項目:
1. セマンティック要素が正しく使われているか(div地獄ではないか)
2. 見出し階層(h1→h2→h3、レベルのスキップなし)
3. すべての画像に意味のあるalt属性(「画像」や空ではなく)
4. フォーム入力に紐付けられたラベル
5. リンクに説明的なテキスト(「ここをクリック」ではなく)
6. html要素のlang属性
7. レスポンシブデザイン用のmeta viewport
8. インラインスタイル・スクリプトなし
9. 有効なHTML5構造
問題点を列挙し、修正コードを提供。
✅ Quick Check: なぜ「見出しレベルのスキップなし」を確認するのか?
スクリーンリーダーユーザーは見出しレベルでナビゲートする——目次のようにh1からh2、h3へとジャンプする。h1からh3に飛ぶとギャップができ、ナビゲーションが混乱する。見出し階層はビジュアルの装飾(それはCSSの仕事)ではなく、支援技術が依存するドキュメント構造だ。
演習:ページ構造を構築
- ページタイプを選ぶ(ランディングページ、ブログ記事、またはポートフォリオ)
- ページスケルトンプロンプトでベースHTMLを生成
- ドロップダウン付きナビゲーションコンポーネントを追加
- ページタイプに適したコンテンツセクションを追加
- 完成したHTMLに検証チェックリストを実行
- ファイルをブラウザで開く——スタイルはないが、コンテンツ構造が論理的で完全なはず
Key Takeaways
- セマンティックHTML(header, nav, main, article, footer)はブラウザ、スクリーンリーダー、検索エンジンに意味を伝える——divベースのレイアウトは何も伝えない
- HTMLをCSS・JavaScriptと分離して生成し、AIに適切な構造とアクセシビリティに集中させる
- 詳細なフォームプロンプト(フィールドタイプ、バリデーション、ラベル、エラー配置)で本番品質のフォームを得る
- すべての画像にalt属性、すべてのフォーム入力にラベル、すべての見出しに階層——AI生成後に毎回検証する
- ナビゲーションにはキーボードアクセシビリティ(Enter, Escape, 矢印キー)とARIA属性が必要——プロンプトで明示的にリクエストする
- AI生成HTMLにスタイルや動作を追加する前にアクセシビリティ検証を実行する
Up Next: 次のレッスンでは、HTML構造にCSSを追加する——レスポンシブレイアウト、モダンなスタイリングテクニック、あらゆるデバイスで動くデザインシステム。
理解度チェック
まず上のクイズを完了してください
レッスン完了!