イメージボックス：画像インフォボックスのルールと例

イメージボックスは、1つの画像と1つの焦点を絞った説明を組み合わせ、読者がそれらを単一の編集ユニットとして処理できるようにします。画像はテキストが解釈するエビデンスを伝えることも、テキストが完全に説明するアイデアを図示することもあります。作成者はどちらの役割を果たすかを宣言する必要があります。なぜなら、その選択がコピー、代替テキスト、キャプション、構造化データ、および視覚なしでも要素が機能するかどうかを制御するからです。

これはコンテンツ画像バリアントです。表示された日付とステータスがエビデンスであり、隣接するテキストがそれらの関係を解釈します。画像が単なる装飾的なカレンダーである場合、テキストは鮮度のポイントを独立して説明する必要があり、画像は空の代替テキストを使用することになります。

この要素が重要な理由

読者は、写真と離れた段落を自動的に一つのアイデアとして処理しません。明示的なテキスト上の関係なしに画像が表示されると、読者は何を検査すべきか、なぜそれが重要か、周囲の主張を裏付けているかどうかを自分で判断しなければなりません。イメージボックスは、1つのビジュアルと1つの説明を明確な境界内に配置することで、その不確実性を低減します。タイトルが要点を示し、画像がそれを表示し、テキストが読者に何に注目すべきか、何を理解すべきかを伝えます。

心理的な利点は共同注意です。デザインが視覚的対象に注意を向けさせる一方で、コピーがその関連性を確立します。チャートの切り抜きが上昇、変動、または日付の境界を示唆する場合、隣接する説明が関連する読み取り方を選択します。

機械抽出可能性とは、ソフトウェアが各部分間の関係を失うことなくコンテンツユニットを分離できる能力です。セマンティックなイメージボックスは、画像、アクセシブルな説明、キャプション、見出し、説明、および宣言された画像の役割を1つのコンテナ内で公開します。テキストは依然として主張を含まなければなりません。コンピュータビジョンが数字、指示、制限、または結論に到達する唯一の経路であってはなりません。

要素記述ルール は、共有ディレクティブ構文、ボディマッピング、パス、優先順位を規定します。このページは、コンテンツとイラストの区別、許可されるフィールド、および1画像制限というイメージボックス固有の区別を定義する箇所で優先されます。

使用するタイミング

1つの画像と1つの説明が直接的な必須の関係を持ち、どちらも完全な独立したセクションを必要としない場合に、イメージボックスを使用します。適切な使用例としては、焦点を絞ったインターフェースの切り抜きと解釈の組み合わせ、製品詳細と適合性に影響を与える理由の説明、プロセス写真と品質管理ルールの組み合わせ、またはシンプルな概念図と簡潔な説明の組み合わせが挙げられます。

まず、画像がコンテンツかイラストかを判断します。

• コンテンツ画像： 読者は、主張の検証、特徴の識別、状態の比較、または視覚的事実の理解のために画像を検査する必要があります。テキストは関連する詳細を挙げ、その重要性を説明します。altテキストは意味を持ち、通常はキャプションが存在します。
• イラスト画像： 画像はトーン、記憶、または理解を強化しますが、隣接するテキストが完全な主張を提供します。画像を削除するとブロックの魅力度は低下しますが、正確性は損なわれません。イラスト自体が追加情報を伝えない限り、altテキストは空です。

削除テストを使用してください。画像リクエストの失敗がエビデンスを失わせたり説明を不完全にする場合は、role=contentを宣言します。視覚的な強化のみを失う場合は、role=illustrationを宣言します。

類似しているが見逃しやすいケースがよくあります。

• ビジュアルが読み取り幅全体を必要とし、テキストが単に識別するだけの場合は、スタンドアロン画像を使用します。
• 読者が複数のインターフェース領域を特定する必要がある場合は、注釈付きスクリーンショット を使用します。
• 繰り返し比較する基準には表を、システムやシーケンスには図を、同等の画像群にはギャラリーを使用します。
• ビジュアルが単に文を繰り返すだけの場合は、通常の散文を使用します。

