Components: Tab & Accordion

タブとアコーディオンの実装ガイド。コンテンツを整理し、過剰な縦スクロールを減らします。2つのレイアウトパターン：縦方向アコーディオン（FAQ形式、積み重ね）と横方向タブ（ハウツー形式、横並び）。どちらもスクロールを減らしてUXを向上させます。SEOへの影響は実装とコンテンツの配置に左右されます。

呼び出し時: 初回使用時は、必要に応じてこのスキルがカバーする内容と重要性について1～2文で開始してから、メイン出力を提供します。以降の使用時またはユーザーがスキップを要求した場合は、メイン出力に直接進みます。

レイアウトパターン

パターン	レイアウト	最適用途	例
縦方向アコーディオン	積み重ね；一度に1つ展開/折りたたみ	FAQ、Q&A、長いリスト、異議処理	「返品方法は？」 → 下に回答
横方向タブ	横並びラベル；1つのパネルのみ表示	ハウツーステップ、製品仕様、価格階級、比較	「ステップ1 | ステップ2 | ステップ3」または短いアクションラベル（howto-section-generator を参照—ラベルはH2の意図と一致するべき；固定の「N ステップ」タイトルと矛盾してはいけない）

モバイル: 縦方向アコーディオンは小画面（自然なスクロール）で機能します。横方向タブは窮屈に見える可能性があります—アコーディオン、ドロップダウン、またはスクロール可能な全幅タブバーを検討してください。

SEO: SEOフレンドリーか？

Googleの立場: Googleはタブとアコーディオン内のコンテンツを完全にインデックスしてランク付けします。隠れたコンテンツには完全な重みが付与されます（2016年のモバイルファーストインデックス以来確認済み）。Gary Illyes：「コンテンツをインデックスし、その重みはランキングに完全に考慮されます」

実用的なニュアンス: 一部のテストでは、常に表示されるコンテンツが隠れたコンテンツよりランキングで高い成績を上げることが示されています。タブ/アコーディオンはセカンダリコンテンツ用に予約してください。プライマリで検索キーワード重視のコンテンツは表示領域に配置します。

コンテンツタイプ	配置
プライマリ / ランキング重視	折り返し上部に表示；非表示ではない
セカンダリ / サポート用	タブ、アコーディオン可
FAQ回答	アコーディオン可；最初のアイテムをデフォルトで展開；faq-page-generator を参照

インデックス要件

コンテンツはページロード時にDOMに存在する必要があります。 Googleはユーザークリックをシミュレートしません。タブをクリックしてコンテンツを検出することはできません。

実装	インデックスされる？
ロード時にすべてのタブコンテンツがHTMLにある	✅ はい
タブクリック時にAJAX経由でロードされたコンテンツ	❌ いいえ

推奨事項: 初期HTMLで全タブコンテンツをサーバーレンダリングします。表示/非表示はCSS/JSのみを使用します。<details>/<summary> またはそれに相当するサーバーレンダリングマークアップを優先します。SSR、SSG、CSRとクローラー可視性については rendering-strategies を参照してください。

横方向タブ: タブが多い、コンテンツも多い？

技術的には: はい—ロード時にすべてのコンテンツがDOMにある場合、より多くのタブ = より多くのインデックス可能なコンテンツ。モバイルファーストインデックスはHTML内のタブ付きコンテンツに完全な重みを付与します。

戦略的には: 常にとは限りません。シグナル希釈が発生します。多くのタブ = 1ページ上の多くの異なるトピック。Googleはページがどのクエリでランク付けされるべきかを理解するのに苦労するかもしれません。トピック権限とキーワードの焦点が広がります。

シナリオ	タブを使う？	代替案
同じトピック（ハウツーステップ1/2/3；製品仕様：寸法、材質、配送）	✅ はい	—
異なるトピック（サービスA、サービスB、ポートフォリオ、ブログ）	❌ いいえ	トピックごとに別のURL；content-strategy を参照してピラー/クラスタを確認

多くの横方向タブが機能する場合: すべてのタブがセマンティック的に1つのクエリに関連している場合（例：1つのハウツー、1つの製品）。別ページを使用する場合: 各タブが独自のURL、クロール、ランキング機会に値する個別のトピック。

実装

ネイティブHTML（推奨）

<details> と <summary> を使用—JavaScriptは不要；アクセシブル；クロール可能。

<details open>
  <summary>最初の質問（デフォルトで展開）</summary>
  <p>回答コンテンツをここに入力します。</p>
</details>
<details>
  <summary>2番目の質問</summary>
  <p>回答コンテンツをここに入力します。</p>
