注釈付きスクリーンショット：ルールと例

注釈付きスクリーンショットは、実際のインターフェース状態を示し、読者が注目すべき正確な領域を特定します。画像には番号付きマーカーが、ページには一致するテキストの凡例が配置されます。この分離こそが要素の本質です。マーカーのない製品画像やピクセルに焼き付けられたラベルでは、この契約を満たせません。

コンテンツ鮮度監査、1つの追跡URLでフィルター済み。

1. 追跡URL: レビューがドメイン全体ではなく目的のページに適用されていることを確認します。
2. ステータスフィルター: 編集上の判断が必要なページのみにテーブルを絞り込みます。
3. 結果日付: 基盤となる監査レコードが最後に更新された日時を示します。

キャプチャは保留中であるため、コメントは破損した画像参照ではなく、プロダクションキャプチャの仕様です。アセットが存在すれば、画像、キャプション、番号付き凡例が1つの意味論的なfigureとしてレンダリングされます。

この要素が重要な理由

読者は製品画像を使用して、「この指示はどのコントロール、値、または状態を意味するのか」という空間的な疑問に答えます。密集したインターフェースには、ナビゲーション、フィルター、ラベル、データ、バッジ、アクションが含まれ、すべてが等しく重要に見える可能性があります。注釈のないスクリーンショット では、読者は作者の注目点を逆解析する必要があります。番号付きマーカーは、その検索を、目に見える位置と短い説明の直接的な一致に縮小します。

この要素は、脆弱な座標表現も置き換えます。「右側のコントロールを使用」はツールバーが折り返されると誤りになりますが、「2とマークされたステータスフィルターを選択」はキャプチャが最新である限り使用可能です。

機械による抽出可能性とは、ソフトウェアがコンテンツ単位の有用な意味を分離して再利用できることを意味します。コンピュータビジョンはインターフェースのテキストを認識できても、20個のコントロールのうちどれがこの手順にとって重要なのかを確実に推論することはできません。可視で順序付けられた凡例は、検索システム、翻訳ツール、アクセシビリティソフトウェア、コンテンツ監査がテキストとして処理できる、マーカーと説明の明示的なペアを作成します。画像は空間的な証拠を提供し、凡例は検索可能な意味を提供します。これはより広範な要素作成ルール に従います。レンダラーが変わってもコンテンツは型付けされ移植可能なままです。

凡例をピクセルに焼き付けてはいけません。ピクセルのテキストは、アートワークを編集せずには翻訳、検索、選択、修正ができません。また、画面を見ることができない人にデジタルコンテンツを読み上げるソフトウェアであるスクリーンリーダーにも表示されません。画像に属するのはマーカー番号のみです。

使用すべきタイミング

読者が実際のインターフェース内の特定の領域を特定する必要があり、言葉だけでは複数の可能性が残る場合に注釈付きスクリーンショットを使用します。2つのコントロールが類似した名前を持つ場合、重要な状態が微妙である場合、結果を周囲のコンテキストで解釈する必要がある場合、または視覚的な構成を散文で忠実に表現できない場合に必要です。また、製品ページが具体的なインターフェースの主張を画像で証明できる場合にも有用です。

スクリーンショットは、指示がすでに一意で目に見えるコントロールを指定しており、操作が標準的な場合にはオプションです。「保存」を選択するという指示は、ページにそのようなボタンが1つしかない場合、通常は画像を必要としません。同じ画面に下書き保存、表示保存、変更を保存があり、間違った選択が結果を変える場合には必須になります。

スクリーンショットは、不確実性を解消せずに重みを追加する場合には有害です。装飾のためや、表でより明確なテキストを繰り返すために追加してはいけません。14ステップのガイドに14のスクリーンショットがあると、14の中断、モバイルでのズーム問題、古いアセットが生まれます。曖昧なステップだけをキャプチャし、日常的なステップは正確な動詞で伝えましょう。

類似しているが不適切な例は以下の通りです：

• 1つのアイコンを説明するために使用されるダッシュボード全体： 方向性を維持できる最小の領域にトリミングします。広いインターフェースに埋もれたマーカーは検索の負担を軽減しません。
• 数値的証拠として使用されるスクリーンショット： 決定的な値をテキストまたは表で繰り返します。ピクセルだけを主張の唯一のアクセシブルなコピーにしてはいけません。
• 開く前のメニューのスクリーンショット： 読者が確認する必要がある状態をキャプチャします。閉じた状態は製品が存在することは証明できますが、どの選択肢を選ぶべきかは示しません。
• 顧客レコードを含むスクリーンショット： キャプチャ前に安定したデモデータに置き換えます。ぼかしは見落とされがちです。
• スクリーンショットとして偽装された図： 抽象的な関係には図を使用します。インターフェースのリアルさは、インターフェースが重要である場合にのみ役立ちます。

配置場所

読者が最初にインターフェースを確認するよう求められる段落またはステップの後にfigureを配置します。手順では、アクションの後、成功状態またはトラブルシューティングの前に配置し、読者が結果を確認する前にコントロールを見つけられるようにします。

画像、キャプション、凡例は一緒に保ちます。見出しがグループを導入することはできますが、別の段落、コールアウト、広告、または改ページがキャプチャと番号付き説明を分離してはいけません。キャプションは画面全体とコンテキストを識別します。散文に属する指示を含めたり、凡例を置き換えたりしてはいけません。

2つの全幅スクリーンショットを隣接して配置してはいけません。それらを区別する説明を挿入するか、両方の状態を一緒に評価する必要がある場合には1つのラベル付き比較を作成します。スクリーンショットは、無関係なコールトゥアクション、密集した表、ギャラリーから離して配置します。

要素は、各出現が異なる空間的疑問に答える場合にのみ繰り返します。1つの焦点を絞ったfigureを優先し、そうでない場合は個別のクロップに異なるファイル名と目的を付与します。

構成要素

構成要素のキャプチャは、1つの完全な要素の可視部分とテキスト部分を示します。説明ラベルはレンダリングされた凡例に残り、ソース画像の一部にはなりません。

レンダリングされた凡例

1. コンテキスト境界: ページと位置を特定するのに十分な周囲のインターフェースを含みますが、無関係なナビゲーションや空白は除外します。
2. 番号付きマーカー: 色だけに頼らず、高コントラストの円と整数を使用して領域を凡例のエントリに結びつけます。
3. ターゲット領域: 説明に必要な最小の完全なコントロール、値、または状態をマークします。ターゲットのラベルを覆ってはいけません。
4. 方向ランドマーク: 1つの安定した見出し、タブ、またはパネルラベルを保持し、読者がライブ製品で同じ領域を見つけられるようにします。
5. キャプション: 画像の下の可視テキストで画面、状態、シナリオを命名します。
6. 凡例: 番号がマーカーと完全に一致し、エントリが外観だけでなく重要性を説明する順序付きリストを使用します。

マーカー番号は1から始まり、凡例の順序に従います。画像ごとに2〜6個を使用します。1個は難しいターゲットに適しており、6個を超えると通常はキャプチャが広すぎることを示します。

デザイン例

サポートされるバリアントはクロップとビューポートを変更しますが、注釈ポリシーは変更しません。すべてのバリアントはデモデータ、番号付き画像マーカー、外部テキスト凡例、可視キャプションを使用します。

焦点を絞ったコントロール: 単一の曖昧なアクションに推奨します。クロップが無名の長方形にならないよう、1つの方向ラベルを保持します。

ワークフロー状態: 入力、ステータス、結果の関係が重要な場合に使用します。無関係なグローバルナビゲーションはフレーム外に保ちます。

コンテキスト内のURL: ブラウザクローム（ブラウザ自身のタブ、アドレスバー、コントロール）を含む唯一の標準バリアントです。アドレスバーと必要な権限またはセキュリティインジケーターのみを含めます。

モバイル状態: インタラクションがモバイル幅で変化する場合に、実際の狭いレイアウトをキャプチャします。広いデスクトップ画面を縮小してモバイルの例と称してはいけません。

パラメーター

パラメーターは移植可能なコンテンツ契約を形成します。マーカーの色、境界線の太さ、キャプションのタイポグラフィなどの視覚的値はレンダラーに属し、作成者のフィールドではありません。

