こちらは、Webを使った私の自作エフェクトです（画像はフリー素材です） 宝箱をクリックすると、宝箱が開き吹き出しが表示されるエフェクトが発生します。 この様に、Webの技術だけで、スマホアプリの様な「見せ方」を再現する事が可能です。

利用している技術は「html、css、javascript」の三つです。 これに「AjaxとPHP」を組み合わせる事で、データベースの利用が可能になりますので、 Webだけで完全にゲーム的な動きを持たせ、ゲームシステムを構築する事が可能になります。 OSとしての進化を続けるiOSやAndroidの仕様変化に、対応し続けなければならないスマホアプリと比べ、 Webの仕組みを利用できる事は、拡張性・親和性・メンテナンス性、いずれの面からも メリットのあるアプリを作る事が可能です。

技術的な事で詳細をお伝えすると、htmlでレイアウトを作り、cssで動きやサイズを決めて、 javascriptでアクションを定義し、AjaxPHPでデータをやり取りする。 この流れは、どのWebシステムでも同じで、スマホアプリUIを手に入れる上で大切なのは、 洗練されたスマホアプリの見た目を学ぶ事だけです。

Webでアニメーションを実現するには、いくつかあるライブラリを利用するのが一番早いです。 上の例では、後光がグルグルまわったり、宝箱がぷにぷにしたり、吹き出しがにょきっと出たり、 こういった動きは、自作でも可能ですが、アニメーションライブラリを使うのが一番手っ取り早いです。 あとはこれらライブラリに格納されているclassを、javascriptから呼び出すだけです。

また、いくつかのアニメーションをレイヤーとして重ね合わせ、立体感のあるエフェクトを 作る事も可能です。例えば上の例では、透過した2枚の後光を重ね合わせて動かしています。 これにより、より立体的な後光を表現できます。

スマホアプリライクなレイアウト構成には、ある種のコツが必要です。 実はこの構成構築が、一番難しいかもしれません。 通常のブラウザで見るWebサイトと異なり、ピクセル単位で違和感が発生する為、 画面設計に洗練さが求められます。特に、静止的なレイアウトだけでなく、エフェクトを考慮した 配置にする必要もあります。

レイアウトと装飾には、htmlとcssを使いますが、見た目だけでなく、 操作によるUIの変化を考慮した、全体的な演出にも気を配る必要があり、 一般のWebデザインとは求められる観点が微妙に違います。

ラボでは、この様なWeb技術を使った「スマホアプリ」開発を、要件定義からご相談いただけます。 ただし、デザイナーではない為、エフェクト素材の調達や、演出の仕方については、 それらに強い専門家と組んで構築する必要がでてきます。

スマホアプリにおいて、UI/操作感は非常に大切です。 むしろデザインそのものよりも、そちらの方が優先と言ってもいいです。 これまで、ECサイトやWebシステムでお客様の気持ちを考えた導線を考え続けてきた ラボでは、UI/操作感においても、より良いものにしていく為に 意見を出していけます。