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

3カラムインフォボックスは、1つの共通アイデアのもとに正確に3つの並列ポイントを提示します。これは、読者が実際の3つの部分からなるモデルを一度に確認する必要がある場合に有用です。3つの責任、3つの基準、3つの成果、または3つの調整されたワークストリームなどです。カラムは対等な編集上の地位を約束するため、各ポイントは同等の深さで同じ種類の作業を行う必要があります。

このレンダリングされた要素には、1つの共有タイトルと正確に3つの項目があります。3つのタイトルはすべて名詞句であり、3つの本文はすべて「確信」の一種を説明しており、アイコンは意味を伝えずにリズムを加えています。アイコンを削除してもモデルは変わりません。

この要素が重要な理由

読者は、単に3つの節を含んでいるという理由だけで、密度の高い段落をモデルとして認識するわけではありません。読者は最初の節を記憶に留め、2番目の節への移行を検出し、3番目の節が対等なのか、従属的なのか、単なる追加なのかを判断しなければなりません。3カラムインフォボックスは、その関係性を明示的にします。共有タイトルは何が一定であるかを示し、3つの区切られた項目が完全な分割を示し、一致した視覚的な重みが、読者に各項目を確認してからモデルを理解したと見なすように伝えます。

これはチャンキング、つまり関連情報を管理可能な単位にグループ化することで役立ちます。3つは、カタログを作成することなくシステムを明らかにするのに十分な数です。読者は3つのタイトルをスキャンし、自分に最も関連するポイントから入り、詳細レベルを比較できます。この要素は、散文が同じ主題を3回繰り返したり、長い文の中に区別を隠したりする場合に特に効果的です。

機械抽出性とは、ソフトウェアが主題や関係性を失うことなくコンテンツ単位を分離できる能力です。型付きの3カラムインフォボックスは、1つの親トピックと3つの順序付けられた子を公開します。検索システム、コンテンツAPI、AI検索ツールは、段落にリストが含まれているかどうかを推測する代わりに、共有タイトル、各項目のタイトル、各本文、およびソース順を保持できます。明示的な見出しは、各項目に有用な検索ラベルも提供します。

抽出が機能するのは、単語が自己完結している場合のみです。「技術の確信とは、ページがレンダリングされ、リンクが解決されること」は、レイアウトの外でも機能します。「3つ目はこれを扱う」は機能しません。構造も3つ目のアイデアを生み出すことはできません。要素の書き方ルール に従ってください。レンダラーを選択する前にコンテンツモデルを確立してください。正確に3つの項目を必要とする要素固有の要件は、反復可能な項目に対する一般的な許可よりも優先されます。

使用するタイミング

以下の5つのテストすべてに合格する場合のみ、3カラムインフォボックスを使用してください。

1. 1つの共有タイトルが要素全体を正確に統括できる。
2. 主題が自然に正確に3つのポイントに分かれる。
3. 3つのポイントすべてが同じ暗黙の質問に答える。
4. 各ポイントに同等の深さ、エビデンス、視覚的な重みがふさわしい。
5. 各ポイントが、ネストされた構造なしに1つまたは2つの短い段落で説明できる。

強い使用例には、フレームワークの3つの構成要素、3つの所有者責任、品質の3つの側面、1つの機能からの3つの成果、または同じ段階で実行される3つのチェックが含まれます。関係性は補完的、逐次的、または分類的であり得ますが、明示されなければなりません。書き手が「これら3つは〜だから一緒に属する」を完成できない場合、そのグループ化はおそらく視覚的なパディングです。

最も一般的なニアミスは、本物のペアに弱い3つ目の項目を加えたものです。「人、プロセス、その他」は、レイアウトに3つのスロットがあるという理由だけで3つの部分からなるモデルになるわけではありません。「スピード、正確性、価値」も同様で、記事がスピードと正確性のみを定義し、価値をその結果として扱っている場合も該当しません。ペアを維持し、結果を散文で説明するか、別の要素を選択してください。

