画像ギャラリー：順序付け、キャプション、モバイルルール

画像ギャラリーは、複数の関連する静止画像を1つの順序付けられた編集ユニットにグループ化します。その順序は意味の一部です。読者は、なぜこれらの画像が一緒に属するのか、それぞれが何に貢献するのか、そしてアイテム1からアイテム2への移動が時間、優先順位、視点、または単なるブラウジング順序のどれを表すのかを理解する必要があります。

この例では、3つのビューすべてが等しく重要であり、アイテムを隠すことなく収まるため、編集用グリッドを使用しています。順序は識別から始まり、2つの状態確認へと進みます。キャプションは各ビューが何を証明するかを述べており、「コネクタ画像」と単に繰り返しているわけではありません。

この要素が重要な理由

人々は、セットを山とは異なる方法で調査します。目に見える境界と意図的な順序は、画像が一緒になって1つのより大きな質問に答えることを読者に伝えます。概要が方向性を作り、その後詳細画像が不確実性を減らします。その進行により、読者が無関係な画像を開いて位置を記憶し、自分で関係性を構築する必要がなくなります。

順序付けは期待を制御します。時系列のセットは変化を約束し、商品セットは概要、スケール、機能、バリエーション、状態を約束します。ファイル名やアップロード順では、重要な証拠が二次的に見えたり、存在しないストーリーを示唆したりする可能性があります。

機械抽出可能性とは、ソフトウェアが画像間の関係性を失うことなくギャラリーを分離できる能力です。機械は個別の画像ファイルを識別できますが、それらが代替、ステップ、証拠、装飾のいずれであるかを安全に推測することはできません。ギャラリータイトル、宣言された順序付けロジック、安定したアイテム位置、個別のaltテキスト、表示可能なキャプションが、その関係性をテキストで提供します。同じフィールドは、コンピュータビジョンに依存せずに、検索インデックス作成、コンテンツインベントリ、アクセシビリティチェック、構造化データに活用できます。

共有の要素作成ルール が、型付き要素の優先順位、ポータブルディレクティブ、本文マッピングを規定します。このページは、画像ギャラリー固有のアイテム制限、順序付け、キャプション、モバイル動作に関して優先されます。この要素の目的が該当する場合は、ばらばらの画像や汎用スライダーでギャラリーを模倣しないでください。

使用すべき場合

2枚以上の画像が同じ質問に対して、別々よりも一緒の方がより良く答えられる場合に画像ギャラリーを使用します。各画像は、明確なビュー、状態、段階、詳細、または例を追加する必要があります。適切なケースとしては、商品ビュー、ビフォーアフターの証拠、短いプロセスシーケンス、ロケーションの概要、デザインポートフォリオ、または1つのレビュー結論を裏付ける複数の詳細などがあります。

各アイテムに除去テストを適用します。画像を削除しても読者が判断、確認、理解できる内容に変化がない場合は、セットから削除してください。ギャラリーは利用可能なすべてのアセットを保存するための場所ではありません。

類似しているが異なるケースには別の要素が必要です：

• 1枚の画像で要点が伝わり、それが散文で解釈される場合は、単一の図または画像ボックスを使用します。
• 読者が1つのインターフェース画像内で複数のコントロールを見つける必要がある場合は、注釈付きスクリーンショット を使用します。1つの画面を説明のない切り抜きのギャラリーに分割しないでください。
• 読者が多くの選択肢にわたって繰り返し属性を比較する必要がある場合は、比較表を使用します。画像が判断をサポートすることはありますが、テキストによる基準を置き換えることはできません。
• アクションが主要コンテンツである場合は、ステップリストを使用します。ギャラリーは結果の状態を示すことはできますが、必要な指示をキャプションに変えてはいけません。
• 各カードに価格、在庫状況、評価、アクションがある場合は、プロダクトスライダーを使用します。ギャラリーは画像を含み、購入可能なエンティティは含みません。
• 画像が異なるセクションをサポートし、意味のある順序を共有しない場合は、別々の図を使用します。

配置する場所

ギャラリーは、そのセットが答える質問を述べた段落の直後に配置します。製品状態ギャラリーは状態の主張に従い、ケーススタディのシーケンスは介入に従い、ロケーションギャラリーは到着情報に従います。

ギャラリータイトル、オプションの導入文、すべてのアイテム、キャプション、クレジット、コントロールを1つのセマンティックコンテナに保持します。アイテム間に散文、広告、コールトゥアクション、改ページを挿入しないでください。キャプションで完全に伝えきれない場合は、ギャラリーの後に解釈または次の判断を配置します。

