H5って何ですか？ HTML5ページが何なのかを5分で完全に理解できる

H5 は突然人気になりました

WeChat と Moments の急速な発展により、H5 はダウンロードする必要がなく、クリックして使用できるという特性により急速に人気となり、ちょっとした話題になりました。テレビ、雑誌、屋外広告などの従来のメディアが年々減少しているのに比べ、ブランドマーケティングのデジタルおよびモバイル側面への投資は年々増加しており、さらにモバイルテクノロジーへの投資は全チャネル予算の中で最も急速に増加しています。 、他のチャネルよりもはるかに高い成長を遂げています。モバイル マーケティングは一般的なトレンドになっています。

では、H5 とはどのようなテクノロジーですか?

H5 とはどういう意味ですか? H5 は HTML5 の略称であり、高度な Web テクノロジーです。

htmlとhtml5の違いは何ですか?

ただ、一般に受け入れられている Web テクノロジーのバージョンは HTML4 であり、このバージョンは 1997 年にリリースされました。 H4 と比較して、H5 にはより多くのインタラクションと機能があります。最大の利点の 1 つは、モバイル デバイスでのマルチメディアのサポートです。

まだ理解できませんか？

このように言い換えると、私たちが普段目にする招待状、スライド、ミニゲームはすべて H5 Web ページであり、私たちがオンラインで通常目にする Web ページと本質的に同じです。

H5 は何ができるでしょうか?

ここでは大きく 3 つのカテゴリを作成しました:

1. ブランドのコミュニケーション: 一般に、ブランドのリリース、概要レポート、福祉の提供、人材の採用

2.プロモーション: 通常、グリーティング カードの招待状、ゲーム インタラクション、質問への回答に対する賞品の形式で行われます。

3. 製品の表示: 通常、ストーリー テリングやパフォーマンスの表示の形式で行われます。

この3種類のH5ページについてお話しましょう

ブランドコミュニケーション H5 - ブランドのマイクロ公式ウェブサイトに相当し、ブランドイメージの構築により重点を置き、ブランドの精神的な姿勢をユーザーに伝えます。コンテンツに関しては姿勢やテーマを提唱し、デザインに関してはユーザーにブランドに深い印象を残せるよう、ブランドの気質に合ったビジュアル言語を使用する必要があります。例えば、ブランドリリース型のブランドコミュニケーション、概要レポート型のブランドコミュニケーション、公共福祉提供型のブランドコミュニケーション、人材採用型のブランドコミュニケーション

デザイン方法ブランドコミュニケーション型H5ページ?

コンテンツについて

適切な活用 - 共鳴の模索

ホットスポットの組み合わせ - ビジネスセクターの完璧な統合

ビジュアルについて

全体 - 雰囲気のレンダリング

詳細なキャラクター化 - キャラクターと要素の調整

H5 事例評価の例:

ブランドコミュニケーション ブランドリリースタイプ

Tencent – アンダーライフ、想像力を超える

イベントプロモーションタイプ H5——イベント運営ページユーザーの共有とコミュニケーションを促進し、爆発的なコミュニケーション効果を生み出すには、より強力なインタラクション、より高品質、より話題性のあるデザインが必要です。 イベントプロモーション用のグリーティングカード招待タイプ、イベントプロモーション用のインタラクティブゲームタイプ、イベントプロモーション用の丁寧な質問回答タイプなど

イベントプロモーションH5

ページをデザインするにはどうすればよいですか? 🎜

コンテンツについて

クリックポスト - 適切なクリックベイトになるために、最初にボウルに来て、それについて話してください

参加感 - 敷居が低くて参加しやすく、コンテンツが共感を呼び、利益が転送につながります

ビジュアルについて

ディテールと統一性 - レトロなビジュアルスタイルの場合、フォントはモダンすぎてはいけません。ユーモラスで遊び心のあるトーンの場合、コピーライティングは感情的なコンテンツの場合は深刻すぎてはなりません。派手すぎないでください。

影響 - チタン製の犬の目を盲目にするのが最善です。そうすれば、ユーザーは「ショートオイルは良い、このページはちょっとおかしい」という気分でクリックして共有せずにはいられません

例:

への回答イベントプロモーション 丁寧なタイプ

Tufeng Travel Network: 9 年前に戻ったら、どんな人生を選びますか?

製品ディスプレイH5——製品機能の紹介に焦点を当て、H5のインタラクティブテクノロジーの利点を利用して製品の機能を完全に表示し、ユーザーの購入を引き付けます。たとえば、、ストーリーテリングタイプの商品ディスプレイ、パフォーマンスディスプレイタイプの商品ディスプレイなど

商品ディスプレイH5ページをデザインするにはどうすればよいですか？

コンテンツについて

良いストーリーを伝える - 共感を呼ぶ

差別化されたディスプレイ - 製品の個性とトーンを探す

ビジョンについて

overallall-明確で簡潔な説明 - 製品指向のパフォーマンス説明

Example：形式と内容の面で人々の心をつかむページは何ですか？

正式に——

1. スライドショー: 頻繁で小規模なニーズに適しています。 たとえば、コンテンツは定期的にリリースされ、マーケティングの予算はほぼゼロで、話題のトピックと組み合わせると、サイクルが非常に短くなります。

2. インタラクティブ アニメーション: 制作サイクルとコストが比較的高く、事前の計画が必要です。高品質の H5 には約 2 ～ 4 週間かかりますが、それ以上かかる場合もあります。例: 小規模および中規模の活動/ブランド イベントのコミュニケーション、大規模な活動/ブランド イベントのコミュニケーション。

3. 機能型: 軽いインタラクションと重い機能を備えた機能型 H5 は、より短い生産サイクルと低コストを実現します。成功の鍵はクールなインタラクションではなく、ユーザーのニーズの把握とその後の運用にあります。例：ブランドアカウントのファン運用など。

4. H5はどれくらいあなたの心に残りますか？

今年 Tencent が発表した「モバイル ページ ユーザー行動レポート」に示されたいくつかのデータによると、いくつかの参考情報を提供できます。読み込みに 5 秒以上かかると、ユーザーの 74% がページから離れます;

正午と午後 10 時はページ訪問のピーク時間帯です。

ほとんどのユーザー (89.9%) は上下にスワイプするか右クリックすることを好みますが、左クリックするのは 10.1% だけです。レベルが深くなるほど、失われる可能性が高くなります。5 ページ目に残っているのは半分未満 (48.2%) です。

平均共有率は 12.68% です。

H5 と情熱的な関係を維持するにはどうすればよいですか?

コンテンツ -

1. ストーリーテリング: H5 の形式がどれほど変化しても、常に価値のあるコンテンツが最優先されます。限られたスペースの中で、ストーリーを伝えることを学び、ユーザーの感情的な共鳴を呼び起こすことは、コンテンツの普及を大きく促進します。

2. シナリオベース: H5 の設定では、オフィスビルや地下鉄の駅などのシーンが統合されています。第一に、ユーザーは参加中に親近感を抱き、情報をより容易に受け入れることができます。シーンが伝えるブランド情報は、将来特定の場所でユーザーの意識を呼び起こし、ブランドに対するユーザーの印象を深めることができることが最も重要です。

3. 強力なインタラクション: インタラクティブな仕組みを追加することで、ユーザーは H5 が宣伝するブランド製品をさらに体験し、製品の購入意欲を高めることができます。

4. 参加意識: 製品自体の特性とユーザーの好みに基づいて参加メカニズムを設定します。

5. 社会性: ブランドがさらに広がるためには、社会性を H5 に統合し、ユーザーの社会的関係の連鎖を利用して広める必要があります。ソーシャル ニーズは、ソーシャル メディア上でのユーザーの存在の核心です。通常、ユーザーはチャット、支援、比較、自慢、のぞき見を通じて友人との社会的関係を維持または促進します

。したがって、H5 のデザインには、ユーザーが共有できるこれらの動機を組み込む必要があります。

H5 ページの種類はたくさんありますが、では、

H5 ページを作成するにはどうすればよいでしょうか?

実際、技術に詳しくない人でも H5 ページを作成することができます。詳細については、次を参照してください。 最新かつ最も完全な HTML5 開発ツールの推奨事項。 2017年（国内外含む）

作成する前に、まずH5ページのテーマ目標を確認する必要があります イベント運営H5ページを作成しますか？それとも、ブランド プロモーション H5 ページを作成しますか?商品紹介H5ページを作成してみませんか？それとも概要レポート H5 ページを作成しますか?

テーマを確認したら、写真、音楽、コピーライティングなどの素材を準備します。材料が準備できたら、H5ページの作成を開始します。

ただし、H5 ページの優れたデザイン品質は、そのコミュニケーション効果に直接影響し、ユーザーのブランドイメージの認識にさえ影響します。

以下のデザインポイントをここにまとめます:

1. 話題のトピックをチェックし、トピック効果を使用してください

あなたの H5 トピック ページが人気になるようにしたいです。また、ホットスポットをつかみ、オンラインで迅速にローンチし、ブランドを宣伝する機会を利用することも近道です。

2. 良いストーリーを伝え、感情的な共鳴を引き起こします

H5 の形式がどれほど多様であっても、価値のあるコンテンツが常に最優先されます。限られたスペースの中で、ストーリーを伝えることを学び、ユーザーの感情的な共鳴を呼び起こすことは、コンテンツの普及を大きく促進します。

3. 詳細と統一性

高品質のユーザーエクスペリエンスを実現するには、細部と全体の統一性を考慮する必要があります。レトロなビジュアルスタイルの場合、フォントはモダンすぎてはいけません。ユーモラスで遊び心のあるトーンの場合は、コピーライティングが深刻すぎてはならず、アニメーションが派手すぎてはいけません。

4. テクノロジーを合理的に使用して、スムーズなインタラクティブなエクスペリエンスを作成します

テクノロジーの発展により、今日の HTML5 には多くの優れた機能があり、描画、消去、振る、重力感知、消去、3D ビューなどのインタラクティブな効果を簡単に実現できます。 (ご興味がございましたら、この Web サイト http://www.php.cn/xiazai/js/html5 をクリックすると、H5 ダイナミック エフェクトが表示されます)。混乱して肥大化したページにさまざまな種類のアニメーションを詰め込むのではなく、テクノロジーの合理的な使用を提唱し、ユーザーにスムーズなインタラクティブなエクスペリエンスを提供することに重点を置いています。具体的な制作チュートリアルについては、こちらをご覧ください: 初心者に適したゼロベースのHTML5独習チュートリアルおすすめ6選

結論

携帯電話のハードウェアのアップグレードに伴い、HTML5技術の発展と、 WeChat プラットフォーム、HTML5 クロスプラットフォーム、低コスト、高速イテレーションの利点がさらに強調され、モバイル インターネットのトレンドにあるビジネス オーナー、ブランド、デザイナー、開発者にとっては最高の時代となるでしょう。今後もさらに優れたH5ページが登場するはずですので、楽しみに待ちましょう。

【関連おすすめ】

1.2017年におすすめの最も人気のあるHTML5ビデオチュートリアル5選

2.Webフロントエンド開発ツールランキング：ダウンロードにおすすめのHTML開発ツール8選

3.h5開発上位 3 つの HTML5 ページ作成ツールの評価

4.【H5 開発ツール】2017 年におすすめの HTML5 アプリケーション開発ツール 10 選