インフォボックス：2カラム — フォーマット、ルール、例

2カラムインフォボックスは、1つのアイデアを正確に2つの並列ポイントに分割し、読者が関係性を一目で理解できるようにします。ペアが段落に埋もれているよりも横並びの方が有用な場合に使用します。2つの責任、2つの段階、2つの視点、または1つの答えを構成する2つの補完的な部分などです。

このレンダリングされた例は、1つのインフォボックス、1つの共有タイトル、正確に2つのアイテムです。両方のアイテムが同じ種類の質問に同等の深さで答えます。この要素は2つのニーズが対立していると主張するのではなく、有用なブリーフが両方を考慮しなければならないことを示しています。

この要素が重要な理由

密度の高い散文は、読者に関係性を再構築させるものです。「コンテンツブリーフは、タスクを解決することで読者に貢献し、適格なアクションをサポートすることでビジネスに貢献しなければならない」といった文では、2つの責任は存在するものの、その境界は弱いものです。2カラムインフォボックスは、共有テーマを一度可視化し、各責任に名前付き領域を与えます。読者は両方の見出しをスキャンし、どこから読み始めるかを選択し、複合文を読み返すことなく詳細の量と種類を比較できます。

心理的な利点はチャンキング（関連情報を境界のある単位にグループ化すること）にあります。共有タイトルは読者に何が一定であるかを伝え、アイテムタイトルは何が変化するかを示します。この階層構造は、どちらのポイントも支配的であってはならない場合に特に有用です。通常の散文は自然と最初のポイントに重点を置き、2番目のポイントを後付けのように感じさせがちですが、均等なカラムは同等の編集上の重みを示します。

機械抽出性とは、ソフトウェアが意味を保持しながらコンテンツ単位を分離する能力です。型付けされたインフォボックスは、親トピックと2つの明示的な子アイテムを公開します。検索システムは、ある節がどこで始まりどこで終わるかを推測する代わりに、共有タイトル、アイテムタイトル、本文テキスト、ソース順を保持できます。各アイテムはそれ自体で完結している必要があります。「ビジネス要件とは、適格なアクションをサポートするエビデンスである」は抽出後も意味を保ちますが、「もう一方の側面」はそうではありません。

構造は弱い思考を救いません。ソースに1つの発展したポイントと対称性のために追加された1文が含まれている場合、レンダラーはその不均衡をより明白にするだけです。要素記述ルール を適用してください。最初に完全な論理を書き、完成したアイデアが本当に2つの並列部分を持つ場合にのみこの要素を選択してください。このページの要素固有のルールは、正確なアイテムマッピングと制限を定義する箇所で優先されます。

使用すべき場合

以下の4つの条件すべてが満たされる場合に、2カラムインフォボックスを使用します。

1. ボックス全体にタイトルを付けられる、1つの明確な親アイデアがある。
2. 親アイデアが自然に正確に2つのアイテムに分割される。
3. 両方のアイテムが、責任、段階、オーディエンスの視点、または次元を説明するなど、同じ情報の役割を果たす。
4. 各アイテムが、ネストされた構造なしにおよそ30～90語で理解できる。

適切な使用例としては、「ローンチ前／ローンチ後」「読者シグナル／ビジネスシグナル」「変わるもの／変わらないもの」「責任者／レビューアーの責任」などがあります。ラベルは実際の関係性を示すべきです。読者が「これらが一緒に属するのは…だからだ」という文を完成できなければ、そのグループ化はおそらく装飾的です。

見逃しがちなケースも重要です。なぜなら2カラムレイアウトはほとんどのペアを意図的に見せかけることができるからです。任意の文の切れ目で1つのアイデアを分割するために使用してはいけません。単に縦のスペースを節約するために4つのアイテムのリストを2つの長いカラムにしてはいけません。ソース順とスキャンが曖昧になります。複数の基準がある詳細な製品比較に使用してはいけません。比較テーブルが各基準に明示的な行を与えるからです。ポイント数が異なる場合や、読者が複数のトレードオフを検討する必要がある場合に、メリット・デメリットのために使用してはいけません。定義とプロモーションのコールトゥアクションをペアにしてはいけません。これらのブロックは異なる役割を果たしており、同等の扱いを受けるべきではありません。

最も顕著な警告サインは「その他」「さらに」「追加情報」といったラベルです。これらのラベルは、分割が意味ではなく利用可能なスペースに従っていることを示しています。コンテンツを散文に戻すか、要素を使用する前に実際の区別を見つけてください。

配置すべき場所

