フォローする
  • MDX: 管理 >アド > 新規 > 新しいHTML5アドのデザイン
  • MDX-NXT クリエイティブ>アド > 新規アド> HTML5アドのデザイン

概要

HTML5アドビルダー・オーサリング・ツールを使用することにより、 Sizmek MDXプラットフォームでHTML5アドを直接ビルドできます。インターフェースは、使いやすく、HTMLコードの知識は不要です。HTML5アドをゼロから作成したり、組み込みテンプレート(業界で最も一般的に使用されているアドがベース)を使用して新規アドを作成することができます。アドのビルドが終わったら、テストし、プレビューで見て、プラットフォームへ保存できます。

ルールおよびガイドライン

  • アドビルダー内からHTML5アドをアップロードすると、アドはHTML5ワークスペースの形式で自動的にプラットフォームへアップロードされます。
  • HTML5アドのサイズは、アドのワークスペースにおけるすべての資産の合計サイズ(圧縮サイズ)です。この中には、画像、最大のビデオ、フォント、JavaScriptファイル、HTMLファイル、その他のファイルが含まれます。ダイナミック・クリエイティブやビデオの追加資産は、カウントされません。圧縮は、自動的に適用され、各資産タイプのサイズは、圧縮サイズに縮小されます。
  • 標準アドは、軽量のアドであり、Image、Text、Hotspot、HTML、ボタン、およびShapeコンポーネントを含めることができ、200Kに制限されます。
  • アドをアップロードする前にアドごとにデフォルトの画像を設定しなければなりません。
  • アドビルダーの対応ブラウザは、Google Chrome、Mozilla Firefox、およびApple Safariです。

機能リスト

機能 説明
適応的アド Sizmek HTML5適応的アドソリューションを使用することにより、1つのHTML5アドをモバイルウェブ、モバイルインアプリ、およびデスクトップ・ブラウザの異なるプレイスメントで提供できます。
スマート・バージョニング スマート・アイテムをアドビルダーのコンポーネントへ割り当てることにより、スマート・バージョニング機能をHTML5アドへ追加できます。
組み込みHTML5テンプレート vsゼロからのアドビルド アドビルダー・テンプレートを使用することにより、HTML5アドを素早く簡単に作成できます。必要なことは、テンプレートを選び、自分が必要とするアドのさまざまな場面をカスタマイズするだけです。
モバイル・プレビュー 専用の統合アドプレビュー・インターフェースを使用することにより、アドをプレビューしたり、アドを携帯端末でプレビューするためのQRコードを生成できます。
携帯端末におけるビデオの自動再生 アド主は、アドをロードする時にビデオのセグメントを自動再生することにより、モバイルアドにおいてより豊富なアド体験を提供できます。
サポートされるコンポーネント

サポートされるコンポーネント  
Button HTML5  Shape Video
Facebook Image Text YouTube
Facebook Feed Media Gallery Twitter  
Hotspot Pinterest Twitter Feed  

 

操作
操作 操作タイプ
URL操作
  • クリックスルー
  • カスタム・クリックスルー
  • カスタム・インタラクション
  • URL取得
モバイル操作
  • 電話番号
  • SMS番号
  • eメールアドレス
カスタム操作
ビデオ操作
  • プレイ、中止、一時停止、リプレイ、ミュート、ミュート解除
アニメーション
  • • スライド・イン、スライド・アウト、モーション、フェード・イン、フェード・アウト
    表示、非表示、回転、拡大縮小
シーケンス
  • 一時停止
  • 開始
  • 停止
ソーシャル操作
  • フィードデータの取得
ギャラリー操作
  • 次のスライドの表示
  • 前のスライドの表示
  • スライドへ進む
  • スライドショーの中止
  • スライドショーのプレイ

はじめに

アドビルダー・ユーザー・インターフェースの要素について説明します。

Based on your platform login credentials, a personalized Welcome Page opens when accessing Ad Builder from the platform. From your personalized welcome window, you can get straight into HTML5 and:
  • Access your recently created ads.
  • Create new ads from scratch or using templates.
  • Access a Template Gallery.

手始めに、最も一般的なクリエイティブ・タイプをいくつか説明します。詳しくは、 HTML5アドビルダー・テンプレートの使い方 を参照 。


キャンバスは、あなたのクリエイティブ・ワークスペースです。Properties(プロパティ)画面を使用して、アドの寸法を調整してください。組み込み式のルーラーおよびガイドを使用することにより、スペースを正確に管理できます。 

