警告ボックス：使用するタイミングと方法

警告ボックスは、重大な害を引き起こす可能性のある行動の前に読者を停止させます。これは一般的な強調スタイルではありません。公開可能な警告は、リスク、結果、および危害を回避または制限する行動を明示します。

このライブ要素が機能するのは、何が問題になる可能性があるかを特定し、何が失われるかを説明し、破壊的なコントロールの前に安全な順序を示しているからです。「削除するときは注意してください」だけでは不十分です。注意深い行動が何を意味するかを読者に伝えることなく、リスク評価を読者に委ねてしまいます。

この要素が重要な理由

警告は、危害が発生する前に判断を変えるために存在します。指示に従っている読者は通常、約束された結果に到達することに集中するため、通常の背景情報のように見える注意事項を読み飛ばす可能性があります。明確に区切られた警告は、読者にまだ選択肢がある時点でその勢いを遮断します。意図的な一時停止を生み出し、その一時停止がなぜ重要かを説明し、安全な次の行動を提供します。

この要素は、作成者が選択的に使用する場合にのみ、読者の心理に役立ちます。日常的なアドバイス、軽微な不便、取り返しのつかない損失がすべて同じ扱いを受けると、読者は視覚的なシグナルがめったに重要ではないことを学習します。彼らはそれを飛ばし始めます。したがって、誇張は警告が防止しようとするまさにその障害モードを生み出します。重大なメッセージが実際に危機的な状況で割り引かれてしまいます。トーンは怖がらせるものではなく、情報を提供するものでなければなりません。

機械による抽出可能性とは、ソフトウェアが警告を分離し、周囲の段落とは別にその意味を保持できることを意味します。テキストによる警告ラベルと自己完結型の本文を持つ型付きブロックは、手順の中に隠れた赤い文章よりも識別しやすいです。リスク–結果–行動の構造は、表示方法の変更にも耐えます。自動化されたパブリッシングシステムは、どの文が危害を説明し、読者が何をすべきかを推測することなく、Markdown、Hugo、WordPress間でコンテンツを移動できます。

要素をマッピングする際は、要素作成ルール に従ってください。色、アイコン、太字テキスト、または「重要」と名付けられた見出しだけでは、警告のセマンティクスは生まれません。プレーンテキストとしてコピーされたり、ページの視覚的なスタイルなしで読まれたりした場合でも、言葉は完全でなければなりません。

使用するタイミング

読者が予見可能な重大な結果を伴う選択や行動をしようとしているときに警告を使用します。この要素は、コンテンツが以下のトリガーのいずれかをカバーする場合に必須です。

• 不可逆的なアクション： 削除、上書き、公開、送信、アカウント閉鎖、または確実に元に戻せないその他のアクション。

• データ損失または漏洩： レコードが消去、破損、開示、転送、またはアクセス不能になる可能性がある場合。

• コストの発生： アクションによって請求が開始され、契約が更新され、有料の許容量が消費され、または判断時点で明らかでないコストが発生する場合。

• 安全または健康リスク： 指示に従う、組み合わせる、またはスキップすることで、怪我、病気、または治療の遅れを引き起こす可能性がある場合。

• 法的またはコンプライアンス上のリスク： アクションが法律、契約、ポリシー、ライセンス、保存ルール、同意要件、または規制承認プロセスに違反する可能性がある場合。

トリガーが存在するかどうかが、作成者の好みや利用可能な単語数ではなく、包含を決定します。いずれかのトリガーが該当する場合、警告を曖昧なラベルに短縮したり、一般的な免責事項に移動したり、テンプレートに合わせて省略したりすることはできません。代わりに、周辺の説明を先に短縮してください。

有用なショートカット、ベストプラクティス、定義、軽微な不便、通常の前提条件、または明らかな回復方法がある可逆的なエラーのために警告を使用しないでください。これらはニアミスです。日常的な言葉では「重要」かもしれませんが、停止判断を必要としません。必要な前提条件は手順に、オプションの改善はヒントボックスに、通常の障害回復はそれが修復するステップの横に配置してください。

