White Labelブランド素材のベストプラクティス

White Label Liteには、明るいロゴ、暗いロゴ、favicon、プライマリカラー、アクセントカラーの個別フィールドがあります。このガイドでは、わかりやすいブランドキットを準備し、フォームが受け付けるファイルを使用して、顧客への公開前に結果を確認する方法を説明します。

ロゴのアップロード

アップロード欄は2つあります。明るい背景用の明るいロゴと、暗い背景用の暗いロゴです。両方を用意できる場合はアップロードし、Brandingのプレビューで各テーマにおける読みやすさを確認してください。

対応ファイル形式:

• PNG: 透過に最適で、ほとんどの用途に推奨されます。
• JPG / JPEG: 単色背景のロゴに使用できます。透過には対応しません。
• SVG: 現在は非対応です。埋め込みスクリプトを安全に表示する方法を開発中です。

最大ファイルサイズ: 1回のアップロードにつき1 MBです。大きい場合はTinyPNGまたはpngquantで圧縮してください。通常のロゴは、見た目の品質を損なわず50 KB未満に圧縮できます。

推奨する元画像サイズ: 小さなアイコンではなく、鮮明で十分な解像度の元画像を使用してください。正方形またはそれに近いロゴが無難です。プレビューで読めるなら、横長のワードマークも使用できます。

背景:

• 透過PNGを強く推奨します。ダッシュボードの背景やブランドメールのヘッダー帯は真っ白とは限らず、ロゴの境界がはっきりした色付き背景は不自然に見えます。
• モノグラムやアイコン形式なら、透過によってどの背景にも自然になじみます。
• ロゴに固定の色付き背景がある場合は、ダッシュボードのプライマリまたはアクセントカラーと統一してください。

Favicon

faviconには専用のアップロード欄があり、ロゴから自動生成されません。PNG、JPG、ICO形式で最大1 MBのシンプルな正方形アイコンを使用してください。ブラウザタブの大きさでは、完全なワードマークよりモノグラムや記号の方が見やすくなります。

faviconは正方形にします。完全なワードマークにはfaviconではなく、明るいロゴと暗いロゴの欄を使用してください。

色の選択

色のフィールドは2つです。

• プライマリカラー: ボタン、リンク、アクティブ状態に使う主要色です。
• アクセントカラー: 強調表示を支える色です。

#3b82f6のような16進カラー値を入力します。保存前にライブプレビューで結果を確認してください。

プライマリカラーを選ぶ

訪問者が最もよく目にする色です。次の3点に注意してください。

• **明るい背景と暗い背景の両方でテストします。**ダッシュボードは両テーマに対応します。白で目立つ色が暗い背景では見えにくくなることがあります。
• **状態を示す色を識別可能にします。**ブランドの主要色を警告、成功、破壊的操作の色に近づけすぎないでください。明確な青、紫、ティール、チャコールなどの独自色は読みやすくなります。
• **白や黒に近い色より、中程度に彩度のある単色が適しています。**白い背景上のボタンとして目立つかを考え、ほとんど見えないなら淡すぎます。

アクセントカラーを選ぶ

アクセントはプライマリを補助する色です。次の条件を満たす必要があります。

• プライマリと明確に異なり、青に近い2色などを避ける
• プライマリと競合せず補完する
• プライマリの隣でもはっきり見える

効果的な組み合わせは、深く彩度の高いブランド色をプライマリにし、明るい補色をアクセントにする方法です。例: プライマリ#2563eb (indigo-600)、アクセント#10b981 (emerald-500)。

コントラストとアクセシビリティ

インターフェースでは、プライマリカラーの上に明るい文字が表示されることがあります。ボタンラベルが読める色を選んでください。淡いパステルは色見本では魅力的でも、実際のボタンではコントラストが不足します。

WebAIMのコントラストチェッカーは文字と背景の組み合わせの確認に役立ちます。周囲のUIも色の見え方に影響するため、最終確認にはプレビューを使用してください。

通常うまく機能する色は深い青、紫、チャコール、暗いティール、濃いえんじです。問題になりやすい色は淡いパステル、中間の灰色や黄色、ネオンです。

