モバイルアプリ、SPA？ネイティブ？UX/UI の違いと技術選択のポイント

1. de:code 2019 MW52
モバイルアプリ、SPA？ネイティブ？
UX/UI の違いと技術選択のポイント
NTTデータ先端技術株式会社
鈴⽊ 友宏 (Microso9 MVP)
イメージ情報システム株式会社
⽯崎 充良 (Microso9 MVP)

3. 本セッションのおおまかなタイムテーブル
• 0〜15分：サンプルを例に、SPA とガワアプリ、ネイティブア
プリの UX/UI の違いと問題点の確認をします。
• 15〜30分：ユーザー視点からのエクスペリエンスについて
ディスカッションします。
• 30〜45分：ユーザー⽬線を念頭に開発者⽬線の技術
選択のポイント、企業規模、開発者のスキルセットなどに
よる判断基準についてディスカッションします。

4. 本セッションの注意事項
• 皆様の疑問を解決するため、積極的に発⾔しましょう！
• 各個⼈の発⾔を尊重しましょう
• 全員に当てはまる唯⼀の答えを出す事にはこだわりません。

5. • SPA (Single Page Application)
• ガワ Native
• Native

6. 何らかのモバイルアプリ開発経験がある⽅
これからモバイルアプリを開発しようと考えている⽅
エンタープライズ系の開発者の⽅

10. エンタープライズとコンシューマーの違い
• エンタープライズ アプリ
• コンシューマーアプリ

11. 配信プラットフォームごとの UX/UI の違い
配信プラットフォームごとの UX/UI の違い
それぞれの技術の得意なこと苦⼿なこと
個⼈・⾃社の状況に合った判断基準のポイント

12. SPA とネイティブアプリの
UX/UIの違いと
問題点の確認

13. ホーム画⾯のアイコンの違い (iOS)

14. ホーム画⾯のアイコンの違い (Android)

15. UX/UI 外観の違い (iOS)
NaGveガワ NativeSPA

16. UX/UI 外観の違い (Android)
Nativeガワ NativeSPA

17. UX/UI 操作性の違い

18. UX/UI まとめ
• 会員登録など⼊⼒系であれば既に⼤差ありません。
• 動きのある UI の場合、まだまだ⼤きな差があります。

19. ユーザー視点の
エクスペリエンス

20. アプリで⼀番⼤切なことは
「ユーザーに何を届けたいのか」
です。

21. Native
使い勝⼿
SPA
始めやすさ

22. 使い勝⼿
継続的に使ってもらう
NativeSPA

23. 技術選択のポイント、
企業規模、スキルセット
などによる判断基準

24. 技術・プラットフォームの
特徴を理解しよう

25. NaGveガワ NativeSPA
ストア配信 ○×
決済 ストア独⾃
アップデート
随時
ユーザーアクション不要
Web 部は随時
アプリ部はストア申請
ストア申請
ユーザーアクション必要

26. Nativeガワ NaGveSPA

27. NaGveガワ NativeSPA
Android PWA は○
iOS は ×
Android は○
iOS は 要設定変更
ブラウザからのカメラやセンサーの利⽤ポリシーは変更が多いので
アップデートで突然使えなくなるリスクがある（特に iOS）

28. Nativeガワ NaGveSPA
Server Side

30. コスト・期間
興味・スキルセット

32. NativeSPA

33. NaGveSPA

34. Native

35. まとめ

36. • 表現内容の差は少ないが、UX/UI には差があります。
• 技術選択は初期・運⽤コストに直結します。
• PWA + ガワ Native は今後に期待できます。

37. 参考資料 (ご本⼈許諾済み)
@amay077

38. © 2018 Microsoft Corporation. All rights reserved.
本情報の内容（添付⽂書、リンク先などを含む）は、作成⽇時点でのものであり、予告なく変更される場合があります。
© 2019 Microso9 CorporaGon. All rights reserved.
本情報の内容 (添付⽂書、リンク先などを含む) は、de:code 2019 開催⽇ (2019年5⽉29~30⽇) 時点のものであり、予告なく変更される場合があります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。