結果が望ましくないという理由だけで警告してはいけません。「質の低いタイトルはクリック数を減らす可能性があります」は、パフォーマンスの説明であり、警告ではありません。近くのアクションが特定の重大な結果を生み出す場合にのみ警告対象となります。たとえば、リダイレクトなしでライブサイトのURL構造を変更すると、インバウンドリンクが壊れ、インデックスされた宛先が削除される可能性があります。その場合、変更の前に予防措置を述べてください。

配置場所

警告は、それが関わる最も早いアクションの直前に属します。「アクション」には、番号付きの指示、コマンド、フォーム送信、購入コントロール、ダウンロード、推奨、または読者が行動に移す可能性のある判断が含まれます。状況を特定するのに十分なコンテキストの後、最初の実行可能な指示の前にボックスを配置してください。アクションの後、脚注、またはFAQの最後にのみリスクを明らかにしないでください。

1つの警告が一連の手順を管理する場合は、そのシーケンスの前に配置し、その範囲を明示します。「次の3つのステップで本番データベースを置き換えます。」すべてのステップ内で同じ警告を繰り返さないでください。後のステップで別のリスクが生じる場合は、そのステップの直前に2つ目の警告を追加してください。

警告は、別のコールアウト、プロモーションの行動喚起、または装飾的なバナーのすぐ隣に配置してはいけません。隣接するボックスは注目を競い合い、警告がマーケティングスタックの一部のように見える可能性があります。指示を必要な入力から、主張をその証拠から、またはテーブルのタイトルをテーブルから分割してはいけません。プレーンなトランジションを追加するか、セクションを再構成して、警告が明確に1つの判断を修飾するようにしてください。

法的な定型文は該当するポリシーに従って配置しますが、運用上の警告はリスクのあるアクションの横に置いてください。免責事項がすでに存在するという理由で警告をフッターに移動すると、その目的が無効になります。

構成

レンダリングされた要素には6つのセマンティック領域があります。

1. 重大度ラベル： これが警告であることを示す可視テキスト。色やアイコンだけで伝えてはいけません。
2. 具体的なタイトル： 「警告：削除前にレコードをエクスポートしてください」など、判断や危険を明示します。
3. リスク： どのアクションや条件が問題になる可能性があるかを述べます。
4. 結果： 信頼性のある結果と、誰がまたは何が影響を受けるかを述べます。
5. 行動： 読者が次に進む前にリスクを回避、軽減、確認、またはエスカレーションする方法を伝えます。
6. 位置関係： 警告を、それが管理する次のアクションに結び付けます。

凡例は画像に埋め込むのではなく、ライブページのテキストとして残します。これにより、すべてのラベルが支援技術で利用可能になり、デザインが変更されても仕様が不正確になりません。

デザイン例

現在のライブラリは1つの警告重大度をサポートしています。Hugoはtype="important"でレンダリングします。注意、警告、危険、クリティカル、緊急といった個別のバリアントはありません。この意図的なシンプルさにより、作成者の選択が一貫し、2人の作成者が同じ結果に異なる色を割り当てる可能性が減ります。トレードオフとして、コンポーネントは回復可能な金銭的損失と即時の身体的危険を視覚的に区別できません。作成者は、より強い色に頼るのではなく、タイトルと結果で重大度を明示する必要があります。

したがって、ギャラリーはサポートされているコンテンツのバリエーション（デフォルトラベル、特定のカスタムタイトル、最大2段落、狭いビューポート）で1つの重大度をテストします。これらはレンダリングのケースであり、異なる重大度レベルではありません。

