Web プラットフォーム再考～PWA のもたらす未来の光と影～

Web プラットフォーム
再考
～PWA のもたらす未来の光と影～
ものえおさむ
html5j – Web プラットフォーム部
eegozilla chikoski

アジェンダ
•PWA (Progressive Web App)
•PWA vs モバイル Web vs モバイル App
•PWA ベストプラクティスの考察

Progressive Web Apps とは?
•Chrome Dev Summit 2015
•もともとは Alex Russell 氏(Google) のブログ記事
•Web によるネイティブアプリのような UX
•クライアントの性能に合わせた機能提供
•アプリにおける Progressive Enhancement
ネイティブアプリのような UX を提供する Web アプリの概念

Progressive Web Apps を実現する機能
オフラインサポートプッシュ通知
バックグラウンド
処理アイコンの追加
Cache API Push API Background Sync Web App Manifest
Service Worker
Web App Manifest
これまでの Web に無かった機能

Progressive Web Apps のメリット
PWA = Web + アプリのメリット

Progressive Web Apps の価値を高める API
• CSS3 – GPU による滑らかなレンダリング
• WebAssembly – 高速な演算
• WebVR – より Immersive な体験
• Web Payments – 独自決済を可能に

採用例
Twitter Lite Instagram-PWA GoogleマップPWA

Progressive Web App
vs
モバイル Web
vs
モバイル App

比較項目
☆パワー
☆スピード
☆破壊力
ではなくて…

比較項目
☆機能
☆開発
☆ユーザー体験

機能
= ＜
ハードウェア
プラットフォーム
ハードウェア
ハードウェア
RTC
V R
Web 標準で
サポート
なし
(非依存なので)
Web と
同じ
Web と
同じ
API が用意
API が用意

開発
開発言語
開発環境
配布
JS
任意のエディタ
Web ブラウザー
開発言語
開発環境
配布
プラットフォーム毎のSDKと専用IDE
プラットフォーム毎に異なる言語
プラットフォーム毎のアプリストア

機能
= ＜
ハードウェア
ハードウェア
ハードウェア
RTC
V R
Web 標準で
サポート
なし
(非依存なので)
Web と
同じ
Web と
同じ
API が用意
API が用意
Web アプリケーション

ユーザー体験
（引用元）
https://html5experts.jp/uskay/25391/

ユーザー体験 – アプリの入手
アプリストアの功罪
SEO
FREE
審査
登録費

ユーザー体験 – 購入と課金
利用料
収益収益
支払い支払い

ユーザー体験 – 安全性
審査

以降のスライドについては、
使用許諾がないキャプチャもあるため公開用に修正
しました。
また、事例へのコメントについては、１ユーザーと
して「体験」の変更によって感じた仮説であり個人
的な意見となります。
＜注意事項＞
<加筆>
eegozilla

本当にユーザーにとって
有益な体験をもらたしてくれるのか？
は
ユーザー体験 – UI/UX

PWA における現実
Web App Manifestによって
起きるかもしれない
UI/UXの低下

minimal-ui browserstandalonefullscreen
"display": "standalone"

某電子書籍サイト(英語)
• ITの技術書をメインとした海外の出版社の電子
書籍ストア
• 記述はすべて英語
• (個人的に)技術書である、英語であるという性
格から頻繁に検索を行う必要があるシーンが生
まれている。
• トップページからEC→電子書籍という流れに
なってる
※ディレクトリ構造はec/電子書籍ような感じ
キャプチャ画像は
非公開に
させていただきます
<一部修正>

• アイコンをホームにおけるということでコン
テンツを保有した気分になれる。
• プッシュ通知でセールのタイミングを知らせ
てくれる。
→上記２つについては、課金（購入）して
いるので、コンテンツに対して信頼でき
ており受け入れられ、「＋」と感じるこ
とができた。
（購入という信頼ありきの行動が、エン
ゲージメントの一つの基準になるかも）
PWA化で「＋」と感じた部分
非公開に
<一部修正>

• アイコンを置いた場所を覚えていないケー
スが多い
→検索窓の予測検索のほうが手っ取り
早く移動できる？
• 本文でわからない用語を検索したいのにブ
ラウザに移動する必要がある。
→検索窓を残したほうが直感的に調べ
られるようになる？
PWA化で違和感に感じた部分
非公開に
<一部修正>

某ITナレッジ共有サイト
• ご存知のIT技術に関する知識を記録・共有す
るサービス
• 読み物としてはもちろん、作業中にすぐに調
べる必要があるケースにも重宝している。
• 記事自体は品質が保証されているわけではな
いので、複数の記事（他のサイトも含む）を
吟味しながら自分の作業しているケースに
あっているものを選択。
非公開に
<一部修正>

• 「ググる」から流入するケースが多い。
→ホームアイコンより検索結果に出てくる
ことが最大のメリットではないか？
• PWA化によって検索結果のリンクから
PWA(アプリ)にジャンプする体験。
→わからない用語の検索をするにはブラウザ
に戻るか長押しタップによる検索が必要、
複数の同サイトの記事による比較ができな
くなり、比較のためのフローが増えてしま
う(記憶力が求められる？)
PWA化で違和感に感じた部分
非公開に
<一部修正>

某ポータルサイト
• 超有名ポータルサイト。
• ニュースを始め、あらゆるユーザーが必要な
情報・コンテンツにたどり着ける。
• （個人的には）隙間時間で情報収集、ながら
作業で利用し、最新ニュースのキャッチアッ
プとして利用している。
※能動性と即効性が強いコンテンツ(路線案内・オークションな
ど)はネイティブアプリに委ねるようになった。
非公開に
<一部修正>

