ライトボックス vs. モーダル
短い答え
ライトボックスは、写真や動画のために作られたモーダルだよ。ふつうのモーダルは、選択、フォーム、短い作業を入れるために使うよ。
画像や動画を拡大するにはライトボックスを使用してください。主要な作業が行動または決定である場合はモーダルを使用してください。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Lightbox
↗ ライトボックス
ライトボックスは、メディアをもっと大きな画面で開いて、その周りのページを暗くするよ。
<dialog>写真を選択して、キャプション付きのフルサイズビューを開きます。「前へ」「次へ」「閉じる」ボタンがあります。
- 以下の場合に使用します
- ギャラリー内の現在の位置を失わずにメディアを詳細に確認するために使用します。
- 以下の場合は使用しないでください
- 複雑な編集や並列比較が必要な作業には絶対に使用しないでください。
- コードで使用する名前
<dialog>
Modal Dialog
↗ モーダルダイアログ
モーダルダイアログは、集中するためのウインドウだよ。誰かが閉じるか完了するまで、今の画面をブロックするよ。
アカウント削除の場合、キーボードフォーカスはダイアログ内に留まります。キャンセルした場合、フォーカスはそれを開いたボタンに戻ります。
- 以下の場合に使用します
- 完全な注意が必要な短い選択肢や小さなタスクに使用します。
- 以下の場合は使用しないでください
- 一つのダイアログを別のダイアログの上に開いたり、通常の低リスク情報に使ったりしてはいけません。
- コードで使用する名前
<dialog> / role="dialog" aria-modal="true"
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| ライトボックスLightbox | ギャラリー内の現在の位置を失わずにメディアを詳細に確認するために使用します。 | 複雑な編集や並列比較が必要な作業には絶対に使用しないでください。 | <dialog> |
| モーダルダイアログModal Dialog | 完全な注意が必要な短い選択肢や小さなタスクに使用します。 | 一つのダイアログを別のダイアログの上に開いたり、通常の低リスク情報に使ったりしてはいけません。 | <dialog> / role="dialog" aria-modal="true" |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをライトボックス (Lightbox)、モーダルダイアログ (Modal Dialog)から選んでください。このルールを使用してください: ライトボックスは、写真や動画のために作られたモーダルだよ。ふつうのモーダルは、選択、フォーム、短い作業を入れるために使うよ。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。