記事

ネイティブアプリのような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

    田原氏 野党は安易な反対やめよ

    たかまつなな

  2. 2

    倉持由香 初の裸エプロンに感激

    倉持由香

  3. 3

    ベテランは業界にしがみつくな

    PRESIDENT Online

  4. 4

    社民党分裂 背景に立民の左傾化

    音喜多 駿(参議院議員 / 東京都選挙区)

  5. 5

    世界も注目 鬼滅映画の大ヒット

    木走正水(きばしりまさみず)

  6. 6

    安倍前首相の嫉妬が菅首相脅威に

    文春オンライン

  7. 7

    のん巡る判決 文春はこう考える

    文春オンライン

  8. 8

    数字を捏造 都構想反対派の欺瞞

    音喜多 駿(参議院議員 / 東京都選挙区)

  9. 9

    小沢一郎氏は共産党の用心棒役か

    赤松正雄

  10. 10

    見直し当然?野党ヒアリング紛糾

    BLOGOS しらべる部

ランキング一覧

ログイン

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

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

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