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のみ。

以下のページを持つウェブサイトのセマンティックナビゲーションを作成：
- ホーム
- 会社概要
- サービス（ドロップダウン：コンサルティング、トレーニング、サポート）
- ブログ
- お問い合わせ

要件：
- 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の品質とアクセシビリティをレビュー：

[HTMLを貼り付け]

確認項目：
1. セマンティック要素が正しく使われているか（div地獄ではないか）
2. 見出し階層（h1→h2→h3、レベルのスキップなし）
3. すべての画像に意味のあるalt属性（「画像」や空ではなく）
4. フォーム入力に紐付けられたラベル
5. リンクに説明的なテキスト（「ここをクリック」ではなく）
6. html要素のlang属性
7. レスポンシブデザイン用のmeta viewport
8. インラインスタイル・スクリプトなし
9. 有効なHTML5構造

問題点を列挙し、修正コードを提供。