DailyUI 54日目
Prompt: Confirmation
確認 UI 要素をデザインします。何が確認されているのでしょうか？住所、注文、配送、航空券、ホテルの予約、ディナーの予約、オペラのチケットの予約などを確認しているのでしょうか?また、それが発生している場所 (Web サイト、モバイル アプリ、メール確認など) も考慮してください。
制作したもの
確認ページを表示する動線としては2パターンあると考えました。
①申し込み→申込内容確認画面→申し込み完了
②申し込み完了→申し込み一覧→申込内容確認画面
今回は②のすでに申し込んだ内容を確認するページを作ってみました！
確認画面に必要な項目
チャッピーにホテルの予約確認画面に必要な項目を出してもらいました。
- 1. ページのヘッダー
-
ロゴ: ホテルのロゴが左上に配置されます。
ナビゲーションメニュー: 上部にメインメニュー（ホーム、予約、特典、サポート）が配置されます。 - 2. 確認内容の表示エリア
-
見出し: 「予約の確認」と表示される大きな見出し。
予約番号: 「予約番号: #123456」と予約番号が表示されます。 - 3. 予約詳細
-
ホテル名
宿泊者名: 「宿泊者名: 山田太郎」
チェックイン日: 「チェックイン日: 2024年8月1日」
チェックアウト日: 「チェックアウト日: 2024年8月5日」
部屋タイプ: 「部屋タイプ: デラックスダブルルーム」
料金詳細: 「料金: ¥40,000（税・サービス料込み）」
特別リクエスト: 「特別リクエスト: 高層階希望、禁煙」 - 4. ホテル情報
-
ホテルの住所: 「住所: 東京都渋谷区神南1-1-1」
電話番号: 「電話番号: 03-1234-5678」
Eメール: 「Eメール: info@samplehotel.com」
地図: ホテルの場所を示す地図のリンクまたは小さな地図の画像。 - 5. アクションボタン
-
予約を変更: 「予約を変更」ボタンを設置し、変更ページへのリンクを提供。
予約をキャンセル: 「予約をキャンセル」ボタンを設置し、キャンセルページへのリンクを提供。
印刷: 「印刷」ボタンを設置し、印刷用ページを表示。
LINEなどでリンクが送れるように、共有ボタンもつけてみました。
反省・学んだこと
予約番号忘れてた・・・
問い合わせ電話があった時とかに困るよね。
