【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
テクノロジーの進歩につれて、モバイルのユーザーは多くを求めるようになってきています。レスポンシブで安定したブラウザや、素早く返ってくる検索結果など、リッチなUXを期待しているのです。
モダンなアプリは、モバイルやデスクトップ、iOSやAndroid、Facebookのインスタントアーティクルまで、幅広いエコシステムに対応しなければなりません。ユーザーに、より早く、より信頼されるモバイル体験を提供するために、開発者はモバイル技術を駆使して開発する必要があります。
ここで登場するのが、AMPとPWAです。このふたつの言葉は、最近フロントエンド界隈でバズワードとなりました。
この記事ではAMPとPWAのそれぞれの機能のご紹介します。AMPとWPAをサイトにどのように組み込めるか、考えていきましょう。
目次
モバイルデバイスで検索エンジンを使ったことがある人なら、おそらくAMPに出会っているでしょう。
AMPはGoogleとTwitterが推奨しているオープンソースのフレームワークで、Webサイトを遅くするさまざまな要素を取り除いたものです。全てのモバイルデバイスでのサイトスピードやUXを強化します。つまり、AMPは静的コンテンツのWebページを作るというアプローチのひとつです。
AMPは当初、信頼の高い出版社のニュース記事やブログポストのために作られました。この技術はFacebookのインスタントアーティクルや、その他の似たようなフレームワークへのアンサーとして開始されましたが、現在はそれにとどまらず、検索結果を高速で返す効果的なプラットフォームとして普及しました。しかもGoogleは、AMPページだけをホストした個別のニュースカルーセルを作成したこともあります。
では、AMPはどのように動作するのでしょうか? このフレームワークは、主に以下の3要素で構成されています。
AMP HTMLは、開発者たちがAMPページを構築するために編み出されました。しかしながらAMP HTMLには、いくつかの厳格なルールもあります。例えばページロードを早くするために、formなど特定要素の利用を禁止しています。
また、AMPのエレメントには最新のCSSを使わなければいけません。
AMPとは?モバイルページのパフォーマンスを上げる秘密とその歴史
Workship MAGAZINE
PWAの定義はさまざまに言われています。
Ionicは、PWAを「モダンなWeb技術を用いて、アプリのようなUXを提供するWebアプリケーション」と定義しています。
Googleは、PWAを「Webとアプリの良いところを組み合わせたUX」と定義しています。
Mozillaは、PWAを「特定の技術と共通パターンを活用しているもの」と技術的に定義しています。PWAはWebとネイティブアプリ、両方の特徴を活かしているということです。
しかし、PWAが何なのか真に言い表しているような別の定義もあります。
「PWAはモバイルデバイスで動く、通常のネイティブアプリのように見える、一般的なWebページやWebサイトのような形をしているWebアプリケーション」
PWAは、モダンなブラウザの特徴とモバイルのUXをひとつのテクノロジーにまとめたものなのです。
PWAは以下の特徴を持っています。
PWAは、ネットワークの状況が悪いところでも瞬時にロードできる必要があります。ユーザーの行動に素早く反応し、リッチなUXを提供できなければならないのです。
またPWAと判定されるために必要な、いくつかの基準があります。
PWAとは?Webサイトをアプリ化して高エンゲージメントを得るためのUX設計
Workship MAGAZINE
それぞれ独立したフレームワークとして、AMPとPWAはさまざまなアドバンテージがあります。
AMPには以下のようなベネフィットがあります。
PWAには以下のようなベネフィットがあります。
AMPとPWAをともにサイトに組み込む(PWAMPとも呼ばれる)には、以下のようなメソッドが考えられます。
静的コンテンツのページでユーザーインタラクションが少ないならば、AMPをPWAとして使う方法(AMP as PWA)があります。
ユーザーが特定の要素をクリックした際、AMPキャッシュから取得した特定の場所に移動します。つまり、あなたのサイトはService Workerを持っている必要がありますが、それによりJavaScriptで可能になる特徴やカスタムサイト要素などの追加機能をユーザーに提供できます。
またPWAを使うために、Webアプリケーションマニフェストをサイトに追加する必要があります。
AMP to PWAは、WebサイトのエントリーポイントとしてAMPがあり、続いてPWAに切り替わるという使い方です。
これにより、ユーザーはページを素早く読み込めます。Service Workerはユーザーがウェブサイトに行くときに一回だけインストールされます。
AMP in PWAメソッドは、AMPページを使うことでPWAをデータソースとして強化します。
シャドーDOMをPWAに組み込み、XML HTTPリクエストをAMPドキュメントに送り、AMPページがロードされたらHTMLを返すだけです。
以上3つの、どのメソッドを使うにせよ、AMPはたくさんのPWAの特徴を活用できます(これらは、以前はHTTPSで利用できていた特徴です)。
AMPとPWAはそれぞれ弱点もあります。しかし組み合わせることで欠点を補い、より良いUXを生み出せます。たとえばAMPはサイトにおける優先的なページをキャッシュする一方で、PWAはAMPでないコンテンツのソースをキャッシュします。
さらにいえば、AMPとPWA両方の技術をEコマースのサイトで統合すれば、サイトの訪問者や、ユーザーのエンゲージメント、モバイルショッパーからの問い合わせも増加できるでしょう。
まとめると、PWA+AMP=PWAMPのコンビネーションを使うことで、ユーザーは速くページにたどり着き、長くページに留まることができ、そしてあなたのサービスにエンゲージし続けてくれるのです。
(原文:Rashmi Inglekh 翻訳:Yui Shimizu)