ウォレットカードをブランディングする：ロゴ・カラー・スタンプアイコン — Apple & Google Wallet にあなたのブランドを

デフォルトの reloop 外観のデジタルスタンプカードは技術的には問題なく機能します。しかしそれはマーケティングの無駄です。お客様が Apple Wallet や Google Wallet でカードを開くたびに、あなたのブランドを見せられるはずなのです。あなたのロゴ、あなたのブランドカラー、あなたの背景画像を。このガイドでは、ウォレットカードを10分であなたのビジネスに完全に合わせる方法と、ロゴが Wallet 内蔵のマスクで切り取られないために知っておくべき Apple/Google の仕様を紹介します。

Apple Wallet と Google Wallet がそれぞれ異なる点

何かをアップロードする前に理解しておくことが重要です。Apple と Google はあなたのロゴをまったく異なる方法で表示します。

Apple Wallet

• ロゴはブランドカラーの背景の上、左上に表示されます
• 形式：長方形のバナー（最大 160 × 50 pt、これは 3× Retina で 480 × 150 px）
• アスペクト比：約 3.2 : 1（横長）
• Apple はロゴをそのままマスクなしで表示します。正方形のロゴを渡すと、小さくみすぼらしく見えます

Google Wallet

• ロゴは円形の中、左上に表示されます
• 形式：正方形（最低 660 × 660 px）
• Google はこれを自動的に円形にマスクし、縁の周囲に 15 % のセーフエリアを設けます
• 横長のバナー型ロゴを渡すと、押しつぶされるか、上下が切り取られます

ジレンマ：1つのロゴが同時に Apple バナーであり、かつ Google サークルであることはできません。

reloop での解決策：元の画像をアップロードします（できるだけ正方形か、わずかに長方形で、最低 660 × 660 px）。サーバーがそれを 1024 × 1024 に正規化し、保存時に自動的に3つのプラットフォーム別バリアントを生成します：

• logo-apple.png — 480 × 150 PNG、透明キャンバス上に内接配置（PassKit 用）
• logo-google.png — 660 × 660 正方形 PNG、15 % のセーフエリア付き（Google Wallet API 用）
• logo-thumb.webp — 64 × 64 WebP、ダッシュボードの UI 表示用

つまり、2つの世界のどちらかを選ぶ必要はありません。良質な正方形をアップロードすれば、あとは自動で処理されます。

ステップバイステップ：カードをあなたのブランドに合わせる

1. プログラムを開く＋ブランディングタブ

ダッシュボードで：プログラム → プログラムを選択 → ブランディングタブ（またはエディター左側の「ブランディング」タブ）。

2. ロゴをアップロードする

ロゴスロットにドラッグ＆ドロップするか、クリックしてファイルピッカーを開きます。アップロード中に3つのことが並行して起こります：

1. クライアント側でのリサイズ（最大 1024 × 1024 まで縮小し、ストレージのバイト数＋アップロード帯域を節約）
2. EXIF データの除去（うっかりジオタグが漏れることを防止）
3. サーバーが3つのプラットフォーム別バリアントを生成し、別々のストレージファイルとして保存

右側のライブウォレットシミュレーターで、ロゴが Apple Wallet でどう見えるか（バナー、左上）、Google Wallet でどう見えるか（円形、左上）をすぐに確認できます。ロゴが幅広すぎて Google サークルで切り取られて見える場合は、ロゴを正方形レイアウトで書き出し直して、もう一度アップロードしてください。

ロゴのヒント：

• 透明な背景が常により良い選択です。ロゴの背後にあるブランドカラーが透けて見えるようにしましょう。
• ロゴの縁に対して最低 10 % のマージンを確保してください。Apple も Google もマスクの縁が柔らかかったり硬かったりします。マージンがないと外縁が切り取られます。
• SVG も使えます。サーバー側で PNG にラスタライズされます（3× 密度で）。
• 明るいブランドカラー上の暗いロゴ、またはその逆 — コントラストが保たれているか確認してください。暗い赤のブランド背景に黒いロゴでは判読できません。

3. ブランドカラー＋アクセントカラーを選ぶ

2つのカラーピッカー：

• ブランドカラー（brandColor）：ウォレットカードの背景です。Apple Wallet では上半分全体になります。Google Wallet ではカード全体になります。デフォルト：#55182c（Stempelkarte ワイン）。
• アクセントカラー（accentColor）：塗りつぶされたスタンプの円、ゴールマーカーの星、そして（一部の Wallet バージョンでは）特典リボンアニメーションの色です。デフォルト：#f8b627（Stempelkarte ゴールド）。

ベストプラクティス：ブランドカラー＝あなたのメインブランド（ロゴの背景）、アクセントカラー＝コントラストのある補色。たとえばあなたのブランドが濃い青なら、アクセントにはゴールドか暖かいオレンジを選びましょう。「同じ青系で少し明るいだけ」は避けてください。

4. スタンプアイコンを設定する（任意）

デフォルトはシンプルな星です。3つの選択肢があります：

