インラインメッセージ
component操作の結果を、操作した場所のすぐ近く（ボタンの横・フォームの直下・テーブルの行内）で短く伝えるメッセージです。アイコンと 1 行の文言だけで枠を持たず、時間で消えるトーストやスナックバーの代わりに「その場に残す」ための部品です。
4 つのテーマ
success / negative / warning / neutral。文字とアイコンが同色で、背景・枠は持たない
サイズ
md（16/24 bold・アイコン 20px）が既定。テーブル行内などの密な場所だけ sm（14/20 bold・アイコン 16px）
置き場所の例
操作した場所と同じ視野に入れる。ボタンの横 / フォームの直下 / テーブルの行内
ボタンの横 — 押した結果をその場で伝える
フォームの直下 — 送信全体の結果。項目 1 つの検証は field-error-text
テーブルの行内 — 行ごとの状態。密な場所なので sm
| ファイル名 | サイズ | 状態 |
|---|---|---|
| 事業概要.pdf | 1.2 MB | |
| 決算書_2025.xlsx | 8.4 MB | |
| 店舗写真.zip | — |
機能
このコンポーネントの用途
操作の結果を操作した場所の直近で短く伝えるメッセージ。アイコン＋ 1 行の文言だけで枠を持たない。
フィードバックの行き先: 結果が画面で自明なら出さない / 操作直近の結果 = inline-message /
ページ全体への常設のお知らせ = alert / 操作を止めて判断を求めるエラー = modal。
一時表示のトースト・スナックバーは DS に無い（時間で消える通知は見逃し・時間制限・拡大表示の面で
伝わらない人が出るため作らない）。入力項目 1 つの検証エラーは field-error-text（label-control）。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓操作したボタンの横・送信したフォームの直下・対象の行内など、操作対象と同じ視野に置く。
- ✓内容に合うテーマを選ぶ（成功=success / 失敗=negative / 注意=warning / 取得・利用できない=neutral）。
- ✓動的に挿入するなら DOM 上も操作した要素の直後に入れ、次の操作か再読み込みまで残す（時間で自動消去しない）。
NG
- ✕画面の隅に固定して一定時間で消すトースト／スナックバーとして使わない → 操作直近に置いたまま残す。position: fixed と setTimeout で消す実装は作らない。
- ✕結果が画面で分かる単純な成功（行が増えた・チェックが入った等）に添えない → 出さない。
- ✕ページ全体へのお知らせ・しばらく残す重要な通知に使わない → alert。
- ✕操作を止めて判断を求めるエラー（不可逆・データ消失・再読み込みが必要）に使わない → modal。
- ✕入力項目 1 つの検証エラーに使わない → field-error-text を入力欄の真下に置く。
- ✕info テーマは無い → お知らせ・案内は alert-info。
フィードバックの行き先
操作へのフィードバックは「どこに置くか」と「消え方」で 4 つに分ける。時間で勝手に消える通知（トースト / スナックバー）は用意しない
| 状況 | 使うもの | 例 |
|---|---|---|
| 結果が画面を見れば分かる単純な成功 | 出さない | チェックを入れた・行が 1 件増えた・並び順が変わった |
| 操作した場所の直近で結果を短く伝える | inline-message | 「保存する」の横に「保存しました」、送信ボタンの下に「送信に失敗しました」 |
| ページ全体に向けた常設のお知らせ・しばらく残す通知 | alert | メンテナンス予定、審査結果の通知、ページ上部のエラー要約 |
| 操作を止めて判断を求めるエラー・確認 | modal | 削除の確認、セッション切れで再読み込みが必要、保存せずに離れるか |
| 入力項目 1 つの検証エラー | field-error-text | 「メールアドレスの形式が正しくありません」を入力欄の真下に |
操作した場所に置いて、残す
置き場所と消え方押したボタンの横に出し、次の操作まで残す。視線を動かさずに結果が分かり、拡大表示や読み上げでも見逃さない。
<button class="btn …">保存する</button> <p class="inline-message inline-message-success" role="status">…保存しました</p>
画面の隅に固定して数秒で消すトースト。操作した場所から離れていて、拡大表示では視野に入らず、読み終える前に消える。
<div class="fixed bottom-4 right-4 …">保存しました</div> setTimeout(() => toast.remove(), 3000)
結果が見て分かる操作には出さない
出す / 出さないの判断スイッチが ON に変わったこと自体が結果。メッセージを足すと画面が騒がしくなるだけで情報は増えない。
切り替えるたびに「更新しました」を添える。すべての操作に添えると、本当に伝えるべき失敗が埋もれる。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
意味は色だけでなくアイコン＋文言で伝える。各テーマの文字色は、白の上でもページの地（neutral/50）の上でも、success / neutral は 7:1 以上（AAA）、赤（negative）・黄（warning）は 4.5:1 以上（AA）。
操作した要素の直近に置くため、拡大表示（ズーム・スクリーン拡大鏡）でも操作対象と一緒に視野へ入る。長文は折り返す。
時間で消えない。読むのに時間がかかる利用者も、次の操作を自分のペースで選べる。
動的表示は role="status"（成功・neutral）／role="alert"（失敗・注意）でフォーカスを奪わずに読み上げ、DOM 上の位置も操作した要素の直後にする。
DS が担保する機能
追加実装なしで満たされる
- ✓各テーマの文字色は白・neutral/50 の上でコントラスト比 4.5:1 以上（success / neutral は 7:1 以上）
- ✓アイコンスロットが行高と揃い、拡大しても 1 行目とずれない
- ✓背景・枠を持たないため、強制カラーモードでも追加対応なしで文字とアイコンが見える
実装時の必須対応
プロダクト側で担保する
- !動的に挿入する結果に
role="status"（success・neutral）／role="alert"（negative・warning）を付ける - !DOM 上も操作した要素の直後に挿入する（読み上げ順と視覚上の位置を一致させる）
- !時間で自動消去しない。消えるのは利用者の次の操作か明示的な操作のみ
- !アイコンは
aria-hidden="true"。テーマと文言を一致させる
テスト方法
スクリーンリーダー / 拡大表示 / 自動チェック
- SR操作した瞬間、フォーカスを移さずにメッセージが読み上げられる。矢印キーで次に読むのがそのメッセージになっている
- 拡大400% ズームやスクリーン拡大鏡で操作した要素を見ている状態のまま、メッセージが視野に入る
- 時間1 分放置してもメッセージが残っている
- 自動axe / Lighthouse で
role・コントラスト・aria-hiddenを確認
DOM 上も操作した要素の直後に、role を付けて挿入する
達成基準：WCAG 1.3.2 意味のある順序 / 4.1.3 ステータスメッセージ
ボタンの直後に role="alert" 付きで挿入。フォーカスはボタンに残り、読み上げ順も「ボタン → 結果」になる。
<button class="btn …">保存する</button> <p class="inline-message inline-message-negative" role="alert">…</p>
role が無い、または body 末尾のコンテナに挿入する。見た目は同じでも、読み上げでは気づかれないか、どの操作の結果か分からない。
<p class="inline-message inline-message-negative">…</p> <!-- role なし --> document.body.append(msg) <!-- 操作した要素から離れた場所 -->