3つの逐次的な指示にはこのインフォボックスを使用しないでください。カラムは順序を弱めます。特に狭い幅で積み重なる場合に顕著です。完了順序が重要な場合はステップリストを使用してください。複数の基準で評価される3つの製品には比較表を使用してください。今日たまたま3つの事実を含むが、次の更新で4つ目が増える可能性があるリストには使用しないでください。固定された3カラムの契約は、3がそのアイデアに内在する場合にのみ適しています。

その他のニアミスには、見出しと2つの実際の項目、すべての但し書きを含む1つの項目、メカニズムやエビデンスのない3つの宣伝文句、1つのオーディエンスセグメントを恣意的な3つの人口統計に分割したものなどがあります。いずれの場合も、レイアウトはコンテンツが獲得していない関係性を誇張しています。

配置場所

親アイデアを紹介する段落の直後にインフォボックスを配置してください。その段落では、3方向の見解がなぜ役立つかを説明し、共有タイトルがモデルを名付け、各項目がその部分を定義します。要素の後には、グループ全体に適用される解釈、エビデンス、または移行を配置してください。

H2の直下に表示することもできます。その場合、その見出しが共有タイトルを提供し、段落やコンポーネントが間に挟まらないようにします。定義の後に続けて、3つの項目がその用語の側面を分解する場合にも使用できます。主張とその引用、警告とそれを引き起こす条件、ステップとその期待される結果、従来のリストを導入する文を分断してはいけません。これらの関係性は連続していなければなりません。

別の3カラムグリッド、価格表、タブコントロール、カードデッキ、または3つの選択肢があるコールトゥアクションのすぐ隣に配置しないでください。繰り返される幾何学的パターンは、編集上の説明をインタラクティブまたは商業的に見せ、読者にどのグループ化が重要かを推測させることになります。説明用の散文を挿入するか、関係性全体を担う1つの構造を選択してください。同じ短いセクションに2つ目のインフォボックスを配置しないでください。繰り返しは意図的なモデルを装飾的な家具に変えてしまいます。

長いページでは、複数の3カラムインフォボックスは、異なる見出しのもとで真に異なるモデルの場合にのみ許容されます。コピー内のすべての3つ組に対するデフォルトの処理として使用すべきではありません。

構成要素

構成要素には、1つの親領域と3つの繰り返される項目領域が含まれます。ラベル付きのスクリーンショットは、色、半径、間隔のトークンではなく、意味的な部分を識別する必要があります。これにより、仕様がリデザインを乗り越えて存続します。

1. 外枠： タイトルと3つの項目すべてを1つの編集単位としてグループ化します。
2. 共有タイトル： 3つの項目によって分割されるアイデアを名付けます。これは4つ目の項目ではありません。
3. オプションのアイコンスロット： 項目ごとに1つの承認済み装飾アイコンを保持します。3つのスロットはすべて一緒に使用するか、すべて省略します。
4. 項目タイトル： 他の2つのタイトルと並列的な言語で、セットの1つのメンバーを名付けます。
5. 項目本文： そのメンバーを同等の深さで説明し、抽出された場合でも意味を保ちます。
6. レイアウト関係： スペースが許す場合は3つの等しいカラムを使用し、狭い画面では項目1、項目2、項目3の順に積み重ねます。

執筆者はタイトル、本文、アイコントークン、ソース順を管理します。レンダラーはカラム幅、ギャップ、ブレークポイント、境界線、背景、タイポグラフィを管理します。

デザイン例

1つの意味的要素に、4つのサポートされたバリエーションと1つのレスポンシブ状態があります。いずれも、正確に3つの項目という契約を変更しません。

デフォルトタイトル付きバリアント： 説明的コンテンツに推奨。共有タイトルと3つの項目タイトルが階層を明示し、アイコンはありません。

アイコンバリアント： 各項目に1つの装飾アイコンを追加します。アイコンはファミリー、サイズ、視覚的な重みが同じでなければなりません。アイコン、写真、空白スロットの混合はサポートされていません。

コンテキストタイトルバリアント： 直前のH2が共有タイトルを提供します。これは、コンテナがその表示されている見出しをプログラムで参照でき、見出しと要素の間に何も挟まらない場合にのみ許可されます。

