ファイルをアップロードするとき、ユーザーは何を感じているか。
「このファイル、ちゃんとアップロードされるだろうか」「どのくらい時間がかかるんだろう」「失敗したらどうなるんだろう」——そういった小さな不安を、ユーザーは常に抱えている。
Google Stitch でファイルアップロードとメディア管理のUIを設計したとき、この「アップロードという体験」のすべての瞬間を設計する必要があることに気づいた。クリックする前・アップロード中・完了後・エラー時——それぞれの状態を丁寧に設計することで、ユーザーの不安を取り除けることを体感した。
結論から言うと——ファイルアップロードUIで最も重要なのは「状態の可視化」だ。何が起きているかをユーザーが常に把握できる設計——進捗・成功・失敗・リトライの各状態を明確に見せることが、アップロード体験の品質を決める。
ファイルアップロードUIとは何か
ファイルアップロードUIとは、ユーザーがローカルのファイル（画像・動画・PDF・ドキュメントなど）をサービスに送信するためのUIのことです。プロフィール画像設定・記事のアイキャッチ画像・添付ファイル送信・写真共有など、多くのサービスで必要になります。
ファイルアップロードUIは、主に以下のコンポーネントで構成される：
- ドロップゾーン（Drop Zone）：ファイルをドラッグ＆ドロップするエリア。「ここに落とせばいい」という視覚的な誘導
- ファイル選択ボタン：クリックでOSのファイルダイアログを開く。ドラッグが難しいユーザーへの代替手段
- プログレスインジケーター：アップロードの進捗（0〜100%）を可視化する
- サムネイルプレビュー：アップロード前・後のファイルをプレビュー表示する
- エラーメッセージ：失敗時の原因と対処法を伝える
- メディアライブラリ：アップロード済みファイルを管理する一覧画面
なぜアップロードUIの設計が難しいのか
アップロードUIの設計が難しい理由は、「状態の数が多い」からだ。
アイドル状態・ドラッグオーバー状態・ファイル選択済み状態・アップロード中（進捗0〜100%）・アップロード完了・エラー（ファイル形式不正・サイズ超過・通信エラー）・キャンセル済み——これらすべての状態を設計しなければならない。Stitch で一度に全状態を生成することはできないため、状態ごとにプロンプトを分けて生成する必要がある。
Stitch でアップロードUIを設計した体験
ポートフォリオサービスの作品画像アップロード機能を設計した。ユーザーが自分の作品写真を複数枚まとめてアップロードし、並び替えて表示する機能だ。
ドロップゾーンの設計：「ここに落とせばいい」を伝える
最初に設計したのはドロップゾーン（アイドル状態）。プロンプト：「画像アップロードのドロップゾーン。破線のボーダー（#CBD5E1・2px・border-radius 12px）・薄いグレー背景（#F8FAFC）。中央にアップロードアイコン（上矢印・36px）、メインテキスト「ここに画像をドラッグ＆ドロップ」、サブテキスト「または」、下に「ファイルを選択」ボタン（アウトライン型）。対応形式・サイズ上限（JPEG・PNG・最大10MB）を小さいテキストで下に表示。横幅全幅・高さ200px。」
生成されたドロップゾーンは「ここにファイルを落とせばいい」という意図が視覚的に明確だった。破線のボーダーが「ここはファイルを受け入れる場所」であることを示し、アイコンと説明テキストが何をすればいいかを伝えている。
ドラッグオーバー状態の設計
ファイルをドラッグしてドロップゾーンの上に乗せた瞬間（ドラッグオーバー状態）の変化も設計する。視覚的なフィードバックがないと「このエリアに落としていいのか」がユーザーに伝わらない。
プロンプト：「ドラッグオーバー状態のドロップゾーン。ボーダーを実線・ブルー（#2A5FD8）に変更、背景色を薄いブルー（#EFF6FF）に変更、テキストを「離してアップロード」に変更。境界線が強調されてユーザーに「ここに落とせる」ことが伝わるデザイン。」
この「状態が変わった」という視覚的フィードバックが、「今どこに落とせばいいか」の確信をユーザーに与える。
複数ファイルのアップロード進捗表示
複数ファイルを同時にアップロードする場合、全体の進捗と個別ファイルの進捗の両方を表示する設計が求められる。
プロンプト：「複数ファイルアップロード中の進捗表示。上部に全体進捗バー（3/5ファイル完了、進捗60%）。下に各ファイルのリスト表示：ファイルサムネイル（40px角）・ファイル名・個別進捗バー・ファイルサイズ・状態アイコン（完了:緑チェック、進行中:ブルーのスピナー、待機中:グレー時計アイコン）。各ファイルの右端にキャンセルボタン（×）。」
実際に使ってみてわかったのは、「全体の進捗」と「個別の進捗」の両方が見えることで、ユーザーの「今どういう状況か」への不安が大きく軽減されるということだ。
メディア管理UIの設計
アップロード済みファイルを管理する「メディアライブラリ」のUIも設計した。
グリッド表示と一覧表示の切り替え
画像・動画のメディア管理では、グリッド表示（サムネイルを格子状に並べる）とリスト表示（ファイル名・サイズ・日付を縦に並べる）を切り替えられる設計が使いやすい。
- グリッド表示：視覚的に中身が確認できる。画像・動画メディアに向いている
- リスト表示：ファイル名・日付・サイズなどのメタ情報が確認しやすい。PDFやドキュメント管理に向いている
Stitch でプロンプトに「右上にグリッド/リスト切り替えボタン（アイコン型）。グリッド表示デフォルト、3カラム」と指定すると、切り替えUIを含むメディアライブラリが生成される。
ファイルの「選択状態」と一括操作UI
複数ファイルを選択して一括削除・一括移動するUIも、メディア管理の重要な要素だ。
プロンプト：「メディアライブラリのグリッド表示。選択モード時の状態：各サムネイルの左上にチェックボックスが表示される。選択済みファイルは青いボーダー＋青いチェックマークでハイライト。画面下部に固定バーが表示され「3件選択中」と「削除」「移動」ボタンを表示。」
この「選択モード時の状態」と「非選択状態」を別々のプロンプトで生成し、両方を設計ドキュメントに含める。
よくある失敗と対処法
- 失敗1：エラー状態を設計していない——ファイル形式不正・サイズ超過・通信エラーのそれぞれのエラーメッセージと対処法を設計しないと、ユーザーはエラーが起きたとき「何が悪いのか」「どうすればいいか」がわかりません。エラー状態はアップロードUIの必須設計項目です。
- 失敗2：アップロード中のキャンセル手段がない——大容量ファイルのアップロードを間違って開始してしまったとき、キャンセルできない設計だとユーザーは困ります。アップロード中状態のUIには必ずキャンセルボタンを設けましょう。
- 失敗3：対応形式・サイズ上限をアップロード後にしか伝えない——「このファイル形式は対応していません」というエラーを、アップロード完了後に出すのは最悪の体験です。ドロップゾーンに「JPEG・PNG・最大10MB」を事前に表示して、不適切なファイルを選ぶ前に知らせましょう。
- 失敗4：進捗が0%から動かない時間が長い——大容量ファイルのアップロード開始直後、進捗が0%で止まって見える時間があります。「準備中…」という状態表示を加えることで「止まっている」という印象を防げます。
- 失敗5：アップロード完了後に何も変わらない——アップロードが完了しても画面に変化がないと、「本当に完了したのか」という不安が生まれます。完了後はサムネイルプレビュー表示・成功メッセージ・「次にできること」への誘導を必ず設計しましょう。
よくある質問（FAQ）
Q. Google Stitch でアップロードUIの全状態（アイドル・進行中・完了・エラー）を効率よく設計するにはどうすればいいですか？
A. 各状態を別々のプロンプトで生成し、Stitch 内のプロジェクトに「アイドル状態」「ドラッグオーバー状態」「アップロード中」「完了」「エラー（ファイル形式不正）」「エラー（サイズ超過）」として保存していく方法が効率的です。5画面同時生成機能を使って「アップロードUIの5状態を1セットで生成」というプロンプトを試すのも有効です。
Q. 動画ファイルのアップロードUIを設計するとき、画像アップロードと何が違いますか？
A. 動画アップロードはファイルサイズが大きく、アップロード時間が長くなるため、進捗表示の設計がより重要になります。また動画のサムネイル（最初のフレームや自動生成サムネイル）の選択UI・動画の長さ・解像度の表示も設計に含める必要があります。Stitch でプロンプトに「動画アップロード完了後のプレビュー（サムネイル選択・再生時間・解像度表示あり）」と指定するのが効果的です。
Q. モバイルでのファイルアップロードUIで注意すべきことは何ですか？
A. モバイルではドラッグ＆ドロップが使えないため、「ファイルを選択」ボタンが主要なアップロード手段になります。また「カメラで撮影」「フォトライブラリから選択」の選択肢を提供することが重要です。Stitch でプロンプトに「モバイル向けアップロードUI。ボタンタップで「カメラで撮影」「フォトライブラリ」「ファイルから選択」のアクションシートが表示される設計」と指定しましょう。
Q. ペースト（Ctrl+V）でのアップロードに対応するUIはどう設計すればいいですか？
A. クリップボードからのペースト（スクリーンショットなど）に対応するには、エディタや入力エリアにフォーカスがある状態でCtrl+V/Cmd+Vを押したときにファイルアップロードが開始されるUXが必要です。UIとしては「クリップボードの画像を検出しました。アップロードしますか？」というトーストやダイアログをStitchで設計しておくと、実装仕様が伝わりやすくなります。
Q. メディアライブラリに検索・フィルター機能をつける場合、どう設計しますか？
A. 「検索バー（ファイル名検索）・フィルター（ファイル種別：画像/動画/PDF・アップロード日：今週/今月/全期間）・ソート（新しい順/古い順/ファイルサイズ順）のヘッダーエリアをメディアライブラリの上部に固定配置」というプロンプトが効果的です。フィルターの状態（アクティブなフィルターのバッジ表示・クリアボタン）も合わせて設計しましょう。
まとめ：アップロードは「不安を取り除く体験」だ
Google Stitch でファイルアップロードとメディア管理のUIを設計してみて、「アップロードという体験」の核心が見えてきた。
ユーザーがファイルをアップロードするとき、「ちゃんとアップロードされるか」という不安が常にある。その不安を取り除くのが、アップロードUIの仕事だ。
進捗の可視化・エラー時の原因と対処法の明示・完了後のフィードバック——これらはすべて「今どういう状況か」「何をすればいいか」をユーザーに伝えることで、不安を取り除く設計だ。
ファイルをアップロードするという行為は、ユーザーにとって「自分の大切なものをサービスに預ける」行為でもある。その「預ける体験」を丁寧に設計することが、サービスへの信頼を作ることにつながる。
次のステップ：自分のサービスのアップロード機能を全状態（アイドル・進行中・完了・エラー）でテストし、「ユーザーが常に状況を把握できているか」を確認してみましょう。把握できていない状態があれば、そこが設計の改善点です。
