HTML5

作業担当者:鈴木 祥護
作業日  :1月30日

■ 実施内容

1. マイページ内タブ切替挙動の整理

  • 「投稿」「いいね」タブ切替を前提とした画面構造を確認

  • タブ切替時に表示内容のみを切り替え、
    ページ全体の再描画を行わない設計方針を整理

  • アクティブ状態の視覚表現(下線・強調)を想定したUI整理を実施


2. 投稿表示構造の確認

  • 投稿カードを最小単位とした一覧表示構造を再確認

  • 投稿が存在しない状態(初期状態)を考慮し、
    empty-state 表示を前提とした構造を採用

  • コメント投稿欄・画像投稿欄は常時DOMとして保持し、
    後からJSでデータを差し込む設計とした


3. データ反映を想定した設計整理

  • マイページは静的UI完成後に、
    投稿画面(別画面)からのデータ反映を行う前提構造とする

  • ユーザー名・投稿内容は将来的にJSで動的に反映する想定とし
    HTML構造側ではプレースホルダ配置に留める設計を確認

■ 次回作業予定

  • マイページ関連JS(タブ切替・表示制御)の実装検討

  • 投稿画面(up画面)とのデータ連携設計整理

HTML5

作業担当者:鈴木 祥護
作業日  :1月29日
評価日程希望 ➄

■ 作業概要

MIRABA サイトにおける
マイページ画面のUI設計確定および画面構造整理作業を実施。

個人ページとしての位置づけを明確化し、
投稿・いいね一覧を中心とした画面構成とデザイン仕様を確定した。

■ 実施内容

1. マイページ画面の役割整理

  • マイページを「ユーザー自身の活動履歴を集約する画面」として定義

  • プロフィール画面とは役割を分離し、
    編集要素ではなく 閲覧・確認を主目的とした構成とした

  • 投稿履歴・いいね履歴を中心に、利用状況が直感的に把握できる画面設計を採用


2. 画面構造・レイアウト設計

  • TOP画面と同系統の独立したページヘッダー領域を設置

  • ヘッダー下にユーザー主体を示す情報配置を想定

  • サイドバーは全画面共通仕様を維持し、
    main領域のみをマイページ専用構成とした


3. 投稿/いいね一覧UI設計

  • 「投稿」「いいね」の2タブ切替構成を採用

  • 投稿カード単位での視認性を重視し、
    外枠ガラスカードは使用せず、カード単体で情報を成立させる設計とした

  • 投稿カード幅・配置を統一し、一覧表示時の安定感を確保


4. デザイン方針整理

  • 全体トーンは MIRABA 共通の
    高級感・ガラス感・あたたかさ を踏襲

  • 主張しすぎない装飾と余白設計により、
    情報量が増えても圧迫感が出ないUIを意識

  • 将来的な動的データ反映を前提とした構造を維持


■ 確認事項

  • マイページ画面は UI設計として完成扱いとする

  • 大幅なレイアウト変更は行わず、
    今後はデータ連携・挙動調整のみを対象とする


■ 次回作業予定

  • マイページ内タブ切替挙動の実装検討

  • 投稿データ表示(ダミーデータ)の反映設計

HTML5

作業担当者:鈴木 祥護
作業日  :1月28日

1. 本日の進捗

  • 設定

  • フレンド(メッセージ)

  • マイページ

2. 実施内容

(1) 設定画面

  • 設定とプライバシー画面を「信頼の中核画面」として位置づけ。

  • HELP画面構造をベースとし、操作要素を最小限に抑えた設計を採用。

  • ガラスカードを用いた説明中心のUIとし、
    「考え方の共有」を主目的とした画面構成を確定。

(2) フレンド・メッセージ画面

  • フレンド画面 ⇄ メッセージ画面の遷移仕様を確定。

  • data-page属性と共通ルーターJSによる全画面共通遷移を採用。

  • メッセージ画面ではサイドバーを非表示とし、
    戻る操作は専用ボタンによる遷移に限定。

  • DOM崩壊防止・責務分離を重視した構造を採用。

(3) マイページ

  • マイページを「個人活動の集約画面」として設計。

  • TOP画面と同系統の独立したヘッダー領域を設置。

  • 投稿/いいねのタブ切替を前提とした構造を採用。

  • 投稿カード単位での視認性を重視し、
    外枠ガラスカードを使用しない設計を確定。

今後のタスク

登校画面と投稿フィールド・機能の作成

26/01/28 めがね2/3 活動報告

日誌担当者: 藤原創太


チームの活動内容

  • スライドの作成
  • バグ修正

投稿担当者の作業内容

  • バグ修正
  • ゲーム用のオリジナル曲ちょっと作ってみた

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

  • スライドの調整
  • 作品ポスターの作成
  • あればゲームの調整

 

スライドは動画張っ付けたので完成です
あとはしゃべることメモをもうちょっと書くだけ

26/1/28 CodeUnion 活動報告

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

・ポスター作成

・スライド作成

・発表時に使用する紹介動画作成

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

・スライド作成

・発表時に使用する紹介動画作成

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

・ポスター作成

・スライド作成

・発表時に使用する紹介動画作成

For Fujie Lab Members