NetEase の人気 H5 インタラクティブ ゲームプレイ!

初期の頃、H5 は NetEase のヒット作 H5 インタラクティブ ゲームプレイでした。実際には、クリックやスライドなどの基本的なジェスチャのみをサポートする、携帯電話の PPT に似ています。コンテンツの表示に重点が置かれ、インタラクティブなフォームが補完されます。

しかし今日、 H5 のゲームプレイは質的な飛躍を遂げました。インタラクティブなフォームは多種多様であるだけでなく、フォームとコンテンツを密接に統合することで、1+1 が 2 よりも大きくなる効果を生み出すこともできます。

今回は、最も人気のある H5 インタラクティブ ジェスチャをまとめます。

01 クリックインタラクション

クリックは最も一般的なジェスチャの 1 つであり、ページの遷移に使用できます。この種のインタラクティブなジェスチャでは、通常、クリック ガイダンスを設定する必要があります。

ガイドは、ユーザーが H5 を理解するのに役立つ注釈として機能し、ユーザーが H5 のアイデアに従ってプロットの展開を促進できるようにします。テーマに合わせたパーソナライズされたガイダンスデザインにより、ユーザーをすぐに状況に引き込むことができます。

例えば、Rednetの「希望の種を北京へ」では、ユーザーは荷物コンベア上の荷物をクリックして「開梱して商品を検査」したり、担当者の提案を確認したり、担当者の話を聞いたりすることができます。

H5 はスーツケースをクリックボタンとして使用し、ユーザーが北京に行くシーンを構築します。直接出席できない場合でも、会議に「参加」してその内容を知ることができます。

クリック ジェスチャは、テスト タイプの H5でもよく使用されます。ユーザーは画面をクリックしてさまざまなオプションを選択し、独自のテスト結果を生成します。

NetEase Dada の「あなたの哲学的気質をテストする」、「歓喜の歌であなたが何者であるかテストする」、「飼育マニュアル」はすべて、クリックするだけで簡単に完了できるテストタイプの H5 です。

02 コンボインタラクション

コンボインタラクションは主にゲーム H5 で使用されます。画面を連続してクリックすることでリズム感が生まれ、クリック回数とポイントランキングを連動させることで競争性が生まれ、共有が促進され、より多くの人の参加を促します。

この単一のインタラクティブな方法は操作が比較的簡単なので、時間制限、回数制限、その他のゲームプレイと組み合わせることができます。

NetEase Dadaの「マーベル映画10周年」H5では、サノスを「倒す」セグメントが設計されており、ユーザーは画面をタップして10秒以内にサノスを「倒した」回数を記録する必要があります。 10 秒後、ユーザーはコンボの数とネットワーク全体での順位を確認できるようになります。

「Protect Your Lucky Football」はコンボ数に制限を設けないH5です。コンボには量よりも正確さが求められます。フットボールの高さを制御するには、画面をクリックする必要があります。フットボールは高く飛びすぎて鳥や石柱にぶつかったり、地面に落ちたりすることはできません。

「中国70年を旅する」は、新中国建国70周年を記念してNetEase Dadaが制作したビデオです。

「祖国にいいね！」セクションでは、ユーザーは画面を繰り返しタップする必要があり、クリックごとに 1 ポイントとしてカウントされます。コンボ中に発生するハートの特殊効果の色が変わり、ユーザーに爽快感を与えます。

「いいね」というアイデアは、短い動画の「いいね」から生まれました。インタラクティブなジェスチャーは、ユーザーに馴染みのある形式であり、祖国への「応援」という肯定的な感情を促進し、体験と没入感を高めるのに役立ちます。

03 長押し操作

長押しでは、連続再生と画面のスムーズな遷移を確実にするために、ユーザーは指示に従い、H5 ページのボタンを長押しする必要があります。

長押しすると指を静止させて一時停止する必要があるため、ユーザーにとっては退屈に感じるかもしれません。設計時には、 H5 の再生進行状況を示し、ユーザーに再生時間の目安を示すのが最適です。

長押しインタラクションは、ワンショット形式の H5 でよく使用されます。ストーリーのつながりやショットの切り替えをテストすることが多く、適切に使用すればユーザーに良い体験をもたらし、集中力を高めて完了率を高めることができます。

「You and Me Back Then」では長押しアクションを使用して、ユーザーはすべてのコンテンツをピクチャーインピクチャー形式で視聴できます。

「武林外伝」「チャイニーズ・パラディン」「ヤング・ジャスティス・バオ」…H5は90年代以降の世代の子供時代の夏の映画を振り返り、子供時代の思い出を瞬時に呼び起こします。

「港珠澳大橋 1分ツアー」も長押しで進むと港珠澳大橋の景色が表示されます。ユーザーが飽きないように、H5 では再生の進行状況を示すために、一定の間隔で「移動」したキロメートル数を表示します。

04 長い画像の視差インタラクション

長い画像の視差インタラクションは、多くの場合、スライド ジェスチャと組み合わせて、H5 の連続再生を実現します。

視差アニメーションの移動速度はメインビジュアル画像の移動速度と異なるため、空間の階層感覚がより明確になります。

これにより、画像の鮮度が向上し、高密度コンテンツによって引き起こされる視覚疲労が軽減されます。長いテキストや画像を読む際の退屈さを軽減し、視覚効果によって H5 のスムーズな遷移をサポートします。

NetEase Dadaの「告白」では、この手法を使って下にスワイプすることでストーリーを進め、主人公の変化をユーザーに提示しています。スライド ジェスチャを使用してストーリーの再生を制御し、ユーザーの参加意識を高めます。

「私たちはあなたが望むすべての良いものを作るために一生懸命働いています」は、スライドする長い画像+視差アニメーションを使用して、ユーザーを1988年から2018年まで導き、Industrial Bankの30年にわたる発展の歴史を結び付けます。

「童話の中で君に会った時」は長い絵を使っていて、スライドするといくつかの小さな要素が散りばめられ、H5全体がクールで豊かに見えるようになります。

05 ドラッグインタラクション

ドラッグはスライドとは異なります。画面を押したまま、ある点から別の点にドラッグする必要があります。移動速度はユーザーが制御します。画像の表示や物語などのトピックを計画するのに適しています。

NetEase Dadaの「寝相コンテスト」H5は、スケルトンアニメーション技術を採用しています。ユーザーは小人の手足をドラッグして、ベッドの上で自分だけの寝相をDIYすることができます。

H5 では、シーンやキャラクターの外観を選択できるだけでなく、ベッドの上にマッチング用の小さなオブジェクトも用意されており、拡大または縮小して寝室を飾ることができます。

06 ペアフィンガーズームインタラクション

2 本指操作では、画面をスライドして何かを拡大または縮小するなど、ユーザーが 2 本の指で同時に画面をタッチする必要があり、画面遷移にもよく使用されます。

このタイプのインタラクションではジェスチャーの微細な操作が必要となり、ゲームプレイはやや複雑になります。しかし、インタラクティブ性は、一本指でクリックしたりスライドしたりするよりも強力で興味深いものです。

NetEase NewsのH5「コメントはニュースよりも真実に近い」はタイムトラベルの設定を採用し、2本指のズームインジェスチャーで次のページに入り、ボタンをクリックすると現在のページの詳細が表示されるように設計されている。各ページで一貫したジェスチャーを使用することで、ユーザーが理解しやすくなります。

07 サウンドインタラクション

触覚によるインタラクションに加え、聴覚によるインタラクションもあります。音声インタラクションの方法は比較的少なく、ほとんどが録音に関するものです。H5 の指示に従って段落を録音し、DIY で独自のオーディオを生成することができます。

NetEase Cloud Music の「Voice Live Single with a Story」では、ユーザーが録音したり、自分のストーリーを語ったり、録音ファイルを作成したりできます。録音が完了すると、コピーが含まれたカスタマイズされたポスターが生成されます。

H5 を音声で制御したり、自分で選んだ音楽クリップを選択して、完成した曲を DIY で作成したりできます。

