開発者なしでプレイアブル広告を作る方法【6ステップで解説】

Key takeaways - プレイアブル広告づくりは、そのほとんどが設計上の判断です。ツールに触れる前に、メカニクス、ゴール、エンディングをそれぞれ1つに絞りましょう。 - 最初の数秒を紙の上で設計します。初めて見る人がテキストなしで何をすればよいか分からないなら、メカニクスを簡略化してください。 - プレイアブル広告作成ツールやビジュアルエンジンの書き出し機能を使えば、開発者なしでも制作できます。ただし、最終ファイルは必ず実機でテストしてください。 - エンドカードとストアボタンは、後回しにするものではなく広告の一部です。アップロードのたびに動作を確認しましょう。 - パッケージ化については各ネットワークの最新の仕様を基準とし、実際に配信するファイルそのものでQAを行ってください。

プレイアブル広告とは何か

プレイアブル広告とは、広告枠の中で動作する小さなインタラクティブ体験で、多くの場合HTML5で作られています。ユーザーはゲームやアプリの一部を短く体験し、操作したあと、ストアへ誘導するエンドカードにたどり着きます。

デモビルドでも、タップを促す表示を付けたトレーラーでもありません。実際に触れることでプロダクトを理解してもらうために作られた、専用のループです。この捉え方が大切なのは、何を削るべきかが見えてくるからです。削る対象は、ほとんどすべてです。

技術的には、プレイアブル広告はWebページです。HTML、JavaScript、画像、場合によっては音声で構成され、canvasまたはDOMに描画されます。内部の仕組みに興味があれば、MDNのCanvas APIドキュメントが入門に役立ちます。作るだけなら読む必要はありませんが、シンプルに保てばプレイアブル広告が小さく高速になる理由が分かります。

ステップ1:遊ぶ価値のあるメカニクスを1つ選ぶ

ゲームやアプリを開いて、自問してみてください。「なるほど、分かった」とユーザーが思う決定的な操作は何でしょうか。

• マッチ3ゲームなら、2つのピースを入れ替えて連鎖を見ること。
• ハイパーカジュアルのランナーなら、左右に操作して障害物を避けること。
• マージゲームなら、同じアイテム2つをドラッグして合わせること。
• 金融アプリやフィットネスアプリなら、スライダーを動かして数値が変わるのを見るなど、結果を示す操作が1つあればよいかもしれません。

言葉がなくても理解でき、すぐにフィードバックが返ってくるものを選びましょう。プログレッション、ショップ、ソーシャル機能を見せたくなる気持ちは抑えてください。それらは遊び続ける理由であって、遊び始める理由ではありません。

役に立つテストがあります。プレイアブル広告を一文で説明してみることです。「同じブロックをドラッグして盤面をクリアする」ならOKです。「拠点を作り、戦い、アップグレードする」は不合格です。

ステップ2:セッションを紙に書き出す

制作に入る前に、プレイアブル広告を短い一連のビートとして書き出します。ごく小さなストーリーを設計するのです。

1. フック。 最初の瞬間、ユーザーは何を目にするか。ゲームの核となるビジュアルを見せ、操作できるものだとひと目で分かるようにします。
2. 最初の入力。 最初に何をするか。ハンドカーソル、ハイライト、点滅するターゲットなどで誘導します。長い文章に頼ってはいけません。
3. リワード。 操作すると何が起こるか。動き、ネットワークが許可していればサウンド、そして進んでいる実感を加えます。
4. エスカレーション。 最初の操作より少しだけ大きく感じる操作を、1〜2個追加します。
5. エンディング。 どう終わらせるかを決めます。勝利、再挑戦したくなるあと一歩の失敗、あるいは時間切れです。そのうえでエンドカードを表示します。

各ビートをラフなコマとしてスケッチしましょう。数コマで描けないなら、このフォーマットには複雑すぎます。

失敗のしかたを決める

負けようのないプレイアブル広告は意味がないように感じられ、あまりに早く負けてしまうものは理不尽に感じられます。よくあるパターンは、ガイド付きで勝てる最初のステップのあとに、失敗の可能性はあるが寛容な、やや難しい2つ目のステップを置く形です。リトライは即座にできるようにしてください。

ステップ3:制作方法を選ぶ

専任の開発者がいなくても、現実的な方法は3つあります。

ルートA:プレイアブル広告作成ツール

プレイアブル広告作成ツールは、入力内容からHTML5を自動生成します。たとえばPlayableRunは、App StoreまたはGoogle Playのストアページを起点にプレイアブル広告を生成し、調整したうえでGoogle Ads向けのZIPとして書き出せます。パイプラインを構築せずにバリエーションを出し続けたい小規模チームに向いています。

トレードオフはコントロールの自由度です。使えるテンプレートやインタラクションの範囲内で作ることになるため、ステップ1のメカニクスはそれを踏まえて選びましょう。

ルートB:ゲームエンジンのプレイアブル書き出し

プレイアブルまたはHTML5の書き出しに対応したエンジンでゲームを作っているなら、テクニカルデザイナーが1ステージ分まで絞り込んで書き出せることが多くあります。実際のビジュアルや手触りを保てますが、ファイルサイズの管理やネットワーク別のラッパーは自分で対応する必要があります。

