作業担当者:鈴木 祥護
作業日 :2月9日
作業内容
MIRABA の MAP(REQUEST)画面について、
UI設計を完成レベルまで引き上げ、
卒業研究として説明可能な設計状態に整理した。
■ 今日の目標
・MAP(REQUEST)画面のUI設計を完成レベルまで仕上げる
・「REQUESTを探す」「REQUESTを出す」両枠の視認性・操作性を改善する
・卒業研究として、設計意図を説明できる状態に整理する
■ 活動内容
MAP画面 全体UIの調整・完成
・左側「REQUESTを探す」枠、右側「REQUESTを出す」枠について
レイアウト・配色・装飾を統一
・MIRABAの世界観に合わせ、
暗めトーンをベースにブルー/シルバーハイライトを用いたデザインに調整
・画面全体として、役割の異なる2枠が直感的に理解できる構成とした
REQUESTを出すフォームの改善
・フォーム内容が画面外にはみ出る問題を確認
・フォーム専用の縦スクロールを実装し、
画面全体のレイアウトを崩さずに入力可能な構造に変更
・スクロールバーは細め・シルバー調とし、
常時主張しない高級感のあるデザインを採用
住所入力UIの再設計
・住所入力を自由入力方式から、
「郵便番号 → 都道府県 → 市区町村 → 詳細住所」
という 構造化入力方式に変更
・郵便番号検索ボタンを設置し、
外部APIを用いた自動住所入力の設計を実装
・入力ミスや表記ゆれを防止し、
将来的なMAP連携を見据えたデータ構造とした
フォームUIの細部調整
・input / select / textarea のデザインを統一
・都道府県 select における色差問題について、
ブラウザ仕様を理解した上で制御方法を整理
・日付入力(カレンダーUI)については、
世界観とのズレを認識した上で、
実装の安定性を優先しブラウザ標準UIを採用する判断を行った
設計判断の整理
・現段階で 実装しない機能 と
将来実装予定の機能 を明確に切り分け
・卒業研究として
「なぜこの設計にしたのか」を説明できる状態に整理
■ 次回の作業予定
MAP画面の完成(機能面)
・ユーザー情報(名前・アイコン)との連携
・REQUESTクリック時の詳細表示とMAP表示の連動
実マップとの連携検討
・Leaflet 等を用いた実マップ表示への差し替え検討
・現在のダミーMAP構造を活かした段階的実装
REQUEST機能の実装
・REQUESTデータの保存・取得処理
・REQUESTが実際に行える環境の構築
動作テスト
・画面遷移・表示の動作テスト
・UI崩れ、入力不具合の確認
・卒業研究提出レベルでの安定性確認