表示名

表示名はブランドダッシュボード、Webmail、対応するメール画面に表示されます。次の3パターンが便利です。

• 「あなたのブランド Email」: メールサービスだと明確に伝わります。メールをサービスとして販売する再販業者に適しています。
• 「あなたのブランド」: ブランド名だけの簡潔な形式です。メールが幅広い製品群の一部である場合に適します。
• 「あなたのブランド Dashboard」: 利用画面を強調します。複数のブランド製品を明確に区別したい場合に便利です。

一目で認識できる長さにします。文字数ルールだけに頼らず、狭い画面と両方のテーマでプレビューしてください。

表示名は次の場所に表示されます。

• ダッシュボードとWebmailのナビゲーション
• ブランドログイン画面とブラウザタイトル
• 対応するトランザクションメール画面

保存前の確認

Save changesをクリックする前に、ファイルが1 MB未満であること、両ロゴが対応するプレビューで読めること、faviconがシンプルな正方形であること、プライマリカラーに十分なコントラストがあること、表示名が送信者名として自然であることを確認します。

保存後は、プライベートブラウザウィンドウで有効なブランドホストを開いてください。キャッシュされた画像やfaviconを現行版と間違えずに済みます。

シンプルな素材準備手順

1. スクリーンショットやWebサイトからコピーしたファイルではなく、元のロゴファイルから始めます。
2. 明るい背景用と暗い背景用の各バージョンを書き出します。
3. 最も認識しやすい部分から、別の正方形faviconを作ります。
4. Brandingでブランド名と色を追加し、メールとWebmailのプレビューを比較します。
5. 保存して、スマートフォンとデスクトップブラウザで有効なホストをテストし、チームが更新できる場所に元ファイルを保管します。

後から更新する

既存のブランドホストのDNSレコードを置き換えずに、ブランド素材を後から更新できます。視覚的な変更後は必ず有効なホストを再確認してください。

間違った素材や読みにくい色を選んだ場合は、Brandingで修正して再度保存します。差し替えを確認するときは通常のブラウザキャッシュを考慮してください。

APIとMCPによる自動化

統合に必要な権限があれば、REST APIまたはMCPでブランド設定と素材を管理できます。同じファイル形式と1 MBの上限が適用されます。最終的な目視確認にはダッシュボードとプレビューを使用してください。

対応操作についてはWhite Label Branding APIおよびMCPガイドをご覧ください。

よくある状況

「サイドバーでは問題ないロゴが、スマートフォンではぼやけます。」 より鮮明で高解像度の元画像をアップロードして保存し、スマートフォンで有効なブランドホストをテストしてください。デスクトップのプレビューだけに頼らないでください。

「プライマリカラーはダッシュボードでは良いのですが、ボタンの文字が読みにくいです。」 より暗い色または彩度の高い色を選び、プレビューと有効なホストで確認してください。

「ロゴの色付き背景がダッシュボードと合いません。」 可能なら透過PNG版を書き出し、明るい版と暗い版を対応する背景で比較してください。

「メールとダッシュボードで別のロゴを使えますか？」 Brandingの明るい版と暗い版を使います。外観を約束する前に、対応するメールプレビューと有効な顧客画面を確認してください。

「ダークモードはどうなりますか？」 ダッシュボードは明るいテーマと暗いテーマに対応し、それぞれ別のロゴをアップロードします。明るいロゴは明るい背景、暗いロゴは暗い背景に表示されるため、明るい背景には暗い図柄、暗い背景には白または明るいロゴを使用できます。

「faviconをロゴとは別にアップロードできますか？」 はい。faviconには専用欄があり（PNG、JPG、ICO、最大1 MB）、ロゴから生成されません。ブラウザタブ用にシンプルで明確なアイコンをアップロードしてください。

次のステップ

• White Label Liteを設定する: 有効化とDNS設定。
• TrekMailブランドが残る場所: 顧客が引き続き目にする可能性があるTrekMail要素。
• White Label Liteの料金FAQ: 請求と通貨の質問。
• White Label Branding APIおよびMCPガイド: RESTまたはMCPでロゴをアップロードしブランドを設定します。