浪客劍心官網設計解析|視覺切割與動態巧思的 UX 範例


浪客劍心日文官網設計的小巧思

浪客劍心(日語:るろうに剣心 -明治剣客浪漫譚-)進入最終章的宣傳網站
藏了不少設計上的小巧思,值得觀察。

浪客劍心 最終章 官方網站

他們很聰明地把直式海報與電影片段做對半切割:
一來不需要從海報 PSD 中額外拆解元素,二來也能透過右側的影片動態,直接讓使用者感受電影氛圍。

浪客劍心網站橫幅畫面

還記得以前做 Samsung Fan Club 的時候,最喜歡的就是每個月可以做品牌與電影的聯名宣傳。
我總會想辦法把電影裡的元素轉為網站動態效果,讓影迷們在瀏覽時小小驚豔一下。

目前這個網站唯一的小敗筆,大概是一進站的影片 Popup。
雖然強化氛圍,但對第一次進站的人來說稍微有點干擾。若改成點擊後播放,體驗會更理想。

影片Popup畫面

Loading 畫面則讓人很有感。簡單的「十字刀疤」動畫,對粉絲來說就已經夠驚喜了。
(對,就是我本人。)

網站 Loading 畫面

手機版 RWD 的做法也不錯,移除影片後仍保留強烈的視覺感受。

手機版 RWD 設計

臉書分享圖唯一可惜的地方,就是右邊的白底如果能改成黑色,整體視覺一致性會更完整。

臉書分享圖範例

雖然因為疫情電影延期上映,但我還是會持續追蹤這波宣傳,
期待能在電影院再次見到拔刀齋。


如果你也喜歡觀察網站裡的小巧思,
或者正在煩惱品牌網站該怎麼做出風格與差異,歡迎聊聊!

查看更多品牌網站觀察與設計思考:超能力設計戰隊官網
Email:[email protected]

Published by Genie Chen

Genie Chen 陳小吉 1981/8/1 A型 獅子座 Innovation Plus Creative Lab 超能力設計戰隊隊長兼網頁視覺設計師