原点共有セッション｜HTML5制作ツールと制作チーム（事例分析付き）_html/css_WEB-ITnose

下記の主な作品にはすべてH5リンクが付いており、直接リンクをクリックすると作品をご覧いただけます。

Web アプリ、ハイブリッド アプリ、ネイティブ アプリ

HTML5 は、プラグインをインストールせずにブラウザーによって解析および実行される Web テクノロジーです。 HTML5 は、HTML、CSS、JavaScript を含む一連のテクノロジーの組み合わせを広く指します。一般的にH5と呼ばれているのは国内の略称で、主に商品の展示やキャラクター紹介、招待状、ミニゲーム、抽選会など、WeChatを通じたモーメンツや友達への拡散の媒体として使われています。

H5 は Web アプリであり、通常ダウンロードするアプリとは異なります。そこで、Webアプリ、ハイブリッドアプリ、ネイティブアプリの違いについて簡単にご紹介します。 H5 制作プラットフォームと優秀な H5 クリエイティブ チームも同様です。

Web アプリ: Html5 言語で記述され、ブラウザーによって直接解析されるため、ダウンロードしてインストールする必要はありません。利点は、開発コストが低い、サイクルが短い、更新が速い、普及効果が高い、複数のプラットフォームと端末にまたがることができること、欠点: ユーザー維持率が低い、UI とインタラクティブなエクスペリエンスが貧弱、ライフサイクルが短い、模倣され盗用されやすいことです。 。

たとえば、W の奇妙な電話と、呉亦凡が軍隊に入隊する TGideas のインタラクティブビデオは友人の輪全体に広がり、その後、誰もがそれを真似し始めました。

ライトアプリ: ダウンロード不要ですぐに検索して使用できるフル機能のアプリで、ネイティブアプリと同等またはそれを超えるユーザーエクスペリエンスを備えているだけでなく、検索性とインテリジェントな配信特性も備えています。ウェブアプリの。

ハイブリッド アプリとは、半分がネイティブで半分が Web であるハイブリッド アプリを指します。ダウンロードしてインストールする必要があります。見た目はネイティブ アプリに似ていますが、小さな UI Web ビュー (Web コンテンツはアプリに埋め込まれており、通常は HTML 形式の Web ページ) しかなく、アクセスされるコンテンツは Web です。ネイティブ アプリと同様のエクスペリエンスを備えていますが、それでもテクノロジーやネットワーク速度などの多くの要因によって制限されます。

ネイティブ APP は、ダウンロードしてインストールする必要があるネイティブ プログラムを指し、通常はオペレーティング システムに依存し、強力な相互作用があり、拡張性が高くなります。利点: 優れたユーザー エクスペリエンス、安定したパフォーマンス、高速な操作、帯域幅コストの節約、ローカル リソース (アドレス帳、フォト アルバム) へのアクセス、高いユーザー維持率 欠点: 高い配布コスト (適応)、高いメンテナンス コスト (古いバージョンの維持)。 ）、更新が遅いです。

私はこれらの概念を技術レベルで分析するのではなく、運用の観点から理解しています。次に、H5 制作プラットフォームと優秀な H5 クリエイティブ チームについて説明します。

H5 制作プラットフォーム

現在、iH5 と Epub360 は、強力な機能、複数の効果、柔軟性を備えた比較的プロフェッショナルなプラットフォームですが、学習コストが比較的高くなります。シンプルで便利なプラットフォームとしては、Yiqixiu、Yunlai、MAKA、Chupage、Tuzhan などが挙げられます。これらは使いやすく、基本的なクリエイティブのニーズを満たすことができますが、コンテンツの表現方法は限られています。

iH5

iH5 (Interactive Master)、www.ih5.cn は、マイクロ公式 Web サイト、ページめくり表示、テスト問題、インタラクティブ ビデオ、ミニ ゲーム、コメント、抽選、交渉など。インタラクティブな方法も非常に多様です: クリック、スライド、消去、衝突、ドラッグ、シェイク、重力感知など。

これらはユーザーによって行われた非常に興味深い小さなケースです。チェックしてください:

• 一流の学者にとって、A を取得するのは非常に困難です。 http://www.ih5. /idea/q_My_je
• 街の光が見える http://www.ih5.cn/idea/tEBbO6M
• Leading the Future・デジタルミュージックアルバム1周年 www.ih5.cn /idea /SpyOa4b
• ミニゲーム: 酵母を盗む http://www.ih5.cn/idea/I0EAwmY

Epub360

Epub360 の特殊機能: svg、シーケンスフレーム、投票支援コンポーネント、システムパラメータ（公開アカウントをフォローするかどうかの決定、および携帯電話システムの識別）。彼らは、HTML パッケージのエクスポート、認証情報の変更、ドメイン名のバインド、サイズのカスタマイズ、プロモーション チャネルの統計、ビジネス オーナーのサブアカウント管理など、企業向けに多くの商用サービスを開始しました。

Yiqixiu

Yiqixiu は、わずか 16 か月で 1,000 万人以上のユーザーを獲得しましたが、達成できるインタラクティブな効果は限られていますが、シンプルで使いやすく、ユーザーに多くの機能を提供します。材料。豊富なマテリアル ライブラリ、ワンクリックでマップに参加、花の送信、投票、特殊効果 (花火、降雪) など。

A ラウンドの資金調達の後、Yi Qixiu の製品戦略も国内で調整されました。H5 から拡張して軽印刷デザイン プラットフォームを構築する一方、海外企業が設立され、10 月に海外製品が発売されました。去年。

優れた H5 チームとケース

H5 制作プラットフォームに加えて、W Company、TGideas、Penwo、Huanshi Interactive、Hegu Interactive、LxU Studio など、多くの優れた H5 チームがあります。 。彼らは、主にトレンドを設定する高品質の H5 作品を多数制作し、友人の輪を圧倒しました。

TGideas

Tencent Interactive Entertainment Business System に所属し、運用とマーケティングに重点を置いたユーザー エクスペリエンス デザイン チームです。業務範囲には、製品パッケージ、広告クリエイティブ、ブランド構築、インタラクティブが含まれます。デザインを待ってください。主な作品:

• 人生の下、想像の上
• ウー・イーファン、軍隊に入隊
• 平行世界の美しさを発見。

ケース: モバイル ページのユーザー行動レポート: http://tgideas.qq.com/act/a20150428report/index.html?ADTAG=tgi.wx.relay

ページめくりのエフェクトといくつかの簡単なアニメーションを除いて、H5 全体は非常にシンプルですが、内部のデータは注目に値します。 H5 の訪問のピーク時間は正午と午後 10 時に集中します。H5 が 5 秒以上ロードされると、ユーザーの 74% があきらめてしまいます。したがって、5 番目の最適化のステップは非常に重要です。ページが 50% を超えています。

W Company

メイン H5:

• この未知の電話に応答する勇気はありますか?
• ハン・ハンを段階的にはっきりと見てください
• ディアンピン: お父さん、会いたいです
• ディアンピン: 私たちの間には一言しかありません
• 一言ミスター. Shocao のラブレター

などはすべて誰もが知っています。

事例: Shocao さんの Love Letter、http://love.bungba.com/

Shocao さんの Love Letter は個人的にとても好きな作品です。 H5 全体はあまりインタラクティブな手法を多用せず、大きなテキストと白黒の画像で男の考えを静かに伝えます。サウンドトラックの選択も非常に考えられています。文字数もページ数も多いですが、それが好きな人はこの H5 の全体的な効果を軽視することはできません。

W は H5 を主に行うチームだと思われていますが、そうではありません。彼らはブランド戦略を推進するフルブランドコンサルティングをベースとした新しいマーケティングエージェンシーです。主な作品は「H5」「TVC」など。

Pengwo

QQ Music、Tiantian Xuan Dou、Mobile Butler などの多くの H5 ページの制作に協力してきました。ブランド戦略を見据えた新しいメディアビジュアルデザイン会社です。個人的にチームのH5テーマは非常に特徴的で、全体的なビジュアルスタイルも良いと感じています。

ケース: Nubia z9 携帯電話発売カンファレンスの招待状、http://weixin.nubia.cn/share/z9

主な目的は、発売カンファレンスの情報と簡単な製品情報を広めることです。新製品の発売を促進するために、H5 には最初と最後のページに加えて 5 ページしかなく、真ん中の 3 ページには電話機のすべての情報が表示されます。

1. 電話機には枠線がありません。ボタンはありません
2. 超高度なカメラ構成と星を撃つ伝説的な能力を備えた携帯電話
3. 優れた音質。

Huanshi Interactive

ソーシャルネットワークに焦点を当てたブランド構築会社。消費者の洞察に基づいたデータマイニングと革新的なサービスを通じて、ソーシャル ネットワークにおけるブランドのデジタル影響力を再構築することに取り組んでいます。主要顧客: Durex、JD.com、Lenovo などDurex Art Gallery と Loneiness Laboratory は、非常に特徴的な H5 作品です。

http://m.durex.com.cn/qr/artmuseum/

間違いなく今はH5作品がたくさんありますが、友達の間で人気のあるH5作品を作ることができれば、創造的に考えなければなりません。私たちのプラットフォーム上のユーザーが名前を入力するテスト質問を作成し、これは 5,000 万回以上再生されました。すべてのチームが W Company、Kris Wu の入隊、または数日前の「2016 WeChat Open Class PRO バージョン」のような H5 作品を制作できるわけではありませんが、創造性は無限です。

コードを書くことができないデザイナーや新しいメディア オペレーターの場合は、H5 制作プラットフォームの使用を選択できます。多くの優れた H5 作成プラットフォームは無料で、自分のニーズに応じて選択できます。

この記事は、Qidian Open Class Group 7 (WeChat グループ) で iH5 (Interactive Master) プラットフォーム オペレーター @豆豆が開催した H5 共有および交流ミーティングであり、Everyone is a Product Manager Team@Half によって主催されました。速記。編集者が変更を加えました。