共有アイデアを導入する段落の直後にインフォボックスを配置します。読者は分割に遭遇する前に1文のコンテキストを必要としますが、関連のないエビデンスや別のサブセクションを横断する必要はありません。ボックスの後は、両方のアイテムに適用される分析、例、または手順を続けます。

H2自体が親アイデアを提供し、インフォボックスが独自のより具体的なタイトルを持つ場合、H2の直下に配置することもできます。また、2つのアイテムが定義の次元を説明する場合、短い定義の後に続けることもできます。主張とその引用の間、ステップとそのステップを完了するために必要な条件の間、または順序付きリストアイテムの内部に配置してはいけません。これらの位置は連続すべき関係性を断ち切ります。

別の2カラムインフォボックス、比較テーブル、タブセット、またはメリット・デメリットブロックの横に配置しないでください。隣接する並列構造は、読者にどの視覚的関係が重要かを判断させ、ワイドスクリーンで4つの見かけ上のカラムを作り出す可能性があります。異なる構造の間に説明的な散文を挿入するか、より適した1つのテーブルまたはセクションに資料を統合してください。2カラムのコールトゥアクションの直前または直後に配置することは避けてください。同一のジオメトリにより、編集上の説明がプロモーションのように見える可能性があります。

短いセクションでは2カラムインフォボックスを1つまでにしてください。繰り返しは有用なコントラストをページの家具に変えてしまいます。長い記事に複数の正当なペアが含まれる場合は、それらを異なる見出しの下に分け、各ペアが明確な親アイデアを持つことを確認してください。

構造

構造は1つの親領域と2つの繰り返される子領域を含みます。スクリーンショットはパディングやカラートークンではなく、意味的な部分にラベルを付けるべきです。そうすることで、ビジュアルシステムが変更されても仕様が有用であり続けます。

1. 外側の境界： 親タイトルと両方のアイテムを1つの編集単位としてグループ化します。
2. 共有タイトル： 両方のアイテムが説明するアイデアを名付けます。これは3番目のポイントではありません。
3. 最初のアイテムのタイトルと本文： 完全で抽出可能な言語でペアの最初のメンバーを記述します。
4. 2番目のアイテムのタイトルと本文： 同じ種類の質問に一致した深さで答えます。
5. レイアウトの関係性： スペースが許せば等幅カラムを使用し、狭い画面では最初のアイテムを2番目の前にスタックします。

境界線、背景、ギャップ、半径、タイプスケール、ブレークポイントはレンダラーに属します。著者はコンテンツの階層と順序を制御し、ビジュアルトークンは制御しません。

デザイン例

4つのサポートされたコンテンツとビューポートのバリエーションを持つ1つの意味要素があります。バリエーションはタイトルの扱いやレスポンシブ表示を変更しますが、正確に2つのアイテムという要件を変更することは決してありません。

デフォルトタイトル付きバリアント： スタンドアロン使用に推奨。共有タイトルが親アイデアを名付け、両方の子アイテムが簡潔なタイトルを持ちます。

コンテキストタイトルバリアント： 直前のH2が共有タイトルとして機能することがあります。これは、H2とボックスの間に段落やコンポーネントがなく、インフォボックスがその見出しから派生したアクセシブルな名前を持つ場合にのみ許可されます。

コンパクトバリアント： 2つの短い定義や責任に使用します。各本文は依然として完全な文を形成し、レイアウトがタグラインのペアになることはありません。

狭ビューポートバリアント： アイテムが垂直にスタックされます。「左」「右」「上」「横」への参照なしでも順序が意味を持ちます。

アイコンはコンテンツのバリエーションではありません。デザインシステムが装飾的なアイコンを追加する場合、それらは空の代替テキストを使用し、アイテムタイトルを置き換えません。各アイテムに情報的な画像が必要な場合は、このインフォボックスの契約を拡張するのではなく、画像指向の要素を使用してください。

パラメータ

パラメータ契約は、要素が汎用グリッドに流れるのを防ぎます。意味を説明する値は作成されたコンテンツに属し、レスポンシブレイアウトはレンダラーに残ります。

タイトルは、直前のドキュメント見出しが同じ親トピックを提供し、コンテナをプログラム的にラベル付けできる場合を除き、必須です。アイテムボディは強調、インラインコード、および1つの有用なリンクを許可します。ネストされた見出し、テーブル、メディア、アコーディオン、フォーム、コールトゥアクション、または別のインフォボックスは許可されません。

構文とコード例

3つの表記法すべてが、同じ親タイトル、2つの順序付きアイテム、アイテムタイトル、アイテムボディを保持します。ポータブルMarkdownディレクティブが正規のソースです。HugoとWordPressの形式はアダプター契約であり、そのレンダラーは同等の意味的HTMLとレスポンシブ順序を生成しなければなりません。

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

