タブ / ペルソナスイッチャー：形式、ルール、使用例

タブ/ペルソナスイッチャーは、複数の読者に別々のページに送ることなく、1つの限定された主題に対する異なる経路を提供します。ラベルが経路を識別し、選択するとそのパネルが同じ場所に表示されます。この要素は、パネルが真の同等物であり、すべてのパネルがページの初期HTMLに存在する場合にのみ有用です。

レンダリングされた状態では1つのアクティブなパネルが表示されていますが、他の2つのパネルもドキュメントオブジェクトモデル（DOM）—ブラウザによるページの構造化表現—に存在しています。これらはネイティブのhidden属性で非表示になっており、クリック後にリクエストされるわけではありません。プロダクションレンダラーは以下で説明するキーボードとポインターの動作を追加しますが、作成されたコンテンツ契約はプラットフォーム間で同じままです。

この要素が重要な理由

読者は、自分の役割、目標、責任レベルに基づいてページをフィルタリングします。コンテンツスペシャリストは作成手順を求め、SEOスペシャリストは検証ルールを求め、チームリーダーはガバナンスを求めるかもしれません。適切にラベル付けされたペルソナスイッチャーは、「これは自分にとって何を意味するのか」という汎用的なアドバイスを解釈する労力を減らします。また、共通の前提を1か所にまとめることで、同じ意図を競う3つのほぼ重複したページを避けることができます。

心理的な利点は、解釈よりも認識です。読者は「SEOチーム」のようなラベルを、3つの段落をスキャンしてどれが該当するかを推測するよりも速く認識できます。タブは空間的コンテキストも保持します。パネルはその場で変化するため、読者は共通の導入部分を繰り返しスクロールすることなく、同等の経路を比較できます。

その利便性には、機械抽出性のトレードオフがあります。機械抽出性とは、クローラー、検索インデックス、支援技術、または検索システムが、その主題と関係性を保持しながらコンテンツを分離する能力です。表示されている見出しと段落は明らかな読み取り順序で表示されます。タブパネルはインタラクション状態を導入します。1つは表示され、いくつかは表示されておらず、ソフトウェアは各タブラベルを正しいパネルに接続する必要があります。弱い実装では、アクティブなパネルだけがHTMLに残り、他のパネルはクリック後にロードされるか、ペルソナ名なしで「メリット」のような汎用的な見出しを繰り返します。いずれの場合も、機械は読者が見るよりも少ないコンテキストを受け取ります。

正しい実装でも、通常のセクションと比較して抽出性が低下する可能性があります。一部のシステムは最初に表示されるテキストを優先し、インタラクティブな関係をフラット化し、または抜粋から非表示コンテンツを省略します。したがって、タブは情報ルーティングツールであり、重要な回答を隠す方法ではありません。共有の回答、定義、警告、資格条件、結論はタブセットの外に置いてください。パネルは、共通の回答が既にわかった上で有用な、オーディエンス固有の適用方法、例、ワークフロー、またはエビデンスに使用します。

要素作成ルール を適用します。最初に完全な説明をドラフトし、その後、真に同等な読者経路のセットをこの型付き要素として分類します。このページのルールは、パネルマッピング、インタラクション、コンテンツ制限に関して優先されます。

使用するタイミング

以下のすべての条件が満たされている場合に、タブ/ペルソナスイッチャーを使用します。

1. 2〜5の認識可能なオーディエンス、コンテキスト、またはモードが、同じ主題の異なる適用方法を必要としている。
2. すべてのパネルが同じ質問に同等の深さで回答している。
3. ほとんどの読者は一度に1つのパネルを必要とし、一部の読者は2つ以上を比較する可能性がある。
4. 共通の回答を要素の外で述べることができ、読者にすべてのタブを開かせる必要がない。
5. 経路を1つのページにまとめておくことが、大部分が重複する導入部分を持つ別々のページを維持するよりも明確である。

強い使用例としては、「開発者 / 編集者 / レビューアー」向けの実装ガイダンス、「個人 / チーム / 代理店」向けのオンボーディング経路、および「計画 / 制作 / 測定」を通じて説明される1つの機能があります。ペルソナラベルは、人口統計学的な推測ではなく、ワークフロー、エビデンス、権限、または望ましい成果における意味のある違いを反映する必要があります。