弱いセクションをデザインされたように見せるためにイメージボックスを使用しないでください。ノートパソコンを指さす人々のストック写真は「コラボレーション」を説明しませんし、一般的なロボットは人工知能に関する主張をより具体的にしません。画像を無関係な画像と交換してもコピーに変更がない場合、そのペアリングには編集上の契約はありません。

配置する場所

イメージボックスは、それが展開する主張やコンセプトを紹介する段落の直後に配置します。手順の中では、アクションの後、成功確認の前に配置し、視覚的エビデンスが指示を中断しないようにします。

内部タイトルがより具体的である場合にのみ、H2の直下に配置しても構いません。引用や限定情報は、それが制限する主張の隣に配置し、その間にイメージボックスを挿入してはいけません。

別のイメージボックス、ギャラリー、全幅フィギュア、動画、表、または2段組インフォボックスのすぐ隣に配置してはいけません。ビジュアルコンテナの間に解釈を挿入するか、真のピアを結合するか、別個のサブセクションを作成します。

箇条書き、ステップ、コールアウト、表セル、アコーディオン、またはクリッカブルカードの中に配置してはいけません。ブロック内や画像と説明の間にコールトゥアクションを配置してはいけません。

デスクトップでは、画像はテキストの前または後に表示される場合があります。モバイルでは、予測可能なソース順、キーボード順、スクリーンリーダー順を維持し、競合するCSSの並べ替えに依存してはいけません。

構成要素

構成要素は、色、影、列幅ではなく、意味によって定義されます。

1. コンテナ： 正確に1つのフィギュアと1つの説明を単一の編集ユニットとしてグループ化します。
2. 画像： 宣言された役割に応じて、エビデンスを表示するか、イラストを提供します。
3. 代替テキスト： コンテンツ画像の関連する視覚的目的を伝えます。冗長な装飾イラストの場合は空です。
4. キャプション： コンテンツ画像が何を示しているかを識別し、状態、日付、規模などの重要なコンテキストを提供します。
5. タイトル： インサイトまたは主題を述べます。ファイル名や「例」のような一般的なラベルではありません。
6. 説明： 何に注目すべきか、なぜそれが重要なのか、解釈に関する制限事項を読者に伝えます。
7. クレジット： 権利、出典、または編集方針で必要とされる場合に、作成者またはソースを明記します。
8. 読み取り順序： 2列が1列に折りたたまれたときに、一貫したフィギュアとテキストの関係を維持します。

説明は、「左側の画像」のような座標を使用するのではなく、主題を直接参照する必要があります。位置はブレークポイント、翻訳、シンジケーションによって変わります。「古いステータスと更新日がレビュー対象を特定する」は、どこでも真実であり続けます。

デザイン例

デザインシステムは、4つの役割と位置の組み合わせをサポートしています。いずれもコンテンツ要件を変更しません。

コンテンツ画像、画像が先

読者が解釈の前にエビデンスを検査すべき場合は、このデフォルトを使用します。

コンテンツ画像、画像が後

エビデンスの前にレンズを確立する必要がある説明の場合に使用します。

イラスト、画像が先

テキストが完全な意味を伝える一方で、コンセプト固有のビジュアルが認識を向上させる場合に使用します。

イラスト、画像が後

説明が優先され、イラストが視覚的な締めくくりとして機能する場合に使用します。

狭いビューポートでの動作

すべてのバリアントは、水平スクロールや意味を変える切り抜きなしに1列になります。キャプションはそのフィギュアに付属したままです。

パラメータ

コンテンツ契約は、編集上の意味をプレゼンテーションから分離します。幅の比率、ギャップ、ボーダー、背景、角丸、影、ブレークポイントはレンダラーに属します。

srcは、アセットが存在した後にのみ公開します。保留中のキャプチャは、スクリーンショットコメントとscreenshotsPending = trueを使用します。roleにデフォルト値はありません。エビデンスを黙って装飾として扱うと、アクセシビリティ障害が発生するためです。

最初のボディ見出しがtitleになり、その後のすべてがcontentになります。ボディでは、段落、強調、インラインコード、および1つのコンテキストリンクが許可されます。リスト、ネストされた見出し、テーブル、メディア、ボタン、フォーム、引用、アコーディオン、コンポーネントは拒否されます。