ギャラリーは、別のギャラリー、動画、大きな表、全幅のチャート、画像ボックス、または無関係なコールトゥアクションのすぐ隣に配置してはいけません。密集したビジュアルユニットの間に説明散文を追加するか、真に同等のものを結合してください。

ギャラリーをステップ、リストアイテム、コールアウト、テーブルセル、アコーディオン、クリッカブルカード、または別のギャラリーの中に配置しないでください。主張とそのソース、または警告とそれが制限するアクションを決して分離しないでください。画像自体が答えでない限り、最初のビューポートは直接的な回答のために確保してください。

アナトミー

アナトミーはセマンティックです。グリッドのカラム数、サムネイルサイズ、シャドウ、角丸、アニメーションは、コンテンツモデルではなくレンダラーに属します。

1. ギャリーコンテナ： タイトル、説明、アイテム、コントロールを1つのアクセシブルな名前でグループ化します。
2. ギャリータイトル： 共有の主題または質問を3〜10語で述べます。
3. 導入文： オプションで、順序や検査タスクを1文で説明します。
4. 順序付けられたアイテム： デスクトップレイアウトに関係なく、安定したソース順序を保持します。
5. 画像： 固有の幅と高さを持つ、既存の権利処理済みアセットを使用します。
6. 代替テキスト： キャプションをコピーするのではなく、セット内でのその画像の目的を説明します。
7. キャプション： ビューを識別し、その明確な貢献を説明します。
8. クレジット： 必要に応じて、作成者、ソース、またはライセンス情報を提供します。
9. コントロール： インタラクティブギャラリーの場合、可視ボタンがポインター、キーボード、スイッチ、タッチ入力をサポートします。
10. 位置インジケーター： 一部のアイテムが非表示の場合、「2 / 5」をテキストで表示します。
11. モバイル順序： DOM順序、番号付け、キーボード順序、意図されたナラティブと一致します。

デザイン例

関係性を保持する最もインタラクションの少ないバリエーションを選択してください。すべてのバリエーションは、完全なキャプションをテキストで利用可能にし、すべてのブレークポイントで同じソース順序を使用します。

編集用グリッド

2〜6枚の等しく重み付けられた画像で、一緒に表示できるものにグリッドを使用します。デスクトップは2列または3列を使用できます。モバイルでは1列に折りたたまれ、3つの画像を読めないサムネイルに縮小することはありません。

シーケンシャルストリップ

明示的な時系列または空間的な進行を持つ3〜8枚の画像にはストリップを使用します。狭い画面では、表示可能なコントロール、位置インジケーター、キーボード操作、および積み重ねられた非JavaScriptフォールバックが存在する場合にのみ、水平スクロール可能領域になります。スワイプを唯一のナビゲーション手段にしてはいけません。

比較ペア

ビフォーアフター、オリジナルと修正版、または一緒に判断する必要がある2つの視点には、正確に2枚の画像を使用します。色や位置だけでなく、永続的なテキストラベルを使用します。モバイルではアイテム1をアイテム2の前に積み重ね、画像の横にラベルを繰り返します。

メイン画像＋詳細ビュー

1つの概要がセットを固定し、残りの画像が個別の検査質問に答える3〜12枚の商品またはアーティファクトビューにこれを使用します。サムネイルを選択すると、メイン画像のaltテキスト、キャプション、位置、およびアナウンスされる状態が更新される必要があります。すべての画像はJavaScriptなしでも到達可能である必要があります。

モバイル積み重ねデフォルト

インタラクティブ性が理解を実質的に向上させない場合は常に、積み重ねリストを使用します。すべてのアイテムとキャプションが表示可能、リンク可能、印刷可能、ジェスチャーなしで読めるため、編集コンテンツのデフォルトです。

パラメータ

コントラクトは編集上の意味とアセットメタデータを保存します。レイアウトトークン、列幅、ギャップ、コントロールアイコン、トランジション時間、ブレークポイントはレンダラーに属します。

キャプションは、証拠、意味を変える順序、比較ラベル、表示可能な権利情報に必須です。商品アングルは、altテキストとコンテキストがビューを区別する場合にのみ省略できます。mobile=scrollは、必要なコントロールがあるstripまたはprimary-detailsでのみ有効です。

構文とコード例

すべてのマッピングは、同じタイトル、順序、アイテムフィールド、フォールバックを保持します。本番環境では、ファイルが存在するまでサンプルパスを拒否する必要があります。

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

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Three views that establish product condition

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width=1600 height=1200}
**1. Overview.** The complete connector establishes shape, scale, and orientation.
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width=1600 height=1200}
**2. Locking tab.** The close view confirms that the retention clip is intact.
:::
:::

最初の見出しがtitleになり、各アイテム本文がキャプションになります。ソース順序が正規であるため、メイソンリーはギャップを埋めるためにアイテムを並べ替えることはできません。

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

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Three views that establish product condition

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width="1600" height="1200" >}}
**1. Overview.** The complete connector establishes shape, scale, and orientation.
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width="1600" height="1200" >}}
**2. Locking tab.** The close view confirms that the retention clip is intact.
{{< /gallery-item >}}
{{< /image-gallery >}}

このアダプター仕様は登録されたショートコードではありません。承認されるまでは、セマンティックな図をソース順で使用し、存在しないアセットを参照しないでください。

WordPressブロック

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Three views that establish product condition</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward"><figcaption><strong>Overview.</strong> The complete connector establishes shape, scale, and orientation.</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Close view of the connector showing an intact raised locking tab with no visible crack"><figcaption><strong>Locking tab.</strong> The close view confirms that the retention clip is intact.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

WordPress実装では、アイテムごとのaltテキスト、キャプション、固有の寸法、ソース順序、アクセシブルなグループ名を保持する場合にのみ、ネイティブのギャラリーブロックを使用できます。背景画像のシーケンスをスタイリングすることは契約を満たしません。

例

良い例：すべてのビューが異なる不確実性を解決する

中古機器の状態 — 点検順序

1. 全体ユニット： 識別情報を確立し、筐体が完全であることを示します。
2. シリアルプレート： 読み取り可能な焦点で、正確なモデルと定格電圧を確認します。
3. 電源コネクタ： まっすぐなピンと無傷のロッキングタブを示します。
4. 摩耗面： 定規と並べて、最も深い目に見える傷をスケールとともに示します。

これは買い手の検査ロジックに従います。各キャプションは検証可能で、定規はクローズアップで損傷が誇張されるのを防ぎ、モバイルスタックは順序を保持します。

悪い例：アセットダンプとして使用されるカルーセル

最新イベント ほぼ同一のステージ写真12枚、キャプションなし、4秒ごとに自動送り。ナビゲーションはホバー時のみ表示。モバイル版は中央部分を切り抜いて表示し、スワイプジェスチャーのみを受け付けます。

メンバーシップにも順序にも理由がありません。ファイル名12個はスクリーンリーダーに何も伝えず、自動送りは検査を妨げ、ホバー時のみのコントロールはキーボードとタッチユーザーを排除し、スワイプのみのナビゲーションはアクセスを隠し、切り抜きは被写体を削除する可能性があります。定義されたストーリーを伝える数フレームを選択し、明確な代替テキストとキャプションを書き、自動的な動きを停止し、モバイルスタックをデフォルトにしてください。

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

ギャラリーは自動的に特別な検索処理を受けるわけではありません。表示可能なページとアセットがサポートする関係性のみをマークアップしてください。意味のある画像は、安定したcontentUrl、キャプション、作成者またはクレジットテキスト、ライセンス情報、それらの事実が既知である場合の代表ステータスを持つImageObjectにマッピングできます。明示的に順序付けられたギャラリーは、ソース順序と一致するposition値を持つItemListにマッピングできます。商品ビューは親のProduct.imageプロパティを設定できます。装飾画像のエンティティを作成したり、ライセンスを invent したり、すべての画像が代表的であると主張しないでください。

必要な場合は、表示可能な<figcaption>を持つ<figure>要素内でネイティブの<img>要素を使用してください。見出しを通じてセクションに名前を付けてください。<ol>または同等の位置セマンティクスで順序関係を保持してください。視覚的な配置は決してDOM順序を上書きしません。

代替テキストは、このセット内の各画像の目的を説明します。「〜の画像」で始めたり、キャプションをそのまま繰り返したり、判断に無関係な詳細を説明したりしないでください。同じオブジェクトの2枚の写真は、それぞれ目的が異なるため、異なるaltテキストが必要です。画像が真に冗長で、削除しても証拠が失われない場合にのみalt=""を使用してください。

インタラクティブなバリエーションには、名前付きの前へ/次へのボタン、キーボードアクティベーション、テキスト位置インジケーター、変更後のステータスアナウンスが必要です。自動送りは禁止されています。アクティブ化されたコントロールにフォーカスを維持し、JavaScriptなし、200%ズーム、動作軽減設定でもコンテンツを保持してください。