コンパクトバリアント： 3つの短い定義やチェック項目に適しています。各本文は依然として完全な文であり、スローガンやラベルの断片ではありません。

狭いビューポート状態： 項目は作成順に垂直に積み重なります。左、中央、右の位置に依存する表現は使用できません。

パラメータ

この契約は、作成された意味とプレゼンテーションを分離します。レスポンシブなカラムとアイコンのスタイリングはレンダラーに属し、コンテンツフィールドと意味的順序はソースに属します。

タイトルは必須ですが、直前の見出しが同じ親トピックを提供し、コンテナにラベルを付ける場合は不要です。項目のコンテンツには、強調、インラインコード、および1つの関連テキストリンクを含めることができます。ネストされた見出し、表、3つの短い箇条書きを超えるリスト、メディア、フォーム、コールトゥアクション、または別のコンポーネントを含めることはできません。

構文とコード例

3つの表記法すべてが、同じタイトル、3つの順序付き項目、オプションのアイコントークン、本文を保持します。ポータブルMarkdownディレクティブが正規のソースです。HugoとWordPressはアダプター契約であり、3以外の項目数は拒否しなければなりません。

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

:::infobox-3-columns
## 公開可能なページには3種類の確信が必要です

::item{icon="reader"}
### 読者の確信

答えが明確で、完全で、意思決定や行動を導くのに十分具体性があること。
::

::item{icon="editorial"}
### 編集の確信

主張が裏付けられ、用語が一貫し、必要なすべての限定条件が付随していること。
::

::item{icon="technical"}
### 技術の確信

ページがレンダリングされ、リンクが解決され、メタデータが正しくマッピングされ、機械がその構造を復元できること。
::
:::

最初の親見出しがtitleにマッピングされます。各::itemは、その最初の見出しをitem.titleに、残りの本文をitem.contentに、オプションのicon属性を承認済みアイコントークンにマッピングします。レイアウトが積み重なる場合でも、3つのネストされた項目が必要です。

Hugoショートコードマッピング

{{< infobox-3-columns title="公開可能なページには3種類の確信が必要です" variant="icons" >}}
  {{< infobox-item title="読者の確信" icon="reader" >}}
  答えが明確で、完全で、意思決定や行動を導くのに十分具体性があること。
  {{< /infobox-item >}}
  {{< infobox-item title="編集の確信" icon="editorial" >}}
  主張が裏付けられ、用語が一貫し、必要なすべての限定条件が付随していること。
  {{< /infobox-item >}}
  {{< infobox-item title="技術の確信" icon="technical" >}}
  ページがレンダリングされ、リンクが解決され、メタデータが正しくマッピングされ、機械がその構造を復元できること。
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

これはポータブルなアダプター仕様であり、現在のサイトがそれらのショートコードを登録しているという約束ではありません。名前付きパラメータのみを使用し、ソース順を保持し、アイコントークンを検証し、余分な項目を黙って削除したりラップしたりする代わりに、オーサリング検証を失敗させます。

WordPressブロック

<!-- wp:amicited/infobox-3-columns {"title":"公開可能なページには3種類の確信が必要です","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"読者の確信","icon":"reader"} -->
  <p>答えが明確で、完全で、意思決定や行動を導くのに十分具体性があること。</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"編集の確信","icon":"editorial"} -->
  <p>主張が裏付けられ、用語が一貫し、必要なすべての限定条件が付随していること。</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"技術の確信","icon":"technical"} -->
  <p>ページがレンダリングされ、リンクが解決され、メタデータが正しくマッピングされ、機械がその構造を復元できること。</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

エディターは3つの固定された項目スロットを公開する必要があります。執筆者が項目を並べ替えることを許可しても構いませんが、4つ目の子や無関係なブロックを許可する無制限のインサーターを提供してはいけません。

使用例

良い例：実際の3方向の運用モデル

これが機能する理由は、共有タイトルが1つの責任モデルを定義し、3つの役割が明確に区別され、各本文が同じ質問「この所有者は何を検証すべきか？」に答えているからです。項目は並列的な名詞タイトルと同等の深さを使用しています。行を埋めるためだけに存在する項目はありません。

