【事例】1億3千万UVのH5キャンペーンの詳細を公開！

みなさんこんにちは。私たちは今年の大晦日に現金2億円が入ったQQ紅包を担当したチームです。このプロジェクトの裏では私たちも多くの努力をしてきました。「みんなでスワイプ」の重要な機能体験に加えて、元旦と大晦日に事前プロモーションH5を実施し、このイベントの関連情報と内容をユーザーに知らせ、このイベントへの関心を高めました。予熱プロモーションは、スワイプイベントに参加するユーザーの数とユーザー体験に影響を与えます。したがって、優れた予熱H5を作成するには、計画、技術、デザインの緊密な連携が必要です。では、デザイナーは何をするのでしょうか？この話をしましょう... 赤ちゃんは少し悲しそうです 「お正月の紅包を温めるためにH5の作業をしませんか？」「あぁ…いいですよ～」この運用業務を引き受けたとき、これまでの運用経験から、この需要はそれほど難しいものではないだろうと予想していました。すぐに、オペレーションプランナーが来て、要件を説明し、私に伝えてくれました。最初は気持ちの良いコミュニケーションでした。その後、彼らは、ユーザーに赤い封筒をスワイプする時間を知らせるためのウォームアップ H5 アクティビティを実行したいと言い、次の要件といくつかのリスクポイントを示しました。この H5 では、ユーザーにスワイプ方法を説明したり、紅包を受け取る正確な時間や紅包を誰が送るかを伝えたり、明確なタイムラインを設定したりする必要があります。最後のページを除いて、唯一のインタラクティブなアクションは下に引っ張ることです（クリック、左または右へのスワイプは表示されません）。写真は精巧なものである必要があります（これが一般的な要件です）。タイムラインセクション全体は 3 つの画面内に表示するのが望ましく、そのうちの 1 つに完全なタイムラインが表示される必要があります。ユーザーのシェアを刺激するようなコンテンツを提供したいと考えています。イベントに出演するスターや企業、スターや企業の総数を確定することは難しく、複数回の調整が行われる可能性があります。発売日までに変更や調整が行われる可能性があります。 … なんてこった？それを聞いたとき、私は完全に驚愕しました。この要件は大きな課題であるように思われます...

ひらめきでしょうか? 混乱しても無駄です。本当の解決策は、実際の行動を通じて問題を解決することです。パニック状態にあったとき、突然あるアイデアが思い浮かびました！上記のさまざまな条件を満たすには、これを実行してください。そこで次のような結果になりました。

これはシンプルで実装が簡単で、操作が明確で、タイムラインが完全で、途中で変更が必要な場合でも調整が非常に簡単です。上記の要件は満たされているようです、ハハハハハハハハハ...もちろん、このような「シンプルで完全な」ソリューションです〜

まず第一に、志を持った人間として、どうしてそんなに気楽でいられるのでしょうか？さらに、今回の要望はプロモーション運用活動であり、ユーザーに参加してもらい、宣伝してもらうという目的を達成する必要があるため、設計レベルでは以下の点があるべきと個人的には考えています。 伝えるべき情報は明確です。宣伝する機能に関連している必要があります。テーマトーンはイベント（またはホットスポットやトピック）全体に貫かれています。ビジュアルスタイルと感覚は雰囲気があり、一定の視覚的インパクトがあります。イベント全体にハイライトがあり、興味深い創造性と詳細があります。 これらの点から判断すると、上記のいわゆる「解決策」は実際には完全に互換性がありません。運用上のニーズを満たすためには、設計上の要件も満たす必要があるため、真剣に現実的に考える必要があります。 正式に開始 トピックキーワード まず、全体のイベントのトーンを決める必要があります。今回の作戦は、QQが元旦に実施する「スワイプで紅包」機能のプロモーションに関するものです。そのため、今回のH5のテーマキーワードは元旦から始まるべきです。しかし、中華民国以来、元旦は我が国の伝統的な祝日ではなくなり、参考になるものもあまりありません。そこで、話し合いとニーズを組み合わせて、「喜び」というキーワードを思いつきました。

その後、私たちはテーマのキーワードについてブレインストーミングを行いました。私は昔、友達とモノポリーゲームをしたときの楽しいシーンを思い出しました。モノポリーゲームは赤い封筒やお金とも関連しているため、モノポリーをキーワードのキャリアとして使用し、デザインで使用する要素を抽出しました。モノポリーゲームの場合は、次のようになります。

