日誌担当：鈴木 祥護
プロジェクト名：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. サイドバー項目クリック時のページ内遷移実装。