絵文字、すべて大文字、繰り返しの感嘆符、カスタムクラス、またはサポートされていないタイプ値を追加して重大度を独自に作成しないでください。後でライブラリに複数のレベルが追加された場合、その境界は作成者がその文章に対してどれだけ強く感じるかではなく、結果と必要な対応に基づく必要があります。

パラメータ

レンダラーにはtype、title、および本文の入力のみがあります。リスク、結果、行動は本文内の編集フィールドです。このコントラクトでそれらを明示的に保つことで、視覚的に有効なコールアウトが不完全なガイダンスを公開することを防ぎます。

タイトルは「警告：」で始めるべきです。ただし、規制された語彙で別の明示的な重大度ワードが必要な場合は除きます。本文ではリスクと結果を1文で組み合わせることができますが、3つの役割すべてが識別可能でなければなりません。リンクは詳細なポリシーや回復手順を指す場合がありますが、即時の安全な行動を置き換えることはできません。

構文とコード例

3つのマッピングすべてが同じtype、title、および本文を持ちます。ポータブルディレクティブは、正規の作成形状です。Hugoは既存のcalloutショートコードを使用します。WordPressは登録されたブロックとして同じコントラクトを実装する場合があります。ショートコード形式は、そのインストールが登録している場合にのみ許容されます。

ポータブルマークダウンディレクティブ

:::warning{title="警告：削除前にレコードをエクスポートしてください"}
ワークスペースを削除すると、保存されたレポートが完全に削除されます。保持する必要のあるレコードをエクスポートし、削除を確認する前にワークスペース名を確認してください。
:::

Hugoショートコード

{{< callout type="important" title="警告：削除前にレコードをエクスポートしてください" >}}ワークスペースを削除すると、保存されたレポートが完全に削除されます。保持する必要のあるレコードをエクスポートし、削除を確認する前にワークスペース名を確認してください。{{< /callout >}}

名前付きパラメータは一緒に使用してください。位置指定のimportant値と名前付きのtitleパラメータを混在させないでください。

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

<!-- wp:amicited/warning {"title":"警告：削除前にレコードをエクスポートしてください"} -->
<p>ワークスペースを削除すると、保存されたレポートが完全に削除されます。保持する必要のあるレコードをエクスポートし、削除を確認する前にワークスペース名を確認してください。</p>
<!-- /wp:amicited/warning -->

[warning title="警告：削除前にレコードをエクスポートしてください"]ワークスペースを削除すると、保存されたレポートが完全に削除されます。保持する必要のあるレコードをエクスポートし、削除を確認する前にワークスペース名を確認してください。[/warning]

システムによって表示は異なる場合がありますが、テキストによる重大度、リスク、結果、行動、およびアクション前の位置は変換後も維持されなければなりません。

例

良い例：上書きリスクを伴う有料再処理

この例では、2つの具体的なリスクを明示し、両方の結果を述べ、それらを防ぐ行動を提供しています。トーンは事実に基づいています。保持されたエクスポートが回復経路を提供する場合に、アカウントが破綻する、またはデータが復元不可能になると主張していません。

悪い例：ガイダンスのないリスク

悪い例は、操作を特定せず、信頼性のある結果を説明せず、読者に安全な進め方を伝えていません。「深刻」は根拠のない重大度の主張であり、「自己責任」は行動を導く代わりに責任を転嫁しています。正確な状態変化、失われるまたは侵害される可能性のあるもの、および行動前に必要なチェック、バックアップ、承認、代替案、または停止条件に置き換えてください。

もう1つの失敗は過度な警告です。「この設定には絶対に触れないでください。サイト全体が破壊される可能性があります！」設定が重要であっても、表現は起こりうる結果に基づいておらず、安全な経路を示していません。主張が誇張されていると発見した読者は、後の警告を割り引いてしまいます。

法務および規制対象コンテンツ

免責事項と警告は異なる役割を果たします。免責事項は範囲、資格、不確実性、専門家としての地位、または責任の限界を定義します。警告は判断ポイントでの予見可能な危険を特定し、読者が次にすべき行動を変えます。一方が他方の代わりにはなりません。

