日誌担当者

松村知生

チームの活動内容
UIの調整、バグの修正

投稿担当者の作業内容

UIの調整、バグの修正

残タスク、次回の作業内容
UIの調整、デプロイ、資料の作成

あとはUIの調整です。

日誌担当：鈴木 祥護
プロジェクト名：MIRABA

【本日の主要な目標】

サイドバーおよびTOP画面周辺のUI/UX改善を目的として、
スクロール制御・操作性・視認性の整理と、
MENUボタン／ハンバーガーアイコンの統合設計を進める。

【活動内容】（作業内容まとめ）

1. サイドバー開閉時のスクロール制御確認・調整

• サイドバー開閉時に body のスクロールが完全に停止しない問題を確認。

• body.menu-open による
  overflow: hidden / height: 100vh / touch-action: none の挙動を再確認。

• 背景スクロール停止 + サイドバー内部のみスクロール可
  という構成を前提に、CSS構造（.sidebar / .sidebar-body）を整理。

2. サイドバー内部構造の再定義（CSS）

• .sidebar 自体はスクロール不可とし、
  内部の .sidebar-body のみ overflow-y: auto を許可。

• スクロールバーのデザイン（細線・半透明）を実装。

• サイドバー内文字を中央揃えに統一。

• 上部ロゴ領域・下部タイトル領域を明確に分離。

【次回の作業予定】

• MENUボタン枠内へのハンバーガーアイコン完全統合。

• フォントサイズ・行間・余白の本格調整。

• MIRABAロゴ画像の仮配置とサイズ検証。

• TOP画面背景に動画導入計画

日誌担当者: 鎌田あるん

チームの活動内容

• UIの調整
• デプロイお試し
• ゴースト対戦機能完成
• CODEモードの追加

投稿担当者の作業内容

• ゴースト対戦機能完成
• UIの調整

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

• UIの調整
• デバッグ

もういくつ寝ると冬休み！たのしみ～～

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

・問題と用語の追加

・アニメーションの追加、修正

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

・アニメーションの追加、修正

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

・問題と用語の追加

・アニメーションの追加、修正

日誌担当：鈴木 祥護
プロジェクト名：MIRABA

【本日の主要な目標】

TOP画面の完成度をさらに高めるため、
サイドバーのUX改善を中心に、
全面オーバーレイ型サイドバーの挙動・操作性・視認性の調整を行う。

【活動内容】（作業内容まとめ）

1. サイドバーUXの高度化（操作性向上）

• サイドバーを全面オーバーレイ表示とし、
  MENUボタン押下で画面全体を覆う構成を維持。

• 背景（オーバーレイ）クリックによるサイドバー閉じ処理を実装。

• ESCキー入力時にサイドバーを閉じる処理を追加。

• サイドバー表示中は body にクラスを付与し、
  ページスクロールを完全に禁止する仕様を採用。

• フェード（opacity）とスライド（transform）を組み合わせた
  一体型アニメーションで開閉するよう調整。

2. サイドバー内ナビゲーション動作の整理

• サイドバー内の「TOP」項目をクリックした際に、
  TOPセクションへスクロール遷移する仕様へ修正。

• サイドバー開閉ロジックを整理し、
  状態不整合（開いたまま遷移しない等）が起きない構造へ改善。

3. MENUボタン表示と状態表現の調整

• サイドバー開示中、
  MENUボタンの表示文字を変更する仕様を検討・整理。

• 今後実装予定として、
  MENUボタン内にハンバーガーアイコンを統合する方針を確定。

• MENU枠を横方向に拡張し、
  テキストとアイコンを同一ボタン内に配置する設計を決定。

4. ハンバーガーアイコンの仕様設計（設計確定）

以下のアニメーション仕様を確定（※本日は設計まで）：

• 横棒3本構成（最下段のみ短い）

• クリック時：

  • 3本目の棒が消失

  • 残り2本が回転し「×」形状へ変形

• サイドバークローズ時：

  • 元のハンバーガー形状へ戻る

MENUボタンと同一機能・同一状態管理で動作させる設計とした。

【次回の作業予定】

• MENUボタン内へのハンバーガーアイコン実装

• ハンバーガー → × へのアニメーション実装

• サイドバー内部レイアウトの最終調整

• ロゴ（MIRABAマーク）配置位置の確定

• CSS構造の整理（後のReactコンポーネント化を意識）

日誌担当：鈴木 祥護
プロジェクト名：MIRABA

【本日の主要な目標】

TOP画面の完成度向上を目的として、
ヘッダー・サイドバー・配色・画面構成の調整および
サイドバー開閉機能の安定実装を行う。

【活動内容】（作業内容まとめ）

1. サイドバー開閉機能の実装・修正

• JavaScript（sidebar.js）を用いて、MENUボタンによるサイドバーの開閉処理を実装。

• closed / not(.closed) の複雑な状態管理を廃止し、
  open クラス単一管理方式へ設計変更。

• 初期状態でサイドバーが表示されてしまう問題や、
  読み込み後に一瞬表示される不具合を解消。

• メインコンテンツとの連動（押し出しアニメーション）を調整。

2. ヘッダー構成の整理とデザイン調整

• ヘッダーを固定表示にし、スクロール時も常時表示される構成を確立。

• タイトル「MIRABA」を中央配置に戻し、筆記体フォントを適用。

• 「M」「R」を強調表示し、ブランド性を高めた。

• サブタイトル SUZUKINOMIRABA を追加し、
  表示位置を再検討・修正。

• ヘッダー下部に二重アンダーラインを追加し、デザイン性を向上。

• 右上に「MIRABAについて」リンクを設置。

3. サイドバーUIの高級感演出

• サイドバーをガラス風・ダークトーンで再設計。

• backdrop-filter: blur() を用いた半透明表現を採用。

• メニュー項目にホバー・クリック時のアニメーションを追加し、操作性を向上。

4. TOP画面レイアウトの整理

• TOPページを縦スクロール構成に変更。

• 仮背景として、以下のセクション構成を実装：

  • 黒背景（MIRABA表記・説明・活動・カレンダー）

  • 白背景（イベント・活動紹介・FAQ・別ビジョン・SNS）

• 各セクションを「1画面1コンテンツ」として整理。

• イベン

• 　トカレンダー（2025年12月）をダミー表示。

5. 配色・トーン調整

• 黒系カラーを明るめに調整し、可読性を向上。

• 白系カラーを温かみのあるトーンに変更。

• 全体として「落ち着き・上品さ・未来感」を意識した配色へ統一。

【次回の作業予定】

1. TOP背景（黒1〜黒5、白1〜白5）の本実装とグラデーション調整。

2. 各セクションへの演出（フェードイン・スクロール連動）。

3. サイドバー項目クリック時のページ内遷移実装。

   【次回の作業予定

   • サイドバー全面オーバーレイ版の CSS / JS 修正版の反映

   • メニュー表示時の body スクロール制御の実装

   • サイドバー内ロゴ配置を想定したレイアウト調整

   • TOP画面各セクションの微調整（余白・視線誘導）

   • React移行を見据えたコンポーネント分割案の整理（設計のみ）