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

> デジタルスタンプカードを10分であなたのブランドに完全に合わせる方法 — ロゴのアップロード、ブランドカラーとアクセントカラー、独自のスタンプアイコン、背景画像、特典ステートでの独自のアイブロウテキスト。Apple Wallet バナー（480×150）と Google Wallet サークル（660×660）の仕様解説付き。

Canonical: https://reloop.cards/ja/blog/wallet-custom-branding-logo-farben
Published: 2026-04-28
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'ウォレットカードをブランディングする：ロゴ・カラー・スタンプアイコン — Apple & Google Wallet にあなたのブランドを',
  description:
    'デジタルスタンプカードを10分であなたのブランドに完全に合わせる方法 — ロゴのアップロード、ブランドカラーとアクセントカラー、独自のスタンプアイコン、背景画像、特典ステートでの独自のアイブロウテキスト。Apple Wallet バナー（480×150）と Google Wallet サークル（660×660）の仕様解説付き。',
  publishedAt: '2026-04-28',
  updatedAt: '2026-08-02',
  category: 'ガイド',
  tags: [
    'カスタムブランディング',
    'Apple Wallet',
    'Google Wallet',
    'ロゴ',
    'ブランドカラー',
    'スタンプカード',
    'デザイン',
  ],
  readingMinutes: 8,
};

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

<Callout tone="info" title="必要なもの">
- reloop アカウント（カスタムブランディングはすべてのプランに含まれます：ブランドカラー、ロゴ、スタンプアイコン、背景画像に加え、特典ステートでのカスタムアイブロウとヒーロー画像も対象です）。
- PNG、JPG または SVG 形式のロゴ（最大 10 MB）
- 任意：Hex コードによるブランドカラー（なければカラーピッカーを使用）
- 任意：カード用の背景画像（長辺 1280 px を推奨）
</Callout>

## 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 % ほど良く見えます。

<Callout tone="success" title="次のステップ">
- [すべてのダッシュボード機能の完全な概要 →](/funktionen/dashboard)
- [プッシュ配信を5分で送信する →](/blog/wallet-push-broadcasts-anleitung)
- [レポートを理解する — どの指標が重要か →](/blog/loyalty-reporting-metriken)
- [6業種のデモ事例 →](/beispiele)
- [無料で始める →](/signup)
</Callout>