Skip to main content

UIデザイン

🖥 トップ画面構成の指示​

画面目的（ユーザー視点）​

「今いる場所から最も近くて使えるステーションをすぐに見つけて予約したい」

表示するメインオブジェクトのリスト形式​

MAPビュー（インタラクティブ地図）：

  • 各ステーションをピンアイコンで表示
  • ピンの色で利用状況を表現（緑：空き、赤：満室、オレンジ：清掃中）
  • 現在地から各ステーションまでの徒歩時間を表示
  • タップで簡易情報ポップアップ表示

各アイテムに表示すべき属性​

ステーションピン：

  • ステーション名
  • 現在の利用状況
  • 徒歩時間
  • 評価スコア（星マーク）

詳細ポップアップ：

  • 設備レベル（高級/標準）
  • 利用可能商品概要
  • 現在の混雑状況
  • 直近の空き時間

アイコン/ステータス/操作ボタン​

ステータスアイコン：

  • 🟢 利用可能（緑丸）
  • 🔴 利用中（赤丸）
  • 🟠 清掃中（オレンジ丸）
  • ⭐ 評価スコア表示

操作ボタン：

  • 「今すぐ予約」ボタン（メインCTA）
  • 「ルート案内」ボタン
  • 「詳細を見る」リンク

上部UI（ナビゲーションバー）​

  • サービスロゴ「身だしなみステーション」
  • 検索アイコン（エリア・駅名検索）
  • メニューハンバーガー（設定・履歴・ヘルプ）

下部UI（タブ・メニュー）​

  • 最寄りステーション情報カード（スワイプで切り替え）
  • 「今すぐ予約」大型ボタン
  • タブナビゲーション：
    • 🗺️ マップ（現在表示中）
    • 📋 履歴
    • ⚙️ 設定

🧱 UIコンポーネント設計​

コンポーネント名種類含まれる要素備考
ステーションピンマップアイコン状態色、徒歩時間、評価星タップでポップアップ
ステーション情報カードカード名前、住所、状態、設備、予約ボタン下部固定、スワイプ切り替え
予約ボタンプライマリボタン「今すぐ予約」テキスト、時間アイコンコーラルピンク背景
ステータスバッジバッジ利用状況、アイコン色分けで即座に判別可能
検索バー入力フィールド「駅名・エリアで検索」プレースホルダー上部ナビに配置

トンマナ・UIトーンの設計​

世界観・感情トーン（サービス全体の空気感）​

キーワード： 信頼感、清潔感、スピード感、プロフェッショナル、女性らしい上品さ

  • 働く女性が安心して利用できる品格
  • 急いでいる時でも直感的に操作できるシンプルさ
  • 清潔で整った印象

UIの質感（形容詞ベースで）​

  • シンプル・クリーン： 余計な装飾を排除した洗練されたデザイン
  • 直感的： 一目で状況が分かるアイコンと色使い
  • 上品： 働く女性にふさわしい落ち着いた印象
  • レスポンシブ： 素早い操作に対応する軽快感

カラートーン​

  • メイン： ディープネイビー（#2C3E50） - 信頼感・プロフェッショナル
  • アクセント： コーラルピンク（#FF6B6B） - 女性らしさ・親しみやすさ
  • 状態表示：
    • 利用可能：フレッシュグリーン（#2ECC71）
    • 満室：レッド（#E74C3C）
    • 清掃中：オレンジ（#F39C12）
  • 背景： ウォームホワイト（#FAFAFA）、ライトグレー（#ECF0F1）
  • テキスト： チャコールグレー（#34495E）

書体や装飾のトーン​

  • メインフォント： Noto Sans JP（読みやすさと上品さ）
  • 装飾： ミニマル、角丸要素で親しみやすさ演出
  • 余白： 十分な余白で上品さと操作しやすさを確保

トップ画面の構成指示（OOUI観点）​

メインオブジェクト​

身だしなみステーション - 地図上のピンとして表現

画面の目的（ユーザーが最初に何をする？）​

  1. 現在地周辺のステーションを確認する
  2. 利用可能なステーションを見つける
  3. 最適なステーションを選んで予約する

トップ画面UI構成要素​

上部ナビゲーション​

  • サービスロゴ「身だしなみステーション」（左上）
  • 検索アイコン（右上）
  • メニューハンバーガー（右上）

メインエリア（MAP表示）​

  • インタラクティブ地図： 70%の画面占有
  • ステーションピン： 状態に応じた色分け表示
  • 現在地マーカー： ユーザーの現在位置
  • 徒歩時間表示： 各ステーションまでの所要時間

下部情報エリア​

  • 最寄りステーション情報カード：
    • ステーション名、住所
    • 利用状況、設備情報
    • 評価スコア
    • 「今すぐ予約」ボタン
  • タブナビゲーション： マップ・履歴・設定

空の状態（ステーションがない時）の表示内容​

  • 「お近くにステーションが見つかりませんでした」
  • 「検索範囲を広げて再検索」ボタン
  • サポートへの連絡リンク

UIコンポーネント詳細​

コンポーネント名種類含まれる要素備考
ステーションピンマップアイコン状態色丸、徒歩時間テキスト、星評価タップでポップアップ表示
情報カードボトムシートステーション名、住所、状態バッジ、予約ボタンスワイプで他ステーション切り替え
今すぐ予約ボタンプライマリCTAコーラルピンク背景、白文字、時計アイコン下部固定で常時アクセス可能
状態バッジステータス表示利用可能/満室/清掃中、対応色とアイコン瞬時に状況判別可能
検索バー入力コンポーネント虫眼鏡アイコン、「駅名・エリアで検索」上部ナビに統合