(sample)カフェ「ミルクセイル」Web 予約 UI

架空クライアント向けのWeb 予約フローの UI デザインサンプルです。実店舗は存在しません。ポートフォリオ用に、情報設計〜主要画面までを一連で制作しています。

概要

• 担当: UI 設計 / ワイヤー / ビジュアル（Figma）
• 期間: 2026 年 6 月（2 週間・個人制作）
• 目的: スマホから「日時 → 人数 → 確認」まで迷わず完了させる

デザインのポイント

カフェ業態は写真と余白で雰囲気を伝え、操作系は白背景＋アクセント 1 色に絞りました。予約カレンダーは「今日から 14 日」を初期表示し、満席日は選択不可に。

画面構成

1. トップ（店舗情報・CTA）
2. 日時選択（カレンダー + 時間帯）
3. 人数・席タイプ
4. 確認・完了

予約 UI では「戻る」を恐れない設計が大事。各ステップで変更内容が残るように、確認画面まで state を見える化しました。

使用ツール

Figma / FigJam（フロー） / Notion（要件メモ）

参考: Studio Showcase — Portfolio