NetEase Cloud Music の「Play Music, I'm Never Afraid」では、ユーザーは複数のサウンド効果から好みのスタイルを選択し、元の曲を調整してパーソナライズされた音楽を生成できます。

DIY 音楽は個人の好みを表現し、特定の社会的属性を持っています。

08 ライティングインタラクション

ライティングインタラクションは自由度の高いインタラクション形式であり、ユーザーはプロンプトに基づいて自由にテキストや描画を作成できます。

絵画を通して生み出されたイメージは個性がはっきりしており、ユーザーの感情も反映されています。ユーザーは自分で描いたキャラクターを前に、より熱心にH5に没頭することができ、離脱率も高くありません。

NetEase Dada の「Rio」は、ユーザーに一定のガイダンスを提供し、プロンプトに従って小さな人々、ロープ、パラシュートなどの画像を描くことができます。

これらの画像は線が少し荒く、動くと背景とのコントラストがはっきりしていますが、オリジナルのキャラクターなので、ユーザーは画像に対して寛容です。

テキストの書き込みインタラクションは、H5 のテストでよく使用されます。ユーザーはプロンプトに従って名前や言いたいことを入力し、ポスターを生成してテスト結果を取得します。

NetEase NewsのH5「あなたの名前の漢字を守ろう」では、自分の名前を入力して、守るべき絶滅危惧漢字を見つけることができます。

H5テストでは、日常生活ではあまり使われない珍しい文字が生成されます。漢字を「保護する」というテーマは、ユーザーにこれらの絶滅の危機に瀕した漢字を認識させるだけでなく、漢字を積極的に共有し、広める使命感をユーザーに与えることもできます。

09 重力相互作用

既存の物理法則をシミュレートすると、理解のハードルが大幅に下がり、計画への興味が増します。

携帯電話は、ハードウェアの面で技術開発の多くの可能性を提供します。重力センサー、ジャイロスコープ、速度アクセラレータなどのハードウェアデバイスを最大限に活用することで、H5のゲームプレイを革新し、没入感を高めることができます。

携帯電話を振ると、H5 は携帯電話が傾いている角度を自動的に判断します。重力インタラクションは高度な技術を要するため、特定のページで使用されることが多いです。

NetEase News の「時空恋愛工作」では、携帯電話の重力センサーを使用して携帯電話を振ることで主人公を起こし、ストーリーを開始します。

10 3D空間インタラクション

3Dインタラクションは主に3Dテクノロジーを使用して立体的なシーンを構築し、平面的な画像の限界を打ち破り、階層感覚を強調します。

しかし、このタイプのインタラクションは開発と設計が困難です。ユーザーの使用習慣を考慮すると、3Dインタラクションのゲームプレイは比較的単純で、クリックやスライドなどの基本的なジェスチャー操作と組み合わせられることが多く、3DはH5のハイライトとして登場します。

《となりのトトロ オンラインガチャポン本日オープン！ 》では、「ガチャポンマシン」や「金貨」といった要素を3D化し、本来は普通のプロポーションだったアニメキャラクターをQバージョンにしている。

カプセル玩具をひねるのは動的なプロセスです。2次元の平面画像を使用すると、インタラクティブな効果が明らかではありませんが、3Dオブジェクトはユーザーの存在感を強調し、カプセル玩具の未知の楽しさを復元し、H5をよりリアルにプレイできるようにします。

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

360°パノラマモードでは、ユーザーは上下左右にスライドできます。

このタイプの H5 は、VR のような形式で画面全体のインタラクションを実行し、H5 シーンのデザインに重点を置き、空間の 3 次元感が強く、画面の 360° 境界接続が滑らかであることを必要とします。

ただし、読み込むコンテンツの量が多く、H5のサイズが大きいため、再生中に画面がフリーズするなどの問題が発生する可能性が高くなります。

NetEase Newsの「百二十年」では、NetEaseの20年にわたる発展の歴史をユーザーに紹介するパノラマシーンが披露されます。ユーザーは携帯電話を360°回転させてパノラマ写真を眺め、H5が作り出した仮想シーンに浸ることができます。

著者: DaDaer

出典: NetEase H5 (wangyih5)