ゲーム「モノポリー7」のスクリーンショット 機能と活動の関連性 活動のトーンとキャリア要素を決定した後、次のステップは、このH5の予熱を「スワイプして赤い封筒」機能とどのようにリンクさせるかを考えることです。赤い封筒要素に加えて、スワイプアクションについても事前にユーザーに教育する必要があるため、H5にプルダウンインタラクティブ操作を1つだけ用意し、プルダウン（スワイプになる）を繰り返すことで、ユーザーに微妙な影響を与える予定です。アクションに関しては、日常生活における常識的な習慣に基づいており、プルダウンを次のステップを開始する方法として使用して、ユーザーに即時のフィードバック（カーテンを開ける、雲を動かす、ライトを点灯するなど）を提供し、ユーザーがこの H5 で自然で唐突ではないと感じられるようにします。最後に、H5 の最後のビデオでは、機能とアクティビティをリンクさせながら、「スワイプ」アクティビティに参加する方法をユーザーに直感的に伝えます。以上のことを踏まえて、共有と調整の課題や詳細についても議論し、計画を立てました。これらの点については後ほど触れることにします。まずは計画全体を見てみましょう！次のように：

…まあ、スケッチがあまりにもラフでわかりにくいので、ビジュアルの下書きだけ見てみましょう:

柔軟な調整 このH5で最も重要な部分はタイムラインです。上記2点を踏まえ、私たちは地図を媒体として、イベントの特定の著名人や企業情報、時点を明確な順序でユーザーに伝えることを考えました。これは直感的であるだけでなく、興味深いものでもあります。しかし、タイミング、有名人、企業情報などにより、発売前に戦略調整や投資問題が発生するため、やり直しのリスクが大幅に高まります。また、操作の設計には多くのことが関係することが多く、1か所を変更すると複数の場所（ページ全体、またはプロセス全体に影響を与える場合もあります）に影響します。このため、このマップを使用して、この操作で発生する可能性のあるリスクに対処するために柔軟に調整できる設計を考えました。私は冗談でこれを「ビルディングブロックアセンブリ」と呼んでいます。設計プロセスは次のとおりです。

いつも通り、まずはスケッチを描きます（スケッチと最終案には違いがあります）～～

次に具体的な作図が始まります。まず、基本マップを描き、後で追加したり削減したりしやすいように基本モジュールを配置します。

次のステップは、要素をコンポーネント化することです。これがこのソリューションの核となる部分です。要素を組み立てた後、上記のモジュールに従って、マップ上でビルディングブロックのように組み立てることができます。

上記は基本的なコンポーネントを組み立てた後の効果であり、企業や著名人を中央に配置するための主なルートです。

星と企業を配置した後、メインルートを強調し、大晦日の雰囲気を融合させるために、メインルートの外側のエリアを暗くして雰囲気を演出し、ユーザーがルート（タイムライン）に集中できるようにします。対応する時間ポイントもコンポーネントにして強調し、置き換えを容易にします。「ビルディングブロック組立」方式により、調整が必要な場合でも、部品の追加や削除、位置の変更で完了できるため、投資促進や意思決定要因による頻繁な手戻りによる作業負荷を大幅に軽減します。もちろん、初期段階でコンポーネントやマップを描くのも大変な作業です...でも、結局は自分で提案したものであり、デザイナーは常に追求していかなければなりません...

共有より多くのユーザーにこのh5を見て理解してもらうために、さまざまなチャネルを通じて公開することに加えて、QQ SpaceやMomentsなどのプラットフォームでユーザーに共有するよう促し、さまざまな関係チェーンを通じて露出と口コミを生み出すという方法もあります。ユーザーの共有を刺激できるh5コンテンツを、ランキング、テスト結果、ニュースホットスポット、収入、個人データのカテゴリにまとめました。ただし、これらすべてに共通するのは、すべてユーザー自身に関連するコンテンツ情報であるということです。そのため、紅包の関連データを組み合わせてパッケージ化し、ユーザーが心理的にさらに関与していると感じさせます（WeChatプラットフォームは情報を引き出すことができず、個別に表示します）。

