こんにちは、Procom開発チームです。
このたび、**Procomユーザーページに新たな機能「バナーリンク機能」を追加しました！
この機能により、ユーザーは自分のページに画像付きのリンクバナー（最大3件）**を表示できるようになります。
例えば、
- あなたのネットショップ
- グッズ販売ページ
- イベントチケット予約ページ
- ファンクラブ登録URL
- 外部プロフィールページ（lit.link, Carrd, etc.）
などを視覚的に、しかも直感的に魅せることができるようになりました。
今回は、この新機能の特徴、使い方、そして開発の裏側について、ブログ形式でたっぷりご紹介します！
Contents
🔍 なぜバナーリンクを追加したのか？
Procomは、「SNSをまとめて1ページに見せる」ことをコンセプトに誕生しました。
YouTube、X（旧Twitter）、Instagram、TikTok、Facebookなど、多彩なSNSを一覧表示できるようにすることで、クリエイター・パフォーマー・フリーランスの魅力を1ページで伝えるための仕組みを整えてきました。
しかし、「自分のショップやチケット販売ページをもっと目立たせたい」
「公式サイトへの導線を目に見える形で置きたい」
という声が増えてきたこともあり、
✅ 画像でリンクを貼れる「バナーリンク機能」が欲しい！
というニーズにお応えして、今回のアップデートに至りました。
🧩 バナーリンク機能の特徴
✅ 最大3つまで表示可能
画像付きリンクを最大3件まで追加できます。例えば、
- 1枚目：SHOP
- 2枚目：イベント告知
- 3枚目：配信スケジュールページ
というように、使い分けることができます。
✅ 画像は自由にアップロード＆トリミング可能
スマホのスクリーンショットでも、Canvaなどで作ったバナーでもOK。
アップロード後に好きな位置で切り抜く（トリミング）UIがあるため、理想の見た目に仕上げられます。
✅ 表示／非表示を簡単に切り替え
「一時的に非表示にしたい」「今は準備中」などの場合は、チェックボックス1つでON/OFFが可能です。
✅ 他SNSとデザイン統一
他のSNS（YouTube、X、Instagramなど）と並べたときに違和感なく馴染むようなUIを意識して設計しています。
🛠️ 使い方ガイド（PC・スマホ共通）
- ログインしてマイページへ
- ページ中ほどにある「バナーリンク」セクションを探します。
- 画像をアップロード（3枚まで）
- トリミングで好きな表示範囲を選択
- 各バナーごとにリンク先URLを入力
- 「保存する」ボタンをクリック！
🔧 補足
- 一度保存すると、訪問者にはそのままクリック可能なバナーとして表示されます。
- 各バナーに ✖（削除）ボタンも付いているので、不要になったらいつでも消せます。
🔒 安心・安全の保存構成
技術的には、次のような構成で動いています：
- 画像データ：Firebase Storage にアップロード
- リンク情報：Firestore（users → profile → bannerLinks）に保存
- 表示設定：Firestoreの
profile.settings.showBannersに保存
つまり、Procomにログインしていれば、どの端末でも同じバナーが表示されるということ。
スマホで編集 → PCで確認 といった使い方も可能です。
🧪 開発の裏側：苦労したポイントと工夫
🔄 バナー画像のクロップ（トリミング）
画像を綺麗に見せるためには、比率や位置の調整が非常に重要です。
今回採用したのは react-easy-crop というライブラリで、画像アップロード後に3:1の比率でトリミングできるようにしています。
さらに、表示位置はユーザーごとに記憶されるため、更新しても崩れません。
🧠 Firestoreとの統合
バナーは単なる画像＋URLの組み合わせですが、保存・取得処理には工夫が必要でした。
特に以下のような処理に苦戦しました：
showBannersの状態をどう反映させるか- 空のバナーは保存しないようにする
- デフォルトで非表示にしたい時の初期値設定
これらをすべて反映した上で、シンプルなUIを保つよう心がけました。
👀 今後のアップデート予定
以下のような拡張も検討中です：
- 🔗 「推しリンク」バッジ機能：人気リンクに「人気」マークを自動で表示
- 🎨 テンプレート付きバナー作成ツール：デザインが苦手な人向けに
- 📈 クリック数の統計表示：どのバナーが何回クリックされたかを見える化
🌟 まとめ
Procomの「バナーリンク機能」は、あなたの活動をさらに魅力的に発信するための武器になります。
- 🛍 ショップリンク
- 🎫 イベント案内
- 🌐 オフィシャルサイト
- 📣 支援ページ（FANBOX、CAMPFIRE など）
これらをビジュアルで伝えることで、より多くのファンや仕事のチャンスを引き寄せられるでしょう。
まだバナーを設定していない方は、ぜひ今日から活用してみてください！
✉️ お問い合わせ・要望
「この機能もっとこうしたい！」
「こんなデザインが欲しい」などありましたら、
Procom運営までお気軽にご連絡ください。
今後もどんどん便利な機能を追加していきますので、ぜひお楽しみに！