悪い例：3つに水増しされたペア

ランディングページを改善する3つの方法

オファーを明確にする： オーディエンス、問題、メカニズム、期待される成果を、読者が検証できる言葉で示す。

主張を証明する： 関連するエビデンスを追加し、その限界を説明し、引用を裏付ける文に紐付けたままにする。

魅力的にする： 魅力的な色と、それ以外のエンゲージングに感じられるものを追加する。

最初の2つの項目は、観察可能な出力を伴う編集上の要件です。3つ目は曖昧な視覚的アドバイスであり、一致するエビデンス基準がなく、異なる役割を果たしています。デザインが3カラムを求めたために追加されたものであり、モデルに3つの部分があるからではありません。3つ目の項目を削除して2つの部分からなる構造を使用するか、インタラクションの摩擦を減らすなどの真の3つ目の要件を定義し、同じ深さでサポートしてください。

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

3カラムインフォボックスには専用のSchema.orgタイプがなく、独立した構造化データを作成しません。そのテキストは、ページが該当する場合、内包するArticle、TechArticle、またはWebPageの一部として残ります。3つあるという理由だけで子をItemListとしてマークしたり、順序を示すようなラベルからHowToを推測したりしないでください。基礎となるコンテンツが独立してそのスキーマの要件を満たす場合にのみ、ページレベルのスキーマを提供してください。

ラベル付けされた1つの意味的なコンテナと3つの子セクションを使用してください。モデルが主要な議論の一部である場合は<section>を、補完的である場合は<aside>を使用してください。表示される共有タイトルをaria-labelledbyで接続し、すべての子に正しいドキュメントレベルの実際の見出しを与えてください。太字テキストは見出しの代わりにはなりません。

ソース順が読み取り順です。スクリーンリーダー、キーボードナビゲーション、コピーされたテキスト、モバイルレイアウトは、項目1、項目2、項目3の順に遭遇しなければなりません。CSSはカラムを作成できますが、順序ルールを使用して並べ替えてはいけません。「左」「中央」「右」と決して書かないでください。これらの位置は項目が積み重なるときに消えます。

アイコンは、タイトルにない情報を伝えない限り装飾的です。装飾的なアイコンは、HTMLでaria-hidden="true"を使用するか、画像としてレンダリングされる場合は空の代替テキストを使用します。アイコンが情報を提供する場合、その意味は表示テキストにも含まれていなければなりません。視界から隠されたアクセシブルな名前は、ページを見ることができるが記号を解釈できない読者には役立ちません。色とアイコンの形状だけが項目間の唯一の区別であってはいけません。

狭い幅では、テキストが窮屈になる前に項目を積み重ねてください。クリッピング、重なり、またはページレベルの水平スクロールなしでテキストのズームをサポートしてください。3カラムのスクリーンショットは、レスポンシブな意味的コンテンツの代わりにはなりません。

ライティングルール

「このアイデアには3つの部分があります：X、Y、Z」という文から始めてください。各部分が定義された後も、その文は正確でなければなりません。1つの部分が他の2つの結果、広範なcatch-all、またはマイナーな例である場合、そのモデルは真に並列的ではありません。

正確に3つの項目を使用してください。各タイトルは2〜7語に抑え、同じ文法パターン（3つの名詞句、3つの質問、または3つの時間ラベル）を使用してください。各本文は可能な限り25〜80語に抑え、110語を超えないようにしてください。1文の違いは許容されます。25語の項目が2つの100語の項目の隣にある場合は、編集または別の構造が必要です。

一致した深さとは、同等の説明作業を意味し、埋め草ではありません。各本文は同じ暗黙の質問に答え、同程度の具体性を含み、同程度のレベルで結果を述べる必要があります。1つの項目が本当により多くの説明を必要とする場合、長さが正直に変動できる通常のセクションにモデルを移動してください。

直接的で中立的な言語を使用してください。タイトルは意味を識別すべきであり、位置ではありません。「発見／制作／レビュー」は「第一／第二／第三」よりも強力です。順序ラベルは、各項目が読者にステップを指示するのではなく、フェーズを要約する場合にのみ許容されます。最上級の表現、裏付けのない効能の主張、説明を装った3つのスローガンは避けてください。