微妙なケースは、多くの場合、ページを短くしようとすることから生じます。連続した手順をタブに入れないでください。読者が選択するまでステップ2を隠すと、手順の順序が破壊されます。定義の短いリストをタブ化しないでください。通常の見出しがより少ないインタラクションで同じ情報を提供するためです。詳細な機能比較にはタブを使用しないでください。比較表 を使用すると、基準を同時に表示できます。無関係な主題間のナビゲーションとしてタブを使用せず、単にページが長く感じられるという理由だけで情報を分割しないでください。

セクションが垂直読み取りフロー内の独立した質問である場合、または複数の回答を開いたままにしておく必要がある場合は、アコーディオン の方が適しています。各オーディエンスが異なる検索意図、タイトル、エビデンスセット、コンバージョン経路、または約300語以上の独自コンテンツを必要とする場合は、別々のページの方が適しています。読者が安全または正確に行動するためにすべてのパネルを必要とする場合、タブは誤ったコンポーネントです。

配置場所

共通の回答と、経路が異なる理由を説明する段落の後にスイッチャーを配置します。読者はラベルを選択する前に、共通の主題を理解している必要があります。製品ページやソリューションページでは、これは通常、コアバリュープロポジションと共通機能の説明の後、詳細なエビデンスと主要なクロージングアクションの前に該当します。ドキュメンテーションでは、それが制御する役割固有の手順の直前に配置します。

タブセットを、ページの直接的な回答、定義、または必須の警告の前に配置しないでください。主張とそのソースの間、前提条件とそれが管理する手順の間、または価格とその条件の間に配置しないでください。これらの関係は、パネルが選択されていない場合でも維持される必要があります。タブセットは、別のタブセット、アコーディオン、大規模な比較グリッド、またはカルーセルの隣に配置してはいけません。隣接するインタラクションモデルは、競合するコントロールと不明瞭な読み取り順序を生み出します。

ネストされたタブは避けてください。外側の選択が内側の選択を隠し、難しいキーボード動作を生み出し、ディープリンクを曖昧にします。また、フォームやCTA内の別のオーディエンスセレクターのすぐ上にペルソナスイッチャーを配置することも避けてください。両方のコントロールが類似したラベルを使用する場合、読者は表示コンテンツを変更しているのか、設定を送信しているのかがわからない可能性があります。

構造

構造は、1つのラベル付きコンテナ、1つの順序付けられたタブリスト、および各タブに対して1つのパネルを持ちます。スクリーンショットは、表示状態だけでなくDOMインスペクター内の非アクティブパネルも示す必要があります。ソース内の存在は実装の詳細ではなく、要素の一部であるためです。

1. 共有タイトル： すべてのパネルが扱う共通の質問またはタスクを述べます。
2. タブリスト： 2〜5の同等ラベルを安定した作成順序でグループ化します。
3. タブラベル： 読者が認識できる言語でオーディエンス、コンテキスト、またはモードを命名します。
4. 選択状態： テキストセマンティクスと可視的な処理を通じて、色だけに頼らずにアクティブタブを伝えます。
5. パネル： 自己完結型の見出しと1つのラベルのコンテンツを含みます。
6. プログラム上の関係： タブのaria-controlsとパネルのaria-labelledbyが各ペアを接続します。
7. フォールバック順序： スクリプトやスタイリングが実行されない場合でも、共有タイトル、ラベル、すべてのパネルコンテンツが意味をなすようにします。

間隔、境界線、インジケーターの形状、アニメーション、ブレークポイントはレンダラーに属します。作成者はラベル、ソース順序、パネルコンテンツ、およびオプションの安定したフラグメント識別子を制御します。

デザイン例

このコンポーネントは4つのバリエーションをサポートします。すべてのバリエーションが同じコンテンツモデルとDOM要件を使用します。

ペルソナタブ： ワークフロー、エビデンス、または次のアクションが読者によって真に異なる場合に役割ラベルを使用します。「成長の達人」のような作り物のペルソナよりも、「社内チーム」のような確立された顧客言語を優先します。

コンテキストタブ： チーム規模、運用モデル、実装モードなどの非ペルソナ状態を使用します。共有タイトルは変化する次元を命名し、ラベルがページナビゲーションと誤解されないようにする必要があります。

