こんにちは、Procom開発チームです。
今回は、ユーザーの皆さんから以前よりご要望をいただいていた「SNSリンクの表示・非表示切替機能」を、Procomのプロフィールページに正式に実装したことをお知らせします。
このアップデートにより、ユーザーは自身のページ上に表示するSNS（YouTube、X（旧Twitter）、Instagram、TikTok、Facebook）を自由に選択できるようになりました。
「今はXだけ表示したい」
「Instagramは更新していないから隠したい」
「YouTubeの代わりにTikTokを目立たせたい」
といった細かいニーズに、1クリックで対応できるようになります。
Contents
なぜ表示・非表示機能が必要だったのか？
Procomは、YouTuber・インスタグラマー・パフォーマー・Vtuber・フリーランスなど、さまざまなジャンルの表現者・個人クリエイターのためのポートフォリオ型SNSです。
それぞれのユーザーが異なるSNSを活用しており、常に全てのプラットフォームを更新しているわけではありません。また、一時的に活動を休止しているSNSもあるでしょう。
たとえば、
- Instagramアカウントはあるけど、投稿が古い
- TikTokの運用は一時中断中
- Facebookは昔のイベント告知に使っていただけで現在は放置
というケースも多々あります。
しかし、そうした使っていないSNSの埋め込みがずっと表示されてしまうと、ページの印象を損ねてしまう可能性もあります。
「Procomは“あなたを魅力的に見せる”ためのページ」
であるべきだという思いから、今回の表示カスタマイズ機能の実装に至りました。
技術的な仕組み：設定情報をFirestoreに保存し、動的に表示制御
表示・非表示の設定は、それぞれのSNSブロックに対応する「トグルスイッチ（チェックボックス）」で制御できるようになっています。
たとえば、YouTubeなら「YouTubeを表示する」、Instagramなら「Instagramを表示する」といったラベル付きトグルが追加されており、チェックを外すとそのSNSはプロフィールページから非表示になります。
このトグルの状態は、各ユーザーのFirestoreドキュメント内の以下のような構造で保存されます：
"settings": {
"showYouTube": true,
"showInstagram": false,
"showX": true,
"showTikTok": true,
"showFacebook": false
}
そして、ユーザーページを読み込む際にこの設定を取得し、各SNS埋め込みセクションが表示されるかどうかを動的に判定しています。
さらに、ReactのuseEffect()やuseState()を適切に使って、非同期データの取得と描画処理をきちんと分離。初期読み込み時の一瞬の“チラ見え”を防ぐ工夫もしています。
トグルスイッチのデザインとUX向上：❓マークで丁寧に補足
機能の実装だけでなく、ユーザー体験（UX）も大切にしました。
SNS表示トグルの横には「❓」アイコンを配置し、それをクリックすると以下のような説明モーダルが開くようにしました：
SNSの表示・非表示を切り替えることができます。
チェックを外すと、あなたのプロフィールページにはこのSNSが表示されなくなります。
非表示にしてもデータは削除されず、いつでも再表示が可能です。
このように丁寧に補足を入れることで、初めてProcomを使う方でも迷わず操作できる設計になっています。
導入して変わったこと：ユーザーからの声も
すでに機能を先行して試していただいたクリエイターの皆さんからは、こんな声をいただいています：
- 「Instagramは更新してなかったので、非表示にできるのはありがたい」
- 「Xだけで活動してるので、余計なSNSがない方がスッキリする」
- 「今後TikTok始めたときにすぐ追加できるのも便利！」
とくに、活動媒体が1つに集中しているVtuberやYouTuberにとっては、自分の強みをピンポイントで見せられるのが大きなメリットとのこと。
また、「情報整理されたプロフィールページは、初見の訪問者に信頼感を与えやすい」という副次的な効果も報告されています。
最後に：Procomはこれからも「自由な自己表現」をサポートします
今回の「表示・非表示機能」は、単なるON/OFFスイッチではなく、Procomの理念そのものと密接に関わっています。
“あなたのすべてを、ここに集約。”
このキャッチコピーを掲げるProcomだからこそ、「見せたい自分」と「今の活動スタイル」に合わせてページを柔軟にカスタマイズできる必要があると考えました。
これからもユーザーの声に耳を傾けながら、より細やかで柔軟な表現ができるポートフォリオページを目指して開発を続けていきます。
今後のアップデート予定
- SNSの表示順をドラッグ＆ドロップで並び替えられる機能
- TikTok/Instagram/YouTubeの統合ビュー（SNSハブ化）
- 「SNS非表示中です」と表示するカスタムメッセージ機能
なども検討中です！
Procomをご利用中の方、またこれから登録される方は、ぜひ新しい「表示・非表示切替機能」をお試しください。
