レポート

「第45回 HTML5とか勉強会 ~「ユーザエクスペリエンスとペーパープロトタイピング」活動報告

この記事を読むのに必要な時間:およそ 2 分

モバイルWebとスマートフォンアプリの違い・適材適所

講演の後半はネイティブアプリとモバイルWebアプリの違いや,メリット・デメリットについて説明しました。

ネイティブアプリ,モバイルWebアプリのどちらかを作る場合,多くのケースでは動作が素早いネイティブアプリの方が理想的です。ただし次のような場合はWebアプリの方が向いていると指摘しました。

  • 改変が頻繁になされる場合
  • 多くの機種で使用される場合
  • 社内利用等で想定ユーザが分かっている場合
  • その他の要因として,開発要員やコストの観点でみた場合

また,外側はネイティブアプリ,中身はWebView,コンテンツはHTMLのハイブリッドアプリを作るという選択肢もあるとし,アプリのライフサイクルが短い場合や,セキュリティ要件が厳しくない案件の場合に向いていると言及していました。

続いてネイティブアプリとモバイルWebアプリそれぞれの強みと弱みを挙げました。

強み

ネイティブアプリモバイルWeb
たいていの場合,モバイルWebよりも高速プラットフォームに関わらず共通のコード
アプリストアや,アプリ市場でアプリを見つけてもらいやすいアプリをダウンロードする必要が無い
ストアの承認(審査)プロセスが必要。審査は面倒だが結果的に高品質のアプリを提供できるいつでも自由にリリース,アップデートできる
高機能な開発ツールを利用でき,開発ノウハウも蓄積されているすでにWebを持っているのであれば,モバイル対応しやすい(含レスポンシブ)

弱み

ネイティブアプリモバイルWeb
複数プラットフォーム,複数デバイスに対応する場合,どうしても開発費がかさむデバイスの持つすべての機能を活用することができない(GPSトラッキング,センサー,3D等)
複数プラットフォームをサポートする場合,開発,保守,更新,テストの費用がかさむ複数のデバイス,複数のブラウザをサポートする場合,開発,保守の費用がかさむ
市場に複数のバージョンが存在する場合がある。古いバージョンを使い続ける人もいるユーザーがどのバージョンのどのブラウザを使うのか,限定できない,指定しづらい
ストアの承認(審査)プロセスに依存する。リリース/更新時期が遅れる場合があるモバイルWebの存在を知ってもらうことが難しい。キャンペーンや検索エンジン最適化も考慮

予算が豊富にある場合,ネイティブとモバイルWeb両方作ることが望ましいとのことです。しかし,予算が少ない,もしくはスピード感をもってサービスをローンチしなければならない場合は,ネイティブアプリから(それもどちらか片方のプラットフォームから)作るほうが良いと言います。また,社内利用や長期的に超他機種対応,維持しなければならない場合は,モバイルWebアプリを検討するのも一つの案となると述べていました。

モバイルWeb,モバイルアプリプロトタイピングの勘所

モバイルは移動中で急いでいる不安定な状況,または隙間時間や目的がない利用が多くなります。PC Webの全機能が必要な訳ではなく,モバイルならではの体験が重要だと強調しました。

ワークショップ

勉強会の後半は,ワークショップが行われました。

練習

まずはペーパープロトタイピングの練習として,5分でjavari.jpのモバイルWebを紙にスケッチし,スマートフォンで撮影し,印象を見比べます。短時間でできるワークですが,撮影した紙の写真はだいたい完成後のサイトの印象に近いものになります。

チームを組んで課題に取り組む

続いてのワークは,Etsy.comという,手作りの商品を売買するPCサイトを題材としました。まずはEtsy.comの画面をプリントアウトした紙に,商品/検索/カテゴリといった表示要素を書き込んでいきます。そして,モバイルでの利用シーンを考えた上で,それぞれの機能の重要度を考え,モバイルサイトで必要な機能を抽出しました。

画像

それらの作業が終わった後は3人一組になり,自己紹介の後,自分が選んだ5つの項目をチーム内で発表しあいました。発表の後はチーム内で相談し,5つの項目をチームで統一し,それらの項目を載せたモバイルWebサイトのトップ画面を考え,絵に描きおこしました。

そしてチーム毎に発表です! 各チームどのようなコンセプトで,どのような解に至ったのか,短い作業時間の中で様々なプロトタイプが上がってきました。

画像

最後にEtsyの実際のモバイルサイトの画面や機能を見て,プロトタイプとの違いを確認し,ワークショップは終了しました。

詳しくは資料動画をご覧ください。

最後に

レポートに対する感想や,勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら,twitter(@sakkuru)まで気軽につぶやいていただければと思います。

本勉強会は,毎月開催していますので,興味を持たれた方はぜひご参加ください。開催のアナウンスはhtml5jのMLで行われますので,こちらをご確認ください。また,コミュニティサイトも公開していますので,ぜひこちらもご覧ください。

著者プロフィール

さっくる

NTTコミュニケーションズ 先端IPアーキテクチャセンタ所属。html5jスタッフ。

Twitter:@sakkuru