H5 の作り方が分かりませんか?完全なH5ケースのアイデアはこちら

友人の皆さん、あなたの友人の輪に絶えず溢れていた NetEase H5 イベントをまだ覚えていますか?インターネットデザイナーとして、恥ずかしさの涙が口の端から流れ出ました。私はとても欲深く、嫉妬深かったのです。同じ義務教育９年間なのに、なぜ彼らの活動はこんなにも効果的なのでしょうか？他の人がやると爆発するのですが、私がやると失敗します。優れた H5 にはどのような要素が含まれていますか?

概要：

1. イベント概要
2. テーマコンセプト
3. ビジュアルスタイルのデザイン
4. インタラクティブアニメーションデザイン
5. 適応について
6. データレビューの概要

1. 活動概要: 概要

H5活動を行う理由は？

このイベントは、IT 企業の新しく設計された IP イメージである Light Bulb とそのファミリー メンバーをキャリアとして使用し、平安銀行の企業ビジネス センターと Planet B が共同で開催しました。

この活動は、企業ビジネスミドルオフィス製品のプロモーションを目的としています。wowdesignチームがデザインした企業IT IP - Dengbaozaiとそのファミリーブランドイメージは、Dengbaozaiフラッシュチェックインイベントと組み合わされ、オンラインとオフラインで共同で運営され、企業ビジネスミドルオフィスのプロモーションを行います。

2. テーマの構想: H5 テーマ

1. H5型の選択

どのような活動テーマがユーザーの注目を集めることができるでしょうか?どのようなコンテンツがユーザーの共感を呼ぶのでしょうか?

これにより、参加者は自発的にメッセージを転送し、この仮想アクティビティを利用して自分の個性を友人に表現するようになります。したがって、活動の方向性が特に重要になります。私たちは、市場における既存の H5 活動を分類し、それらがユーザーのどの問題点に対処しているかを分析し、そこから方向性を得ました。

1) テストクラス

興味深く低コストな方法で自分自身を理解したいというユーザーのニーズを満たします。

2) ニュースホットスポット

話題やイベントを素材にしており、リアルタイム性の高さ、ユーザーとの距離感への配慮、参加感や真実味があるのが特徴です。

3) インタラクティブゲーム

非常にインタラクティブであり、その特徴は主に楽しく、使いやすく、喜びと達成感を与えることです。

4) 公共の福祉

環境保護、絶滅危惧動物の保護、高齢者介護など、社会のホットな問題を題材に、社会の焦点となる問題から出発し、社会的責任を示し、深い教育効果と警告効果を持っています。

5) ソフト記事ストーリー

それらのほとんどは、個人的な経験や物語に基づいており、人生、仕事、人間関係におけるよく知られた恥ずかしい事柄であり、間接的に特定のマーケティング目的を達成します。

2. ユーザーの参加と転送に影響を与える要因は何ですか?

ユーザーの関与と核分裂データの転送は、アクティビティの成功の尺度となります。ユーザー心理の観点から見ると、影響要因は、自己陶酔的・誇示的心理、共鳴心理、良好な視覚効果などです。

3. 現在のホットな話題とユーザーの心理状態

疫病の影響で、人々の心理や経済は大きな影響を受け、不安や失望が高まり、人々は感情を表現することを望んでいます。

4. 総合分析の結論

• 流行中のユーザーの心理状態と相まって、流行がユーザーの生活、仕事、経済に及ぼす影響。
• 画面をスイープする要素の「共鳴」を活用し、身近なネットの流行語をタグキーワードとして組み合わせることで、ユーザーの自己表現や現状共有の要望に的確に応えます。
• テストタイプのゲームプレイを使用して、ユーザーが 2020 年の自分の生活状況をテストして選択し、自分自身を理解し、現在の状況を共有できるようにします。

そのため、ユーザーがキーワードを選択してテストし、2020 年の生活状況レポートを生成することで、ユーザーの心に響き、共感を呼び、この活動に参加して推進できるようになることを願っています。そしてテーマ「2020年の心のこもった言葉を選んでください」を選択してください

3. UIスタイルデザイン: H5 STYLE

NetEaseなどのプラットフォームでの過去のH5の事例を分析すると、デザインスタイルはメンフィススタイル、ヴェイパーウェイヴグリッチスタイル、イラストスタイルなど、比較的若々しく、活気があり、表現力豊かなスタイルがほとんどです。弊社のIPイメージの線画スタイルとテーマを組み合わせて、最終的にメンフィス風のデザインスタイルに決定しました。

このスタイルは、素朴で面白いものから奇妙で変なものまで、さまざまな個人的な文化的意味合いを表現できます。明るくユーモラスで彩度の高い明るい色調の使用は、ユーザーに強い感覚刺激と豊かな感情を与え、このイベントのさまざまな感動的なスピーチシーンにぴったりです。

デザイン表示:

4. インタラクティブなダイナミックエフェクトデザイン: ダイナミックエフェクト

H5 では、考える必要のないシンプルなインタラクティブ操作が基本要件であり、クールで楽しいインタラクティブ効果は必須のボーナス アイテムです。インタラクティブ効果は、次の 3 つの側面に分類されます。

1. 操作ガイドアニメーション

ホームページのh5テーマを明確に説明した後、まずユーザーを次のタグ選択ページに誘導する必要があります。そのため、ボタンは最も快適なクリック位置にあり、最も強力な操作プロンプトを備えている必要があります。そのため、ボタンの呼吸とズームのアニメーションプロンプトは良い選択です。

2. インタラクティブなトランジション効果

インターフェース遷移要素とインターフェース要素の開始および終了アニメーションの一貫性により、インターフェースがよりスムーズで一貫性のあるものになり、より優れた操作エクスペリエンスを提供できます。

3. タブ選択ページでのタブ反転効果

タグ選択ページは、製品全体の中核となるインタラクティブ部分です。使いやすさという基本的な操作インタラクション要件を満たすだけでなく、操作の楽しさを高め、タグの3D被写界深度回転や反転操作、クリックして選択する興味深い動的フィードバックなど、ユーザーに驚きのインタラクティブ効果をもたらすことも必要です。

V. 適応について: 適応

1. スクリーン適応

16:9 以上のフルスクリーンのモバイル フォンに適応するには、ページをメイン レイヤー、要素レイヤー、背景レイヤーに分割する必要があります。

1) メイン層、要素層

各要素は対応する関係に配置する必要があります。たとえば、画像を切り取ってメインレイヤーを画面の中央に調整し、要素レイヤーと上下の距離を決定します。

ここでのデータは、適応後の要素の重なりの問題を回避するために、短い画面 (16:9、つまり iPhone 6) を基準として、短い画面から長い画面に適応させる必要があることに注意してください。

2) 背景レイヤー

背景画像は、画面サイズに応じて拡大縮小され、画面いっぱいに表示されるようにトリミングされます。したがって、背景レイヤーは通常、切り抜きや拡大縮小の際に大きな視覚的な違いが生じないように、比較的単純な画像になるように設計されています。

2. 結果ページのスケーラビリティの適応

タグ カテゴリを選択する H5 アクティビティでは、結果ページにユーザーが選択したタグを表示する必要がありますが、ユーザーが選択したタグの数は不明であるため、結果ページの長さの調整という問題が発生します。

そのため、ラベル表示部分の背景色は単色または両面連続画像にする必要があり、両面連続画像の高さは 1 行のラベルの高さと一致している必要があります。ラベルの追加行ごとに、対応する高さの両面連続背景画像を追加して、背景ページの高さが常に対応するラベル数に必要な高さに調整されるようにします。

6. データの概要

1. ページビュー（PV）とユーザー（UV）

活動の効果を検知するために、活動期間ごとにデータプラットフォームから視聴回数（PV）とユーザー数（UV）を取得し、活動の拡散効果を判断し、露出回数、チャネル品質、タイトルコンテンツの魅力などの影響要因を分析しました。影響要因を継続的に最適化することで、計画された時間内に期待される活動効果が達成されることを保証できます。

2. ファネルデータ

ファネルデータを通じてユーザー離脱を分析することで、離脱の理由（ページの操作手順が明確かどうか、ページコンテンツが魅力的かどうか、ページのユーザビリティ）をさらに分析でき、操作手順の最適化、コンテンツデザインの最適化、ユーザビリティチェックに役立ちます。

3. このH5イベントは改善できる

1) UIスタイルはテーマに沿ったものにする

テーマ表現の面では、まず、疫病流行期の心を打つ活動テーマとして、悲しみと疫病流行の雰囲気を視覚的にうまく伝えることができず、活動への没入感が不十分で、ユーザーの活動テーマに対する認識が十分に明確ではなく、むしろ登宝子のIPスタイルの継続となっています。

スタイルの選択：このh5デザインは、新しく生まれたIPイメージ「電球」を視覚KV本体として、IPイメージの初期の表現形式は線画スタイルであり、他の表現形式はまだ拡張されていません。この場合、メンフィススタイルの線画は必然的な選択です。

したがって、IP イメージが成熟し、より豊かなスタイルになった後は、イベント全体のスタイルを実験して、イベントのテーマの最適な視覚表現を見つける可能性が高まります。

2) モーションエフェクトには大きな進歩が必要

携帯電話の性能向上に伴い、クールで斬新な h5 アニメーションは、ユーザー エクスペリエンスを向上させ、ユーザーの好奇心と注目を集める優れた方法となっています。しかし、これには開発リソースへの多大な投資と、デザイン側でのモーションエフェクトの設計と研究が必要になります。

TmallとNetEaseの最近のH5アニメーションでは、3D視覚効果と3D被写界深度操作が多用されており、H5の革新的な体験に大きく貢献しています。今回のイベントではアニメーション分野にまだまだ研究の余地が残されています。

3) 運用上のコピーライティングはもっと目を引く必要がある

情報爆発の時代において、目を引くタイトルがなければ、膨大な情報の中で沈黙する運命にあります。

そのために、ローンチ後に大量のユーザーリサーチを実施し、ニュースでよく使われる3分割タイトル構造と合わせて、ビジネスプロモーション志向、リアルタイムホットスポット志向など、タイトルの方向性を複数試しました。 ABテストやユーザー調査も実施しました。その中で、リアルタイムのホットスポットフィードバックを備えたタイトルが最も優れていますが、ビジネス向けのタイトルは C エンドユーザーにとって魅力的ではありません。

そのため、今後B面商品をデザインする際には、特別な要件がない限り、ユーザーが気にしているホットな話題や気になるポイントをベースにタイトルやコンテンツをデザインするようにしてください。

4. 結論

• イベントを設計する前に、設計の背景を明確にし、対応する設計テーマと方向性を決定し、どのようなイベントテーマがユーザーの参加を引き付けることができるかを決定する必要があります。
• H5 には、メンフィス スタイル、ヴェイパーウェイヴ グリッチ スタイル、イラストレーション スタイルが適しています。メンフィス スタイルは視覚効果を生み出すのが最も簡単ですが、これらすべてがテーマに適合し、イベントのテーマの雰囲気を表現するのに役立つ必要があります。
• ユーザー エクスペリエンスを確保することに基づいて、H5 アクティビティは楽しく興味深いインタラクティブ効果を追加することができ、これはプラスになります。
• 市販されている携帯電話はサイズがさまざまであるため、適応の問題を考慮する必要があります。
• オンライン化後のデータのレビューと要約は、問題点を発見し、次回のイベントをより良くするのに役立ちます。魅力的なタイトルは、成功の半分を左右します。

著者: WOWdesign

出典: WOWdesign