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

25/12/19 めがね2/3 活動報告

コメントする

日誌担当者: 松村知生

チームの活動内容
ゴースト機能の作成

投稿担当者の作業内容
ランキング登録のバグ修正
リザルト画面の作成
pressanykeyにした。
画面遷移修正
ランキング画面のモードセレクト修正

残タスク、次回の作業内容
ゴースト機能のバグの修正、作成
細かいバグの修正
見た目の調整
明るさの調整
バックエンドの調整

ゴースト機能の作成と細かな修正をしました。
鎌田君がタイピング機能を作っていて大変そうなので応援します。

メガネが一人休んでしまっているので今週はメガネ1/2でしたね。らん丸1/2のパクリって言われてしまう…(-_-;)
鎌田君がバグ処理で忙しそうだったので善意でやりました。徳を積んだので次のじゃんけんも負けないでしょう。お天道様は見てるはず。

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

25/12/17　CodeUnion　活動報告

コメントする

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

・問題と用語の追加

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

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

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

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

・問題と用語の追加

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

HTML5

HTMLチーム５

コメントする

日誌担当：鈴木祥護

プロジェクト名：MiraBa

本日の作業内容

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

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

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

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

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

2. HTML / CSS 構造整理

  • public 配下の構成を整理

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

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

3. レイアウト調整

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

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

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

4. 動作確認

 

今後の予定（次回作業）

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

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

For Fujie Lab Members