作業担当者：鈴木　祥護
作業日　　：2月3日（最終）

■ 作業概要
MIRABAサイトにおける全画面のUI設計および画面構造整理を完了し、
本プロジェクトの開発・設計フェーズを終了した。

設定、フレンド（メッセージ）、マイページ、投稿画面を含む主要画面について、
共通UI方針・画面遷移仕様・表示ルールを確定し、
最終的な情報共有および設計内容の整理を実施した。

■ 実施内容

1. プロジェクト全体構造の最終確認
   ・MIRABAの世界観を「高級感・ガラス感・あたたかさ（ダーク寄り）」で統一
   ・全画面共通サイドバー固定構造を採用
   ・画面遷移は data-page 属性＋共通JSによる方式に統一
   ・各ページは main 領域のみを差し替える構成とし、共通UIの再実装は禁止とした

2. 各画面のUI設計確定

【設定画面】
・信頼の中核画面として位置づけ
・HELP画面構造をベースに、説明中心・操作最小のUIを採用
・UI設計は完成扱いとし、今後の変更は行わない

【フレンド・メッセージ画面】
・フレンド一覧からメッセージ画面へ遷移する構造を確定
・メッセージ画面ではサイドバーを非表示
・戻るボタンによる遷移のみを許可
・送信時刻表示仕様（当日：時刻、日付跨ぎ：月/日）を確定
・実際のフレンド間でのメッセージは未実装（形のみ）

【マイページ】
・ユーザーの活動履歴を集約する画面として設計
・独立したヘッダー領域を設置
・投稿／いいねのタブ切替構造を採用
・投稿カード単位表示、empty-state前提構造を確定
・UIおよび画面構造は完成扱いとした
・UPページとの連携は未完了

【投稿画面（up画面）】
・コメントおよび画像投稿専用画面として設計
・画像表示仕様を以下に統一
　- 正方形（aspect-ratio: 1 / 1）
　- 複数画像選択可能
　- 表示は常に1枚
　- 左右ボタンによる切り替え方式
・UI設計および仕様確定を完了

【RIGHT画面】
・投稿内容表示画面として設計
・投稿画面およびマイページと画像仕様を共通化
・画面構造は確定し、連携は想定段階で終了

【発表用プレゼンテーション完成】

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

■ 作業概要
MIRABAサイトにおける、
投稿画面（up画面）のUI設計整理および画像投稿仕様の確定作業を実施した。
既存画面との整合性を保ちながら、投稿機能として必要な構造と挙動の整理を行った。

■ 実施内容

1. 投稿画面の役割整理
   ・投稿画面を、コメントおよび画像を投稿する専用画面として定義
   ・マイページおよびRIGHT画面と連携する前提で設計を実施
   ・画面設計を優先し、ログイン処理や保存処理などの機能実装は後工程とした

2. 画像投稿UI仕様の確定
   ・投稿画像の表示サイズを正方形（aspect-ratio: 1 / 1）に統一
   ・複数画像の選択を可能としつつ、画面上では常に1枚のみ表示する仕様を採用
   ・左右の切り替えボタンにより、選択した画像を順番に確認できるカルーセル方式を採用

3. 画像表示・切り替え構造の整理
   ・ファイル選択後に画像表示領域を表示する構造とした
   ・画像切り替えはインデックス管理による制御を想定
   ・画像が1枚のみの場合は切り替えボタンを非表示とし、UIの簡潔さを維持

4. 他画面との整合性確認
   ・マイページおよびRIGHT画面と同一の画像表示仕様を前提とし、表示比率と構造を共通化
   ・将来的なデータ連携時に、DOM構造を変更せず反映可能な設計を確認

■ 確認事項
・投稿画面はUI設計および仕様確定フェーズを完了とする
・機能実装（保存処理、画面間連携）は後工程で段階的に実施する
・画像表示仕様は投稿画面、RIGHT画面、マイページの3画面共通ルールとして扱う

■ 次回作業予定
・投稿画面とマイページ画面のデータ連携設計
・RIGHT画面への投稿内容反映構造の整理

作業担当者：鈴木　祥護
作業日　　：1月30日

■ 実施内容

1. マイページ内タブ切替挙動の整理

• 「投稿」「いいね」タブ切替を前提とした画面構造を確認

