DRSのティザーページのガイドライン
Dash Replenishmentサービス（DRS）のティザーページは、対象デバイスの自動再注文機能についてユーザーを啓蒙する目的で使用します。デバイス登録を行うユーザーが、DRSに関連して目にする最初の画面でもあります。ユーザーはこのページから自動再注文にサインアップするか、辞退してデバイスのセットアップ作業に戻るかを選択できます。
ガイドライン
Amazon DRS認定をパスするためには、アプリまたはWebサイトのUXが、ティザーに関する以下のガイドラインと、全体的なエクスペリエンスに関するCXガイドラインに従っている必要があります。これらのガイドラインを十分に理解し、詳細な情報が必要な場合はAmazonの担当者にお問い合わせください。
標準レイアウトのガイドライン
Amazonによって承認されたモバイルおよびWeb用のティザーページには、ユーザーのDRSのエクスペリエンスを最大限に高めるために必要なすべてのアイテムが含まれます。ティザーページには次の3種類があります。
-
商品の説明が含まれていないアプリまたはWebサイト（モバイル）。
-
補充される商品の名前が含まれているアプリまたはWebサイト（モバイル）。
-
補充される商品の名前が含まれているデスクトップWebサイト（Web）。
レイアウトの構成要素（モバイル）
 |
1 ロゴ（40 x 162ピクセル） - ページ最上部に中央揃えで配置します。 2 イラスト（238 x 223ピクセル）（カスタマイズ可能） - 見出しテキストの下に配置します。 3 背景（カスタマイズ可能） - 背景色はカスタマイズ可能です。ただし、アクセシビリティのテストに合格するために、背景と残りのコンテンツの間に十分なコントラストを確保してください。 T1 見出しテキスト（カスタマイズ可能） - ロゴの下に中央揃えで配置します。 T2 本文テキスト（カスタマイズ可能） - ヒーロー画像の下に中央揃えで配置します。 C1 [登録する] ボタン - 本文テキストの下に中央揃えで配置します。 C2 [スキップ] ボタン(必須)と [詳しくはこちら] ボタン - これらのリンクは相互に中央揃えして、[登録する] ボタンの下に配置します。[詳しくはこちら] は左揃え、[スキップ] は右揃えにする必要があります。[詳しくはこちら] ボタンは https://www.amazon.co.jp/dash-replenishmentへのリンクを設定してください。 |
レイアウトの構成要素（Web）
 |
|
1 ロゴ（36 x 146ピクセル） - ページの左上に配置します。 2 イラスト（334 x 314ピクセル）（カスタマイズ可能） - 右側の、[登録する] ボタンの上に配置します。 3 右側の背景（カスタマイズ可能） - 右側の背景色はカスタマイズ可能です。ただし、アクセシビリティのテストに合格するために、背景と残りのコンテンツの間に十分なコントラストを確保してください。 T1 見出しテキスト（カスタマイズ可能） - ロゴの下に左揃えで配置します。 T2 本文テキスト（カスタマイズ可能） - 見出しテキストの下に左揃えで配置します。 C1 [登録する] ボタン - ヒーロー画像の下に中央揃えで配置します。 C2 [スキップ] ボタン(必須)および[詳しくはこちら]ボタン - これらのリンクは相互に中央揃えして、[登録する] ボタンの下に配置します。[詳しくはこちら] は左揃え、[スキップ] は右揃えにする必要があります。[詳しくはこちら] ボタンは https://www.amazon.co.jp/dash-replenishmentへのリンクを設定してください。 |
ロゴのガイドライン
ロゴのサイズ
標準サイズは、モバイルは40 x 163ピクセル、Webは36 x 149ピクセル です。
ロゴのサイズは、承認されている最小サイズ以上にする必要があります。この最小サイズは、すべてのロゴで単語「Dash」の高さによって測定され、Amazonファミリーのすべてのロゴに適用されます。
ロゴのクリアスペース
ロゴの周囲には、他のロゴ、グラフィック、テキスト、枠線を含まないスペースを設けます。
ロゴの色
使用できる配色を下に示します。変更はしないでください。
ロゴのベストプラクティス
a小さすぎるロゴや大きすぎるロゴを使用 しない 。
標準サイズは、モバイルは40 x 163ピクセル、Webは36 x 149ピクセル です。
bロゴの周囲には、他のロゴ、グラフィック、テキスト、枠線を含まないスペースを設けるように する 。
cロゴはページに対して中央揃えで配置 する 。
d小さすぎるぼやけたロゴを使用 しない 。
eロゴの色の変更は しない 。
f背景色（白）とロゴの間に十分なコントラストを保つように する 。アクセシビリティのためのテストを必ず実行してください。
イラスト
イラストは、対象のDRS対応デバイスによって自動的に補充される商品を表します。
イラストのレイアウトのガイド
1 イラスト - 238 x 223ピクセル - 主要なビジュアル構成要素は赤枠内に収める必要があります。この枠外の要素はすべて背景と見なされます。
2 枠内のコンテンツのサイズ - コンテンツは中央揃えで配置され、枠の3分の2以上を占めている必要があります。サイズは238 x 223ピクセルです。
イラストのスタイルのガイド
1 わかりやすくする - イラストはDRSサービスの機能をユーザーにわかりやすく伝えるために使用されます。正確に意味を伝える、関連性の高い、理解しやすい画像を使用してください。
2 シンプル、平面的、楽しい雰囲気にする - 楽しい雰囲気で関連性の高いイラストにする必要があります。そのためには、平面的でシンプルな形にするのが簡単です。
3 色、コントラスト、バランスに細心の注意を払う - コンテンツは中央揃えで配置され、枠の3分の2以上を占めている必要があります。サイズは238 x 223ピクセルです。
イラストのベストプラクティス
a小さすぎる主要ビジュアルを使用 しない 。
b大きすぎる主要ビジュアルを使用 しない 。
c主要ビジュアルは画面上に中央揃えで配置 する 。
d背景色とその上の白いテキストの間に十分なコントラストを保つように する 。濃い色の背景が最適です。アクセシビリティのためのテストを必ず実行してください。
e小さすぎるぼやけた画像を使用 しない 。
ボタン
ボタンのデザイン
1 [登録する] ボタン
リンクのテキスト: Amazon Ember Regular、16ポイント、#000000
Web用ボタン
サイズ: 319 x 56ピクセル
余白: 左右128ピクセル、上下20ピクセル
角の半径: 3ピクセル
モバイル用ボタン
サイズ: 272 x 44ピクセル
余白: 左右100ピクセル、上下16ピクセル
角の半径: 3ピクセル
2 [スキップ] ボタンと [詳しくはこちら] ボタン
リンクのテキスト: Amazon Ember Regular、16ポイント、#FFFFFF
標準デザインとカスタムデザイン
フォントはこちらからダウンロードできます。
標準コピー（モバイル）
1 イラスト - 238 x 223ピクセル - 主要なビジュアル構成要素は赤枠内に収める必要があります。この枠外の要素はすべて背景と見なされます。
2 枠内のコンテンツのサイズ - コンテンツは中央揃えで配置され、枠の3分の2以上を占めている必要があります。サイズは238 x 223ピクセルです。
a [product name]を、対象デバイスによって注文される商品のタイプで置き換えます。
標準コピー（Web）
1 複数カテゴリの商品を注文するデバイス向けの汎用的なコピー対象デバイスによって注文される商品が特定のカテゴリーである場合は、[product]を対象デバイスによって注文される商品のタイプで置き換えます。
カスタマイズ可能なコピー文の文字カウント（モバイル）
1 タイトルコピー
タイトルコピーは24文字以下、2行以内に収める必要があります。
フォント: Amazon Ember Medium、20ポイント、#FFFFFF
2 本文コピー
本文コピーは88文字以下、4行以内に収める必要があります。
フォント: Amazon Ember Regular、14ポイント、#FFFFFFF
ティザーページの例
作成するDRS対応デバイスに応じた、1つまたは複数の消耗品がデバイスによって自動的に補充される機能をユーザーに知らせるティザーページの例をいくつか示します。
提出物のチェックリスト
以下に、デザインの完成前に実行する必要がある簡単なチェックリストを示します。
イラストのサイズ は238 x 223ピクセルにする
ファイル形式 は.PNG、背景は透明にする
イラストの構成 は、デザインテンプレートに従って正しいサイズに設定され、中央揃えに配置されているイラストはモバイルとWebの両方のサイズに合わせて拡大/縮小可能である
背景色 はアクセシビリティのテスト
に合格している
デザインのリソース
ティザーページのデザイン作成時には、以下の追加リソースが役立ちます。
- ティザーページ用のカスタムイラストの入手: 当社は、ティザーページ用のカスタムイラストを作成するデザインスタジオIdentity Visuals,と提携しています。ご利用を希望される場合は、Amazonの担当者までお知らせください。同社の定額料金$1200には以下が含まれます。
- ティザーページ用イラスト1点
- デザインのオンボーディングとブリーフィング
- 3点のスケッチ（そのうち1点が承認されます）
- スケッチのうち1点から作成した完成版イラスト（3回まで修正可能）
- DRSのブランドのガイドラインとティザーページのテンプレートの参照
- DRSのガイドラインとテンプレートの参照
Last updated: Aug 07, 2018