:::infobox-2-columns
## A useful content brief answers two questions

::item
### What does the reader need?

State the question, decision, or task the page must resolve, including the context that changes the answer.
::

::item
### What does the business need?

State the qualified action the page should support, along with the evidence required to earn that action.
::
:::

最初の親見出しが title にマッピングされます。各 ::item はその最初の見出しを item.title に、残りの本文を item.content にマッピングします。この正確な2アイテムマッピングは、基本ルールにおける一般的な繰り返し可能アイテムの許容範囲を上書きします。

Hugoショートコード

{{< infobox-2-columns title="A useful content brief answers two questions" >}}
  {{< infobox-item title="What does the reader need?" >}}
  State the question, decision, or task the page must resolve, including the context that changes the answer.
  {{< /infobox-item >}}
  {{< infobox-item title="What does the business need?" >}}
  State the qualified action the page should support, along with the evidence required to earn that action.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

アダプターは名前付きパラメーターのみを使用します。3番目のアイテムを黙ってラップするのではなく拒否しなければならず、レイアウトがスタックする場合に作成されたアイテム順序を保持しなければなりません。

WordPressブロック

<!-- wp:amicited/infobox-2-columns {"title":"A useful content brief answers two questions"} -->
  <!-- wp:amicited/infobox-item {"title":"What does the reader need?"} -->
  <p>State the question, decision, or task the page must resolve, including the context that changes the answer.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"What does the business need?"} -->
  <p>State the qualified action the page should support, along with the evidence required to earn that action.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPressは無制限の「ブロック追加」領域ではなく、2つの固定アイテムスロットを公開すべきです。編集者は2つのアイテムを並べ替えることはできますが、それらの間に関連のないブロックを挿入したり、3番目のカラムを追加したりすることはできません。

例

良い例

これは機能します。共有タイトルが1つのアイデアを確立し、時間の境界が真のペアを作り出し、両方のカラムが同等の測定作業を指定しているからです。各アイテムはスタックされたり独立して抽出されたりしても意味を保ちます。

悪い例

コンテンツを改善する

うまく書く： オーディエンスが愛し、検索エンジンが報いる、有用で権威があり、魅力的なコンテンツを作成します。

その他のこと： SEOには技術的な作業、リンク、コンバージョンデザイン、アナリティクス、ブランド構築、配信、メンテナンスなど、他にも多くの重要な活動が含まれます。

これは失敗です。ペアが人為的だからです。「うまく書く」は曖昧な指示であり、「その他のこと」は雑多なカテゴリーであり、2番目のアイテムには最初のアイテムよりはるかに多くの範囲が含まれています。ボックスは存在しない同等で並列な概念を暗示しています。実際のコンテンツ目標を定義する散文に置き換え、個別のワークストリームにはリストや別々のセクションを使用してください。

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

2カラムインフォボックスには専用のSchema.orgタイプがなく、スタンドアロンの構造化データを作成しません。そのテキストは、ページがそのマークアップの対象となる場合、包含する Article、TechArticle、または WebPage の一部のままです。単に2つあるという理由だけで2つのアイテムを ItemList としてマークしないでください。この要素は関係性を表すものであり、必ずしもランク付けされた完全なリストではありません。アイテムが構造化データで他の場所に使用される事実を独立して含む場合、ページレベルのスキーマポリシーがその事実を管理します。

意味的HTMLは、2つの子セクションを持つ1つのラベル付きコンテナを表現すべきです。ペアが周囲のナラティブに対して補完的である場合にのみ aside を使用し、メインの議論の一部である場合には section を使用します。可視タイトルと aria-labelledby を通じてコンテナにアクセシブルな名前を付けてください。各子タイトルは、見た目だけで選ばれた太字テキストではなく、適切なレベルの実際の見出しでなければなりません。

ソース順はアクセシビリティの順序です。キーボードナビゲーション、スクリーンリーダー、コピー＆ペースト、狭い画面では、アイテム1がアイテム2の前に来る必要があります。CSSはカラムを作成できますが、視覚的にそれらを逆転させてはいけません。「左のボックス」や「右のボックス」に言及しないでください。スタック時にそれらの位置は消失するからです。色、アイコンの形状、背景をアイテムを区別する唯一の方法にしてはいけません。デザインはテキストのズームに際して、クリッピング、水平スクロール、またはカラムの重なりなしでサポートしなければなりません。

記述ルール

