モードレスを優先する
モーダルは最終手段。まずはインライン・モードレスで解決できないか考える。
モーダルを開いた瞬間、背景は暗くなり、他の情報にアクセスできなくなります。コンテキストが失われるという点では、画面遷移と似ています。
ユーザーのゴール達成にどう寄与するか: 操作中も他の情報を参照でき、判断に必要な文脈を失わない。「全体を把握しながら作業を進めたい」というゴールに直結する。
なぜこの考え方か
Section titled “なぜこの考え方か”| モーダル | モードレス |
|---|---|
| 操作中、他の部分を操作できない | 操作中も他の部分を操作できる |
| 背景が暗くなり、ロックされる | 背景が見えたまま、自由に動ける |
| 「閉じる」まで抜けられない | いつでも別の操作に移れる |
避けたい構造
Section titled “避けたい構造”
モードレスの操作の流れ
Section titled “モードレスの操作の流れ”- 一覧を表示（参照モード）
- [編集] をクリック → その行だけ編集モードに
- 他の行は見えたまま（モードレス）
- 編集して [保存] → 完了
モーダルを開かず、同じ画面内で、その場で編集します。
実装のポイント
Section titled “実装のポイント”- インライン展開: クリックした箇所が編集可能になる
- コンテキスト維持: 他の要素は見えたまま
- 複数同時編集可: 必要なら複数行を同時に編集できる
モーダルを使う場面
Section titled “モーダルを使う場面”モーダルが適切な場面は限られています。
- 取り消しができない操作の最終確認: 外部システム連携など、実行後にリカバリーできない場合
モーダルにしなくてよいもの
Section titled “モーダルにしなくてよいもの”- ヘルプ、詳細プレビュー: サイドパネルやツールチップで表示
- エラー、警告: インラインメッセージやトーストで表示
- 削除確認: 取り消し（Undo）を用意すればモーダル不要
- フォーム入力: インラインまたは画面内で完結させる