法的、金融、健康、安全、プライバシー、またはその他の規制対象資料については、承認された免責事項を必要なページ位置に保持し、リスクを生み出す可能性のある特定のアクションの前に警告を追加してください。たとえば、記事が教育的であるという一般的な声明は、読者に処方治療の中止、規制データの転送、承認なしの主張の公開、または継続的な請求の受け入れを指示する前に警告する必要性を排除しません。

作成者は警告内で法的結論を即興で作成してはいけません。責任のある主題またはコンプライアンスレビューアによって承認された表現を使用し、必要な用語を保持し、読者が実際に取れる運用上のアクション（一時停止、同意の取得、記録の保持、資格のある専門家への相談、承認されたチャネルの使用、またはレビューのためのエスカレーション）を提供してください。ページが即時の停止条件を述べられる場合、曖昧な「利用規約を参照」リンクでは不十分です。

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

警告ボックスには専用のスキーママークアップ プロパティはなく、スタンドアロンのJSON-LD オブジェクトを作成すべきではありません。これは囲む記事内の可視コンテンツとして残ります。構造化された手順を修飾する場合、その全文は該当するステップの可視指示および対応するHowToStep.textに含めることができます。偽のステップにしたり、構造化データにのみ存在させたりしてはいけません。

Accessible Rich Internet Applications（ARIA）ロールは、ネイティブHTMLが提供しない場合に、支援技術にインターフェースの動作を伝えます。ページ読み込み時に存在する静的な警告は、通常のドキュメント順序に保つべきであり、role="alert"は必要ありません。alertロールは即時告知を引き起こし、インタラクション後に緊急警告が動的に表示される場合にのみ適切です。すべての静的なコールアウトにそれを適用すると、スクリーンリーダーユーザーを中断させ、日常的なページエントリーを騒がしくする可能性があります。現在のHugoレンダラーは、ARIAロールなしでラベル付きの<div>を出力します。これは、テキストと配置が意味を伝える静的なブロックには許容されます。

色に依存しないとは、警告がモノクロ、ハイコントラストモード、テキストのみのエクスポート、およびスクリーンリーダー出力でも認識可能であることを意味します。明示的な「警告：」タイトルを使用し、「完全に削除する」、「継続的な請求を開始する」、「個人データを露出する可能性がある」、または「医療処置が必要」などの言葉で重大度を説明してください。「赤いオプションを避けてください」と書いたり、アイコンの代替テキストに危険を依存させたりしないでください。

タイトルと本文は、管理対象アクションの前に読み取り順序で配置してください。リンクには説明的なアンカーテキストが必要であり、キーボードアクセスがコールアウトに依存してはいけません。また、重要な指示がスクリーンショットにのみ表示されてはいけません。将来のインタラクティブコンポーネントが非表示を許可する場合、アクションが利用可能なままである間は、必須の警告を非表示にしてはいけません。

作成ルール

1つの具体的な警告を25～90語、最大2つの短い段落で書いてください。3～9語のタイトルを使用し、通常は「警告：」で始めます。トリガーとなるアクションまたは条件、信頼性のある結果、および安全な対応を明示してください。理由をルールの前に置いてください。読者はルールが何を防ぐかを理解すると、より確実に従います。

釣り合いの取れた動詞を使用してください。「完全に削除する」、「上書きする」、「課金する」、「露出する」、「無効にする」、「原因となる可能性がある」はメカニズムや結果を説明します。「壊滅させる」、「悲惨な」、「恐ろしい」、「破滅的な」は通常、特定する代わりに誇張します。結果がコンテキストに依存する場合は不確実性を正直に述べ、読者が1つの予防策に従ったという理由だけで安全性を保証しないでください。

