日誌担当：鈴木 祥護
プロジェクト名：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コンポーネント化を意識）