SocialProof.Reviewsでブランディングをカスタマイズする方法

ワークスペース内のすべての公開ページ(収集フォーム、Wall of Love、すべての埋め込みウィジェット)は、プロダクトに合わせて完全にブランディングできます。推薦文ページにアクセスした訪問者に、自社ウェブサイトを離れた感覚を与えないようにしましょう。

ブランディング設定は保存した瞬間に、すべてのウィジェットとページに即時反映されます。再埋め込みや再デプロイは不要です。


ブランディング設定を開く

  1. SocialProof.Reviewsにログインし、ワークスペースを開く
  2. 管理パネルの左サイドバーで ブランディング をクリックする
  3. 5つのセクションが表示されます:ID、カラー、ヘッドライン、リワード、フッター

セクション1: ID

IDの設定は、すべての公開ページでの会社の表示方法を管理します。

会社名

会社名またはプロダクト名は、収集フォームのヘッドラインとWall of Loveのヘッダーに表示されます。顧客に認知されているブランド名をそのまま使用してください。法人名ではありません。

例:「Acme Technologies Inc.」ではなく「Acme」を使用

ロゴ

会社のロゴをアップロードします。推奨仕様:

ロゴはWall of Loveの上部のナビゲーションバーと収集フォームのヘッダーに表示されます。

IDバーを表示する

IDバーを表示する トグルは、Wall of Loveの上部にスティッキーなナビゲーションバーを表示するかどうかを制御します。このバーにはロゴ、「レビューを残す」リンク、テーマ切り替えが含まれます。

オフにする場合: 自社ウェブサイトにiframeとしてWall of Loveを埋め込んでいて、すでに独自のナビゲーションヘッダーがある場合。IDバーを非表示にすることで、重複するヘッダーが消え、シームレスな埋め込み体験が実現します。

オンにする場合: Wall of Loveをスタンドアロンの公開URLとして共有していて、訪問者にブランドを見せたり収集フォームに簡単にアクセスできるようにしたい場合。

Wall of Loveのヘッダーを表示する

Wall of Loveのヘッダーを表示する トグルは、Wall of Loveページの上部にヒーローセクションを表示するかどうかを制御します。このセクションにはバッジ、会社名のヘッドライン、サブタイトルテキストが表示されます。

オフにする場合: Wall of Loveが、すでに独自の見出しとコンテキストを持つページ内に埋め込まれている場合。これにより、視覚的な重複なしにすっきりした埋め込みが実現します。

オンにする場合: Wall of Loveがメインの推薦文ページであり、目立つヘッドラインを持つ完全なブランド体験を提供したい場合。


セクション2: カラー

カラーは最もインパクトの大きいブランディング変更です。4つのカラーがビジュアルシステム全体を制御します。

プライマリカラー

メインのブランドカラーです。以下に使用されます:

メインのCTAボタンとロゴのプライマリブランドカラーを使用してください。

セカンダリカラー

補助的なアクセントカラーです。以下に使用されます:

プライマリカラーの明るいまたは暗いバリアント、またはパレットの補色を使用してください。

アクセントカラー

特別な要素のためのハイライトカラーです。以下に控えめに使用されます:

背景(開始/終了)

2つのカラーが収集フォームとWall of Loveのヒーローセクションの微妙なグラデーション背景を定義します。フラットな背景にするには、両方を同じカラーに設定してください。

一般的なパターン:

ブランドカラーを調べる方法

正確な16進数値がわからない場合:

  1. ChromeでWebサイトを開く
  2. プライマリボタンを右クリック → 検証
  3. スタイルパネルで background-color の値を見つける
  4. 16進数コードをコピーする(例:#2563eb

または、colorpicker.me などのツールを使用して、任意のウェブサイトのスクリーンショットからカラーを選択できます。


セクション3: ヘッドライン

ヘッドラインは公開ページに表示されるコピーを管理します。

収集フォームのヘッドライン

推薦文収集ページのメインヘッドラインです。レビュアーが最初に読む内容です。

デフォルト: 「ご利用はいかがでしたか?」

より良い代替案:

最良のヘッドラインは、プロダクトカテゴリに特有で、レビュアーのモチベーション(他者を助けることや声が届くこと)に語りかけるものです。

収集フォームのサブヘッドライン

ヘッドラインの下に表示されるサポート文です。以下の目的に使用します:

Wall of Loveのヘッドライン

Wall of Loveのヒーローセクション(Wall of Loveのヘッダーを表示する が有効な場合)に表示されるメイン見出しです。

デフォルト: 「Wall of Love」

より良い代替案:

Wall of Loveのサブタイトル

Wall of Loveのヘッドラインの下に表示される文章で、通常はレビュー数と平均評価を示します:

例: 「142件の確認済みレビュー · 平均評価4.9」


セクション4: リワードブランディング

リワードが有効な場合、送信後の確認画面にリワードカードが表示されます。以下をカスタマイズできます:

リワードの完全な設定詳細については、リワードガイド をご覧ください。


セクション5: フッター

SocialProof.Reviewsによるサービス表示

Powered by トグルは、Wall of Loveと収集フォームの下部に小さな「Powered by socialproof.reviews」リンクを表示するかどうかを制御します。

フッターを削除することで、レビュアーにはあなたのブランドのみが見える完全なブランド体験を実現します。


保存とプレビュー

変更後、ブランディングページの下部にある 保存 をクリックします。変更は以下に即時適用されます:

保存前にプレビューするには、新しいタブで公開のWall of Love URLを開き、管理パネルで並べて変更を加えてください。


ブランディングのベストプラクティス

プライマリカラーを正確に合わせる。 わずかに違うブルーのトーンでも違和感が生じます。デザインシステムの正確な16進数コードを使用してください。

透明なPNGロゴを使用する。 色付きの背景のロゴは浮いて見えます。透明なPNGはどの背景色にも対応します。

ブランドの声でヘッドラインを書く。 デフォルトのコピーは汎用的です。プロダクトのトーンに合ったカスタムヘッドラインがより一貫した体験を生み出します。

埋め込み時はIDバーをオフにする。 二重のヘッダーほど「サードパーティツールを使っている」ことを示すものはありません。Wall of Loveをサイトに埋め込む場合は、IDバーをオフにしてください。

ライトモードとダークモードの両方でテストする。 カラーは暗い背景では見た目が異なります。Wall of Loveのテーマ切り替えを使ってダークモードでプライマリカラーのコントラストが十分であることを確認してください。