垂直タブ： ラベルにより多くの水平スペースが必要で、5つ以下の場合にのみ使用します。DOMとキーボードの順序は、選択されたアクセシブルな実装に従って、タブ1からタブ5、その後に関連するパネルが続きます。

狭ビューポートおよびフォールバック状態： ラベルは、可視的な手がかりがオーバーフローを明らかにする場合に水平スクロールするか、レンダラーがパネルを積み重ねられたラベル付きセクションとして表示することがあります。ラベルをあいまいな断片に切り詰めたり、非アクティブなコンテンツをHTMLから削除したりしてはいけません。

パラメーター

コンテンツ契約は関係を明示的に保ちながら、ビジュアルおよびレスポンシブ動作をレンダラーに委ねます。

ラベルはコントロールを操作するため属性であり、パネルタイトルはコンテンツに属するため最初の見出しから取得されます。両者は類似することがありますが、簡潔なタブラベルはより充実した抽出可能なパネル見出しにマッピングできます。パネルボディは、段落、短いリスト、インラインコード、1つの画像、および1つのコンテキストアクションを許可します。別のタブセット、アコーディオン、データテーブル、フォーム、ビデオプレーヤー、または複数ステップの手順は許可しません。

構文とコード例

3つの表記法すべてが、1つのタイトル、順序付けられたラベル、パネル見出し、パネルボディ、安定したID、および初期デフォルトを保持します。ポータブルMarkdownディレクティブが正規の作成形式です。

ポータブルMarkdownディレクティブ

:::tabs-persona-switcher{default=content-teams variant=horizontal}
## Choose your team

::item{label="Content teams" id=content-teams}
### Turn the brief into a repeatable draft

Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.
::

::item{label="SEO teams" id=seo-teams}
### Verify discovery and extraction

Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.
::

::item{label="Team leaders" id=team-leaders}
### Review the system, not just the page

Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.
::
:::

親ボディの最初の見出しがtitleにマッピングされます。各ネストされた項目は属性からlabelとidを取得し、最初の見出しをitem.titleに、残りをitem.contentにマッピングします。

Hugoショートコード

{{< tabs-persona-switcher title="Choose your team" default="content-teams" variant="horizontal" >}}
  {{< tab-item label="Content teams" id="content-teams" title="Turn the brief into a repeatable draft" >}}
  Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.
  {{< /tab-item >}}
  {{< tab-item label="SEO teams" id="seo-teams" title="Verify discovery and extraction" >}}
  Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.
  {{< /tab-item >}}
  {{< tab-item label="Team leaders" id="team-leaders" title="Review the system, not just the page" >}}
  Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.
  {{< /tab-item >}}
{{< /tabs-persona-switcher >}}

アダプターは名前付きパラメーターのみを使用します。サーバーレスポンス中にすべての項目ボディをレンダリングし、重複するIDを拒否し、コンテンツモデルを書き換えずにインタラクションを初期化する必要があります。

WordPressブロック

<!-- wp:amicited/tabs-persona-switcher {"title":"Choose your team","default":"content-teams","variant":"horizontal"} -->
  <!-- wp:amicited/tab-item {"label":"Content teams","id":"content-teams","title":"Turn the brief into a repeatable draft"} -->
  <p>Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"SEO teams","id":"seo-teams","title":"Verify discovery and extraction"} -->
  <p>Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Team leaders","id":"team-leaders","title":"Review the system, not just the page"} -->
  <p>Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.</p>
  <!-- /wp:amicited/tab-item -->
<!-- /wp:amicited/tabs-persona-switcher -->

WordPressは内部ブロックを登録されたタブ項目に制限する必要があります。プレビュー、保存マークアップ、フロントエンドレンダリングはすべてのパネルを保持する必要があり、編集者の利便性のために非アクティブな項目をクライアントフェッチコンテンツにしてはいけません。

例

良い例

実装経路を選択

ホステッドプラットフォーム — インフラ保守なしで立ち上げ

承認されたデータソースを接続し、ロールを設定し、ステージングワークスペースで出力を検証します。ベンダーがランタイムのアップデートと監視を維持し、御社のチームがコンテンツ承認とアクセスレビューを担当します。

セルフホステッド — デプロイメントとデータ境界を管理

サポートされているパッケージを環境にデプロイし、同じ承認済みデータソースを接続し、アップグレード、監視、バックアップ、アクセスレビューの担当者を割り当てます。

これは、両方のパネルが同じ実装の質問に回答し、運用上の違いを命名し、同等の責任を含んでいるため機能します。「ホステッドプラットフォーム」と「セルフホステッド」は認識可能なラベルです。両方のパネルがソース順にフラット化された場合でも、共有の判断は明確です。

悪い例

すべてを探索

概要： 当社のプラットフォームは、現代のチームをより効果的にします。

価格： パーソナライズされた見積もりと重要な契約条件については、営業にお問い合わせください。

セキュリティ： セキュリティドキュメントをご覧ください。

キャリア： 成長するチームに参加しませんか。

これはタブを装ったサイトナビゲーションです。パネルが1つの共有質問に回答しておらず、ラベルが購入者情報と企業コンテンツを混在させており、重要な価格条件がインタラクションの背後に隠されています。このセットを通常のページセクションと実際のナビゲーションに置き換えてください。価格オプションに同時評価が必要な場合は、タブではなく価格比較構造を使用してください。

スキーママークアップとアクセシビリティ

タブとペルソナスイッチャーは専用のSchema.orgタイプを作成しません。そのコンテンツは、囲んでいるページが独立して資格を満たす場合、囲んでいるArticle、TechArticle、Product、またはWebPageの一部のままです。繰り返されているという理由だけでタブをItemListとしてマークしたり、ペルソナラベルから複数のPersonエンティティを生成したりしないでください。「代理店」のようなラベルは、読者経路を説明するものであり、事実上のエンティティ表明ではありません。

WAI-ARIAタブパターンは、インターフェースが実際にタブとして動作する場合にのみ使用します。コンテナにはrole="tablist"を持たせ、各コントロールにはrole="tab"、一意のID、aria-controls、および正確なaria-selected値を持たせます。各パネルにはrole="tabpanel"とaria-labelledbyを持たせます。偽の宛先を持つリンクではなく、コントロールにはボタンを使用します。選択されたタブはページのタブ順序に属し、非アクティブタブはtabindex="-1"を使用して移動し、矢印キーで到達可能にします。HomeとEndは最初と最後のタブに移動します。アクティベーションは、パネル切り替えが即時である場合にのみフォーカスに従うことができます。それ以外の場合は、EnterまたはSpaceでフォーカスされたタブをアクティベートします。

フォーカスは予測可能である必要があります。タブを選択しても、自動的にフォーカスがそのパネルに移動することはありません。パネルは、最初のコンテンツがフォーカス可能でない場合にtabindex="0"を使用して、キーボードユーザーがその中に移動できるようにすることができます。可視のフォーカスインジケーターと選択インジケーターは異なる必要があり、どちらも色だけに依存してはいけません。

すべてのパネルは初期HTMLレスポンスでレンダリングされる必要があります。非アクティブパネルをhidden、CSS、またはプログレッシブエンハンスメントの同等物で非表示にすることは許容されますが、クリック後にのみ作成することは許容されません。JavaScriptなしの場合、フォールバックはすべてのラベル付きパネルをソース順で公開するか、サーバーレンダリングされた宛先への実際のリンクを提供する必要があります。安定したフラグメントがパネルをアクティベートすることもありますが、正規ページは1つのURLのままです。ズーム、狭い画面、長い翻訳ラベル、スクリーンリーダーの関係、キーボード順序、およびスクリプト障害をテストします。

作成ルール

共有質問から始めます。提案された各パネルが異なる質問に回答する場合は、タブを使用しないでください。2〜5項目を作成し、3〜4個が推奨されます。ラベルは可能な限り1〜4語、28文字に抑えます。並列文法を使用します。すべて役割（「編集者 / レビューアー」）、すべてモード（「ホステッド / セルフホステッド」）、またはすべて段階（「計画 / 制作 / 測定」）。役割、動詞、マーケティングフレーズを混在させないでください。

各パネルに3〜10語の見出しを付け、タブラベルだけでは不十分な場合に関連する経路とその結果の両方を命名します。パネルごとに40〜180語を書き、300を絶対最大値とします。パネルは同等の深さを持つ必要がありますが、同一の語数である必要はありません。タスク、エビデンス、権限、制約、またはアクションにおける具体的な違いを直接的な言語で記述します。代名詞を「あなた」から「あなたのチーム」に変更するだけでは、別のパネルを正当化できません。

