作業担当者：鈴木 祥護
作業日 ：1月30日
「投稿」「いいね」タブ切替を前提とした画面構造を確認
タブ切替時に表示内容のみを切り替え、
ページ全体の再描画を行わない設計方針を整理
アクティブ状態の視覚表現（下線・強調）を想定したUI整理を実施
投稿カードを最小単位とした一覧表示構造を再確認
投稿が存在しない状態（初期状態）を考慮し、
empty-state 表示を前提とした構造を採用
コメント投稿欄・画像投稿欄は常時DOMとして保持し、
後からJSでデータを差し込む設計とした
マイページは静的UI完成後に、
投稿画面（別画面）からのデータ反映を行う前提構造とする
ユーザー名・投稿内容は将来的にJSで動的に反映する想定とし
HTML構造側ではプレースホルダ配置に留める設計を確認
マイページ関連JS（タブ切替・表示制御）の実装検討
投稿画面（up画面）とのデータ連携設計整理
作業担当者：鈴木 祥護
作業日 ：１月２９日
評価日程希望 ➄
MIRABA サイトにおける
マイページ画面のUI設計確定および画面構造整理作業を実施。
個人ページとしての位置づけを明確化し、
投稿・いいね一覧を中心とした画面構成とデザイン仕様を確定した。
マイページを「ユーザー自身の活動履歴を集約する画面」として定義
プロフィール画面とは役割を分離し、
編集要素ではなく 閲覧・確認を主目的とした構成とした
投稿履歴・いいね履歴を中心に、利用状況が直感的に把握できる画面設計を採用
TOP画面と同系統の独立したページヘッダー領域を設置
ヘッダー下にユーザー主体を示す情報配置を想定
サイドバーは全画面共通仕様を維持し、
main領域のみをマイページ専用構成とした
「投稿」「いいね」の2タブ切替構成を採用
投稿カード単位での視認性を重視し、
外枠ガラスカードは使用せず、カード単体で情報を成立させる設計とした
投稿カード幅・配置を統一し、一覧表示時の安定感を確保
全体トーンは MIRABA 共通の
高級感・ガラス感・あたたかさ を踏襲
主張しすぎない装飾と余白設計により、
情報量が増えても圧迫感が出ないUIを意識
将来的な動的データ反映を前提とした構造を維持
マイページ画面は UI設計として完成扱いとする
大幅なレイアウト変更は行わず、
今後はデータ連携・挙動調整のみを対象とする
マイページ内タブ切替挙動の実装検討
投稿データ表示（ダミーデータ）の反映設計
作業担当者：鈴木 祥護
作業日 ：１月２８日
設定
フレンド（メッセージ）
マイページ
設定とプライバシー画面を「信頼の中核画面」として位置づけ。
HELP画面構造をベースとし、操作要素を最小限に抑えた設計を採用。
ガラスカードを用いた説明中心のUIとし、
「考え方の共有」を主目的とした画面構成を確定。
フレンド画面 ⇄ メッセージ画面の遷移仕様を確定。
data-page属性と共通ルーターJSによる全画面共通遷移を採用。
メッセージ画面ではサイドバーを非表示とし、
戻る操作は専用ボタンによる遷移に限定。
DOM崩壊防止・責務分離を重視した構造を採用。
マイページを「個人活動の集約画面」として設計。
TOP画面と同系統の独立したヘッダー領域を設置。
投稿／いいねのタブ切替を前提とした構造を採用。
投稿カード単位での視認性を重視し、
外枠ガラスカードを使用しない設計を確定。
今後のタスク
登校画面と投稿フィールド・機能の作成
作業担当者：鈴木 祥護
作業日 ：１月27日
プロフィール画面・編集画面のデザイン設計を進めた。
設計ポイント：
サイドバー固定、main部分のみ差し替え方式
編集ボタン・保存ボタンに高級感のあるグラデーション・シャドウを適用
文字色は白および淡い金系を採用
入力項目：名前（姓・名分割）、生年月日、性別、アバター（未実装）
余白・丸角を多く取り、暖かさと柔らかさを演出
notice画面のページ設計を進め、UI要素やレイアウトを検討。
設計方針：
共通サイドバーを維持し、main部分のみ差し替え
通知の閲覧・詳細確認を想定した構造設計
高級感・ガラス感・暖かさを意識した配色・レイアウト
作業担当者：鈴木 祥護
作業日 ：１月23日
本日の作業
質問入力フォームから送信してもFAQに反映
今後の予定
FAQ機能最終調整
オープニングアニメーション実装
作業担当者：鈴木 祥護
作業日 ：１月２２日
base：リセット・変数・基本設定layout：header / background / screen 等のレイアウト管理components：ボタン・テキスト演出・装飾要素pages：TOP / CALENDAR / ABOUT 等のページ単位CSScss/layout/background.css に集約calendar-wrapper を基準とした高さ固定設計に変更
作業担当者：鈴木 祥護
作業日 ：１月１９日
EVENT CALENDAR 機能の修正・再構築対応
カレンダーが「日付縦一列表示」になる不具合の原因調査
HTML / CSS / JavaScript の切り分け確認
画面レイアウト（.screen の flex 影響）の検証
カレンダー関連CSS・JS・HTMLの再確認
表示崩れの根本原因を特定
今後の予定
・全画面骨組み見直し
・デザイン調整
・投稿フェーズの確認
・ログ機能調整
作業担当者：鈴木 祥護
作業日 ：１月１６日
MIRABA サイトの ページ間背景の自然な接続調整 および
5ページ目「EVENT CALENDAR」画面の設計・実装作業 を実施。
グラデーション境界が不自然に見える問題を検証
.screen 構造と背景指定の関係を整理
疑似要素やブリッジ用グラデーションの影響を切り分け
「二重線が見える」原因を CSS 構造レベルで把握
カレンダー画面のUI仕様を確定
タイトル：画面上部
年表示：タイトル下
月表示：左側・大きめフォント
曜日：横並び（英語表記）
日付：中央・グリッド配置
操作ボタン：右下（前月／次月／前年／次年）
デザイン方針
Googleカレンダーを参考
線・枠は「やさしいシルバー」
高級感・主張しすぎないUI
日付が縦1列になる問題を調査
原因が HTML構造（.cal-date 未使用）＋ JS生成方法 にあると特定
正しい Grid 前提構造を整理
.cal-date を1日1要素として生成する JS ロジックを確立
10日・20日に EVENT 表示を実装
次回作業予定
・サブリンク画面設計
作業担当者：鈴木 祥護
CSS分割後の表示崩れ・未反映箇所の修正
TOPヘッター領域の調整
1ページ目〜2ページ目の背景を自然につなげる試行
UI干渉（MENU・サブタイトル・タイトル等）の解消
明日（1/16）の予定
１～５までのアニメーション連携
６～１０までの画面設計・リンク連動
全体のアニメーション・演出確認
日誌担当：鈴木 祥護
プロジェクト名：MIRABA
2026年1月14日
TOPページ（ABOUTセクション）のUI調整作業
円（キーワードオブジェクト）の3D配置・奥行き表現の調整
中央に来る円を手前に表示し、視認性を高める調整
円同士の重なり・背景への埋没問題の修正対応
背景・レイアウトの検証
上部ナビゲーションと円の重なり回避
下部テキストが正しく表示されるための余白設計
背景の高級感を保ちつつ、縦方向レイアウトの最適化を検討
■ 発生した課題・気づき
レイアウト調整とアニメーション制御が密結合になっており、
今後の保守性に課題があると判断
■ 明日の予定
・各ページのアニメージョン一元管理
・サイドページへのリンク、アクション確認細部の画面設計
・ｃｓｓの構成見直し