アイデアを活かして簡単にエフェクトを追加して付加価値を上げる方法
花火のエフェクトを使ってピザの大輪を夜空に彩る例
はじめに
モバイルアプリを作ってみたものの、いまいち他のアプリと代わり映えなく、もうひとつインパクトが足りないと感じることがあると思います。そして、差別化や付加価値の提供を検討するもののアイデアが浮かばないということがあります。
特に小売店・飲食店などのアプリでは、メニューや地図表示、クーポンやチラシなど基本的な機能はある程度決まっており、デザイン性の違いくらいに感じてしまいます。
口コミでアプリの普及が見込めるような要素を入れたり、ブランド力を強化したり、毎日起動させるモチベーションになるようなゲーミフィケーションを意識したり手はありますが、なかなか手が回らないものです。
また、Webでデザインを組み立てるだけの共通プラットフォームなどを使用している場合は、カスタマイズするにも制限があり、なかなか差別化をはかることができません。
既存アプリがネイティブアプリであれば、想像以上に簡単でかつ安価にUI/UXに付加価値を出すことができるかもしれません。
ここでは前回に続き、簡単に演出を追加したひとつの例を挙げたいと思います。
前回の記事はこちら
ポイント
- 画面タップで花火を打ち上げる
- カラフルなピザ花火が夜空に広がる
- アプリにインタラクティブ性を加えて、ユーザー体験機会を増やす
- アニメーションとエフェクトの効果でオリジナル性を出す
解説
全体像
画面タップした際のエフェクトは以下のアニメーションのとおりです。
画面タップと同時に、花火が打ち上がり、ピザの花火が大輪を咲かせます。
ヒョロヒョロと打ち上がるエフェクトと爆発のようなエフェクト、毎回異なる色とフラッシュのような効果で花火を表現しています。
花火エフェクト
技術的にはSpriteKitを使用しています。
SpriteKitとは、Appleが提供しているアニメーションや物理演算を使用できるフレームワークで標準で使うことができます。
ヒョロヒョロと打ち上がる効果と、花火の爆発するような効果には、そのSpriteKitを使用して、Appleが標準で提供しているもの（Sparkパーティクル）を使用しているため手間なく簡単に実現できています。
花火であるピザを一瞬表示したり、色を変えたり、フラッシュのような効果などの一連の処理には、プログラミングが伴いますが、花火そのものの効果については元々ある素材を使用して簡単に演出することができます。
エフェクト（パーティクル）は以下で詳しく紹介されています。
https://qiita.com/akatsuki174/items/11e740410177242b710d
オリジナル性とインタラクティブ価値
タップして動きがあるインタラクティブ性は、UX的にひとつの満足を生みます。
このピザの例では、季節のキャンペーン・イベントのようなものを想定しています。
打ち上げた花火が開いた瞬間とピザの丸い形を重ねた演出をしています。
些細な機能ですが、例えばくじびきやクーポンの配布時の演出として、季節の要素も取り入れて応用し、ちょっとした変化を与えることもよいでしょう。
アイデア次第で効果は上げることができ、差別化と話題性を持たせることもできると思います。
まとめ
ここでは具体的な施策というわけではありませんが、簡単に花火のエフェクトを追加できるということを示しました。
例は本当に些細なものですが、想像以上に手間なく実現することができ、気軽に付加価値を提供することが可能です。
Appleが提供している効果もまだあります。あるものを微調整したり、組み合わせたり、小さい力で大きな効果を出せるようなアイデアを考えてみても良いかもしれません。
なお、今回の続きのエフェクトは以下の記事にまとめてあります。