• タブ切替時に表示内容のみを切り替え、
  ページ全体の再描画を行わない設計方針を整理

• アクティブ状態の視覚表現（下線・強調）を想定したUI整理を実施

2. 投稿表示構造の確認

• 投稿カードを最小単位とした一覧表示構造を再確認

• 投稿が存在しない状態（初期状態）を考慮し、
  empty-state 表示を前提とした構造を採用

• コメント投稿欄・画像投稿欄は常時DOMとして保持し、
  後からJSでデータを差し込む設計とした

3. データ反映を想定した設計整理

• マイページは静的UI完成後に、
  投稿画面（別画面）からのデータ反映を行う前提構造とする

• ユーザー名・投稿内容は将来的にJSで動的に反映する想定とし
  HTML構造側ではプレースホルダ配置に留める設計を確認

■ 次回作業予定

• マイページ関連JS（タブ切替・表示制御）の実装検討

• 投稿画面（up画面）とのデータ連携設計整理

作業担当者：鈴木　祥護
作業日　　：１月２９日
評価日程希望　➄

■ 作業概要

MIRABA サイトにおける
マイページ画面のUI設計確定および画面構造整理作業を実施。

個人ページとしての位置づけを明確化し、
投稿・いいね一覧を中心とした画面構成とデザイン仕様を確定した。

■ 実施内容

1. マイページ画面の役割整理

• マイページを「ユーザー自身の活動履歴を集約する画面」として定義

• プロフィール画面とは役割を分離し、
  編集要素ではなく 閲覧・確認を主目的とした構成とした

• 投稿履歴・いいね履歴を中心に、利用状況が直感的に把握できる画面設計を採用

2. 画面構造・レイアウト設計

• TOP画面と同系統の独立したページヘッダー領域を設置

• ヘッダー下にユーザー主体を示す情報配置を想定

• サイドバーは全画面共通仕様を維持し、
  main領域のみをマイページ専用構成とした

3. 投稿／いいね一覧UI設計

• 「投稿」「いいね」の2タブ切替構成を採用

• 投稿カード単位での視認性を重視し、
  外枠ガラスカードは使用せず、カード単体で情報を成立させる設計とした

• 投稿カード幅・配置を統一し、一覧表示時の安定感を確保

4. デザイン方針整理

• 全体トーンは MIRABA 共通の
  高級感・ガラス感・あたたかさ を踏襲

• 主張しすぎない装飾と余白設計により、
  情報量が増えても圧迫感が出ないUIを意識

• 将来的な動的データ反映を前提とした構造を維持

■ 確認事項

• マイページ画面は UI設計として完成扱いとする

• 大幅なレイアウト変更は行わず、
  今後はデータ連携・挙動調整のみを対象とする

■ 次回作業予定

• マイページ内タブ切替挙動の実装検討

• 投稿データ表示（ダミーデータ）の反映設計

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

1. 本日の進捗

• 設定

• フレンド（メッセージ）

• マイページ

2. 実施内容

(1) 設定画面

• 設定とプライバシー画面を「信頼の中核画面」として位置づけ。

• HELP画面構造をベースとし、操作要素を最小限に抑えた設計を採用。

• ガラスカードを用いた説明中心のUIとし、
  「考え方の共有」を主目的とした画面構成を確定。

(2) フレンド・メッセージ画面

• フレンド画面 ⇄ メッセージ画面の遷移仕様を確定。

• data-page属性と共通ルーターJSによる全画面共通遷移を採用。

• メッセージ画面ではサイドバーを非表示とし、
  戻る操作は専用ボタンによる遷移に限定。

• DOM崩壊防止・責務分離を重視した構造を採用。

(3) マイページ

• マイページを「個人活動の集約画面」として設計。

• TOP画面と同系統の独立したヘッダー領域を設置。

• 投稿／いいねのタブ切替を前提とした構造を採用。

• 投稿カード単位での視認性を重視し、
  外枠ガラスカードを使用しない設計を確定。

今後のタスク

登校画面と投稿フィールド・機能の作成

作業担当者：鈴木　祥護
作業日　　：１月27日

MIRABA プロフィール画面設計

• プロフィール画面・編集画面のデザイン設計を進めた。