詳細 コピーライター コピーライティングは特に重要であり、多くのデザイン記事でも言及されていますが、運用についても同様です。この作戦では、前述の有名人や企業の情報や時間ポイントを伝えるほか、ユーザーに「12.31 午後7時、QQに来て紅包をゲットしよう」と知らせることが最も重要でした。そのため、この情報はほぼすべてのページで目立つ位置に配置されており、繰り返し強調することでユーザーの印象が強化されていることがわかります。 マスクの読み込みと共有 読み込みはすぐにスキップできる部分ですが、ネットワークの状態が悪い場合や信号が4G以下の場合は、それでも待ち時間が発生します。この新年のh5は、跳ねる赤い封筒のディテールを使用して、楽しさを増やし、疲労を軽減します。 WeChat のシステムにより、[共有] をクリックすると共有マスクプロンプトがポップアップ表示されます。また、これまでの単調なテキストの説明を取り除くために、ここで小さなアニメーションも作成しました。

アニメーション マスクの読み込みと共有に加えて、H5 全体の単調な遷移を置き換えるためにいくつかの動的エフェクトも使用しました。これらのダイナミックな効果により、H5 全体がよりダイナミックで驚きに満ちたものとなり、喜びというテーマに応え、ユーザーの心理的感覚をよりスムーズで自然なものにします。

ふぅ〜以上が元旦紅包H5全体のデザイン部分です。h5全体の最終的な体験はスムーズです。途中は落とし穴がたくさんありますが、問題を解決した後はまだかなり充実しています〜企画者と技術者の友人たちの努力のおかげです...ええと、何か他のことが起こりそうな気がします？「あ、そうそう、あとで年越しの紅包があるから、その続きをやってね～」「えー、わかりました…」案の定、そんなに早くは終わらなかった。

戦い続ける 大晦日の紅包作戦H5は、お正月の作戦とほぼ同様で、比較的一貫したプロセス操作で、シリーズを形成し、2つの紅包作戦の一貫したブランドを維持できます。ただし、大晦日の要件は元旦よりも高いため、画像処理は以前よりも詳細になり、体験は以前よりもスムーズになるはずです。大晦日は元旦と違い、中国の伝統的なお祭りで、家族と再会して新年を迎える日です。私たちが伝えたいのは、家に帰って再会する正月の雰囲気です。話し合いの結果、このテーマのキーワードは「温かさ」に決めました。

スペースが限られていることと、ちょうど元旦H5を完成させた経験から、多くの問題を解決したので、元旦H5と異なる設計ポイントを除いて、残りは写真に直接掲載されています。これが元旦の全体の計画です：

大晦日マップのデザインプロセス: 以前の元旦マップは、ズームアニメーションのためにマップ全体を使用する必要があり、リソースが過剰になりました。また、元旦マップの左右の切り替えにより、ユーザーが時間の方向を把握しにくくなりました。教訓を得て、今回は長いストリップ形式を使用し、メインルートのみを採用し、リソースのサイズを減らし、移動順序を下から上にすることで、ユーザーがタイムラインの方向を理解しやすくしました。

関連コンポーネント:

カスタマイズされたコンポーネント: 元旦のh5との主な違いは、今回は有名人や企業に関連するコンポーネントをカスタマイズし、対応する属性と気質を強調し、ある程度ブランドを宣伝し、認知度を高める必要があることです。

コンテンツを共有する: 元旦H5では紅包の背景データを取得する際に不安定さがあり、QQとWeChatで見られるコンテンツの一貫性のなさは確かにあまり良い体験ではありませんでした。そこで、今回の元旦H5ではいくつかのミームを組み合わせ、「紅包スワイプジェスチャー」をコンテンツとしてユーザーの共有を刺激し、一方ではユーザーの「スワイプ」に対する意識を強め、他方ではデータを取得する必要がないため、リリース後のリスクを軽減し、各プラットフォームでの一貫した体験を確保しました。

アニメーション： 今回はアニメーションの雰囲気を重視したので、ホームページから入った後に雪が降る演出を加え、伝えたい温かみのある雰囲気を演出しました。個人的には、H5 全体のハイライトは、マップの終わりに到達して赤い封筒が降り始めると、赤い封筒がぶら下がっている願いの木が見えるところだと思います。その本来の暗い色が点灯し、新しい始まりとすべての願いが叶うという願いを表しています。

