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コーラルピンク背景、白文字、時計アイコン下部固定で常時アクセス可能
状態バッジステータス表示利用可能/満室/清掃中、対応色とアイコン瞬時に状況判別可能
検索バー入力コンポーネント虫眼鏡アイコン、「駅名・エリアで検索」上部ナビに統合