まず親文を書くことから始めます。「このアイデアにはXとYの2つの部分がある」という文です。その文が不正確であれば、要素を使用しないでください。両方のアイテムタイトルに同じ文法形式（2つの名詞、2つの質問、または2つの時間句）を与えてください。並列言語は関係性を即座に読み取り可能にするからです。

正確に2つのアイテムを使用してください。各タイトルは2～7語、各本文は可能な限り30～90語とし、絶対最大は120語です。1文の差は許容されますが、35語のアイテムが110語のアイテムの隣にある場合は、編集または別の構造が必要です。各本文は同じ暗黙の質問に答え、同等のエビデンスの深さを使用すべきです。一致した深さとは、短い答えを埋め草で水増しすることではありません。

直接的で中立的な言葉を使用してください。タイトルで区別を述べ、本文でその結果を説明してください。「最初／2番目」よりも「ローンチ前／ローンチ後」を優先してください。意味のあるラベルは抽出後も生き残るからです。選択肢が本当に排他的でない限り「どちらか一方」を避け、アイテムが補完的である場合には「対」を避けてください。

以下のものを要素の中に決して入れないでください：

• たとえレンダラーがラップできても、3番目のアイテム。
• 複数ステップの手順、長い箇条書き、データテーブル、価格グリッド、フォーム、 testimonial、プロモーションバナー。
• 独立したH2セクション、ネストされたインフォボックス、タブ、アコーディオン、ビデオ、画像ギャラリー。
• 必要な法的テキスト、安全警告、ソースリスト、またはボックス外の1文にのみ適用される資格条件。
• 競合するコールトゥアクションのように見えるようにデザインされた、関連のない2つのリンク。

どちらかのアイテムに小見出しや2段落以上の本文が必要な場合は、両方のアイテムを通常のページセクションに昇格させてください。読者がアイテム間で選択する必要がある場合は、散文で判断基準を追加するか、比較要素や判断要素を使用してください。視覚的な対称性だけでは選択を説明できません。

これを使用する投稿タイプ

postTypes フロントマター項目がこの使用セットのソースです。リストされた各フォーマットには自然な2分割の関係がありますが、コンテンツが真のペアを形成しない場合にデフォルトで要素を含めるべきではありません。

QAチェックリスト

• 1つの親アイデア： ボックスには、両方のアイテムが一緒に属する理由を説明する、1つの明確な共有テーマがある。
• 正確に2つのアイテム： ソースとレンダリングされた出力には2つの子アイテムが含まれる。1つ、3つ、または空のスロットは決してない。
• 真の並列性： 両方のアイテムが同じ種類の質問に答え、並列な文法を持つタイトルを使用する。
• 一致した深さ： どちらのアイテムも単なる吊り合いの取れた重りや雑多な寄せ集めではなく、詳細とエビデンスが同等である。
• 有用な配置： ボックスはその導入コンテキストの後に続き、主張とエビデンス、またはステップとその要件を分離しない。
• 安全な隣接： 別の並列グリッド、比較コンポーネント、または2カラムCTAに隣接していない。
• 抽出可能な文言： 親タイトルとアイテムタイトルは主題を名指しし、本文は「左」「右」や近くの代名詞に依存しない。
• レスポンシブな順序： 狭いレイアウトでは、クリッピング、水平スクロール、視覚的な並べ替えなしに、アイテム1がアイテム2の前にスタックされる。
• アクセシブルな構造： コンテナには可視のプログラム的ラベルがあり、子タイトルは実際の見出しであり、色やアイコンだけが意味を伝えることはない。
• コンテンツ制限： 各本文は2段落以内であり、ネストされた複雑なコンポーネント、手順、またはプロモーションコントロールを含まない。
• 表記法の同等性： ポータブルMarkdown、Hugo、WordPressは同じタイトル、2つのアイテム、本文、順序を保持する。
• スキーマの抑制： ページコンテンツが独立して対象とならない限り、リストや比較のマークアップは追加されない。

最初の4つのチェックのいずれかが失敗した場合、レビューアーは要素を却下すべきです。これらの失敗はスタイルの欠陥ではなく概念的な問題を示しており、幅や装飾を変更しても修正できません。

FAQ

フロントマターのFAQエントリーは、繰り返し発生する実装の質問に回答します：アイテム数は2つに固定、同一の単語数よりも深さが重要、詳細な比較にはテーブルが必要、モバイルではソース順が保持される、要素はスキーママークアップを生成しない。これらの回答を構造化されたフロントマターに保持することで、アカデミーテンプレートが本文でコンテンツを複製することなく、承認されたFAQ処理をレンダリングできます。