H5 をプレイするこれらの新しい方法で、インスピレーションが尽きてしまうのではないかとまだ心配していますか?

H5 がもたらす新しい機能とゲームプレイを理解し、より多くの事例を読み、活動を計画する際にこの記事を読んでください。インスピレーションを得て、昇進や昇給を得て、人生の頂点に達するでしょう...

HTML 5 は 2014 年末に初めて登場し、2015 年に人気が高まり、2016 年に定着しました。2017 年現在でも、H5 はブランドのソーシャル コミュニケーションの第一選択肢となっています。新しい技術であるため、多くの計画仲間は、どのように計画すればよいかわからない場合が多く、または自分の大胆なアイデアを実現できるかどうかもわかりません。そのため、計画するときは、アイデアごとに技術者に相談します。技術者がいない場合は、サプライヤーに技術コンサルティングサービスを提供してもらう必要がありますが、このような計画サイクルは少し面倒です。 「川は源から遠くまで流れ、深い根を張った川には青々とした葉が茂る」という古い諺は今でも同じです。優れたプランナー (オペレーター、デザイナーなど、会社や役職によって異なります) が優れたクリエイティブ プランを考え出すには、HTML5 のリリース以降の新しい手法を理解する必要があります。この記事は、H5 活動を計画する際に、誰もが必ず参照する資料としても適しています。インスピレーションが必要なときにご覧ください。

2,000 件の H5 ケースを詳細に分析した結果、ゲームプレイにはセンサーベース、タッチ スクリーン ベース、画面表示ベース、コンテンツ ベースの 4 つのタイプがあるという結論に達しました。 4つのカテゴリーは、さらに細かく分類することができます。実際に使用する際には、1つのタイプだけを使用するか、複数のタイプを組み合わせて使用​​するかは、あなたの才能次第です。一度技を覚えれば、実際の戦闘ではさまざまなバリエーションが生まれます。最初の 3 つのタイプが基本であり、この記事では、これら 3 つのタイプについても詳しく説明し、各タイプのゲームプレイを紹介します。コンテンツベースのゲームプレイには、主にテキストと画像が混在する表示コンテンツ、クイズゲーム、コンテンツと関連が深いその他のゲームプレイが含まれます。実際、それらは他の 3 つのカテゴリとも多かれ少なかれ関連しています。

全体概要:

1. センサーベース

2. タッチスクリーン操作をベースとする

3. 画面表示に基づいて

1. センサーベース

読者は興味のある部分に直接ジャンプすることもできます。また、電話のバイブレーション、光センサー（周囲の光の強さを検知して、キーボードのライトや画面のバックライトをオンにするかどうかを決定します）、距離センサー（距離センサー付きの電話は、通話後に受話器を顔に当てると画面が黒くなります）などの機能はあまり使用されていないため、ここでは詳しく紹介しません。読者は、関連情報を自分で見つけることができます。

携帯電話のセンサーには、ジャイロスコープ、GPS、カメラ、マイク、振動センサー、光センサー、距離センサーなどがあります。現在、スマートフォンの普及率は非常に高いため、自信を持ってゲームプレイを設計できますが、ビジネス自体に基づいて関連性のある適切なセンサーを選択することに注意する必要があります。不必要な詳細が追加されないように、複数のセンサーをランダムに組み合わせたり積み重ねたりしないでください。たとえば、位置関連の問題に取り組んでいる場合は GPS を選択し、 VR のニーズに取り組んでいる場合はジャイロスコープを選択します。

体性感覚H5では、バスケットボールやテニス、ダンベルの持ち上げ、風車の回転制御、携帯電話が平らか垂直かの確認、パノラマ画像/ AR角度の変換など、ジャイロスコープと重力センサーがより頻繁に使用されます。ダンベルを持ち上げることは、シンプルで直接的かつ効果的な健康関連のH5アクティビティのアイデアです。多くの人は、ジャイロスコープと重力センサーの違いがわかりません。簡単に言うと、ジャイロスコープは XYZ の 3 次元空間で携帯電話の動きを追跡できますが、重力センサーは次のようになります。最初は携帯電話を手に垂直に持ち、90 度回転させて横向きにすると、インターフェイスが自動的に重心に反応します。携帯電話を使用してスターウォーズのレーザー剣のスイングを制御したい場合は、ジャイロスコープを使用する必要があります。

