ウェブショップのテーマとブランディング
テーマトークン、ブランドメディア、AI 生成のテーマを使用してウェブショップのスタイルを設定する方法をご覧ください。
Webshop のテーマは、色、タイポグラフィ、レイアウトなどの視覚的な外観を定義します。ブランディングでは、ヒーローバナーやサムネイルなど、製品リストの周囲に表示されるメディアを追加します。
編集ビューでは、隣接する 2 つのパネルを使用して両方を設定します。
- テーマのカスタマイズ:色、タイポグラフィ、レイアウトトークン、テーマ生成の入力、ウェブショップのサムネイルを制御します。テーマ生成の入力には、アプリストアの URL とスクリーンショットが含まれ、AI と会話しながら結果を調整できます。
- ヒーローバナー:Webshop の上部に表示されるバナー画像を制御します。
どちらのパネルも、環境のドラフト設定の一部です。公開すると、Unity は両方のパネルをライブ設定にコピーします。
Webshop では、モバイルファーストの 1 つのレイアウトが使用されます。色、タイポグラフィ、およびメディアをカスタマイズできますが、ページ構造体は全体的に固定されています。ヒーローバナーは上部に表示され、プロダクトはその下に表示され、フッターは固定されたままです。
テーマトークン
テーマは、Webshop がショップを描画するために使用するデザイントークンのセットです。
テーマは以下の要素を制御します。
- ホバーバリアントと無効バリアントを含む、ブランドとアクセントの色。
- 背景景色とグラデーション
- フォントファミリ、ウェイト、サイズスケールなどのタイポグラフィ
- 角の半径、間隔、高さなどのレイアウト値。
テーマをカスタマイズするには、ゲームの Apple App Store リストまたは独自のスクリーンショットからテーマを生成します。次に、変更したい内容を記述して、AI でテーマを絞り込みます。アシスタントは指示に基づいてテーマを更新します。テーマをリセットすると、Unity Default に戻ります。
テーマは、ある環境のドラフト設定に属します。ある環境でテーマを変更しても、他の環境には影響しません。
完全な手順については、AI による Webshop テーマの生成 を参照してください。
ブランディングとは、Web ショップが製品リストの周辺に表示するメディアです。編集ビューでは以下のアセットを設定できます。
- Webshop サムネイル:リンクプレビューとリンクカードに使用されます。アプリストアの URL からテーマを生成する場合、Unity はスクレイピングされたアイコンォルトのサムネイルとして使用します。オーバーライドするには、「テーマのカスタマイズ」セクションで独自のサムネイルをアップロードします。
- ヒーローバナー:Webshop の上部に表示されるワイドバナー画像。「Customize theme(テーマのカスタマイズ)」の下のヒーローバナーセクションでヒーローバナーをアップロードします。
ソースアップロードは PNG、JPEG、WebP 形式をサポート。ダッシュボードは、アップロードを配信する前に各アップロードを再エンコードするため、プレイヤーに表示されるアセットはソースファイルと若干異なる場合があります。
「Customize theme(テーマのカスタマイズ)」セクションでは、テーマ生成のリファレンスマテリアルとしてスクリーンショットを使用することもできます。これらのスクリーンショットは、アプリストアの URL から自動的にスクレイピングするか、手動でアップロードできます。これらは AI ジェネレーターへの入力であり、ウェブショップには表示されません。
サイズ、次元、および形式制限については、Webshop 制限リファレンス を参照してください。
接続されたカタログのないテーマプレビュー
IAP カタログが接続される前に、現実的なショップレイアウトに対してテーマをプレビューするには、カタログと支払いプロバイダーのセクションでモックカタログトグルを有効にします。プレイヤーはモックプロダクトを見ることはありません。詳細については、カタログと Webshop での支払い を参照してください。
ドラフトおよびライブプレビュー
プレビュー ペインの上部に、［Current draft/Live webshop］ トグルがあります。ドラフトテーマとブランドを、プレイヤーが現在見ているバージョンと比較するために使用します。他のユーザーがそれぞれのブラウザーで開くことができるプレビューを共有するには、［General］ セクションから開発プレビュー URL をコピーします。このリンクは常に現在のドラフトをレンダリングします。
環境全体のテーマとブランド設定
テーマとブランドは環境のドラフト設定の一部であるため、編集はその環境にのみ影響します。非本番環境のテーマとブランディングのドラフトを本番環境にコピーするには、テーマのカスタマイズ セクションで Apply to production (本番環境に適用) を使用します。このアクションでは本番環境は公開されません。変更を稼働させるには、本番環境をパブリッシュする必要があります。
完全な手順については、「 本番環境以外のドラフトの適用 」を参照してください。
環境、ドラフト、および公開の詳細については、Webshop の概要 を参照してください。