タオル1枚あれば恐るに足らず♨︎

-peko’s Hatena Blog ⸜(* ॑꒳ ॑* )⸝ダァーッ!!-

ホットペッパーグルメのハロウィンキャンペーンがちょっと面白い

こんにちは、こんばんは、おはようございます天さんですダァ━ヾ(´∀`*)ノ━ッ!!!

居酒屋でも調べるかと思いホットペッパーの東京TOPを開いたら
ハロウィンキャンペーンの謎のゴーストが画面に現れてびっくり! 
なぜかmacchromeだと表示されてませんが*1
東京のグルメ・レストラン予約 | ホットペッパーグルメ

こういったコミカルな取り組みしているとホッコリ(*´ω`*)

 

www.youtube.com

軽く見てみる

既存がどんな感じかわからないので
最初jsかなと思って興味本位で見たけど違った

  • jQuery 1.10.1
  • JsRender
  • SWFObject

あたりを使ってますね、、、

ソース見てたら動かしてるのはcssの@keyframesですね

developer.mozilla.org

どうやらこのゴーストはflying-ghost名前はjackとwillというらしい!

<label for="bannerTorigger" class="flying-ghost" data-ghost-name="jack"></label>
<label for="bannerTorigger" class="flying-ghost" data-ghost-name="will"></label>

これを動かしているのは@-webkit-keyframes~の部分ですがファイルじゃなくてベタ

@keyframes ghost-wobbling-jack

@-webkit-keyframes ghost-wobbling-will

@-webkit-keyframes say-click-me

整形してみると800行以上あったので記載しませんがやはり普通によくできてますね

まとめ

このキャンペーンの良いところは2つ
1.ユーザーの動線が

  1. ゴーストを押させる↓
  2. キャンペーンページ的な画面表示↓
  3. 対象店舗の検索結果↓
  4. ユーザーにキャンペーン店舗を無駄に意識せずに選ばせる事が可能!

というようにユーザーを迷わせない事

2.忘年会や新年会のような後続のキャンペーンを邪魔しないというところ
ハロウィンはピンポイントイベントなので特に

他の企業でいうとキャンペーンを恐ろしくシンプルにして誘導する事が多い、またこの会社の競合他社が意図不明なキャンペーンやっていたりするのを見るとこの合理性は結構好きかなと*2

 

********************* 後記 *********************
ちょっと調べてみたら推奨環境があるんですね
https://help.hotpepper.jp/app/answers/detail/a_id/5253/kw/
このページのInternetのIを大文字で表記している誤記があるw(2017/10/12)

*1:そういう仕様なのかな?

*2:当然ですがソースの中身の良し悪しは知りませんよw