screenIdは製品表面をファイル名とは独立して識別するため、リリース時に content-freshness-audit の異なるクロップを見つけることができます。alt.yaml ファイルはシンプルです。1つのファイル名の後に、折りたたまれた代替テキスト文字列が1つ続きます。

構文とコード例

各記法は同じメタデータ、キャプション、マーカー、画像-キャプション-凡例の読み取り順序を保持します。

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

:::annotated-screenshot{src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport=1440 density="2x" screenId="content-freshness-audit" captureDate="2026-08-27"}
Content freshness audit filtered to one tracked URL.

1. **Tracked URL:** Confirms which page the audit evaluates.
2. **Status filter:** Limits the results to pages awaiting review.
3. **Result date:** Shows when the audit data was refreshed.
:::

アダプターはフォルダの alt.yaml から alt を解決します。ファイル名キーがない場合は、キャプションをコピーするのではなく、公開失敗となります。

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

{{< annotated-screenshot src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport="1440" density="2x" screenId="content-freshness-audit" captureDate="2026-08-27" >}}
Content freshness audit filtered to one tracked URL.

1. **Tracked URL:** Confirms which page the audit evaluates.
2. **Status filter:** Limits the results to pages awaiting review.
3. **Result date:** Shows when the audit data was refreshed.
{{< /annotated-screenshot >}}

これは登録されたショートコードではなく、アダプター契約です。承認されたレンダラーとアセットが存在するまでは、確立されたセマンティックfigureパイプラインを使用するか、規定されたキャプチャコメントを残します。凡例や鮮度フィールドを削除するレンダラーに代用してはいけません。

WordPressブロックまたはショートコード

[annotated_screenshot src="workflow-state.webp" viewport="1440" density="2x" screen_id="content-freshness-audit" capture_date="2026-08-27"]
[caption]Content freshness audit filtered to one tracked URL.[/caption]
[marker number="1" label="Tracked URL"]Confirms which page the audit evaluates.[/marker]
[marker number="2" label="Status filter"]Limits the results to pages awaiting review.[/marker]
[marker number="3" label="Result date"]Shows when the audit data was refreshed.[/marker]
[/annotated_screenshot]

WordPressブロックはフィールドをコントロールとして公開する場合がありますが、マーカー説明はテキストとして保存する必要があります。

例

良い例：1つの曖昧な状態、3つの有用なマーカー

demo.example/pricing/ のコンテンツ鮮度レビュー

1. 追跡URL: 結果が指示で選択された価格ページに属することを確認します。
2. 要レビュー: 現在のページを作業キューから除外する正確なフィルターを特定します。
3. 最終更新日: 編集者が古い監査結果を現在の診断として扱うのを防ぎます。

これは、各マーカーが判断に答え、クロップが方向性を保持し、凡例がピクセルでは見えない結果を説明するため、機能します。デモドメインは明らかに顧客データではありません。

悪い例：ラベル付き製品ポスター

悪いバージョンはダッシュボード全体を一度に説明します。8つの矢印が交差し、ラベルがコントロールを隠し、焼き付けられた販促文はアクションを示しません。ブラウザブックマークはプライバシーリスクを生み出し、顧客名は承認を不確実にし、画面識別子が更新をサポートせず、モバイルでのスケーリングでターゲットが読めなくなります。

1つのタスクを選択し、承認済みデモデータを使用し、そのパネルにクロップし、必要なマーカーのみを保持することで修正します。説明をテキストの凡例に移動し、コンテキストに応じた代替テキスト を追加し、画面識別子と日付を記録します。

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

注釈付きスクリーンショットに特別なSchema.orgタイプはありません。Article の image プロパティ、または正確な contentUrl、キャプション、幅、高さを持つ ImageObject に入力される場合があります。マーカープロパティを発明せず、凡例を可視に保ちます。

ネイティブのfigureセマンティクスを使用します：<img>、<figcaption>、順序付き凡例を含む1つの <figure>。キャプションは画面全体と状態を命名します。画像の alt 属性は、このコンテキストで画面が何を示すかを説明します。「スクリーンショット」で始めるべきではありません。画像要素自体がすでにそのことを示しているからです。凡例は詳細な番号付き説明を提供するため、6つのエントリすべてを代替テキストで繰り返すと、長く重複した読み上げになります。

