作業担当者：鈴木 祥護
作業日 ：2026年2月10日
作業内容
MIRABA の MAP（REQUEST）画面について、
REQUESTを「探す・出す・保存する・再利用する」一連の流れを
UI設計として整理・確定し、将来の実装を見据えた完成度まで引き上げた。
■ 作業目的
・MAP（REQUEST）画面において、
REQUESTの一連の利用フロー
（探す／出す／保存する／再利用する）をUI設計として整理する
・卒業研究として、
画面構成・遷移・思想を説明可能な設計状態にする
■ 今日の作業
1．MAP画面 全体構成の確定
・MAP画面を 左右2カラム構成 に固定
左：REQUESTを探す／一覧表示
右：REQUESTを出す／保存REQUEST管理
・既存のサイドバー構造および
data-page による画面遷移方式は維持
2．REQUEST一覧UIの完成
・今後、多数のREQUESTが表示されることを前提に一覧フィールドを設計
・同時表示件数は 約4人分＋α を基準とした
・半透明シルバー基調の枠を採用し、
一覧専用のスクロールバーを実装
・REQUESTカードの表示要素を以下で確定
ユーザアイコン
ユーザ名
日付
確認するボタン
・「確認する」操作から
map-detail.html へ遷移する設計を維持
3．REQUESTを出すフォームUI完成
・REQUEST作成フォームを完成レベルまで設計
・入力項目を以下に整理
日時（開始・終了）
住所（郵便番号検索前提）
REQUEST内容
概要
連絡事項
・「REQUESTを探す」枠と同一思想のデザインで統一
・スクロール前提とし、
高級感と操作性を両立したUIに調整
4．思想メッセージの配置整理
・思想分においてrequest依頼者・受注者ともに不安要素防止を見越して呼び掛ける
・REQUESTを出すボタンの配置
・操作と思想が同時に視認できるUXに変更
5．保存REQUEST機能のUI設計確定
・保存REQUEST用の 専用枠 を新規設計
・配置は右カラム（map-right）内、
REQUEST作成フォームの下に配置
・枠仕様を以下で確定
横幅：REQUESTを出すフォームと同一
高さ：左側REQUEST一覧の下端と揃える
・表示内容
タイトル：「保存したREQUEST」
保存されたREQUESTをカード形式で表示
・表示形式はREQUEST一覧（request-item）と完全共通とし、
ユーザアイコン、ユーザ名、サイズ、色を統一
6．保存 → 再利用の画面遷移フロー確定
以下の画面遷移フローを確定した。
MAP.html（REQUEST一覧）
→ 確認
MAP-detail.html（REQUEST詳細＋保存）
→ 保存
MAP.html（保存REQUEST一覧）
→ クリック
MAP-detail.html（REQUEST詳細 再表示）
・保存REQUEST専用の新UIは作成せず、
既存のREQUESTカードを再利用
・壊れにくく、拡張可能な設計として整理
■ 本日時点の到達点
・MAP画面UI：完成レベル
・REQUEST関連画面の役割分担および遷移仕様：確定
・保存REQUEST機能：UI設計完了（実装は次工程）
■ 次回作業予定
・実マップとの連携
・ユーザ情報（名前・アイコン）との連携
・全体の動作テスト