1. 独自のスタンプアイコンをアップロード（ロゴと同じアップロード手順）。PNG/JPG/SVG、最大 10 MB。256×256 に正規化されます。
2. 絵文字をスタンプに — 1つの絵文字を入力（例：カフェなら ☕、ベーカリーなら 🥐、美容室なら ✂️）。レンダラーは Pango ＋ Noto Color Emoji を使用します。
3. まだコンセプトがなければデフォルトの星のままにします。

ヒント：コントラストの高いカスタムアイコンのほうがうまく機能します。繊細な線画のスタンプは小さなカード表示では消えてしまいます。太くて塗りつぶされた形状ならよく読み取れます。

5. スタンプ表示モードを選ぶ

2つのオプション：

• circle-number（デフォルト）：中にアイコンが入ったスタンプの円、未引き換えは空の円。クラシック。
• image-only：塗りつぶしのスタンプとしてフルアイコン、空のときはグレースケール版。モダンでブランドに寄り添いますが、アイコンが視覚的に強い場合にのみ意味があります。

ライブシミュレーターが両方のモードをすぐに表示します。

6. 背景画像（任意）

ストリップ領域（スタンプが並ぶ場所）用の背景画像をアップロードできます。たとえば控えめなパターンや、あなたのカフェのぼかした写真など。形式：JPG / PNG / WebP、長辺は最大 1280 px。

オーバーレイモード＋オーバーレイの強さ（0～80 %）で、ブランドカラーが画像の上にどれだけ強く重なるかを調整します：

• none：画像が完全に見える（とても控えめなパターンに適する）
• darken：ブランドカラーで画像が暗くなる（明るい写真に適する）
• lighten：画像が明るくなる（暗い写真に適する）
• brand-tint（デフォルト）：画像にブランドカラーの色合いが付く

7. 特典ステートをカスタマイズする

カードがいっぱいになり、お客様が特典を受け取れるようになったとき、視覚的に何が起こるでしょうか？

• 独自の特典背景画像（例：紙吹雪の写真や、「無料カプチーノ」のような特典商品の写真）
• 特典背景カラー（画像の代わりに単色を指定し、デフォルトのブランドグラデーションを上書き）
• カスタムアイブロウテキスト — デフォルトの「特典が利用可能です」の代わりに →「あなたのコーヒーが待っています」のような独自のスローガン
• カスタム特典見出し — プログラム固有の特典の代わりに → 独自のマーケティングテキスト
• サンバースト＋紙吹雪アニメーションのオン/オフ
• アイブロウの色、見出しのサイズ、位置 — 軸ごとに個別に調整可能

これが「カードがいっぱいになった」と「カードがお客様と一緒に祝っている」との違いを生みます。

8. ウォーターマークをオフにする（Premium のみ）

デフォルトでは、カードの右下に小さな「reloop」ウォーターマークが表示されます。ウォーターマークトグル（hideWatermark）でこれを非表示にできます。当社のブランドが入らないホワイトラベルのカードです。Premium プランでのみご利用いただけます。

プレビューとライブテスト

エディター内：

• ライブシミュレーターが Apple と Google のフレームを並べて表示（またはトグルで切り替え）
• 0 から最大までのスタンプスクラバー → スタンプが押されていくにつれてカードがどう変化するかを確認
• 特典ステートのトグル → カードがいっぱいのときにどう見えるかを確認

実機のスマートフォンで：

1. プログラムを保存する
2. テストカードを作成する（カードタブ →「新しいカード」）
3. iPhone（または Android）で QR コードをスキャンする
4. 「Wallet に追加」をタップする
5. Wallet アプリでカードを開く → これがまさにお客様が目にするものです

シミュレーターと違って見える場合は：support@reloop.cards にバグを報告してください。当社の約束は「プレビューとパスがピクセル単位で一致する」ことなので、すぐに確認します。

よくあるブランディングの失敗

• ロゴを小さすぎるサイズでアップロードした（200 × 200 px）。サーバーが拡大せざるを得ず → ぼやけたロゴに。最低 660 × 660 px。
• 正方形のロゴを選んだが、Apple バナーがとても小さく見える。バグではありません — Apple バナーは 3.2:1 なので、正方形は縦方向を埋めますが、横方向のスペースの 75 % が空きます。Apple を優先するなら、より幅広のロゴを作りましょう。
• ブランドカラーがアクセントカラーと同じ。そうするとスタンプが見えません。アクセントはコントラストが必要です。
• 背景画像がにぎやかすぎる。スタンプが重なり、カードがごちゃごちゃした印象に。パターン、または画像＋50 % オーバーレイを使いましょう。

カスタムブランディングが必要ないとき

もしあなたが：

• サービスをちょうど試しているところ（デフォルトはそもそも洗練されています）
• ローンチで時間に追われていて、ブランディングは後回しにしたい
• まだ確立したブランドアイデンティティがない（その場合、デフォルトのブランディングは誰も損ないません）

ブランディングは反復的に改善できます。5分でロゴ＋2色を組み込めば、すぐにフル設定のプログラムの 80 % ほど良く見えます。