これがイベントの2つのフェーズの大まかな設計です。もちろん、前述の2つのメインH5に加えて、それらに付属する一連のプロモーション資料もあり、すべての操作が完了していますが、ここでは詳細には触れません。この間、H5全体の2つのフェーズがオンラインで実現され、発売されるのを見て、個人的にはかなりの達成感を感じています〜 フォローアップの考え 私個人としては、この2機のH5の運用は比較的スムーズで、運用開始後も良い成果を上げていると思います。これは関係者間の緊密な協力のおかげです。ありがとうございます！同時に、この活動期間中に多くのことを学び、気づきました。関連する経験と感想をいくつか皆さんと共有したいと思います。 1. イベント企画の初期段階でしっかり取り組む レッドエンベロープ予熱H5のこの2つのフェーズには多くの問題が伴いましたが、プロジェクトサイクル全体の観点から見ると、比較的スムーズだったと思います。これは、初期の運用担当者が行った適切な計画と調整作業によるものだと思います。柔軟な時間調整とタイムリーな調整により、プロジェクトの設計開発作業時間がより確実に保証されます。さらに、H5 計画では、早い段階で具体的な方向性を示し、それに従います。これにより、以前の設計が方向性の変更によって大幅なやり直しにつながるという状況を回避できます。 2. 図面を作成する前にスケッチ/原稿を作成する必要があります 昨今、デザイナーは下書き段階では直接コンピューターで図面を作成することが多いですが、実際のh5の設計となると、やり直しになる可能性が高く、効率に影響します。これは、プランナーがコミュニケーション後に具体的な画像効果をすぐに想像できない可能性があるためです。下書き段階で原稿を素早く描き、関連するスタイルリファレンスを提供することで、相手は全体的な理解を得ることができ、設計効率を向上させることができます。 3. 開発者と良い友達になりましょう! このような H5 プロジェクトでは、プランナーが全体のプロセスと全体の調整を管理しますが、協力と緊密な調整の面では、設計と開発の関係が非常に重要です。開発者と親しくなり、コミュニケーションを取り、お互いを理解します。デザイナーは技術的なプロセスと困難を理解し、複雑で困難な点をできるだけ避けます。開発者は設計の要件と問題を理解し、適切な解決策を見つけます。このようにしてのみ、協力してより効率的に良いものを作ることができます。 4. 人々や人生に対する洞察力を高める 私の意見では、良いオペレーションの設計は、人間性や人生などの観点から始めて考慮する必要があることが多いです。人間の性質を理解し、ユーザーの心理を把握することで、操作目的を達成できます。人生を理解することで、共感覚と人生経験から関連要素を抽出し、計画と設計に変換して、手段によって引き起こされる不快感を隠したり和らげたりして、ユーザーが体験の過程で共鳴し、自然に感じるようにすることができます。優れた業務経験は、人間性と人生に対する継続的な洞察と変革から生まれると私は信じています。 5. 不確実な状況では、設計に柔軟性を持たせる余地を残すようにする 運用要件には多くの場合、一定の不確実性があり、その結果生じる変更ややり直しは、運用設計を行う人にとって常に苦痛でイライラする経験となってきました。不確実な部分や調整が必要な可能性のある部分については、可能な限り設計に柔軟な調整の余地を残しておくようにし、実際にやり直しが必要になった場合でも、全面的な変更を比較的避けられるようにします。もちろん、調整しないのが一番です。 6. コピーライティング コピーライティングの重要性は、いろいろなところで言われているのでここでは詳しくは述べませんが、オペレーションにおいては、さらにコピーライティングの力が求められます。優れたコピーライティングは、多くの問題を解決し、利益をもたらすことができます。この記事の最後で、これら 2 つの操作フェーズのデータ (UV) について触れたいと思います。これはかなり良好であると思われます。

ASO最適化サービスが必要な場合は、このリンクをクリックしてください： ASO最適化サービスの紹介

APP Top Promotion (www.opp2.com) は、中国トップのモバイル APP プロモーションプラットフォームです。公式WeChatパブリックアカウントのフォローを歓迎します: appganhuo

[トップAPPプロモーションWeChat QRコードをスキャンして、より多くの乾物と爆発物を入手してください]

この記事は、@里奥(APP Top Promotion) が編集し公開したものです。この記事を転載する場合はTop Promotionの許可が必要で、この記事へのリンクを貼ってください。

<<: B面商品運用の需要分析！

>>: 二流eコマース広告｜7つのカテゴリー15の商品事例！