構文とコード例

3つの表記法すべてが、同じ役割、画像、タイトル、説明、キャプション、クレジット、読み取り順序を保持します。これらはポータブルなアダプター契約であり、登録済みのローカルショートコードやブロックがすでに存在することを意味するものではありません。

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

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date."}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
:::

サンプルパスは構文のみを示しています。プロダクション検証は、そのアセットが存在するまでこれを拒否しなければなりません。

Hugoショートコード

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date." >}}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
{{< /imagebox >}}

アダプターは名前付きパラメーターのみを使用します。登録されるまでは、セマンティックな<figure>とそれに続く散文を使用してください。アダプターはアセットを検証し、ディレクティブボディマッピングを保持します。

WordPressブロック

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Freshness report row showing a stale status beside an update date of 12 February 2026","caption":"The stale status is evaluated against the recorded update date."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Freshness report row showing a stale status beside an update date of 12 February 2026">
  <figcaption>The stale status is evaluated against the recorded update date.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>See why the page needs review</h2>
  <p>The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPressは1つのメディアフィールドと制約付きテキスト領域を公開する必要があります。利用できない場合は、ネイティブのImage、Heading、Paragraphブロックを使用し、横並びレイアウトがなくても意味を保持します。

例

良い例：画像がエビデンス

この例が機能する理由は、画像が2つの物理的詳細を証明し、コピーがその操作上の結果を説明しているからです。タイトルはインサイトを述べ、キャプションは可視のエビデンスを識別し、説明は写真全体を網羅しようとせずに具体的であり続けています。

悪い例：証明として提示された汎用的な装飾

明確なデータでスマートに働く 画像：カラフルなチャートの横でノートパソコンに向かって微笑む一般的な人物。 当社の革新的なプラットフォームはデータを実用的なインサイトに変換し、すべてのチームがより良い意思決定を引き出し、より多くの成果を達成できるようにします。

この例は、どちらの半分も検証可能な情報を提供していないため失敗しています。画像はあらゆるソフトウェア製品を宣伝でき、コピーにはメカニズム、インターフェース詳細、制約、例のない広範な成果が含まれています。この組み合わせは、読者や機械が抽出できる意味を伴わない視覚的な目立ちやすさを生み出します。焦点を絞った製品状態とそれがサポートする1つの決定の説明に置き換えるか、イメージボックスを削除してエビデンス付きの通常の散文として主張を記述します。

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

イメージボックスには専用のSchema.orgタイプはありません。そのテキストは、それを含むページエンティティの一部として残ります。コンテンツ画像は、安定したcontentUrl、正確なキャプション、寸法、および必要なクレジットまたはライセンスメタデータがある場合、ImageObjectになることがあります。装飾的なイラストは別個のエンティティを必要としません。

ページレベルのスキーマは、同じ代表的な画像を参照することがあります。製品詳細の写真は、表示されている製品のimageプロパティにフィードされることがありますが、チャートの切り抜きがDatasetになることはなく、スクリーンショットがSoftwareApplicationになることもありません。

1つの<figure>と<figcaption>に加えて、ラベル付けされた説明領域を使用します。固有のwidthとheightを設定します。レスポンシブ出力は、水平スクロールや指定された詳細の切り抜きを起こしてはいけません。

代替テキストは、コンテンツ画像の関連する主題、状態、および決定的な詳細を指定します。「〜の画像」で始めたり、キャプションを重複させたり、キーワードを詰め込んではいけません。冗長なイラストにはalt=""を使用します。属性を省略するとファイル名が露出する可能性があります。

位置、色、またはピクセルのみに依存してはいけません。決定的な数字、ラベル、警告、結論をテキストで繰り返します。リンクはキーボードで到達可能に保ち、ボックス全体を1つのリンクにせず、ソース順を維持し、200%ズームでテストします。

記述ルール

画像を選択する前に説明を書き、その後、必要なコンテキストを保持する最も狭い切り抜きを選びます。

• インサイト、主題、または関係性を述べる3〜10語のタイトルを書きます。「画像」「概要」「詳細を見る」「動作を見る」は避けます。
• 説明コピーは1〜2段落で40〜140語に保ちます。この要素は1つのポイントをサポートし、ミニ記事ではありません。
• キャプションは5〜25語に保ちます。何が示されているかと、それを解釈するために必要なコンテキストを特定し、推論は本文に記述します。
• 意味のある代替テキストには40〜180文字を使用し、最大値は250文字です。範囲を埋めることよりも正確さを優先します。
• 正確に1つの画像と、最大1つのコンテキストテキストリンクを含めます。リンク先が説明を実質的に深める場合にのみリンクします。
• タイトル、キャプション、本文全体で1つの声と時制を使用します。プロモーション的な形容詞よりも具体的な名詞と動詞を優先します。
• 画像が1つの状態、日付、切り抜き、デバイス、または例のみを示す場合は、解釈とともに制限事項を述べます。

内部にリスト、表、推薦文、価格、フォーム、メディア、ダウンロード、ボタン、複数ステップの指示、免責事項、またはコールトゥアクションを決して配置しないでください。2つの画像を使用したり、重要なコピーをピクセルに埋め込んだり、顧客データを公開したり、権利が不明なアートワークを公開したりしないでください。

「ご覧のとおり」という表現は避けてください。読者は画像を見られない可能性があり、目の見える読者でもどの観察が重要かを知る必要があります。「コネクタが完全に挿入されると、ロッキングタブは面一になります」のように直接述べてください。

使用する投稿タイプ

以下の行は、フロントマターのpostTypesによって駆動されます。「使用」は適切な役割を説明するものであり、すべてのページにイメージボックスを強制する要件ではありません。

QAチェックリスト

公開前に、要素全体を検証します。

• 画像と説明が1つのポイントを構成し、1つの編集ユニットに属している。
• roleが明示的にcontentまたはillustrationであり、削除テストを用いて選択されている。
• ソースファイルが存在し、承認済みであり、個人データ、不明な権利、プレースホルダーアセットを使用していない。
• タイトルが3〜10語でインサイトを述べ、本文が40〜140語でそれを説明している。
• コンテンツ画像には意味のある代替テキストと簡潔なキャプションがあり、冗長なイラストには空のaltテキストが使用されている。
• テキストは、視覚に依存できないすべての決定的な数字、ラベル、指示、警告、結論を記載している。
• キャプションは本文や代替テキストを重複させることなく画像を識別している。
• 必要な作成者、ソース、ライセンス、またはクレジットリンクが正確で表示されている。
• ブロックには1つの画像、1つの説明、最大1つのコンテキストテキストリンクが含まれている。
• ネストされたリスト、テーブル、メディア、ボタン、フォーム、コールトゥアクション、またはインタラクティブカードが含まれていない。
• より適切な注釈付きスクリーンショット、比較、図、ギャラリー、または全幅フィギュアを置き換えていない。
• デスクトップとモバイルのレイアウトが、セマンティックなソース順、キャプションの添付、キーボード順を維持している。
• 意味のある切り抜きが、レスポンシブリサイズ、200%ズーム、画像読み込み失敗でも機能する。
• 幅と高さがスペースを確保し、遅延読み込みがファーストビュー画像を遅延させない。
• 構造化データが出力される場合、表示コンテンツと一致し、装飾を別個のエンティティとして記述しない。
• ポータブルMarkdown、Hugo、WordPressのマッピングが、同じ役割、フィールド、意味を保持している。

FAQ

academyテンプレートは、このページの[[faq]]フロントマターに保存された5つのレビュー済み質問をレンダリングします。これらは、コンテンツ対イラストのテスト、装飾的な代替テキスト、説明範囲、コールトゥアクション、およびImageObjectスキーマをカバーしています。

イメージボックスは、読者が「この画像は何に貢献しているのか？」「なぜその貢献がここで重要なのか？」という2つの質問にすぐに答えられる場合に成功しています。どちらかの答えが曖昧な場合は、関係性を強化するか、ボックスを削除してください。