80〜180文字を目標とし、上限は250文字です。製品領域、状態、マークされた目的を記載します：「コンテンツ鮮度監査、1つの追跡URLでフィルター済み、ステータスフィルターと最終更新日にマーカーあり」。インターフェースを書き写したり、キーワードを詰め込んだり、ファイル名を使用したりしないでください。この情報画像は通常、空でない代替テキストが必要です。

マーカー番号は色なしで読み取れる必要があります。明るいインターフェース領域と暗いインターフェース領域の両方に対して高コントラストを使用し、視覚的なサイズを一貫させ、ラベルや値を覆わないようにします。凡例は通常のドキュメント順序で順序付きリストを使用します。静的コンテンツをアラートやインタラクティブウィジェットに変えるARIA（Accessible Rich Internet Applications）ロールは避けてください。aria-describedby リレーションシップは、テストによって可視の凡例が2回読み上げられることなくナビゲーションが改善されることが示された場合にのみオプションとして使用します。

狭い幅では、レスポンシブデザイン が意味を保持する必要があります。マーカーとターゲットが読み取れる間は広い画像をスケーリングしても構いませんが、それ以外の場合は焦点を絞ったクロップや実際のモバイルキャプチャを提供してください。ページレベルの水平スクロールやズームの必要を生じさせてはいけません。キャプションと凡例は下で折り返します。

コンテンツとキャプチャのルール

一貫性により、スクリーンショットは比較可能で交換可能になります。デスクトップ製品画面は固定の1440 CSSピクセルビューポート、2xピクセル密度（Retina密度とも呼ばれ、各CSSピクセルに対して2つのデバイスピクセルを記録）でキャプチャします。実際のモバイル状態は390 CSSピクセル、2x密度でキャプチャします。承認された製品テーマをガイド内で一貫して使用し、テーマの違いが主題でない限りライトモードとダークモードを交互に使用しないでください。

デモデータのみを使用します：実際の名前、メールアドレス、ドメイン、請求情報、トークン、プロンプト、結果は使用しません。キャプチャ前にサイドバー、最近の項目、オートフィル、通知、アバターを検査します。

URL、許可、またはブラウザコントロールが目的でない限り、ブラウザクロームを除外します。タブ、ブックマーク、拡張機能、ダウンロード、プロファイル、通知を非表示にします。読み込み後にキャプチャし、無関係なツールチップを閉じ、カーソルは必須の場合のみ表示します。

ソースキャプチャは cdn-assets/seo-playbook/elements/annotated-screenshot/ の下に保存します。画面と状態に基づいた小文字ケバブケースの名前を使用します（例：freshness-audit-needs-review.webp）。final、new、v2、個人名、日付をファイル名に使用してはいけません。安定した名前により、すべてのページを書き換えることなくアセットを交換できます。通常の配信にはWebPを使用し、小さなインターフェーステキストを鮮明に保つ必要がある場合は非可逆設定を避けます。プロダクションパイプラインがWebPがテキストや透明度に悪影響を与えることを示す場合にのみPNGを使用します。細かいテキストと鋭いエッジを持つUIキャプチャにはJPEGを使用しないでください。

最大幅1600 CSSピクセルでレンダリングします。1440ピクセルの2xソースは2880物理ピクセルになる場合があります。アスペクト比と intrinsic 寸法を保持します。最適化は画像SEO をサポートしますが、圧縮によってテキストやマーカーがぼやけてはいけません。

すべてのアセットフォルダには、ファイル名ごとに1つのエントリを持つ alt.yaml が含まれます：

freshness-audit-needs-review.webp: >-
  AmICited content freshness audit filtered to one tracked URL, with numbered markers on the review status and last-refreshed date.

キーはファイル名と完全に一致し、値は代替テキストであり、キャプションや凡例ではありません。プレースホルダー、ストックダッシュボード、存在しない画像参照は禁止です。保留中のキャプチャは SCREENSHOT コメントと screenshotsPending = true のみを使用します。

鮮度と再撮影ポリシー

スクリーンショットは、描かれたコントロールが移動したり名前が変わったりすると、静かに古くなります。各キャプチャを登録された画面のビューとして扱います。screenId は製品の変更をアセットに結合し、キャプチャ日付は記録された状態を特定します。