アドビルダーに備わっているルーラーおよびガイドを使用することにより、アドおよび関連コンポーネントをキャンバス上で正確に簡単に配置、測定、および調整できます。キャンバスの右下にある専用のルーラーおよびガイド・ボタンを使用して、ルーラーおよびガイドを表示したり、隠すことができます。ルーラーおよびガイドは、アドを保存する際に保持されます。

ルーラーの使い方

ルーラーは、キャンバスの左上にあります。

ルーラーに関する注記:

  • アドビルダーを開くと、ルーラーはデフォルトで表示されます。
  • ルーラーは、寸法をピクセル数で表示します。
  • キャンバス上のルーラーは、キャンバス上でアドと相対的に計算されています。アドの左上の角が起点(0,0)とみなされます。アドに追加されるその他すべてのコンポーネントは、基準のアドと相対的に測定されています。
  • 拡大縮小してもアドの高さと幅の比率は保持されます。
  • インスタンスの枠を広げると、縦の左枠は隠れます。 

ガイドの使い方

インスタンスは、バナーまたはパネルを含めたアド要素の1つです。ガイドは、キャンバスにおいて各インスタンスに対して表示される線です。ガイドを使用することにより、さまざまなアドコンポーネントをインスタンスに配置できます。ピクセル値の追加、削除、参照など、一連のガイド関連操作を実行できます。

注記: Show/Hide(表示/非表示)ガイド・ボタンは、デフォルトで無効となっており、ガイドをキャンパスへ追加する時点で有効となります。

下記の図は、アドの「x:162 px」を中心としたさまざまなコンポーネントを表示しています。

各操作方法
  • ルーラーの軸をクリック&ドラッグして、キャンパスにガイドを作成します。
  • ガイドを選び、マウスの左ボタンをクリックして保持します。
  • ガイドをダブルクリックするか、ガイドをドラッグしてルーラーへ戻します。

適応的アドとしてアドを設定するためのオプションを含めて、すべての一般的なアド設定を表示します。

このウィンドウには、拡張可能なアドのバナーおよびパネルを含めて、アド部分が表示されます。このインターフェースは、応答型アドの構成要素としての役割を果たします。

タスクバーからインスタンス・ウィンドウへのアクセス


ンスタンス・ウィンドウには、拡張可能およびポライトバナーアドのバナーおよびパネルを含めて、さまざまなアド要素が表示されます。

応答型アドの各「バージョン」は、1つのインスタンスとみなされ、アド用に設定されたすべてのインスタンスがウィンドウに表示されます。最初に作成されたインスタンスは、マスターインスタンスと名付けられ、他のインスタンスが適用できない場合に使用されます。アドをアップロードする場合、すべてのインスタンスは、アドの一部としてプラットフォームへアップロードされます。

Access the Components view by clicking on the icon in the ad area. Click a component to place into the ad and configure the component using the Properties pane on the right For more information, see, HOW TO: Add Components to Your HTML5 Ad in Ad Builder for HTML5.

レイヤー・ビューには、アドに追加されたコンポーネントが表示され、コンポーネントの整理に使用できます。リストの最初にあるコンポーネントは、フォアグランドに表示され、リストの最後のコンポーネントはバックグランドに配置されます。これは、アドに多くのコンポーネントが含まれている場合に役に立ちます。

コンポーネントに対して下記の操作を実行できます。

  • 選択したコンポーネントの非表示
  • コンポーネントのステージへの固定
  • レイヤーの再配置
  • スマートコンポーネントの特定

注記:  レイヤー・ビューにおいて、 は、スマート・アイテムがコンポーネントに割り当てられていることを示します。アドビルダーにおけるスマート・バージョニングの詳細に関しては、 スマート・バージョニングのコンポーネントへの追加 セクションを参照。

プロパティ・ウィンドウには、選択したコンポーネントの設定が表示されます。

アニメーションにするためには、イベントを定義して、操作を追加します。複数の操作をイベントへ追加し、予定表を使用してそれを順番に並べることができます。また、ここで操作をプレビューすることもできます(クイック・プレビュー)。詳しくは、操作およびアニメーションをアドのイベントに割り当てる方法 を参照。

アドをプレビューするためには、メニューバーでプレビューをクリックします。また、 QRコード機能を使用して携帯端末でプレビューすることもできます。詳しくは、HTML5アドビルダーにおいて HTML5アドをプレビューおよびアップロードする方法 を参照。

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント