記事

ネイティブアプリのようなWebアプリを作るために

画像を見る

※image via 003 FREE WEB GRAPHICS

デバイスの多様化に伴い、拡張性の高いWebアプリの重要性が見直されています。サイバーエージェントのデカグラフを構成するサービスも基本的にはWebベースで作られていますが、これはアプリの改善スピードを上げたり、各サービス間の回遊性を高めるという狙いもあるようです。

ただし、スマートフォンユーザーはネイティブアプリ先行でサービスに触れているため、これまでのWebアプリでは当たり前だったことが、今ではストレスに感じてしまうことも多いです。HTML5の登場やJavascriptのライブラリの充実などにより、最近ではリッチなWebアプリを作る環境が急速に整ってきてはいますが、それでもスマートフォン向けに満足度の高いWebアプリを提供するハードルは非常に高いと言えると思います。

そこで、「もっさり&カクカク」な印象のあるWebアプリの操作感を、「サクサク&なめらか」なネイティブアプリのそれに近づけるためにはどういったことを意識すべきか、一度自分なりにポイントをまとめてみます。

ページ遷移を抑える

いきなり一番難易度が高いものを持って来ましたが、恐らく最も効果のある施策がこれになります。Ajaxなどを使った非同期通信で、できるだけページ遷移をせずに画面の情報を書き換えます。これは別に今に始まった技術ではないので、パフォーマンスや操作性の向上については説明するまでもないとは思うのですが、スマートフォンサイトの場合はプラスアルファの恩恵があります。

見た目の“ウェブ感”を抑えるために、Javascriptを使って画面読み込み後にアドレスバーを引っ込めるような実装をしているWebアプリは多いですが、ページ遷移をする際にはどうしても毎回ぴょこぴょことアドレスバーが出現してしまいます。この動きは結構なストレスになるのですが、上に書いたような方法でページ遷移を防ぐとこれが起こりません。TwitterやGmailのスマートフォンサイトはAjaxを使って作り込まれていますので、ぜひ触って快適な動作を体感してみてください。

画像を見る  画像を見る

ローカルストレージを活用する

HTML5の目玉機能であるローカルストレージを使えば、ブラウザ単位で一度ダウンロードしたテキストや画像を(オフラインでアクセス可能な)端末内に保存できます。ブラウザを再起動してもキャッシュは残りますので、この点に関してはもはやWebアプリでもネイティブアプリと遜色ないパフォーマンスが期待できるということになります。UIのベースとなるデザインパーツなど、更新の機会がほとんどないデータを抽出し、それらはローカルストレージへ保存するようにすると良いと思います。

アニメーションを設定する

スマートフォンはOSのベースとなっているUIにアニメーションを活用し、なめらかな動きを実現しています。特に意識すべきは、画面が出現したり遷移したりする際の動きです。普段快適に使っている中ではあまり目を向けることもないかも知れませんが、例えばiPhoneのホームアイコンをタップすると中央から噴き出すように画面が出現します。アプリ内での画面遷移は基本的に横スライド、投稿系のビューは現在の画面の上に被さるように下からスライドして出てきます。

冒頭でも書きましたが、最近はスマートフォン専用のJavascriptライブラリなどもかなり充実してきており、Webアプリでもある程度のアニメーションは簡単に実装できるようになっています。ネイティブアプリのようななめらかな動きを演出するためには、できる限りこういった部分までこだわる必要があると感じています。

スクロール領域を指定する

上に挙げたTwitterやGmailのWebアプリでは、テーブルを下にスクロールしてもアドレスバーが現れません。これはヘッダを固定し内部領域をスクロールさせているからです(ヘッダ領域を下に引っ張ればアドレスバーが出てきますが、そのような動作をするユーザーはまずいないでしょう)。細かいことかも知れませんが、スクロールする画面を持つアプリでは広く流用可能なTipsだと思いますので、参考までに取り上げてみました。

画像を見る  画像を見る
※普通は左のようにアドレスバーを含めた画面全体がスクロールしてしまうものが多いが、TwitterのWebアプリはヘッダ部分が固定されており、テーブルビューの端を下に引っ張った状態でもアドレスバーが表示されない。

~~~~~

ここから先はWebアプリ限定のTipsではないのですが、そもそもネイティブアプリに比べて操作性やパフォーマンスが劣るWebアプリだからこそ、こういったことを徹底的に意識する必要があると思っています。過去に書いたこちらのエントリーからいくつかピックアップしておきます。

  • UIパーツをCSSで実装する

画像で作る必要のないボタンなどはCSSで実装し、容量を軽くして読み込み速度を高速化しましょう。

  • タップしたら反応させる

ボタンやリンクをタップしたら必ずハイライトさせるようにしましょう。これは手間がかかるものではないので、100%対応すべきです。

  • 画像を非同期で取得する

真っ白なローディング画面でユーザーを長く待たせることを避けるために、画像は非同期で取得し、できるだけ早く画面内にテキストデータを表示させるようにしましょう。

  • 待ち時間を明示する

どうしてもローディング時間が長くなってしまうシーンでは、プログレスバーなどを表示して待ち時間を明示してあげると良いと思います。(知り合いに確認したところ、これもJavascriptで実現できるようです)

~~~~~

現段階では以上になりますが、この分野は僕もまだまだ知識不足なので、今後また新たな気付きがあれば随時内容をアップデートしていくつもりです。

あわせて読みたい

「アプリ」の記事一覧へ

トピックス

  1. 一覧を見る

ランキング

  1. 1

    東京五輪後に東京不動産は暴落すると言っていた人たち

    内藤忍

    10月18日 11:50

  2. 2

    年収 30年横ばい狂騒記

    ヒロ

    10月18日 11:33

  3. 3

    LINE問題で最終報告、経営陣対応「不適切」 情報漏えい認めず

    ロイター

    10月18日 22:38

  4. 4

    梅澤愛優香さん、文春が報じた産地偽装問題を謝罪 「エビや牛モツが海外産だった」

    キャリコネニュース

    10月18日 09:57

  5. 5

    マイケル・サンデル『実力も運のうち 能力主義は正義か?』

    紙屋高雪

    10月18日 17:02

  6. 6

    中学入試で起きた首都圏の「御三家離れ」は解消か 武蔵、女子学院など根強い人気

    NEWSポストセブン

    10月18日 15:16

  7. 7

    野党共闘の弊害 無敵の維新から票奪えるはずだった選挙区で「れいわ」降ろす

    田中龍作

    10月18日 13:47

  8. 8

    安倍、麻生を裏切り総理を操る甘利明・幹事長という「狡猾の人」

    NEWSポストセブン

    10月18日 10:43

  9. 9

    小室圭さん、かつての勤務先を訪問 近況や結婚の報告か

    ABEMA TIMES

    10月18日 14:19

  10. 10

    ドコモ障害 ひろゆき氏「200万人困っただけ」に対して専門家「実際はもっといる」

    ABEMA TIMES

    10月18日 10:36

ログイン

ログインするアカウントをお選びください。
以下のいずれかのアカウントでBLOGOSにログインすることができます。

コメントを書き込むには FacebookID、TwitterID のいずれかで認証を行う必要があります。

※livedoorIDでログインした場合、ご利用できるのはフォロー機能、マイページ機能、支持するボタンのみとなります。