飲食店向け！既存アプリに簡単にエフェクトを追加して付加価値を上げる方法
湯気のエフェクトを使ってピザの熱々感を表現する例
はじめに
モバイルアプリを作ってみたものの、いまいち他のアプリと代わり映えなく、どうにか差別化したり付加価値を提供する方法を考えなければならないというシーンがあります。
特に小売店や飲食店などのアプリでは、基本的な機能は同じだったりするため、クーポンなどで一定のユーザーを掴めるものの、なかなか普及には繋がらないものです。
特にコスト削減のためにWebでデザインを組み立てるだけのソリューションなどを使用している場合は、カスタマイズしたくても難しく、なかなか差別化をはかることができません。
既存アプリがネイティブアプリであれば、意外と安価にエフェクトを加えて、ユーザー体験に付加価値を提供することができるかもしれません。
ここでは簡単に演出を追加したひとつの例を挙げたいと思います。
ポイント
- GIFアニメーションで動きを見せる
- 画面タップで湯気を出して演出する
- アプリにインタラクティブ性を加えて、ユーザー体験機会を増やす
- アニメーションとエフェクトの効果で美味しそうを際立たせる
解説
全体像
画面タップした際のエフェクトは以下のアニメーションのとおりです。
ループして表示されるGIF画像の上をタップする度に、湯気が出現し、上方向へ移動しながら消えていくのが分かります。
GIFアニメーション
iOSの標準の画像表示方法では、GIFアニメーションに対応しておらず、動きを見せることができません。
ここではオープンソースを活用して簡単にアニメーションできるようにしています。
GIFアニメーションは表示するだけでも価値があります。
静止画と動画とでは、ユーザーを引きつける効果が大きく異なります。
キャンペーンなど特別に引きつけたいものがあればアニメーションを活用すると良いでしょう。
湯気エフェクト
タップ検知で湯気が出るようなエフェクトを発動させています。
技術的にはSpriteKitを使用しています。SpriteKitとは、Appleが提供しているアニメーションや物理演算を使用できるフレームワークで標準で使うことができます。
そしてこの湯気のようなエフェクトも、Appleが標準で提供しているもの（Smokeパーティクル）を使用しているため手間なく簡単に実現できています。
エフェクト（パーティクル）は以下で詳しく紹介されています。
https://qiita.com/akatsuki174/items/11e740410177242b710d
インタラクティブ価値と商品価値UP
タップでリアクションが出るユーザー体験は、ひとつの満足を生みます。
インタラクティブ性を加えることで、差別化と話題性を作ることができます。
ここでは湯気という些細な機能ですが、アイデア次第で効果は上げることができると思います。
また、美味しさを際立たせ、美味しそうという感情を生み出すことにも役立ちます。
このピザの例では、アニメーションによってチーズが伸びる様子が表現できていたり、エフェクトでホカホカ感、あつあつ感のような通常では見えない温かさを表現したり、出来たてをお届けしますという感覚を表すことができます。
何も変化のない静止画と比較すれば、印象が大きく異なることに気づけるでしょう。
まとめ
ここでは本当に些細な簡単な例を示しました。
しかし想像しているより手間なく簡単に商品に動きと深みを持たせることができるということが重要なポイントです。
アイデア次第でユーザーに感動を与えることもできるかもしれません。
差別化や話題性を生む可能性を持っているアニメーションとエフェクトについて、もっと活用できる部分がないか考えてみても良いかもしれません。
他のエフェクトについては以下の記事でも紹介しています。
