Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
de:code 2019 MW52
モバイルアプリ、SPA?ネイティブ?
UX/UI の違いと技術選択のポイント
NTTデータ先端技術株式会社
鈴⽊ 友宏 (Microso9 MVP)
イメージ情報システム株式会社
⽯崎 充良 (Microso...
本セッションのおおまかなタイムテーブル
• 0〜15分:サンプルを例に、SPA とガワアプリ、ネイティブア
プリの UX/UI の違いと問題点の確認をします。
• 15〜30分:ユーザー視点からのエクスペリエンスについて
ディスカッションします...
本セッションの注意事項
• 皆様の疑問を解決するため、積極的に発⾔しましょう!
• 各個⼈の発⾔を尊重しましょう
• 全員に当てはまる唯⼀の答えを出す事にはこだわりません。
• SPA (Single Page Application)
• ガワ Native
• Native
何らかのモバイルアプリ開発経験がある⽅
これからモバイルアプリを開発しようと考えている⽅
エンタープライズ系の開発者の⽅
エンタープライズとコンシューマーの違い
• エンタープライズ アプリ
• コンシューマーアプリ
配信プラットフォームごとの UX/UI の違い
配信プラットフォームごとの UX/UI の違い
それぞれの技術の得意なこと苦⼿なこと
個⼈・⾃社の状況に合った判断基準のポイント
SPA とネイティブアプリの
UX/UIの違いと
問題点の確認
ホーム画⾯のアイコンの違い (iOS)
ホーム画⾯のアイコンの違い (Android)
UX/UI 外観の違い (iOS)
NaGveガワ NativeSPA
UX/UI 外観の違い (Android)
Nativeガワ NativeSPA
UX/UI 操作性の違い
UX/UI まとめ
• 会員登録など⼊⼒系であれば既に⼤差ありません。
• 動きのある UI の場合、まだまだ⼤きな差があります。
ユーザー視点の
エクスペリエンス
アプリで⼀番⼤切なことは
「ユーザーに何を届けたいのか」
です。
Native
使い勝⼿
SPA
始めやすさ
使い勝⼿
継続的に使ってもらう
NativeSPA
技術選択のポイント、
企業規模、スキルセット
などによる判断基準
技術・プラットフォームの
特徴を理解しよう
NaGveガワ NativeSPA
ストア配信 ○×
決済 ストア独⾃
アップデート
随時
ユーザーアクション不要
Web 部は随時
アプリ部はストア申請
ストア申請
ユーザーアクション必要
Nativeガワ NaGveSPA
NaGveガワ NativeSPA
Android PWA は○
iOS は ×
Android は○
iOS は 要設定変更
ブラウザからのカメラやセンサーの利⽤ポリシーは変更が多いので
アップデートで突然使えなくなるリスクがある(特に iO...
Nativeガワ NaGveSPA
Server Side
コスト・期間
興味・スキルセット
NativeSPA
NaGveSPA
Native
まとめ
• 表現内容の差は少ないが、UX/UI には差があります。
• 技術選択は初期・運⽤コストに直結します。
• PWA + ガワ Native は今後に期待できます。
参考資料 (ご本⼈許諾済み)
@amay077
© 2018 Microsoft Corporation. All rights reserved.
本情報の内容(添付⽂書、リンク先などを含む)は、作成⽇時点でのものであり、予告なく変更される場合があります。
© 2019 Microso9 ...
de:code2019 MW52 モバイルアプリ、SPA?ネイティブ?UX/UI の違いと技術選択のポイント
de:code2019 MW52 モバイルアプリ、SPA?ネイティブ?UX/UI の違いと技術選択のポイント
de:code2019 MW52 モバイルアプリ、SPA?ネイティブ?UX/UI の違いと技術選択のポイント
de:code2019 MW52 モバイルアプリ、SPA?ネイティブ?UX/UI の違いと技術選択のポイント
de:code2019 MW52 モバイルアプリ、SPA?ネイティブ?UX/UI の違いと技術選択のポイント
de:code2019 MW52 モバイルアプリ、SPA?ネイティブ?UX/UI の違いと技術選択のポイント
Prochain SlideShare
Chargement dans…5
×

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

399 vues

Publié le

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

Publié dans : Mobile
  • Soyez le premier à commenter

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

  1. 1. de:code 2019 MW52 モバイルアプリ、SPA?ネイティブ? UX/UI の違いと技術選択のポイント NTTデータ先端技術株式会社 鈴⽊ 友宏 (Microso9 MVP) イメージ情報システム株式会社 ⽯崎 充良 (Microso9 MVP)
  2. 2. 本セッションのおおまかなタイムテーブル • 0〜15分:サンプルを例に、SPA とガワアプリ、ネイティブア プリの UX/UI の違いと問題点の確認をします。 • 15〜30分:ユーザー視点からのエクスペリエンスについて ディスカッションします。 • 30〜45分:ユーザー⽬線を念頭に開発者⽬線の技術 選択のポイント、企業規模、開発者のスキルセットなどに よる判断基準についてディスカッションします。
  3. 3. 本セッションの注意事項 • 皆様の疑問を解決するため、積極的に発⾔しましょう! • 各個⼈の発⾔を尊重しましょう • 全員に当てはまる唯⼀の答えを出す事にはこだわりません。
  4. 4. • SPA (Single Page Application) • ガワ Native • Native
  5. 5. 何らかのモバイルアプリ開発経験がある⽅ これからモバイルアプリを開発しようと考えている⽅ エンタープライズ系の開発者の⽅
  6. 6. エンタープライズとコンシューマーの違い • エンタープライズ アプリ • コンシューマーアプリ
  7. 7. 配信プラットフォームごとの UX/UI の違い 配信プラットフォームごとの UX/UI の違い それぞれの技術の得意なこと苦⼿なこと 個⼈・⾃社の状況に合った判断基準のポイント
  8. 8. SPA とネイティブアプリの UX/UIの違いと 問題点の確認
  9. 9. ホーム画⾯のアイコンの違い (iOS)
  10. 10. ホーム画⾯のアイコンの違い (Android)
  11. 11. UX/UI 外観の違い (iOS) NaGveガワ NativeSPA
  12. 12. UX/UI 外観の違い (Android) Nativeガワ NativeSPA
  13. 13. UX/UI 操作性の違い
  14. 14. UX/UI まとめ • 会員登録など⼊⼒系であれば既に⼤差ありません。 • 動きのある UI の場合、まだまだ⼤きな差があります。
  15. 15. ユーザー視点の エクスペリエンス
  16. 16. アプリで⼀番⼤切なことは 「ユーザーに何を届けたいのか」 です。
  17. 17. Native 使い勝⼿ SPA 始めやすさ
  18. 18. 使い勝⼿ 継続的に使ってもらう NativeSPA
  19. 19. 技術選択のポイント、 企業規模、スキルセット などによる判断基準
  20. 20. 技術・プラットフォームの 特徴を理解しよう
  21. 21. NaGveガワ NativeSPA ストア配信 ○× 決済 ストア独⾃ アップデート 随時 ユーザーアクション不要 Web 部は随時 アプリ部はストア申請 ストア申請 ユーザーアクション必要
  22. 22. Nativeガワ NaGveSPA
  23. 23. NaGveガワ NativeSPA Android PWA は○ iOS は × Android は○ iOS は 要設定変更 ブラウザからのカメラやセンサーの利⽤ポリシーは変更が多いので アップデートで突然使えなくなるリスクがある(特に iOS)
  24. 24. Nativeガワ NaGveSPA Server Side
  25. 25. コスト・期間 興味・スキルセット
  26. 26. NativeSPA
  27. 27. NaGveSPA
  28. 28. Native
  29. 29. まとめ
  30. 30. • 表現内容の差は少ないが、UX/UI には差があります。 • 技術選択は初期・運⽤コストに直結します。 • PWA + ガワ Native は今後に期待できます。
  31. 31. 参考資料 (ご本⼈許諾済み) @amay077
  32. 32. © 2018 Microsoft Corporation. All rights reserved. 本情報の内容(添付⽂書、リンク先などを含む)は、作成⽇時点でのものであり、予告なく変更される場合があります。 © 2019 Microso9 CorporaGon. All rights reserved. 本情報の内容 (添付⽂書、リンク先などを含む) は、de:code 2019 開催⽇ (2019年5⽉29~30⽇) 時点のものであり、予告なく変更される場合があります。 本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。

×