H5是什麼？如何製作？H5的7個案例分享

我到北京當交換學生的時候，在第一堂課，老師就說期末小組作品要用H5的形式呈現，當下我的頭上全是問號。到底什麼是H5？要怎麼做H5？為什麼在第一堂課就出現了我完全沒聽過的東西？

下課後趕緊搜尋百度，原來H5是中國常用的說法，指的是適合在手機上瀏覽的動態頁面。

經過在北京的一個學期，課堂上和實習中都接觸到一些H5頁面，我總算瞭解H5了。這篇文章將會介紹H5的案例、不懂程式也可以製作H5的工具。

H5是什麼？

當行銷人在說要製作一個H5的時候，並不是真的在說HTML5，也不是在特指某種技術或程式寫出來的網頁。

H5沒有一個明確的定義，最簡單的說法就是適合在手機上瀏覽的頁面。在中國大約是2015年以後被廣泛使用，而且因為中國幾乎人人都用微信，所以適合手機觀看的H5主要是透過微信轉傳，大家也比較常用微信內建瀏覽器來看H5。

H5時常被比喻成手機上的PPT，你可以像平常簡報一樣，放上文字和圖片，觀看H5的用戶點一下螢幕，就出現下一頁的內容；你也可以製作很多動畫或放上影片、背景音樂。厲害的話，你還可以製作互動小遊戲。

所以H5就是一種適合移動端的網頁形式，包含很多種技術。可以用來製作專題報導，也可以用來宣傳活動、讓用戶填寫問卷或互動遊戲等等。

看到這裡，你可能還是不太懂H5，那我們就先來看一些H5的案例吧。

以下H5的連結，建議用手機點擊觀看(點標題就可以囉)，如果能用微信app更好。用電腦打開的話有很大機率會出現錯誤。

每年中國兩會期間，媒體都會有特別企劃。這個H5主要是用一些動畫和數據新聞的角度，展現中國的變化。

這兩個分別是2017年和2019年兩會時，人民日報推出的H5。在《兩會喊你加入群聊》中，模擬微信群聊和朋友圈的畫面，介紹政府過去一年做了哪些事。《一根線能盤出啥》則是運用聲音和畫面的創意。

在兩會的H5之後，換一個輕鬆一點的類型。這個是清華大學的開年籤H5，總共就只有幾個畫面，和替換文字內容，讓大家在過年時玩抽籤遊戲，博個好彩頭。

和抽籤類似的還有騰訊在勞動節推出的測驗H5，有點類似心理測驗，總共有20個問題。

前面有說過H5像是手機上的PPT，這一個例子就非常像是PPT，除了翻頁的淡入淡出，幾乎沒有其他動畫。

這個H5是透過H5當中描述的故事，行銷建融家園。故事畫面會隨著你的手指滑動而前進。剛點開第一個畫面時會有點慢。

看完上面的7個案例，應該對H5有些認識了吧，其實就算不會寫程式、不會畫畫，也可以用以下這些網站，自己製作出一個簡單的H5：

這些線上製作H5的工具，基本上都有提供免費版，不過做出來的成品可能會在開頭或最後被放入廣告，也有一些功能會被限制。

想要自己製作一個H5是很容易的，可以參考以上這些網站提供的模板，自己再做一些修改。就像我最後也順利在期末交出H5作品啦~

每個製作H5的網站提供的功能會有些差異，可以比較一下，找到能滿足你需求的製作工具。

H5能傳播的多廣、讓多少人看到，除了H5的內容之外，還有這些小地方可以注意：

當你和朋友分享H5連結的時候，對方只能夠看到簡短的標題和摘要。寫得夠吸引人，才能讓多一點人願意點開連結。

在H5抽籤之後，或做完測驗，放上分享按鈕讓使用者可以把他的測驗結果分享出去，這也是一個增加曝光的方法。

H5通常是搭配微信公眾號發表，公眾號發表文章的時候可以設定一個原文連結，會出現在文章的最下方。

通常可以寫一篇公眾號文章簡短介紹H5，並叫讀者點擊下方的「閱讀原文」進入H5。

簡單分享我去交換時學習到的H5。我在技術這方面不是非常專業，如果覺得文章哪裡有誤，麻煩留言告訴我。

如果這篇文章有幫助到你，請點擊下方拍手圖示，為我拍手5下。我會收到Likecoin獎勵，支持我繼續經營部落格喔！

Facebook留言