アイデアを活かして簡単にエフェクトを追加してクーポン配布の付加価値を上げる方法
雪のエフェクトを使って季節に合ったクーポンを演出する例
はじめに
モバイルアプリを作り、キャンペーンやクーポン配布の仕組みを作ったものの、差別化や変化をつけられずマンネリ化していると感じることがあると思います。そして機能としては満たされているため、デザインの見直しや変化をつけることにおいてはどうしても後回しになってしまうという部分でもあります。
特に小売店・飲食店などのアプリでは、ある程度基本的な機能が決まっていたり、統合プラットフォームやソリューションを活用して共通化されていることで、他アプリと比較して代わり映えのないものになっていたりします。
オリジナリティを出したいと思いつつも、どこから手を付けてよいか分からず、アイデアが浮かばないということもあると思います。
既存アプリがネイティブのiOSアプリであれば、思いの外簡単でかつ安価にUI/UXに付加価値を出すことができるかもしれません。
ここでは前回に続き、くじ引き要素のあるクーポン配布を例に、季節に合わせたエフェクトを使って演出する例を紹介します。
前回の記事はこちら
ポイント
- 画面を開くと雪が降ってくる
- 画面タップでプレゼントボックスが天から降ってくる
- プレゼントボックスをタップすると、クーポンがもらえる
- アプリにインタラクティブ性を加えて、ユーザー体験機会を増やす
- アニメーションとエフェクトの効果でオリジナル性を出す
解説
全体像
画面タップした際のエフェクトは以下のアニメーションのとおりです。
画面を開くと、自動的に雪が降ってきて、画面タップと同時に、プレゼントボックスが天から地面に降ってきます。
プレゼントボックスをタップすると、クーポンが貰えます。
クーポンはアタリを強調するように拡大されて表示されます。
クーポンの内容は、おみくじのようにユーザーによって変化するようにしています。
プレゼントボックスの落下エフェクト
こちらも技術的にはSpriteKitを使用しています。そして物理演算を使用して重力を持たせています。
したがってある程度地面に向かって加速して落下します。
重力や物体の反発具合など調整していますが、基本的に動作自体は物理エンジンに任せるため簡単にプログラムを組むことができます。
プレゼントボックスが地面にぶつかるとバウンドしているのに気づくと思います。
クーポン表示エフェクト
こちらもSpriteKitを使用してエフェクトをかけています。
ギフトボックスをタップした際に、物体を何倍拡大するのか、どのような効果で拡大させるのかを設定しています。
具体的には2.5倍の大きさにフェードインするように設定しています。
オリジナル性とインタラクティブ価値
タップして動きがあるインタラクティブ性は、UX的にひとつの満足を生みます。
このクーポン配布の例では、季節限定のようなものを想定しています。
クーポンに限らず、おみくじ、ゲーミフィケーションの類でも活用できると思います。
ゲームアプリ以外ではあまりありませんが、ゲームのガチャのような表現に使えますね。
物理エンジンを使用すると、オブジェクトにちょっとした重量感を持たせることができるため、実際に手に入れているような感覚をユーザーに与えることもできます。
また、デザイン自体もイラストではなく実物に近い画像を使うことで（メタファ）、より現実的に感じさせることもできます。
ひとつひとつは些細な機能ですが、アイデア次第でかなり応用が効きそうな部分です。
まとめ
ここではくじびき要素のあるクーポンというある程度具体的な施策として紹介しました。
Appleが提供している効果もまだいくつかあり、ある程度効果を調整できるため、やりたいと思っている演出が実は簡単にできるかもしれません。
よりユーザー体験を高めたり、満足につながる施策のひとつとして、また、差別化と話題性を持たせるために、できる部分で大きな効果を出せるようなアイデアを考えてみても良いかもしれません。
