Smart Communication Design Company
ホーム > サービス > アプリ開発 > PWA対応

PWA対応

スマホアプリライクな使い勝手を備えたWebサイトへ

スマートフォンの普及により、Webサイトの閲覧はPCからだけではなくなり、さまざまなモバイルデバイスとネットワーク環境からのアクセスを想定しなければなりません。日常生活だけでなくビジネスにおいても、モバイルWebサイトに対する期待と需要は日増しに高くなっています。

モバイルWebサイトにおいてユーザーの要望に応えるためには、コンテンツの質が問われるのはもちろん、ネットワークへの依存をどうするのか、モバイルに最適化したデザインとなっているか、パフォーマンスが高いかどうか、といった課題を解決する必要があります。また、最新情報やお知らせをユーザーに提供するためには、モバイルデバイスへの通知を行う必要があります。

従来は、このような課題をモバイル最適化サイトやネイティブアプリを制作することで解決していました。しかし、モバイル最適化サイトではPCサイトと重複するコンテンツを管理することによる運用負荷の増大や、モバイルデバイスに搭載されているOSごとのリダイレクト管理、実装状況の異なるブラウザAPI仕様への対応が必要になる問題があり、ネイティブアプリでは審査や更新コストの問題など、モバイルWebサイトに要求される課題の完全な解決には至っていません。

ミツエーリンクスのPWA対応サービスでは、Googleが提唱するProgressive Web Appsの概念により、これらの問題を新しいアプローチで解決します。

サービス概要

新規コンテンツ、既存コンテンツをPWA対応することで、モバイルWebサイトのオフライン対応を実現。ネイティブアプリに近いユーザーエクスペリエンスを提供します。また、通信量を削減し、パフォーマンスを向上させることで、セッションの維持、離脱率の低下、ページビューとビューアビリティの向上が期待できます。

  • 「ビューアビリティ」とは視認性があり、閲覧できる状態にある広告のインプレッション内指標です。

PWAとは

ネットワークに依存しないWebサイトのオフライン化

PWA対応を行うことで、Service Worker APIを用いたネットワークのコントロ-ルが可能になります。HTTPS環境が必須となりますが、Service Worker APIにより一度ロードが完了したWebサイトはキャッシュしたコンテツデータにアクセスするため、大幅なパフォーマンスの向上を図ることができます。また、キャッシュはネットワークに依存しないため、オフライン環境でのWebサイトの閲覧や、データ通信量の削減を行うことが可能です。

Webサイトでありながら、ネイティブアプリに近いユーザーエクスペリエンスの提供

PWA対応サービスではApp Shellアーキテクチャに基づいた開発を行います。App Shellはネイティブアプリに必要なプログラミング言語とは異なり、HTML、CSS、JavaScriptの構成要素を持つユーザーインターフェースです。このアーキテクチャに沿った開発を行うことでネイティブアプリのようなユーザーエクスペリエンスを提供します。また、PWAに必要なマニフェストの定義により、あたかもWebサイトを探すかのように検索エンジンからPWAを探すことが可能です。

モバイルに最適化されたデザインや、訪問者の流入経路はモバイルWebサイトそのものですが、PWAはアプリケーションストアの審査を必要とせず、デバイスにインストールすることができます。デバイスのホーム画面アイコンから起動したPWAはスプラッシュスクリーンの表示と同時にキャッシュしたコンテンツへアクセスし、メニューバーの無いフルスクリーンで表示することができるため、ネイティブアプリのように振る舞うことができます。

サービス特長

ミツエーリンクスのPWA対応サービスでは、Googleが規定するBaseline Progressive Web App Checklistのチェック項目とWebサイトの状態を考慮し、最適なPWA対応方針をご提案します。

また、Webサイトの構造や規模により、ユーザーエクスペリエンスを考慮したPWAに最適なビジュアルデザインをご提案させていただくことも可能です。

サービス詳細

基本機能

PWA対応サービスでは企画からご納品までワンストップでの提供が可能です。

企画・要件定義

既存コンテンツの現状把握を行い、オフライン対象コンテンツの精査や、モバイルフレンドリーを考慮したレスポンシブWebデザインなどPWA対応に最適な具体的方法を立案します。もちろん新規Webサイト構築の際でもPWA対応を行うことができます。

ビジュアルデザインの構築

対象コンテンツのトーン&マナーを考慮し、一部デザインをPWAのユーザーエクスペリエンスに最適化したリデザインの作成と、ホーム画面のアイコン作成を行います。

マニフェスト定義・オフライン対応

要件定義に沿った形でマニフェストの定義、及びオフライン対象ページに応じたService Workerを作成し、対象ページに組み込みを行います。

オプション

「AMP対応」サービスとの連携

AMP対応」サービスと連携し、検索エンジンなどから訪問した際の初回のページ表示速度をさらに向上させることが可能です。AMPとPWAの連携方法については既存サイトの状況や目的に応じて最適な方法をご提案させて頂きます。

プッシュ通知による再エンゲージメント

Push APIを用いてモバイルデバイスにインストールされたPWAに対してプッシュ通知を行い、再エンゲージメントを促すことが可能です。

サービスフロー

  1. 要件定義
    • 目的、内容のヒアリング
    • 現状把握とオフライン対象ページ精査
  2. ビジュアルデザイン
  3. テンプレート設計・実装・検証
  4. ご納品

Pick Up