こんにちは、Procom開発チームの管理人です。
本日は「Procom（プロコム）」における大きな機能追加として、
カテゴリ別表示スライダー機能と、登録者一覧ページの実装を完了しました。
このブログでは、実装の背景や技術的ポイント、苦労した点、そして今後の展望についても含めて詳しく紹介します。
Contents
🔸Procomとは？
改めて、「Procom（プロコム）」は、
YouTuber、インフルエンサー、ダンサー、Vtuber、クリエイター、フリーランスなど
さまざまな表現者・個人が「自分のすべてをまとめて魅せる」ことができるSNSプロフィール集約プラットフォームです。
Instagram、X（旧Twitter）、TikTok、YouTube、Facebook、さらにはショップリンクやお仕事依頼ボタンまで、1ページに集約。ファンや仕事の依頼主に、自分を最も魅力的に伝えることができます。
✅ 1. カテゴリ別スライダーの実装（TOPページ）
🔧 機能概要
今回TOPページには、新たに**「カテゴリ別スライダー」**を導入しました。
これにより、訪問者は一目で各カテゴリの登録者を見ることができます。
実装したカテゴリ：
- 💃 ダンサー
- 🎥 YouTuber
- 🆕 新規登録者（最近登録されたユーザー）
各スライダーは横スクロール可能で、スマホにも対応済み。
写真＋名前＋肩書き＋ひとこと紹介が表示され、クリックするとそのユーザーの詳細ページに遷移します。
💡 実装意図
Procomの魅力のひとつは「人と人のつながり」です。
その第一歩として、「自分と似たカテゴリの人」「新しく入った人」を見つけやすくすることで、ユーザー間の発見と交流を促進することが目的です。
また、初めて訪れた人にも「このサイトにはこういう人がいるんだ！」と直感的に理解してもらえる導線になっています。
💻 技術的ポイント
- Firestoreに登録された各ユーザーの「肩書き（title）」を検索対象にし、
- 「titleに'dancer'が含まれているか」などを条件にフィルター。
CategorySlider.tsxコンポーネントを汎用化しており、カテゴリ・アイコン・タイトルを props で柔軟に変更可能。- 表示はランダム化されており、訪問のたびに違うユーザーが見られる工夫も。
🎨 デザイン面
- Tailwind CSS を使ってカード型に整え、アイキャッチ画像がある人は写真を表示。
- 写真が未登録のユーザーには、自動生成のアイコン画像を使用。
- スマホ表示時にも見やすくなるようレスポンシブ対応。
✅ 2. 登録者一覧ページの実装
🔧 機能概要
新たに /users ページを実装しました。
ここではProcomに登録されたすべてのユーザーを一覧表示できます。
🧭 機能の特徴
- 🔍 名前・肩書きによる検索機能付き
- 🌀 無限スクロール対応（ページネーション不要）
- 🖼️ 写真＋名前＋肩書き＋ひとこと紹介をカードで表示
- 📱 スマホ対応済みで見やすく操作しやすいUI
💡 実装の目的
Procomはユーザー同士の発見・つながりを大切にしています。
「興味のある人を探す」「SNSで気になる人を見つける」といった行動を支援するため、全ユーザーが見られる一覧ページは不可欠でした。
特に「検索機能」と「無限スクロール」を組み合わせることで、ページを跨ぐ必要なく、快適に目的のユーザーにたどり着けるように設計しています。
💻 技術的ポイント
- クライアント側で
/api/usersから全ユーザーを一括取得。 - 入力欄に応じて
nameとtitleを小文字化し、リアルタイムにフィルター。 - スクロール監視には
IntersectionObserverを使用。 - 最初は10人、スクロールでさらに10人ずつ追加読み込み（段階的表示）。
😵 苦労した点
- 写真未登録ユーザーに対する見栄え対策：
ProcomではTOPページ同様、未登録の人にはシンプルで統一感のある代替画像を使用するようにしました。 - bioの表示制限：
長すぎる自己紹介はデザインを崩すため、line-clamp-3（3行制限）で整えました。 - 検索と無限スクロールの両立：
検索中にスクロールを続けると不自然になるため、検索中はスクロール読み込みを一時停止するよう調整しました。
📷 写真がないユーザーの表示統一も実施
写真が登録されていないユーザーに対して、
Procomでは**自動で代替画像（ジェネリックなイラストや背景）**を表示する仕様に変更しました。
これにより、どのカードもビジュアル的な統一感があり、一覧ページ全体の「美しさ」が保たれています。
写真の有無によって見た目のバラつきが出ないよう、デザイン品質を維持しています。
📌 今後の改善予定
今回の機能追加により、Procomの魅力を「一覧」と「分類」の両面から表現できるようになりました。
しかし、ここで満足せず、さらに改良を進めます。
🔜 予定している機能
- ✅ カテゴリ名のカスタマイズ（例：Vtuber、イラストレーターなども追加可能に）
- ✅ おすすめユーザー表示（フォロワー数や閲覧数に応じて）
- ✅ タグによる絞り込み機能（#ダンス、#ゲーム実況 など）
- ✅ 「お気に入りユーザー」へのブックマーク機能との連携
📝 まとめ
本日は以下2つの機能を無事実装しました：
- TOPページのカテゴリ別スライダー機能
- 登録者一覧ページ（検索＋無限スクロール対応）
これにより、Procomを訪れたユーザーは、より簡単に「気になる人」や「推したい人」を見つけることができます。
今後も、UIの磨き上げ・表示速度の向上・SEO最適化など、地道に改善していきます。
Procomは、あなたの魅力を世界に発信する場所です。
「SNSを飛び越えた、あなたの“ホームページ”」を、共に育てていきましょう。
🛠️ 開発メモ：
- 実装時間：約6時間（リファクタ含む）
- 使用技術：Next.js / Firebase / TypeScript / Tailwind CSS
- SEO対応：タイトル・紹介文のmetaタグ自動生成対応進行中
📣 次回の開発日誌もお楽しみに！
最新情報は https://procom.jp にて随時更新中です。