• 設計ポイント：

  • サイドバー固定、main部分のみ差し替え方式

  • 編集ボタン・保存ボタンに高級感のあるグラデーション・シャドウを適用

  • 文字色は白および淡い金系を採用

  • 入力項目：名前（姓・名分割）、生年月日、性別、アバター（未実装）

  • 余白・丸角を多く取り、暖かさと柔らかさを演出

MIRABA notice画面設計

• notice画面のページ設計を進め、UI要素やレイアウトを検討。

• 設計方針：

  • 共通サイドバーを維持し、main部分のみ差し替え

  • 通知の閲覧・詳細確認を想定した構造設計

  • 高級感・ガラス感・暖かさを意識した配色・レイアウト

作業担当者：鈴木　祥護
作業日　　：１月23日

本日の作業

• 質問入力フォームから送信してもFAQに反映

• メインをＪＳに移動

今後の予定

• FAQ機能最終調整

• オープニングアニメーション実装

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

CSS構成の整理・再設計

• CSSを以下の役割別ディレクトリ構成に整理
  • base：リセット・変数・基本設定
  • layout：header / background / screen 等のレイアウト管理
  • components：ボタン・テキスト演出・装飾要素
  • pages：TOP / CALENDAR / ABOUT 等のページ単位CSS

背景（黒ページ群）の統一

• 黒1〜5ページの背景を統一（1ページ目の黒を基準）
• 黒3ページ：画像を完全削除し、テキスト訴求用ページへ変更
• 黒4ページ：ページ自体を削除
• 背景CSSを css/layout/background.css に集約

カレンダー画面の再構築

■ 問題点

• calendar.css 消失により日付が非表示
• 月・年切替時にボタン位置が動く
• レイアウト依存による再描画ズレ

■ 対応内容

• calendar-wrapper を基準とした高さ固定設計に変更
• 月表示（cal-month）に固定幅を設定
• 年表示・タイトルエリアの高さを固定
• 操作ボタン（月・年）を画面下部にabsolute固定配置
• ボタンサイズを完全固定し、連続操作でも位置ズレなし

今後の予定（次フェーズ）

• 月切替時のフェード＋スライドアニメーション追加
• TODAYセルの一瞬発光演出
• FAQ画面：
  • 質問入力フォーム追加
  • 投稿内容をリアルタイム反映
• オープニングアニメーション（5秒）導入

作業担当者：鈴木　祥護
作業日　　：１月１９日

■ 作業内容

• EVENT CALENDAR 機能の修正・再構築対応

• カレンダーが「日付縦一列表示」になる不具合の原因調査

• HTML / CSS / JavaScript の切り分け確認

• 画面レイアウト（.screen の flex 影響）の検証

• カレンダー関連CSS・JS・HTMLの再確認

• 表示崩れの根本原因を特定

今後の予定
・全画面骨組み見直し
・デザイン調整
・投稿フェーズの確認
・ログ機能調整

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

■ 作業概要

MIRABA サイトの ページ間背景の自然な接続調整 および
5ページ目「EVENT CALENDAR」画面の設計・実装作業 を実施。

■ 実施内容

1. ページ間背景の調整（1ページ目 → 2ページ目）

• グラデーション境界が不自然に見える問題を検証

• .screen 構造と背景指定の関係を整理

• 疑似要素やブリッジ用グラデーションの影響を切り分け

• 「二重線が見える」原因を CSS 構造レベルで把握

2. EVENT CALENDAR（5ページ目）設計

• カレンダー画面のUI仕様を確定

  • タイトル：画面上部

  • 年表示：タイトル下

  • 月表示：左側・大きめフォント

  • 曜日：横並び（英語表記）

  • 日付：中央・グリッド配置

  • 操作ボタン：右下（前月／次月／前年／次年）

• デザイン方針

  • Googleカレンダーを参考

  • 線・枠は「やさしいシルバー」

  • 高級感・主張しすぎないUI

3. カレンダー日付表示不具合の解決

• 日付が縦1列になる問題を調査

• 原因が HTML構造（.cal-date 未使用）＋ JS生成方法 にあると特定

• 正しい Grid 前提構造を整理

• .cal-date を1日1要素として生成する JS ロジックを確立

• 10日・20日に EVENT 表示を実装

次回作業予定

・サブリンク画面設計