ルートC:フリーランスまたはスタジオ

どのツールも対応していない独自のメカニクスが必要な場合は、外注も妥当な選択です。あいまいな依頼ではなく、ステップ2で作った台本を渡しましょう。納品ファイルに何が含まれるか、ストアリンクをどう処理しているかも確認してください。

どのルートを選んでも、台本とアセットを用意するのは自分の仕事です。ゲームの何が面白いのかをツールが決めてくれることはありません。

ステップ4:アセットを準備して制作する

制作を始める前に、必要なものを揃えておきます。

• メインのアート。 キャラクター、アイテム、背景、UIパーツ。必要に応じて透過背景で、きれいに書き出しておきます。
• フィードバック要素。 パーティクル、スコアのポップアップ、ハイライト、ハンドカーソル。
• オーディオ。 任意です。良いプレイアブル広告は、音が出なくても意味が通じるものです。
• エンドカード。 アイコン、短いコピー、分かりやすいインストールボタン。
• ストアリンク。 広告から開くべき、App StoreまたはGoogle Playの正確なページ。

制作中は、次の3つの原則を意識してください。

タッチ操作は寛容に。 ユーザーは小さな画面で、正確とは言えない親指で操作します。精密な操作よりも、大きな当たり判定と寛容なドラッグ挙動のほうが効果的です。独自の入力処理を実装する場合は、MDNのPointer Eventsドキュメントが、1つのコードでタッチとマウスの両方を扱う方法を説明しています。

即座に反応する。 すべてのタップに、目に見える反応を返しましょう。わずかな遅れでも広告が壊れているように感じられ、ユーザーは離脱します。

軽量に保つ。 重いアセットは読み込みを遅くし、読み込みの遅いプレイアブル広告は、見てもらう前にユーザーを失います。画像を圧縮し、不要な音声は避け、台本にない機能は削りましょう。ファイルサイズの上限はネットワークごとに異なるため、記憶に頼らず、配信先ネットワークの最新の仕様を確認してください。

ステップ5:実機でテストする

デスクトップのプレビューでは問題が見えません。アップロードする前に、少なくとも数台の実機、できれば古い機種と新しい機種を1台ずつ使ってファイルを開き、次の点を確認します。

• モバイル回線でも素早く読み込まれるか。
• タッチ入力がプレビューと同じように動作するか。
• ネットワークが両方に対応している場合、縦向きでも横向きでもレイアウトが収まるか。
• 失敗やタイムアウトのあとも含め、毎回エンドカードが表示されるか。
• インストールボタンが、仮のものではなく正しいストアページを開くか。
• ランダムに、あるいは連打したり、何も操作しなかったりしても、壊れないか。

最後の項目で、多くの不具合が見つかります。実際のユーザーは台本どおりには動きません。アニメーション中にタップし、ハンドカーソルを無視し、スクロールしようとします。プレイアブル広告は、それに耐えられなければなりません。

より網羅的なリストが必要なら、リリースのたびにプレイアブルHTML5のQAチェックリストを活用してください。

ステップ6:書き出しとアップロード

優れたプレイアブル広告でも、パッケージ化の段階で審査に落ちることがあります。ストアリンクの発火方法、使用できるファイル、バンドルの構成は、ネットワークによって異なります。

特にGoogle Adsについては、ZIPの構成とポリシーチェックの詳細をHTML5のZIPをGoogle Adsにアップロードする方法で解説しています。アプリキャンペーンを運用している場合は、アプリキャンペーンにおけるExitApiを読んで、クリックアウトをどう実装すべきかを把握してください。

最終確認は、以前のビルドではなく、これからアップロードするファイルそのものに対して行います。あるバージョンをテストして、別のバージョンを配信してしまうミスは意外とよくあります。

よくあるミスと避け方

• 見せすぎる。 プレイアブル広告はチュートリアルではありません。長い説明が必要なら、メカニクスを絞り込みましょう。
• 偽のゲームプレイ。 実際のプロダクトとまったく違って見えると、ユーザーは誤解させられたと感じ、すぐにアンインストールする人もいます。実際に提供するものを見せましょう。
• CTAを隠す。 エンドカードは目立たせます。ボタンを探させてはいけません。
• 失敗状態を省く。 台本どおりの勝利は退屈に感じられます。わずかに負ける可能性があり、そのあとすぐにリトライできる設計のほうが、注意を引きつけやすくなります。
• ブラウザでしかテストしない。 タッチ、音声、レイアウトの問題は、実機でなければ見つかりません。
• 1つのバージョンしか出さない。 最初のプレイアブル広告が動いたら、フック、最初の入力、エンドカードなど、一度に1つだけ変えて、何が効いているのかを把握しましょう。

現実的な最初のプロジェクト

初めてのプレイアブル広告なら、スコープは小さく保ちましょう。メカニクスを1つ選び、その1ステージ分を作り、分かりやすいエンドカードを加え、数台のスマートフォンでテストして、1つのネットワークにアップロードします。完璧なバリエーションを計画するより、1回の実際のキャンペーンから多くを学べます。

試してみる準備ができたら、PlayableRunのデモページで完成したプレイアブル広告の例を見るか、無料アカウントを作成して、自分のストアページから最初の1本を作ってみてください。