日誌担当者: 鎌田あるん

チームの活動内容

• スライドの修正
• 動画撮影

投稿担当者の作業内容

• 動画撮影

残タスク・次回の作業内容

• スライドの修正
• 作品ポスターの作成
• 動画編集

みんなせっさんつよかった…

作業担当者：鈴木　祥護
作業日　　：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設計完了（実装は次工程）

■ 次回作業予定

・実マップとの連携
・ユーザ情報（名前・アイコン）との連携
・全体の動作テスト

日誌担当者：久保　拓也
【今日の活動内容】

・紹介動画作成

・ポスター修正

【投稿担当者の作業内容】

・紹介動画作成

【残タスク、次回の作業内容】

・紹介動画作成

・ポスター修正

日誌担当者: 藤原創太

チームの活動内容

• スライドの修正
• リハーサル

投稿担当者の作業内容

• スライドの修正
• リハーサル

残タスク・次回の作業内容

• スライドの修正
• 作品ポスターの作成

今日はガーデンノーム対決で負けてしまいました

日報担当：髙島海紗

【今日の活動内容】

ポスター修正

プレゼン資料修正

【投稿担当者の作業内容】

ポスター修正

【残タスク、次回の作業内容】

ポスター修正

プレゼン資料修正

作業担当者：鈴木　祥護
作業日　　：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崩れ、入力不具合の確認
・卒業研究提出レベルでの安定性確認

日誌担当者

松村知生

チームの活動内容

スライド作り、ポスター作り、バグ直し

投稿担当者の作業内容

スライド作り

残タスク、次回の作業内容

スライド完成(動画撮影)

一言
風邪ひきましたー筋トレが早くしたいです

作業担当者：鈴木　祥護
作業日　：　２月６日

作業内容
プロフィール画面の追加機能に対応のため再定義

・プロフィールは
　「人物の象徴」と「付随情報」を明確に分離する画面とする

・情報の重要度に応じて、視覚的レイヤーを分離する

情報レイヤー構造

【人物の核（正規・固定）】
・アバター
・表示名
・（将来）ユーザID（本人のみ確認可能）

【準公開・可変情報】
・年齢
・生年月日（公開／非公開 任意）
・性別（公開／非公開 任意）
・住所（都道府県のみ公開）

【活動情報】
・投稿数
・利用期間

■ 表示ルール（確定）

・初期状態は 表示名のみ表示
・それ以外の項目は 非表示 または「–」表示
・未入力項目は必ず「–」で表示する
・年齢と生年月日は別項目として扱う
　→ どちらか一方のみ表示可能な設計
・住所は 都道府県のみ公開（プライバシー保護）

■ デザイン・世界観の確定

【前提】
・背景（画面全体）は変更しない
・MIRABAの「落ち着いた暗さ」は維持する

【問題点】
・暗すぎて見づらい
・黒 × 黒で情報階層が分かりづらい

【解決策（確定）】
・カード内のみ明るくする
・特に「アイコン＋名前」領域を
　別レイヤーとして強調する

4. 今後の想定タスク（効率重視）

・profile-hero のデザインを完成レベルまで仕上げる
・プロフィール画面を
　「UI完成」
　「JS機能追加完了」
・メッセージ画面の新規追加機能に応じた画面設計再定義詳細機能の定義ui設計図の作成

日誌担当者: 鎌田あるん

チームの活動内容

• スライドの修正
• アプリの微調整

投稿担当者の作業内容

• アプリの微調整

残タスク・次回の作業内容

• スライドの修正
• 作品ポスターの作成
• あればゲームの調整

ゆびすま負けた

1. 作業担当者：鈴木　祥護
   作業日　　：2月5日

   RIGHT画面の役割定義
   ・RIGHT画面を、ユーザー投稿を時系列で表示するタイムライン画面として位置づけ
   ・TOP画面の体験価値を補完する「閲覧中心の画面」として設計
   ・操作を最小限に抑え、情報の流れを重視した構成とした

2. 画面構造設計
   ・投稿カードを最小単位とした縦方向レイアウトを採用
   ・ユーザー情報、投稿テキスト、画像、コメント導線を
   　一つのカード内で完結させる構造とした
   ・RIGHT画面はJSによる動的生成を前提とし、
   　HTML構造を固定したままデータを差し替える設計を採用

3. コメントUIの責務分離
   ・コメント表示用（comment-preview）と入力用（comment-panel）を明確に分離
   ・表示と入力を混在させないことで、UXの混乱を防止
   ・コメントは新しいものが上に表示される降順構造とした
   ・表示件数を制限し、スクロール前提のUIとした

4. 画像表示仕様
   ・画像は正方形（aspect-ratio: 1 / 1）表示に統一
   ・複数画像選択を可能としつつ、表示は常に1枚のみ
   ・左右ボタンによる切り替え方式を採用
   ・投稿画面およびマイページと仕様を完全に共通化

5. 完了判定
   ・RIGHT画面はUI設計および構造設計ともに完成扱いとする
   ・今後の追加機能実装は行わない

■ プロフィール画面 報告内容

1. プロフィール画面の役割定義
   ・プロフィール画面を「ユーザー情報の閲覧専用画面」として設計
   ・編集操作は別画面（プロフィール編集）に分離し、
   　表示と入力の責務分離を徹底した

2. 画面構造設計
   ・全画面共通サイドバーを維持し、main領域のみをプロフィール専用構成とした
   ・ユーザー名、基本情報を中心に、落ち着いた情報配置を採用
   ・過度な装飾を避け、公共性・信頼性を意識した構成とした

3. 編集画面との分離設計
   ・編集ボタンから専用の編集画面へ遷移する構造を採用
   ・プロフィール画面自体には入力要素を持たせない
   ・将来的な公開／非公開制御を想定したデータ構造を前提とした

4. デザイン方針
   ・高級感・ガラス感・あたたかさ（ダーク寄り）の世界観を踏襲
   ・余白と文字色を重視し、視認性と落ち着きを両立
   ・MIRABA全体のトーンを崩さない画面デザインとした

5. 完了判定
   ・プロフィール画面およびプロフィール編集画面は
   　UI設計・構造設計ともに完成扱いとする
   ・以後の改修・追加作業は行わない