Skip to content

2026-09-09 ポータルの共通ヘッダー・フッターと配色切替 ​

ユーザーから、ホームを他画面の見た目へ寄せてヘッダー・フッターを統一し、全画面でライト/ダークを切り替えられるよう依頼された。新入りがホームから参加・セットアップ・パスポートへ一貫した導線で進めるよう、既存の体験デモを調整する。

  • PortalDemoのヘッダー・フッターをホームでも表示し、ホームiframe内の重複ヘッダーを取り除く。イントロ再生はホーム本文の操作として残す。
  • 初期表示を他画面と同じライトとし、共通ヘッダーに両テーマの切替を置く。選択は専用localStorageキーへ保存し、画面移動・再読込後も引き継ぐ。保存できない場合も、その表示中は切り替えられる。
  • rootのdata-themeを単一の配色指定とし、ホームiframeにも同じ値を同期する。ヘッダーでcookiesを読まず、通常アプリも同じ切替を利用する。
  • ホームの各章による強制的な明暗の切替とJourneyのシェルの固定ダーク指定を外す。写真・生成画像とその上の文字は作品の配色を保ち、カード・フォーム・ダイアログをテーマに対応させる。
  • 既存ホームの独立したスクロール演出と、全画面イントロの比較版を維持する。

今回の検証はユーザー指定に従いレスポンシブレイアウトに限定する。共有枠と切替操作の欠落を先に検査で再現してから実装し、両テーマ・各画面・スマートフォン/タブレット/デスクトップで確認する。ローカルで実装を見せ、確認前にpush・公開しない。

秘密情報(SESSION_PASSWORD、Supabaseキー、Safeの認証情報)はドキュメント・Issue・ログへ貼らないでください。