場合

（１）触ってみますか？

ユーザーは携帯電話を激しく振ってそこに座っていた人を起こします。すると、ダイナミックな画像がポップアップし、元々そこに座っていた人が興奮して、走ったり、サーフィンをしたり、ビュイック・ヴェラーノに飛び乗ったりします。

（２）少し我慢しましょう

ユーザーの忍耐力を試す小さなゲーム。ユーザーは携帯電話を同じ位置に保持し続け、時間がカウントされます。姿勢が変わるとゲームは終了します。

（３）陸上スプリント、スピードチャレンジ

コンテンツは2部構成で、前半はビデオ形式で展開されます。ホームページの「エンジンスタート」をクリックすると、ビデオパートに入り、映画「ワイルド・スピード」とLufaxのストーリーをWeChat MomentsやToutiaoなどのシナリオで紹介します。ビデオパートの最後に、ゲームの課題とルールが示され、その後ゲームセッションが始まります。ドライバーは運転中に携帯電話の左右のリモコンを使用して障害物を回避し、最後にランキングと抽選が行われます。

（4）中秋節の正しい祝い方

このケースは中秋節の正しい祝い方をテーマにしており、「集まる」と「一人でいる」という2つの状態を通して、人生における異なる状態でもある中秋節の異なる状態を反映し、共鳴を実現しています。比較すると、携帯電話を 180 度回転させて状態を切り替えるのは非常にユニークです。

位置

百度地図は以前、位置情報とLBSサービスを組み合わせて、地図上で近くのマクドナルドを探すアクティビティを実施しました。また、ユーザーのランニング軌跡を記録するなど、スポーツと組み合わせることもできます。ただし、H5はAPPではないため、閉じている場合は検出できません。運動軌跡を本当に検出したい場合は、時間を記録する方法の方が適切であることをお勧めします。このゲームは、ポケモン ゴーのゲームプレイを参考にしたもので、ユーザーの位置の近くに賞品が散らばっていて、ユーザーは目的地まで歩いて報酬を集めます。

事例:デュレックスキャッチ マグパイズ

GO!!!!! をクリックしてゲームに参加してください。ゲームはマップと統合されているため、マップ上でいつでも自分の位置を確認できます。小さなカササギを見つけたら、そこに向かって歩き、フープで囲み、クリックして捕まえます。いつでもオンラインゲームプレイヤーの数と近くにいるかわいいカササギの数を確認できます。カササギを一定数集めると賞品と引き換えることができます。 ！

顔認識

人間の顔とH5を使ってインタラクションします。ゲームプレイには、顔に基づいて年齢や感情を推測したり、有名人の顔との一致度をテストしたり、ゲームや映画のキャラクターと顔を組み合わせたり（映画のプロモーション用）、顔を子供の外見に変えたり（大学入試の証明書を生成）、顔を古い外見に変えたり（このアイデアは美容・化粧品業界に適しています）、顔の動きに基づいてフィードバックを与えたり（口から火を吐いたり、目から稲妻を放ったりするなど）などが含まれます。通常、ARや画像合成技術と組み合わせて使用​​されます。関連技術は主に顔認識と顔モーションキャプチャ技術です。テンセントはYoutu認識技術を提供しており、マイクロソフトも顔認識技術を提供しています。

例:

（１）テンセント：私のワールド・オブ・ウォークラフト

H5テーマは、自分だけのウォークラフトを主役にすること。2つのポスターから好きなポスタースタイルを選択し、自分の顔の特徴がわかる写真をアップロードし、完成したポスターに傷跡や目などの装飾を追加し、「完了」をクリックするとポスター制作が完了します。ポスターを生成してWeChat Momentsで共有できます。

（２）小学生の学生証の写真

自分撮りをクリックしてアップロードすると、独自の小学校のID写真が生成されます。また、画面の右側にある「遺伝子を変更」をクリックすると、さまざまなスタイルのID写真が生成されます。ハイライト：黄色の背景と青いフィルムは非常に強い色のコントラストを生み出しますが、唐突な印象を与えません。顔認識によって合成された写真は非常にリアルに復元されます。

（３）スナップチャットのゲータレードドリンクがARフィルターの動力源として使われている

ゲータレードは、ファンが試合に勝ったときにゲータレードをかけられる興奮を体験できる AR ベースのフィルターを Snapchat でリリースしました。広告主との協力の面では、「スヌーピー ザ・ピーナッツ・ムービー」の広告では、スヌーピー自身が非常に人気があり、ユーザーは彼と一緒に「写真を撮る」ことを喜んでいます。また、彼は口から虹の特殊効果のあるキャンディーを吐き出すこともできます。UGCコミュニケーション効果は非常に良好です。

ウェブRTC

WebRTC は、Webブラウザでリアルタイムの音声またはビデオ会話をサポートするテクノロジーです。2010 年にGoogleが Global IP Solutions を 6,820 万ドルで買収したときに取得されました。これは、Google の計画がいかに広範囲に及ぶかを示しています。 WebRTC は、ビデオ処理とオーディオ処理のテクノロジを提供します。Web 開発者は、マルチメディアのデジタル信号処理プロセスに注意を払う必要はなく、それを実装するには簡単なJavaScriptプログラムを書くだけで済みます。ハードウェア条件の制限により、現時点でのアイデアは実現できず、普及もされていませんが、皆様が引き続き注目していただければ、近い将来に利用可能になるでしょう。

2. タッチスクリーン操作をベースとする

センサーを使用して特別なゲームプレイを作成することに加えて、単一画面スクロール、ジェスチャー操作、パノラマインタラクション、マルチスクリーンインタラクションなど、タッチスクリーンで操作する方法も多数あります。タッチ スクリーンでの操作は、ユーザーの通常の習慣に従う必要があります。たとえば、画面をスライドするとページをめくったりシーンを移動したりでき、2 本の指を広げるとズームインします。操作デモンストレーションはデフォルトで提供されますので、覚えておいてください。覚えて！また、ユーザーが操作しやすいように、操作可能領域も広くする必要があります。プレイヤーがプロのプレイヤーであると想定しないでください。計画とテストの際には、この点に注意する必要があります。

単一画面スクロール

これは非常に一般的なやり取りの形式です。画面を回転するときに、フェードインやフェードアウトなどの遷移アニメーションを追加して、ページをめくる効果を単調にせず鮮やかにすることができます。また、重力感知を追加して、携帯電話を回転させたときに視差効果を作成することもできます。シングルスクリーンスクロールの適用範囲は広く、ホームページ、製品紹介、レポート概要、招待状など多くの場面でこの形式が使われています。

例:

（１）創立１周年記念式典招待状

色を使って物語を伝えます。1回スワイプすると、全画面が自動的に切り替わります。美しく、実際の音声メッセージがあります。最後に、1周年記念のお祝いに参加するよう招待する招待状が送信されます。

（２）私のS7成功への道

これは写真とテキスト付きのH5です。ページが読み込まれた後、画面を上にスライドし続けると、シーズンタイトル、獲得した星の数、戦場の栄光、お気に入りのヒーロー、強力なパートナー、シーズンピット、ブラックCP、自分の戦闘パートナー、およびInitial's King S7シーズンの具体的なデータ分析が表示されます。ケースの最後にある[私のキングロードを表示]ボタンをクリックすると、自分のキングロードが表示されます。同時に、このH5ケースは重力感知を採用しており、体験中に携帯電話を振ると、画像も揺れます。

ジェスチャー操作

クリックやスライドに加えて、ドラッグ、ズーム、コントロール、回転、描画など、さまざまなジェスチャを使用して画面を操作します。フルーツカットとアングリーバードはどちらもジェスチャー操作の非常に良い例です。

事例: あなたの想像力はとてもワイルドです。月餅は何に使えるのでしょうか?

月餅は何にできるでしょうか？開くと、白熊と雪皮月餅が出てきます。クリックしてドラッグして、白熊の頭に雪皮月餅を置き、耳を作ります（第一反応は本当に耳ですか？ ふふふ）。次のステップに進み、月餅をギフトボックスに入れてあなたの考えを表現してください。また、クリエイティブインデックスと月餅を購入するための関連リンクもあります。

3. 画面表示に基づいて

このタイプのゲームプレイでは、通常、ビデオ、アニメーション、特殊効果などのクールで興味深いビジュアルコンテンツが表示され、ユーザーに視覚的な楽しみをもたらします。ユーザーはビジュアルコンテンツと対話して、見たいものを視聴することもできます。

ビデオ/アニメーション表示

このタイプの H5 は、長くて興味深く鮮明なビデオまたはアニメーションを再生して、ユーザーの注意をプロモーション コンテンツに引き付けます。動画やアニメーションは鮮やかで、クールで、面白く、有名人が出演していることも少なくありません。ユーザーは一般的に、このような広告にあまり抵抗を感じません。むしろ、いいねを押したり、積極的に友人と共有したりします。このゲームプレイは、製品、フェスティバル、ゲーム、映画などのプロモーション シナリオや、より物語的なコンテンツを含むシナリオに適しています。

このゲームを作る主な方法は次のとおりです。

1. ビデオ。これは主に AE を使用して実現され、非常にクールな効果を生み出すことができますが、コストが比較的高く、業界では秒単位で計算されます。
2. キャンバスを使用して、昔のフラッシュのようなアニメーションを作成します。効果はビデオほどクールではありませんが、この種類のアニメーションは視聴でき、再生中に自然にインタラクションを追加できます。ネイティブコードで記述するのは非常に困難です。createjs、egret、layabox、cocosエンジンツールを使用することをお勧めします。
3. H5+css3を使用してアニメーションを作成します。この方法でも方法2と同様にアニメーションを作成できますが、作成の難しさと複雑さは方法2よりも高くなります。ただし、携帯電話のハードウェアの制限により、この方法は今のところ推奨されません。

例:

（１）薛志謙の史上最もクレイジーな広告

トップページは薛志謙のWeiboを模したインターフェースで、数回スワイプすると画面が真っ暗になり、薛志謙が画面に現れ、監督が彼にテンセントアニメーションの宣伝をさせた理由と経緯を語り始める。内容は、二次元界で一番好きなゲイ（二人の男性が一緒にいる）、いちゃつく（チョコレート色の男の子が学校中の女子に好かれている）、面白い（麻痺した女の子に仕返しされる）、そして最後にアニメのヒロインを抱きしめて何千もの山河を歩くというセンセーショナルなシーンを組み合わせたもの。どうやら、これが宣伝ポスターの正式な撮影時間であることが判明した。アクションの音とともに、薛志謙はポスターの上で凍りついた。

（２）カットなしのワンテイクで撮影したドラマの公開

視線の奥を辿って、あの大人気ドラマやバラエティ番組を色鮮やかな映像で振り返ります。軽快なBGM、個性豊かな大物俳優、華やかなスクリーンスターたちが次々と映像で紹介されます。画面下部のYoukuアイコンをタップすると、画像が万華鏡に変わります。 H5 の最後に、YOUKU メンバーシップ プロモーションインターフェイスが表示されます。

（３）ダークナイト役のロールスロイス・ブラックバッジ

これは現在主流ではないフラッシュ タイプですが、皆様のアイデアを刺激するために提供されています。このH5ケースは、フラッシュプラステキストと画像の切り替えの形式で提示されています。黒を基調としたカラーが、ケース全体に壮大さ、高貴さ、美しさを漂わせ、多くの古典的な黒の美学映画の素晴らしいクリップと組み合わされています。これは、黒の美学へのオマージュを反映するだけでなく、新しいモデルのBlack Badgeにも黒の美学の特徴が取り入れられていることを強調しています。

パノラマインタラクション

パノラマインタラクションとは、没入感あふれる体験を実現するために、ユーザーを 360 度のサラウンド画像/ビデオ環境に配置することを指します。ユーザーはこの環境でさまざまな角度からコンテンツを表示し、携帯電話を回転させたり画面をスライドしたりしてインタラクションできます。コンテンツを左右2画面に分割し、VRグラスを装着すればVR体験ができます。このゲームプレイは、仮想パノラマ表示、没入型現実表示、またはオンサイトイベント表示などのシナリオに適しています。これに似たのが、製品の 360 度表示で、ユーザーは製品をドラッグしてさまざまな角度から見た様子を確認できます。

関連技術は主に3D回転操作とジャイロスコープ技術です。パノラマプラグインにはCreation Festivalで使用されているcss3d-engine、パノラマビデオコンポーネントにはValiant360があり、krpanoなどの有料コンポーネントもあります。

例:

（１）呉一凡はハッカー事件に巻き込まれ、楽屋の個人情報が漏洩した

番組は、呉一凡のハッカー事件への関与を紹介として使い、視聴者の好奇心を喚起し、視聴へと誘導する。

（２）iMusic

エントリーページはプロモーションポスターで、スクロールするプロンプトボックスにブランド関連のメッセージが表示されます。クリックすると3Dシーンに入ります。携帯電話を360度回転させてパノラマビューを楽しむことができます。シーンのプロンプトに従ってください。4つの異なるシーンで異なる音楽が再生されます。シーン内の多くの要素にブランドロゴが設定され、宣伝とプロモーションを実現します。[詳細を表示]をクリックすると、公式Weiboにジャンプします。

ハイライト: 3D パノラマ画像効果は明るくカラフルで、4 つのシーンは小さな相互作用があり、細部は非常に繊細です。キャラクターも細かく描かれており、クリックすると音楽が流れるなど、全体的に生き生きとした作風になっています。

（３） KFC VRバーチャルチャリティーアート体験ホール

ページに入り、KFCチャリティーアートバーチャル体験館を体験する方法（360度パノラマモードまたはVRアイモード）を選択します。体験館に入った後、地上の展示館マップをクリックすると、体験館が主に体験館ホール、チャリティーアート絵画展、私のWeChat友達ホール、チャリティーアート絵画展の4つのエリアに分かれていることがわかります。展示中の絵画をクリックすると、絵画の鑑賞がより楽しくなります。絵画の右下にあるボタンをクリックすると、絵画の詳細が表示されます。WeChat フレンド ルームに入ると、共有した友人のアバターを見ることができます。

ハイライト: オプションの体験モードは両方とも非常に没入感があります。体験ホールは、まるで目の前にあるかのようなリアルな体験を味わえます。ツアーガイドは Li Yuchun 氏です。

マルチスクリーンインタラクション

マルチスクリーンインタラクションとは、複数の画面でアクティビティを体験することを指し、各操作は同時に他の画面にも反映されます。一般的には、デュアルスクリーンインタラクションが主な方法です。ゲームプレイには、マルチプレイヤーの協力や競争、絵を描いて推測、質疑応答、カップルの交流、ライブ視聴者とのオフライン交流、複数の画面で一緒にビデオを視聴することなどが含まれます。携帯電話をリモコンハンドルとして使用し、大画面を表示に使用することもできます。このようなアクティビティを作成するときは、シーンに注意を払うことを忘れないでください。数百人の大規模なフィールドは、数十人のミッドフィールドや数人の小さなフィールドとは異なり、計画がまったく異なります。大きなスクリーンは1つだけです。人数が多い場合は、表示の問題を考慮する必要があります。リアルタイムで結果のみを表示するか、アバターを一瞬だけ表示します（メインエリアは、キル、勝利、ナイトクラブのスクリーン支配などのアクションによって異なります）。十数人や数人であれば、基本表示で全員表示できるので困ることはありません。次は形式です。実際、その多くは他の物理的なゲームや Snake Wars などの既存のゲームから借用できます。 Xinbu Interactive は、中国でマルチスクリーン インタラクションをいち早く試みた企業のひとつであり、多くの事例で成功を収めています。

関連技術は主にWebSocketまたはポーリングインターフェースを使用して同期通信を実行し、画面の内容を更新します。リアルタイムオンラインの要件が高くない場合は、WebSocket技術を省略できます。実際の運用では、バックエンドには通常 node.js を使用します。

例:

（１）CFモバイルとプリングルズがゾンビと戦うために協力

• あらすじ：このモバイルゲームでは、高エネルギーの「ポテトチップス」を弾薬として使いゾンビと戦いますが、緊急に支援弾薬が必要です。
• モードを選択します - シングルプレイヤー モード。左手でモンスターを「狙い」、右手で手榴弾を「投げ」ます。制限時間内にモンスターを倒してポイントを獲得します。ギフト パックを入手できるかどうかは、ゲームの結果によって決まります。
• モードを選択 - 2 人用モード。キャラクター A は「2 人用モード」を選択して QR コードを生成します。キャラクター B はコードをスキャンして入ります。キャラクター A は「開始」をクリックします。A はシングル プレイヤー モードと同じようにモンスターと戦います。B は「リロード」、つまり「チップ」を連続的に上方にスライドさせてパッケージに入れ、A に弾薬を提供します。
• ゲームのパフォーマンス（シングル/ダブル）に基づいて、ポイント パッケージを取得したり、CF モバイル ゲームをダウンロードしたりできます。

体験：「二人で両手操作」、左手で「狙いを定める」ときに時々ラグが発生しますが、「雷が爆発する」瞬間の体験はやはりかなりクールです！ H5 ミニゲームの体験はネイティブの H5 モバイルゲームとは多少異なりますが、すでにH5 マーケティングの優れた例となっています。

（２）中国のバレンタインデー「メルセデス・ベンツ」

「マグパイ橋での出会い」をテーマに、QRコードをスキャンしてページに入り、携帯電話を振ると、写真が表示され始めます。メルセデスベンツの車が橋を通り抜け、赤いハートの交差点に到着します。写真の最後に、赤いメルセデスベンツの車が画面の外を向き、明るいヘッドライトを点灯します。

（３）愛し合う９人で

ケースを開けると、決して止まらない愛と、ずっと一緒の愛の絵が出てきます。絵をクリックすると次のページに進みます。アイコンをクリックすると、2つの性別のうちの1つを選択できます。ただし、異なる性別をクリックすると、ビデオの内容が異なります。クリックすると、次のページに進みます。このページでは、シングル スクリーンまたはデュアル スクリーンを選択できます。デュアル スクリーンをクリックしてコードをスキャンし、他の人を一緒に映画を見るように招待します。シングル スクリーンをクリックして、視聴可能なビデオに進みます。

（4）WeChatオフラインマルチプレイヤー飛行機ゲーム

WeChat キャッシュレスデーイベントでは、複数人が同時にプレイできる飛行機ゲームが提供されました。来場者は携帯電話を使って飛行機を操作し、射撃し、一定のスコアに達すると景品と交換できる。複数人でプレイするゲーム画面が大画面で表示されます。このアプローチにより、主催者と観光客の交流が促進され、観光客の待ち時間も短縮されます。飛行機ゲームのデザインは、WeChatの最初のゲームが飛行機ゲームだったことを人々に思い出させ、初心に戻る感覚を与えます。

（5）Xinbuインタラクティブバスケットボールシューティングゲーム

携帯電話を使用して、バスケットボールの方向と速度を制御し、バスケットを狙ってシュートします。最後の15秒間、バスケットが移動し、ゲームの難易度が上がります。ゲームは公式アカウントにリンクすることもでき、これは典型的なオフラインファン誘致ツールです。

画像の切り取りと変形

CSS の clip-path メソッドと SVG の clipPath メソッドを使用すると、グラフィックや画像を三角形や五角形などのカスタム図形にクリップできます。この機能を使用すると、画像をピースのように組み合わせたり離したり、ジグソーパズルのようにポリゴンをさまざまな形に動的に組み合わせたり、アニメーションの形で 1 つのアイコンを別のアイコンに自然に変換したりすることができます。このゲームプレイは、トランスフォーマーのような変換要件のある写真やプロジェクトのクールな表示と切り替えに適しています。現在、平均的な性能の携帯電話では、この効果がスムーズに実行されません。

要約する

H5は今後10年間でウェブの主流形式になるでしょう。現在、多くのアプリ、VR、ARとH5は接続されています。マーケティングにとって、H5はモバイル端末でのリッチメディア広告に最適な選択肢です。 H5 がもたらす新しい機能とゲームプレイを理解し、より多くの事例を読み、活動を計画する際にこの記事を読んでください。インスピレーションを得て、昇進や昇給を得て、人生の頂点に達するでしょう...