作成ルール

すべてのギャラリーは1つの共有質問に答えます。存在理由を述べ、ナラティブ、時系列、優先順位、視点、比較の順に並べ、アップロード順にしないでください。

• 通常のギャラリーには2〜8アイテム、比較には正確に2アイテム、主要商品/詳細セットには3〜12アイテムを使用します。
• タイトルは3〜10語、オプションの導入文は8〜30語の1文で記述します。
• キャプションは5〜30語に抑えます。スキャンが向上する場合はビュー、状態、またはアイテムラベルで始め、その後に貢献内容を説明します。
• セット全体でキャプション構造を並行にします。最初が状態ラベルで始まる場合、他も同様にする必要があります。
• 代替テキストは、視覚によらない読者がその特定のフレームから必要とするものに焦点を当てます。40〜180文字を目標とし、250文字を超えないようにします。
• 事実に基づいた観察的なトーンを維持します。「素晴らしいシールは完璧に見える」ではなく、「シールは面一に収まっている」と述べてください。
• 解釈を制約する場合は常に、時間、スケール、切り抜き、状態、ソースを明記します。
• 外観が証拠となる場合は、同じ比較条件（同等の切り抜き、角度、スケール、照明、色処理）を使用します。

見出し、段落、表、手順リスト、コールトゥアクション、フォーム、価格、評価、推薦文、展開可能な開示、動画、オーディオプレーヤー、または商品カードをアイテムキャプション内に決して配置しないでください。キャプションをピクセルに焼き付けたり、色だけをラベルにしたり、切り抜きで材料欠陥を隠したり、顧客データを露出したり、使用権が確認されていない画像を公開したりしないでください。

使用する投稿タイプ

以下の行はpostTypesフロントマターを反映しています。含まれているということは、画像が実際のセットを形成する場合にその投稿タイプがギャラリーを使用できることを意味し、すべてのページで要素を必須にするものではありません。

QAチェックリスト

• タイトルは1つの共有質問または主題を述べており、すべての画像が異なる回答を提供している。
• アイテム数が選択したバリエーションと一致し、冗長なフレームが含まれていない。
• orderedByに、正当なナラティブ、時系列、優先順位、視点、または比較順序が記録されている。
• ソース順序、視覚順序、キーボード順序、スクリーンリーダー順序、番号順序、モバイル順序がすべて一致している。
• 公開前にすべてのsrcが既存の権利処理済み静止画像に解決されている。
• すべての画像に固有の幅と高さ、意図的なalt値、意味のある切り抜きがある。
• 証拠、比較、順序付けられたアイテムに、並行構造の簡潔で表示可能なキャプションがある。
• クレジットとライセンスリンクが、必要な場合に表示され正確である。
• 比較画像は、差異が開示されていない限り、同等のスケール、角度、切り抜き、照明、ラベルを使用している。
• モバイルは読める積み重ねフォールバックまたは完全なアクセシブルコントロールを使用しており、スワイプが唯一の入力ではない。
• インタラクティブなバリエーションには、表示可能な前へ/次へのボタン、テキスト位置インジケーター、キーボードサポートがあり、自動送りがない。
• ギャラリーはJavaScriptなし、200%ズームでも動作し、動作軽減設定を尊重し、水平方向のページオーバーフローを発生させない。
• 最初の重要な画像が遅延されず、後の読み込み状態がアナウンスされ、予約スペースがレイアウトシフトを防ぐ。
• 必要な指示、数字、警告、ラベル、結論がピクセル内にのみ存在していない。
• ギャラリーに動画、商品カード、フォーム、価格、評価、推薦文、コールトゥアクションが含まれていない。
• 構造化データは、装飾をコンテンツとして扱うことなく、表示可能な順序、キャプション、権利、エンティティ関係と一致している。
• ポータブルMarkdown、Hugo、WordPressマッピングが同じフィールド、アイテム順序、意味を保持している。

FAQ

アカデミーテンプレートは、このページの[[faq]]フロントマターに保存された5つのレビュー済み質問をレンダリングします。これらはアイテム数、モバイルカルーセル、代替テキストとキャプション、禁止された混合コンテンツ、構造化データをカバーしています。

成功とは、読者が画像間の関係性と各アイテムの貢献を説明できることを意味します。意味のある順序、明確なキャプション、アクセシブルなモバイルパスがなければ、セットはギャラリーではなくアセットリストです。