Contents
ユーザー体験を高めるUI再構築とNext.js移行への挑戦
🧭 はじめに
皆さまこんにちは、Procom開発チームの海老氏です。
本日は、2025年6月14日時点でのProcom（プロコム）開発進捗についてご報告いたします。Procomは、YouTuber・インスタグラマー・ダンサー・芸人・パフォーマーなど、“見せることで伝える”活動者たちのためのSNS連携型プロフィールサービスです。
今回は、特に以下の3つのテーマに沿って進捗を整理しました。
- 🔧 ヘッダーUI/UXの再設計とCSS Modulesへの対応
- 🔁
Next.js App Routerによるページ管理の分離 - 🧹 ディレクトリ構成の見直しとプロジェクト整備
🎨 ヘッダーをページごとにカスタマイズ
Header.js の再構成と分離
これまでの Procom は全ページ共通のヘッダーを使用しており、スタイルも Tailwind CSS をベースとしたシンプルなものでした。しかし、ブランドの個性を打ち出すため、以下のように変更を加えました。
TopPage用：キャッチコピー＋検索機能付きのビジュアル重視型ヘッダーMypage用：ログイン済みユーザー向けのナビゲーション中心のシンプルヘッダー
これに伴い、コンポーネントを以下のように分離し、CSS Modules でのスタイル適用も始めました。
bashコピーする編集するapp/components/
├── HeaderTop.tsx ← トップページ専用
└── HeaderDefault.tsx ← その他ページ共通
アニメーション付きのCSS Modules導入
CSSの書き方も従来のTailwind中心から、.module.cssファイルに明示的なクラス指定へ移行しました。
例：
cssコピーする編集する/* topHeader.module.css */
.tagline {
font-size: 1.3rem;
font-style: italic;
color: #ffdede;
animation: fadeInUp 1.2s ease-out;
}
この変更により、ページごとに明確に異なるデザイン表現が可能となり、訪問者の印象形成にも貢献しています。
🛠 Next.js App Routerへの適応と型安全性
App Routerとファイルベースルーティング
Next.js 15 の App Router に沿った形で、既存の /top.html や /users.html などの静的HTMLを以下のように移行しました：
bashコピーする編集するapp/
├── top/
│ └── page.tsx ← トップページ
├── user/
│ └── [uid]/
│ └── page.tsx ← ユーザーページ
また、React/TypeScriptによる型定義（interface）を追加し、データ構造の一貫性を維持しています：
tsコピーする編集するinterface User {
uid: string;
username: string;
profile: {
name?: string;
title?: string;
photos?: { url: string }[];
};
}
この変更により、サーバーサイドとクライアントサイドの整合性が取りやすくなり、バグの早期発見にもつながっています。
📁 ディレクトリ整理とプロジェクト最適化
src/からapp/への統合
従来は src/ 以下に components, pages, styles などが散在していましたが、Next.js の推奨構成に合わせて app/ ディレクトリに統合を進めています。
src/components/→app/components/src/styles/→app/styles/src/app/top/page.tsx→app/top/page.tsx
これにより、パスの解決も容易になり、エディタ補完やビルド時のエラーも減少しました。
import構文も統一
次のように、エイリアス（@）を使わず、相対パスで管理するよう修正を開始：
tsコピーする編集する// 修正前
import Header from '@/components/Header';
// 修正後
import Header from '../components/Header';
プロジェクトが複雑化してきた今、パス構造を明示的に管理する方が保守性が高まるという判断です。
🧪 今後の課題と見通し
今後の優先開発事項
- 🔐 Firebase認証のセッション維持に関する不具合修正（特に
/sessionエンドポイント） - 📦 各ページのビルド最適化と
build error対応 - 🎯 新規デザインのSEO最適化とOGP画像対応
ブログコンテンツも強化予定
今後、開発日誌や機能紹介、ユーザー事例紹介なども発信していく予定です。**「Procomは誰のためのプラットフォームなのか」**を語る場として、このブログを活用していきます。
✍️ まとめ
本日は、次のステップへの大きな準備段階として、
- ✅ UIの細部改善（ヘッダー再設計）
- ✅ CSS Modulesの導入と設計思想の統一
- ✅ Next.js構成の本格対応とコンポーネントの分割
を中心に開発を進めました。
Procomは、**“誰でも自分らしく発信できる世界”**を目指して進化を続けています。次回の更新では、ログイン周りの安定化や、動画・SNS埋め込み表示の改善にも触れていきたいと思います。
