syogo のすべての投稿

HTML5

HTML5

コメントする

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

■ 本日の主な進捗

1. サイドバー関連（最終確認）

  • bodyスクロール完全停止

  • MENU＋ハンバーガーUI

2. TOPページ（1～３）デザイン完成

■ 現時点での状態まとめ

  • UI構造：安定

  • サイドバーUX：完成

  • TOPページ：完成

■ 次回（1/14）の予定タスク

１．４～６までのTOPページ完成
２．全体トーンの最終仕上げ
３．全体スクロール連動演出

HTML5

HTMLチーム５

コメントする

日誌担当：鈴木 祥護
プロジェクト名：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画面背景に動画導入計画
HTML5

HTML５

コメントする

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

HTML5

HTMLチーム５

コメントする

日誌担当：鈴木 祥護
プロジェクト名：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移行を見据えたコンポーネント分割案の整理（設計のみ）

HTML5

html５

コメントする

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

HTML5

HTMLチーム５

コメントする

日誌担当：鈴木祥護

プロジェクト名：MiraBa

本日の作業内容

1. サイドバー機能実装・検証

  • サイドバーの 開閉アニメーション（CSS + JavaScript） を実装

  • トグルボタン操作による開閉動作を確認

  • レイアウト崩れの原因を特定し、構造を整理

  • サイドバーが表示されない問題を解消

2. HTML / CSS 構造整理

  • public 配下の構成を整理

  • HTML・CSS・JS の役割分離を明確化

  • 桜（sakura.js / WebGL）は後付け前提として一旦切り離し

3. レイアウト調整

  • ヘッダー（MIRABAロゴ）の固定表示確認

  • メインコンテンツとサイドバーの余白・重なりを調整

  • カレンダー・各セクションの表示確認

4. 動作確認

 

今後の予定（次回作業）

  • サイドバーを常時クローズ状態から開始する設定

  • 検索機能の追加
  • loading表記の見直し
  • ログイン前とログイン後の表示変更の設定
HTML5

HTMLチーム５

コメントする

日誌担当：鈴木 祥護

プロジェクト名：MiraBa（MIRABA）

【本日の主要な目標】

TOP画面の完成度向上を目的とし、
UIの操作性・視認性・デザイン統一感を高めるための改修を行う。

【活動内容】（担当者の作業）

  1. レイアウトおよび構造整理

    • public 配下に CSS・JavaScript・HTML を整理し、実行環境で正しく動作する構成に修正。

    • 桜アニメーション（WebGL / shader）を維持したまま、UIレイヤーのみを安全に調整。

  2. TOP画面UIの調整

    • 画面上部に固定ヘッダーとして「MIRABA」タイトルを配置。

    • 筆記体フォントを採用し、M・Rを強調することでブランド性を向上。

    • ヘッダーはスクロールしても常時表示される仕様とした。

  3. サイドバー設計の改善

    • 左サイドバーを固定配置とし、画面全体との干渉を防止。

    • サイドバー背景を白色（不透明）に変更し、視認性を向上。

  4. ダミーコンテンツの再設計

    • 「活動の様子」「イベントカレンダー」「活動紹介」各セクションを整理。

    • 各セクションのタイトルを中央配置し、タイトル部分のみに枠組みを適用。

    • 活動の様子にはダミー画像を複数配置し、2列レイアウトで視覚的に分かりやすくした。

    • イベントカレンダーは月単位（2025年12月想定）の表記に変更し、大きめの表示で作成。

  5. 表示崩れ・不具合の修正

    • ローカルサーバー起動時に発生していたレイアウト崩れを修正。

    • 桜背景が表示されない問題を切り分け、UI側の修正のみで安定表示を実現。

【次回の作業予定】

  1. サイドバーの開閉アニメーションの実装と操作性向上

  2. イベントカレンダーのデータ連携（Firestore化）

  3. 投稿・いいね・コメント機能のUI統合と動作確認

  4. 画面遷移時のアニメーション演出の追加

HTML5

HTMLチーム５

コメントする

日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

TOP画面を中心に、UI表現の強化（アニメーション背景・レイアウト改善）を行い、
各画面（TOP／メイン／投稿／マイページ）の役割を明確化する。

【活動内容】　【担当者の作業】

UI・画面構成の拡張および演出強化

１・TOP画面の再設計
　・筆記体フォントを用いた「MIRABA」ロゴを画面最上部に配置。
　・ロゴにアニメーション（浮遊表現）を加え、印象的なファーストビューを作成した。
　・TOP画面を縦スクロール可能な構成とし、今後のコンテンツ追加に対応できる基盤を整備した。

２・背景表現の整理
　・TOP画面には桜エフェクト（WebGL / shader）を使用した背景を適用。
　・メイン画面／投稿画面／マイページ画面は VANTA.js を用いたアニメーション背景を採用し、画面ごとに演出を分離した。

３・画面間レイアウトの調整
　・各エリア間の余白を広げ、PC表示を前提とした視認性の高いレイアウトに調整した。
　・不要な中央オブジェクト（400×240の描画領域）を除去し、UI表示の妨げを解消した。

４・サイドバーの改善
　・サイドバーの背景色を白に変更し、透明表現を廃止。
　・TOP／メイン／投稿／マイページへの導線（ボタン）を復活・整理した。

５・ダミーコンテンツの配置
　・TOP画面下部に、今後実装予定の
　　「画像エリア」「イベント用カレンダー」「活動紹介エリア」
　　を想定したダミーUIを配置した。

【次回の作業】

１・TOP画面下部コンテンツの具体化
　・イベントカレンダーのデザイン確定
　・活動紹介エリアをカード形式で整理する。

２・画面遷移の演出追加
　・TOP → メイン等の画面切り替えにフェード・アニメーションを追加する。

３・コード整理
　・各画面（TOP／メイン／投稿／マイページ）をHTML単位で分割し、
　　共通CSS・共通JSとして再整理する。

HTML5

HTMLチーム５

コメントする

日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

アプリのUI骨格の完成、デザインの完成

[活動内容]　[担当者の作業]

UI骨格の作成と修正
レイアウトの見直し

 

[次回の作業]
切り替え画面の確定
画面ごとのレイアウト修正

HTML5

HTMLチーム5日報

コメントする

日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

React開発環境の構築

[活動内容]　[担当者の作業]

Reactの環境構築完了。
VScodeでのリンクが不能。

[課題と解決の方向性]

ファイル感の見直し、パスの確認

[次回の作業]

Reactで画面表示する