</details>

• 最初のタブ/アコーディオン: open 属性を追加してデフォルトで展開されるようにします
• <summary>: <details> の最初の子である必要があります。トグルとして機能します
• 段階的強化: CSSでスタイル設定；必要な場合のみJSを追加（例：1つが開くと他を閉じる）

JavaScript依存タブ

JS専用タブを使用する場合: クリック時にAJAXでロードされるのではなく、ページロード時にすべてのタブコンテンツがDOMに存在することを確認してください。Googleはタブクリックをシミュレートしません。<details>/<summary> またはサーバーレンダリングHTMLを優先します。rendering-strategies を参照してください。

避けるべき

• ユーザークリック後のみロードされるコンテンツ（AJAX、フェッチ経由の遅延ロード）—クローラーはインデックスしません
• プライマリコンテンツに対する display: none または visibility: hidden—Googleは異なる方法で扱う可能性があります
• 1ページ上に関連性のない多くのタブ—シグナル希釈を引き起こします。代わりに別URLを使用してください

コンテンツのベストプラクティス

プラクティス	目的
最初のアイテムを展開	ロード時にプライマリコンテンツが表示されることを保証；SEOとUX向上
説明的なヘッダー	<summary> / タブラベルはコンテンツを明確に説明；キーワードを自然に含める
論理的な構造	セクションのH2/H3；スニペット抽出をサポート；featured-snippet を参照
回答優先	FAQ用：40～60語の直接的な回答；その後詳細；faq-page-generator を参照

ユースケース

ユースケース	フォーマット	レイアウト	注記
FAQ	アコーディオン	縦方向	FAQPageスキーマ；最初のQ展開；faq-page-generator を参照
ハウツーステップ	タブ	横方向	番号付き「ステップ n」または説明的なタブタイトル；順序の流れ；H2が番号を使用する場合、セクション数と同じステップ数（howto-section-generator）
製品仕様	タブ	横方向	寸法、材質、配送—ヒーローに次位
長いガイド	アコーディオン	縦方向	折りたたみ可能なセクション；toc-generator を参照
価格階級	タブ	横方向	プランを比較；プライマリCTA表示
異議処理	アコーディオン	縦方向	「Xについてはどう？」—コンバージョン支援

スキーマとリッチリザルト

• FAQ（縦方向アコーディオン）: FAQPage JSON-LD；スキーマはオンページコンテンツと完全に一致する必要があります；schema-markup、faq-page-generator を参照
• ハウツー（横方向タブ）: ステップバイステップコンテンツ用HowToスキーマ；howto-section-generator、schema-markup、featured-snippet を参照
• その他のタブ: 特定のスキーマなし；セマンティックHTML（見出し、構造）を確保

UXとアクセシビリティ

• 視覚的インジケータ: 矢印、プラス/マイナス、またはシェブロンで展開/折りたたみ状態を表示
• キーボード: <details>/<summary> はネイティブキーボードアクセシブル
• Core Web Vitals: 展開時のレイアウトシフト（CLS）を回避；スペースを予約するか、スムーズにアニメーション
• モバイル: タッチターゲット ≥44×44px；縦方向アコーディオンは小画面で横方向タブより優れている（タブは窮屈；アコーディオンは自然にスクロール）

実装前チェックリスト

• すべてのタブ/アコーディオンコンテンツがページロード時にDOMに存在（クリック時にAJAX不可）
• プライマリランキングコンテンツが表示される、非表示ではない
• 最初のタブ/アコーディオンがデフォルトで展開
• <details>/<summary> またはそれに相当するサーバーレンダリングHTMLを使用
• ヘッダーが説明的；キーワードが自然
• タブが1つのトピックを共有（シグナル希釈を回避）；異なるトピックの場合、別ページを検討
• FAQ用：FAQPageスキーマがコンテンツと一致

関連スキル

• faq-page-generator: FAQ構造、回答の長さ、スキーマ；アコーディオンは一般的なFAQ UI
• howto-section-generator: ハウツーセクション；タブのステップ対FAQ；JSON-LD整合性
• featured-snippet: 回答優先、H2/H3；アコーディオン内のコンテンツは抽出可能
• schema-markup: FAQ アコーディオン用FAQPage；ステップバイステップタブ用HowTo
• content-strategy: ピラー/クラスタアーキテクチャ；タブ対別ページを使用する場合
• toc-generator: 折りたたみ可能TOC；類似の開示パターン
• content-optimization: 単語数、構造、展開可能なセクション内のマルチメディア
• rendering-strategies: SSR、SSG、CSR；クローラー用の初期HTMLのコンテンツ