ドロップゾーン
Drop Zoneファイルをドラッグ＆ドロップ、またはクリックして選択させる、アップロード専用の受け皿UI。
または
アップロードは行われません（デモ用）。選択・ドロップしたファイル名のみを表示します。
○ 使う場面
- 画像・書類などのファイルをまとめてアップロードさせたいとき
- ドラッグ操作に不慣れなユーザーのために、クリックでのファイル選択も両立させたいとき
× 避ける場面
- アップロードではなく、既存データの並び替え・移動だけを行いたいとき（→ドラッグアンドドロップ）
- 添付が1ファイルのみかつ即座の選択で十分なとき（単純な<input type=file>ボタンで足りる）
別名
ドラッグ&ドロップアップロード、ファイルドロップエリア、ファイルアップロード
近縁種との比較
「ドロップゾーン」はファイルを「落とす（ドロップ）」場所という、操作の見た目をそのまま表した名前である。枠線を点線にして「ここに置ける」領域だとひと目でわかるようにするのが定番の見せ方になっている。
| 近縁種 | 違い・使い分け |
|---|---|
| ドラッグアンドドロップ | 汎用のドラッグアンドドロップが要素の並び替えや移動全般を指すのに対し、ドロップゾーンはファイルをドロップしてアップロードする用途に特化した領域を指す。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション