ダイナミック クリエイティブの設計に関するおすすめの方法

ダイナミック クリエイティブ用のアセットを設計する際は、変化するコンテンツに対応できるだけの柔軟なデザインにするための特別な注意とプランニングが必要です。この記事では、ダイナミック アセットに特に重点を置いて、ダイナミック コンセプトのプランニングに関するおすすめの方法や注意事項を紹介します。

ダイナミック クリエイティブで使用するのがプロフィール項目（ある時点で値を 1 つしかとらない単純な Key-Value ペア）のみの場合でも、プロフィールを更新すればそうした値も次第に変化していく可能性があるため、これらの注意事項を覚えておくことが重要です。

動的テキスト

広告見出しや行動を促すフレーズ（CTA）など、広告内のテキスト要素を動的にすることはよくあります。動的にするとは、クリエイティブのテキスト フィールドにテキストがコードによって設定されるようにすることです。この場合、クリエイティブのデザイン上の細かい調整（カーニングなど）ができなくなることがありますが、その代わりに特定のユーザー層に合わせてテキストをカスタマイズできるようになるのが、ダイナミック テキスト フィールドの利点です。

おすすめの方法:

• フォントの数を制限します。1 フォントあたりファイルサイズが 5～10 KB 増加します。ダイナミック テキストに使用するフォントは 1 つ、または多くても 2 つまでにするようにしてください。フォントのスタイルはそれぞれ独立しています。たとえば、Arial と Arial Bold は 2 つの別のフォントであり、それぞれ 5～10 KB 追加されます（正確なサイズは、埋め込まれる文字数によって変わります）。
• 広告タイトルは短めにします。広告タイトルはすべて、広告内の同じスペースに収める必要があります。広告タイトルが短いほどテキストのサイズは大きくなるので、メッセージが目にとまりやすくなります。さらに、すべての広告サイズに対応できる広告タイトルを選ぶようにします。たとえば、「extravaganza」などの長い単語の場合、160x600 のような縦に細長い広告サイズではうまく表示されない可能性があります。場合によっては、単語全体をスペースに収めるためにフォントサイズを小さくする必要があります。
• テキストを一定の長さに保ちます。各ダイナミック テキスト フィールドに対して、コピー行の長さをほぼ同じにします。ダイナミック テキストの各行を、広告で設定したテキスト フィールドに収める必要があります。たとえば、最初のアセットで 10 個の単語からなる 1 行が収まるようにテキストボックスを設計した場合、フィード内のダイナミック テキストに 20～50 個の単語からなる行を追加すると、テキストサイズを大幅に小さくしない限りコピー行をそのテキストボックスに収めるのは困難です。
• テキストでのスタイル指定の多用は避けます。デザイナーは視覚的なパンチを効かせるために、広告タイトルなどの特定の語句にさまざまなフォントサイズ、カーニング、位置揃えなどを指定することがあります。こうしたスタイル指定は、ダイナミック テキストで再現することが困難です。さらに重要なのは、こうしたスタイルは静的な広告の特定のタイトルでは見栄えがよくても、ダイナミック広告に表示される複数のタイトルに適しているとは限らないことです。
• ダイナミック テキストでのアニメーションの多用は回避します。広告タイトルで部分的に適用するアニメーションが多いほど、アニメーション シーケンスを適用するすべての広告タイトルで正しく機能させることが難しくなります。

• 特殊文字をテストします。Google スプレッドシートでは、ダイナミック広告での特殊文字、つまり非ラテン文字の使用をサポートしています。たとえば、登録商標マーク ® や著作権記号 © がこれに相当します。Google スプレッドシートは UTF-8 エンコードを使用しており、特殊文字を使用できます。それに対して、Microsoft Excel の CSV ファイルは Latin1 でエンコードされ、非ラテン文字はサポートされていません。配信するコンテンツを公開する前に、フィード内のすべての特殊文字がどのように表示されるかをテストし、確認してください。

  中国語や日本語のような言語の場合は、標準のシステム フォント（Arial など）を使用してください。これらの言語でウェブフォントを使用することはおすすめしません。フォントの数の制限に関する説明をご覧ください。

  アラビア語やヘブライ語のような右から左へ書く（RTL）言語には特に注意が必要です。英語とアラビア語の両方の広告で同じクリエイティブを使用し、英語では広告タイトルを左揃えにしたとします。そのクリエイティブで、アラビア語で配信する広告タイトルを右揃えにする必要がある場合、広告タイトルの配置を動的に反転させるコードをクリエイティブに追加する必要があります。

動的画像

動的画像は JPG、JPEG、GIF、PNG のファイルを使用できます。Google のサーバーでホストされ、クリエイティブによって読み込まれます。

次の上限を超える画像をホストすることはできません。

• 画像の最大ファイルサイズ: 12,000 KB（12 MB）。
• 画像あたりの最大ピクセル数: 6,000,000 ピクセル。

おすすめの方法:

• ファイルサイズを削減します。JPG ファイルまたは PNG ファイルは 1 MB 未満にしてください。ファイルサイズと画像サイズのバランスを取り、可能な限り最適化します。外部から読み込まれるファイルのサイズも、読み込み全体の上限にカウントされます。必要であれば、一部のファイルをデザイナーに修正してもらいます。
• 画像のサイズを縮小します。サイズの大きい画像を読み込んで配信時に縮小するのではなく、画像が占める広告スペースのサイズに応じて、画像のサイズを最適化します。それによって、全体のファイルサイズが小さくなり、読み込み時間が短縮されます。
• 各画像の必要数を確認します。画像によっては、ある広告サイズには適していても別のサイズには適さないことがあります。たとえば、自動車のような横長の画像は 728x90 では最適に表示できますが、160x600 ではうまく表示されません。全体を表示するために画像を縮小できますが、それだけでは望ましい視覚効果が得られない場合があるため、各広告サイズに合わせた画像を個別に作成するかどうかを決める必要があります。個別に作成する場合は、必ず広告サイズごとの各画像に対応するフィールドをフィードに作成します。つまり、広告を 3 種類のサイズで掲載し、それぞれ異なる画像を使用する場合、フィードには 3 つの列を配置してそれぞれに応じた名前を付けます。
• 適切なファイル形式を使用します。ファイルサイズを小さくするために、JPG ファイルを使用することをおすすめします。これが有効なのは、JPG の背景が広告の背景と一致している場合や、画像が広告内の四角い領域に表示される場合です。一方、広告内の背景やその他の表示物とその画像をシームレスに表示させる場合は、透明な PNG ファイルを使用して画像の背景が透けて見えるようにします。

• 透明な画像を使用すると、通常は作業が増えます。透明な PNG ファイルに影などの視覚効果を適用する場合は、広告の背景に対してどのように表示されるかを事前に確認してください。また、画像の周りの透明な領域も含めて、PNG ファイルのサイズに一貫性があるかどうかを確認する必要もあります。

  たとえば、2 つの PNG の画像が同じサイズでも、一方が 200x100 ピクセルで、もう一方が 600x300 ピクセルで画像の周りの空いたスペースが大きい場合、これらは広告では異なって表示されます。広告内で個々の画像の配置を管理するには、PNG を広告と同じサイズにする方法が最適な場合もあります。たとえば、160x600 の広告では 160x600 の PNG を使用します。これによって、デザイナーが PNG 内で必要に応じて各画像を調整できるため、クリエイティブ ファイルを調整する必要はなくなります。

• CMYK ではなく RGB を使用します。RGB 色空間はデジタル表示用に最適化されています。一方、CMYK は印刷に適しています。Studio では CMYK のカラー プロファイルを使用する画像を処理できません。
• 特殊文字を削除します。画像の名前やホストしている URL に特殊文字が含まれていると、画像が適切に読み込まれない場合があります。

ダイナミック カラー

広告内の各種要素（テキストや背景など）の色が動的に変化するように設定できます。動的コンテンツの色の設定には、色の名前ではなく 16 進値（たとえば、red の代わりに 0xFF0000）を使用します。こうすることで、詳細な管理が可能になり、クリエイティブ ファイル内ではなく、バックエンドで簡単に色を更新できます。

• テキストの色。たとえば「これは青色のテキストです」というテキストの個別の文字や語句の色を変えるには若干作業が増えますが、ダイナミック テキスト値自体に HTML タグを追加することで変更できます。たとえば「これは<font color='#0000FF'>青い</FONT>テキストです」のようにします。
• グラフィックの色。単色が最適です。グラデーションも色分けできますが、作業量が増え、動的コンテンツに 2 つの値（グラデーションの最も暗い色の値と最も明るい色の値）を設定する必要があります。複雑なグラデーションや複雑な構造（マスク、シャドウなど）は、動的に色付けするのが難しくなり、制作に時間がかかる場合があります。

動的 URL

一般に、ランディング ページの URL は動的にします。Rich Media クリエイティブの場合と同様に、クリエイティブを変更して URL を変更することもできますが、変更しにくいことがあります。単に URL に付け加えるのではなく URL に挿入しなければならない場合は特に変更しにくくなります。

その他のポイント

おすすめの方法:

• ファイルサイズ。Rich Media 広告の場合と同様に、ファイルサイズの上限を考慮します。Studio イネーブラーを追加する場合（Studio イネーブラーがまだ含まれていない場合）や、ダイナミック テキストに必要なフォントを追加する場合は、ファイルサイズに十分な余裕が必要です。
• 相互に依存する要素。ダイナミック テキスト、ダイナミック画像、およびその他の要素がどのように相互に影響し合うかだけでなく、広告の静的部分も含めて確認します。ある要素が動的に変化するさまざまなパターンが、広告内の他の要素のデザインに想定外の影響を与えることがあるためです。たとえば、暗い色と明るい色の 2 つのパターンを持つダイナミック画像を背景として使用する場合、静的なテキストの色が問題となる場合があります。テキストの色が白で、動的な背景画像の 1 つがアイボリーの場合、テキストは判読できなくなります。この問題は、背景画像を調整するか、テキストの色を動的な色に設定することで解決します。
• 複雑性。制作チームは、広告を動的広告に変更するコードを挿入するために、広告ファイルの構造とコードを理解する必要があります。クリエイティブが複雑すぎたり、コードが稚拙だったり、わかりにくかったりすると、ダイナミック広告への変換にはさらに時間がかかります。