UIの変更は、マークされたターゲットが移動または改名された場合、凡例で説明される状態が変更された場合、そこに到達するためのナビゲーションパスが変更された場合、保持された方向ランドマークが削除された場合、または古い画像が読者を誤ったコントロールに導く可能性がある場合に、再撮影をトリガーします。その画面の完全なfigureセット（焦点を絞ったバリアントとモバイルバリアントを含む）を再撮影します。カラートークンの変更、間隔の調整、無関係なサイドバーの追加は、スクリーンショットがライブ体験やアクセシビリティ基準と視覚的に矛盾しない限り、自動的な交換を必要としません。

画面が変更された場合、その screenId を検索し、次にそのフォルダとファイル名を検索してレガシー使用を特定します。安定したファイルを交換し、alt.yaml をレビューし、影響を受けるすべての凡例を検査します。交換ファイルの名前を変更して古い参照を孤立させないでください。

製品画面の所有者が変更を通知し、コンテンツ所有者が交換品を受け入れます。同じデモフィクスチャ、ビューポート、密度、テーマで再キャプチャします。実質的なページ更新のたびにスクリーンショットをレビューします。

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

postTypes フロントマターが登録された結合です。各タイプは同じ要素契約を使用しますが、異なる要件しきい値を適用します。

ケーススタディには追加の境界が必要です。実際の顧客情報を表示する明示的な許可を得るか、明確に開示されたデモデータでインターフェースを再構築し、結果の証拠ではなくワークフロー図として扱います。編集（墨消し）は同意または管理されたフィクスチャの代わりにはなりません。

QAチェックリスト

レビュアーは視覚的な仕上げの前に、コミュニケーションとメンテナンスリスクをチェックします。

• 目的: figureは1つの空間的な曖昧さを解消するか、1つの可視インターフェースの主張を証明します。
• 必要性: 日常的なステップはテキストのままです。ページはデフォルトですべてのステップに1つのスクリーンショットを割り当てていません。
• 実際の状態: キャプチャはコピーで議論された正確な開かれたメニュー、選択されたフィルター、結果、またはエラーを示しています。
• デモデータ: 顧客、従業員、アカウント、ブラウザ、トークン、プロンプト、請求情報は表示されていません。
• キャプチャの一貫性: ビューポート、2x密度、テーマ、インターフェース状態、ブラウザクロームルールが標準に一致しています。
• 焦点を絞ったクロップ: 方向性のための十分なコンテキストは残っていますが、無関係なインターフェース領域がターゲットと競合していません。
• マーカー: 1〜6個の連続した番号があり、それぞれ高コントラストで読み取り可能、ラベルや値を避けています。
• 外部凡例: すべてのマーカーにページテキスト内で一致する順序付きリストエントリがあります。凡例の文言はピクセルに焼き付けられていません。
• キャプション: figureには画面、状態、シナリオを命名する簡潔な可視キャプションがあります。
• 代替テキスト: フォルダの alt.yaml に正確なファイル名キーと目標長範囲内のコンテキスト説明が含まれています。
• モバイル動作: ターゲットとマーカーはページレベルの水平スクロールやズームの必要なしに読み取れます。そうでない場合は焦点を絞ったクロップが存在します。
• ファイル契約: パス、小文字ケバブケース名、フォーマット、寸法、intrinsicサイズが配信標準に従っています。
• 鮮度: screenId とキャプチャ日付が記録され、ライブUIがまだ一致し、すべての参照がテキスト検索で見つけられます。
• ポータビリティの同等性: Markdown、Hugo、WordPressの表現が同じアセット、キャプション、マーカー順序、凡例の文言を保持しています。
• 壊れたアセットなし: 実際の画像パスはファイルが存在した後にのみ表示されます。保留中のキャプチャはコメントのままで screenshotsPending = true を維持します。

FAQ

アカデミーテンプレートは、このページの [[faq]] フロントマターに保存された5つのレビュー済み質問をレンダリングします。これらは、スクリーンショットの頻度、外部凡例、代替テキストの長さ、再撮影トリガー、ブラウザクロームの例外をカバーしています。