共通情報は要素の外側に保持します。すべてのパネルで同じ冒頭文を繰り返すと、メンテナンスのずれが生じ、抽出された文章が重複して見えるようになります。違いをパネル内に配置し、各違いが抽出後も十分に明確であるようにします。「より多くの制御が得られます」ではなく、「代理店チームはクライアントレベルのロールを割り当てることができます」を優先します。後者は、選択されたラベルから切り離されると主語が失われます。

以下をタブセット内に決して配置しないでください。

• ページ内で唯一の定義、直接的な回答、結論、安全警告、法的条件、資格ルール、またはソースの帰属。
• すべての読者が完了しなければならない連続した手順、または1つのパネル外のコンテンツを管理する前提条件。
• 別のタブセット、アコーディオン、カルーセル、複雑なデータテーブル、複数フィールドのフォーム、または自動再生メディア。
• パネルあたり1つを超えるプライマリコールトゥアクション、または無関係なファネル段階につながるアクション。
• 人間のユーザーにとって高速であっても、インタラクション後にのみロードされるコンテンツ。
• 未定義の関係を隠す「その他」、「詳細」、「一般」、「リソース」などのラベル。

各パネルが300語を超える場合、独自のエビデンスセットを必要とする場合、または異なる検索意図をターゲットとする場合は、専用のセクションまたはページを公開してください。読者が一度に複数の基準を比較する必要がある場合は、テーブルを使用してください。コンテンツが単にオプションの詳細である場合は、関係性に応じて散文またはアコーディオンを使用してください。

使用する記事タイプ

postTypesフロントマター項目がこのテーブルのソースです。含まれていることは、その形式がタブをサポートできることを意味し、必須であることを意味するものではありません。

QAチェックリスト

• 1つの共有質問： すべてのパネルが、異なるオーディエンス、コンテキスト、またはモードに対して同じ限定された質問に回答します。
• 適切な数： セットには2〜5個のタブが含まれ、できれば3〜4個で、簡潔で並列なラベルを持ちます。
• 可視の共通回答： 定義、コア回答、必須条件、結論はタブセットの外側に残ります。
• 初期DOMの存在： すべてのパネルとその完全な作成コンテンツが初期サーバーレンダリングHTMLに存在します。
• 明示的なコンテキスト： 各パネルの見出しと冒頭文は、視覚的なタブ状態なしで抽出された場合でも理解可能です。
• 正しい関係： タブとパネルのIDは一意であり、aria-controlsとaria-labelledbyがそれらを正しくペアリングします。
• キーボード動作： 矢印、Home、End、Enter、Space、Tab、Shift+Tabの動作が選択されたアクティベーションモデルと一致します。
• フォーカスの明確さ： フォーカスと選択は視覚的に区別可能であり、選択によって予期せずフォーカスが移動することはありません。
• 安定したフォールバック： スクリプト障害時に、情報を失うことなくラベル付きコンテンツまたは使用可能なサーバーレンダリング先を公開します。
• レスポンシブ動作： ラベルは狭い幅、200%ズーム、長い翻訳テキストでも完全で発見可能なままです。
• 安全な配置： コンポーネントは主張とエビデンス、警告とその範囲、前提条件と手順を分離しません。
• 複雑なネストなし： パネルは制限された散文とシンプルなサポートコンテンツを含み、別のインタラクションシステムではありません。
• スキーマの抑制： レンダラーは表示ラベルからリスト、人物、またはオーディエンススキーマを発明しません。
• 表記法の同等性： Markdown、Hugo、WordPressは同じ順序、ID、デフォルト、ラベル、見出し、パネルボディを保持します。

レビューアーは、非アクティブなコンテンツにクリックトリガーのネットワークリクエストが必要な場合、重要な情報が1つのパネル内にのみ存在する場合、またはラベルが同等の経路を説明していない場合に、コンポーネントを拒否する必要があります。これらはコンテンツとアーキテクチャの失敗であり、視覚的な改良では修復できません。

FAQ

フロントマターの構造化FAQエントリは、インデックス、フラグメントURL、タブ数、コールトゥアクション、タブとアコーディオンの区別に対応しています。これらは意図的にインタラクティブ要素の外側にあり、すべての読者とレンダラーが同じ実装ガイダンスを受け取るようになっています。