• 優先度が低いが、隙間時間の情報収集として重宝さ
れるコンテンツ。
• アプリインストールに加えてホームアイコンを置く
オファーが発生。
→「y」と検索するだけで予測されるくらい、１
日に何度も訪問してしまうサイトに不要な体験？
• （Android版）ニュース記事は別タブが開かれる仕
様で、アプリ内ブラウザで遷移する
→同一サイト内での体験というのを損なって
しまう。
PWA化で違和感と感じた部分
非公開に
<一部修正>

• ABCイベント専用サイト（WordPress利用）
※私がつくりました。
• 時期により目的が「告知／募集」から「タイ
ムテーブル提供」と移っていく。
• 「タイムテーブル提供」フェーズにユーザー
手元にあると便利ではということで採用。
• 必要なのはタイムテーブルのみなので、
StartURLもPWA化のスコープもタイムテーブ
ルページ以下に。
ABC 2018 Spring
<一部修正>

• マップもユーザーにとって重要なコンテンツだ
がTOPに配置してしまう。TOPはアプリ内ブラ
ウザに遷移。よって不便に。
• サイトの認知期間が短いにもかかわらず、
StartURLをタイムテーブルページに。
→ユーザーにとって下層コンテンツが最初に表
示される想定はされておらず、TOPが来る方
が違和感ない？
(ユーザーの経験値はTOPからのほうが多い)
ABC 2018 Spring
<一部修正>

PWA における現実
Cache APIによって
起きるかもしれない
UI/UXの低下

• キャッシュにより更新が反映されないこと
が多々。（WPはいろんなところでキャッ
シュされてしまう）
→ユーザーに適切な提供がされないリスク
を追ってしまう？
※あと端末ごとの挙動の差異がありました。。。
ABC 2018 Spring
<一部修正>

オフラインサポートプッシュ通知バックグラウンド
処理
アイコンの追加
StartURL
displayによる
App like化
キャッシュ戦略による
パフォーマンス向上
スプラッシュ画面
テーマカラーなど
によるブランディング
PWAの機能の選択 <加筆>

オフラインサポートプッシュ通知バックグラウンド
処理
アイコンの追加
StartURL
displayによる
App like化
キャッシュ戦略による
パフォーマンス向上
スプラッシュ画面
テーマカラーなど
によるブランディング
PWAの機能の選択 <加筆>
ご利用は計画的に！

現在のユーザーの(マジョリティの)体験
PWAによる新しい体験
採用基準として
マーケティング
戦略
テスト結果
「今」ユーザーに
必要なモノ
ユーザーの
学習コスト
実装コスト
企画 => 設計
仮説ユーザーテスト
プロトタイプユーザーテスト
実装
ユーザー
の
正しい考察
PWAの
機能の
正しい理解
<加筆>

以下のような切り口から
現在のユーザーを理解し、機能を考える
<加筆>
サイトを
通して
課金
している？
毎日の
ように
使う？
もし
コンテンツが
なくなった
ら？
どういう
タイミング
で使う？
流入
検索から？
アイコンか
ら？
リンクから？
使うときの
緊急性は？
他の
コンテンツと
並行して
使う？
何の
デバイスで
で使う？
.etc
何回
使う？

（引用元）
https://html5experts.jp/uskay/25391/
App
でロイヤル
ユーザーを掴む
Web
で訪問者を増やす
PWA
で違和感を与え
ユーザーが離れていく
PWAの機能は使い間違えると
体験の低下につながる可能性も。。。

ユーザー体験 – パフォーマンス
PWA における夢と現実
PWA のパフォーマンスが
ネイティブアプリに
勝ることはない。
絶対に、だ。

PWA ベストプラクティスの考察

PWA の使いどころ
UserEXperience
Reach
Native
App
Loyalty

まとめ
• Service Worker
• Web Application
Manifest
• Other..
Web =
Function UX
=
Native
Apps
+
Web

まとめ
※背景画像は
非公開とさせていただきます
道具は自分の技をひけらかすために作るものじゃない。
使う人に喜んでもらうために作るもんだ
（by 佃航平「小説下町ロケットヤタガラス編」より）
<一部修正>

まとめ
「使う人」のための機能になっているかを基準に
採用する機能を選択し、サジェストを。
※エンジニアでもUX(体験)については大いに気にしよう
エンジニア
自分のプレゼンス（成果）のためのPWA化
<一部修正>

まとめ
クライアントワークは自分の表現を示す
作品のキャンバス
UIデザイナー/UXデザイナー
常にパラダイムと現在のユーザーのマインドを追う。
ユーザーが喜ぶ(今より「少し」便利な)デザイン(設計)を。
※「今」を理解し、尊重する。
デザインするためにPWAの機能(パーツ)を理解する。
自分の理想だけを述べて主張する
<一部修正>

夢なんかみるな、
現実をみろ。

Web プラットフォーム再考～PWA のもたらす未来の光と影～

Web プラットフォーム再考～PWA のもたらす未来の光と影～

Recommended

Recommended

More Related Content

Similar to Web プラットフォーム再考～PWA のもたらす未来の光と影～

Similar to Web プラットフォーム再考～PWA のもたらす未来の光と影～ (20)

More from Osamu Monoe

More from Osamu Monoe (20)