ボックスごとに1つの判断ポイントに保ちます。複数のチェックをすべてその1つのアクションの前に行う必要がある場合のみ、短いリストは許容されます。それ以外の場合は散文を使用してください。プロモーションコピー、ベネフィット、 testimonial、ジョーク、装飾的な絵文字、無関係なヒント、完全な手順、比較表、複数の見出し、または行動喚起を警告内に配置しないでください。必須の指示をリンクの背後に隠さないでください。

根拠のない主張を保護したり、読者を購入に脅したり、人為的な緊急性を生み出したりするためにボックスを使用してはいけません。アクションが必須である場合、警告内で予防ステップを述べるとともに、メインの手順にもアクションを保持してください。ボックスは注意を変更しますが、ドキュメントの運用構造を置き換えるものではありません。

使用する投稿タイプ

postTypesフロントマターは、警告トリガーが予見可能な登録フォーマットを記録します。各行で「必須」とは、記載されたトリガーが出現した場合に作成者に裁量がなく、要素を削除したり、リスク、結果、行動を下回るように圧縮して長さ目標を満たすことができないことを意味します。

他の投稿タイプも、同じトリガーが出現する場合はいつでも警告を使用できます。この表は繰り返し発生する必須ケースを定義します。postTypesから省略されたフォーマットに免除を与えるものではありません。

QAチェックリスト

公開前に、以下のすべてを確認してください。

• ボックスがリスクを生み出す1つの特定のアクション、条件、または判断を明示していること。
• 結果が誇張なしに何が起こり得るか、誰がまたは何が影響を受けるかを述べていること。
• 行動が読者にリスクの回避、軽減、確認、停止、またはエスカレーションの方法を伝えていること。
• 警告が最初の管理対象アクションの前に表示され、その範囲を明確に示していること。
• ヒント、プロモーション、バナー、または2つ目の警告が直接競合していないこと。
• 必須トリガーがレイアウトや単語数のために省略または短縮されていないこと。
• importantタイプと具体的なテキストによる警告タイトルが存在すること。
• 重大度が色、アイコン、画像、または周囲のコンテキストなしでも明確であること。
• 静的な警告が不要なalertロールを使用しておらず、動的な緊急警告が適切にアナウンスされること。
• 免責事項は別途存在し、行動時点のガイダンスを置き換えていないこと。
• 規制された表現と必要な用語が適切な主題の承認を得ていること。
• Markdown、Hugo、WordPressのマッピングが同じタイトル、本文、および位置を保持していること。
• 本文が25～90語以内で、マーケティング言語を含まず、必要なリンクを1つ以上使用していないこと。
• スクリーンショットのコメントは必要な将来のキャプチャのみを指定し、存在しない画像パスがレンダリングされていないこと。

FAQ

すべての警告ボックスに必ず含めなければならないものは？ 特定のリスク、その信頼性のある結果、および安全なアクションのすべてが存在しなければなりません。いずれかが欠けている場合、要素は不完全です。

危険な行為の後に警告ボックスを配置できますか？ いいえ。たとえ周囲のステップを再構成する必要があっても、読者が行動できる前に表示されなければなりません。

法的免責事項は警告ボックスの代わりになりますか？ いいえ。免責事項は範囲や制限を定義します。警告は特定の判断ポイントでの行動を変えます。規制対象ページでは両方が必要な場合があります。

警告ボックスはalertロールを使用すべきですか？ ページ読み込み時にすでに存在する場合は不要です。alertロールは、インタラクション後に動的に導入される緊急情報のために予約してください。

1ページにいくつの警告ボックスを含めることができますか？ 個別の判断ポイントごとに1つ使用し、同じターゲットを持つ警告は統合してください。警告がページを支配する場合は、手順を再構成するか、そのアクションを提供すべきかどうかを再検討してください。

警告ボックスは、具体的な危害を防ぐ場合にのみ、その視覚的な目立ちやすさに値します。リスク、結果、行動を冷静に述べ、判断の前に配置し、すべての出力でその意味を保持してください。