アイコンはオプションです。すべて使用するか、まったく使用しないかのどちらかにし、1つの承認済みファミリーから選択し、視覚的に一貫性を保ってください。タイトルの前にアイコンを選んだり、絵文字を本番アイコントークンとして使用したり、アイコンに意味のある項目見出しを代替させたりしないでください。

これらのものを要素の中に決して入れないでください。

• 2つまたは4つの項目、空の項目、または「その他」の3つ目のスロット。
• 詳細な手順、比較マトリックス、価格プラン、フォーム、お客様の声のカルーセル、またはプロモーションバナー。
• ネストされたH2セクション、別のインフォボックス、タブ、アコーディオンパネル、動画、または画像ギャラリー。
• 長い箇条書きリスト、ソースリスト、法的免責事項、安全性警告、またはそれらが管理する主張から切り離された限定条件。
• 同等のコールトゥアクションのようにスタイル設定された3つの無関係なリンク。

コンテンツがこれらの制限を超えた場合は、3つの項目を通常のページセクションに昇格させてください。固定レイアウトが、本質的なニュアンスを圧縮したり、限定条件を隠したりする理由になるべきではありません。

使用する投稿タイプ

postTypesフロントマター項目は、登録された使用セットです。意味のある3つの部分からなるモデルを頻繁に含むフォーマットを識別しますが、ソースに真の3つ組がない場合にインフォボックスを要求するものではありません。

QAチェックリスト

• 1つの親アイデア： 正確な共有タイトルが、3つの項目すべてがなぜ一緒に属するかを説明している。
• 正確に3つの項目： ソースとレンダリングされた出力に3つの完全な子が含まれている。2つ、4つ、または空のプレースホルダーは不可。
• 真の3方向分割： いずれかの項目を削除するとモデルが不完全になる。パディング、結果、または雑多なカテゴリーの項目はない。
• 並列的なタイトル： すべての項目タイトルが同じ文法形式を使用し、画面上の位置ではなく意味を識別している。
• 一致した深さ： 各本文が同じ暗黙の質問に、同等の詳細さとエビデンスで答えている。
• 有用な配置： 要素はその導入コンテキストの直後にあり、主張、警告、ステップ、または引用をその依存コンテンツから分離していない。
• 安全な隣接： 別の3カラムグリッド、価格ブロック、タブコントロール、または3つの選択肢があるCTAに隣接していない。
• 抽出可能な表現： 共有タイトルと項目タイトルが主題を名付けている。本文は近くの代名詞や視覚的な位置に依存していない。
• アイコンの一貫性： 3つの項目すべてが1つのファミリーからの承認済みアイコンを使用しているか、どの項目もアイコンを使用していない。意味はテキスト内にある。
• レスポンシブな順序： モバイルでは、クリッピング、水平スクロール、CSSの並べ替えなしで、項目1、項目2、項目3の順に積み重なる。
• アクセシブルなセマンティクス： コンテナに表示可能なプログラムによるラベルがあり、項目タイトルは見出しであり、装飾的なアイコンは支援技術から隠されている。
• コンテンツの制限： 本文は2つの短い段落以内に収まり、ネストされた複雑なコンポーネント、手順、またはプロモーション用コントロールを含んでいない。
• 表記法のパリティ： ポータブルMarkdown、Hugo、WordPressが同じタイトル、3つの項目、アイコントークン、本文、順序を保持している。
• スキーマの抑制： レンダラーは3カラムのプレゼンテーションからリスト、比較、ハウツーマークアップを推測しない。

レビュアーは、項目数、真の3方向ロジック、または一致した深さのいずれかが失敗した場合、その要素を却下すべきです。これらはコンテンツモデルの欠陥であり、視覚的な磨きでは修復できません。

FAQ

フロントマターのFAQエントリーは、固定の項目数、一致した深さ、オプションのアイコン、モバイル順序、スキーマの抑制をカバーしています。academyテンプレートは、本文でそれらを複製することなく、これらの承認された回答をレンダリングできます。