2019年10月26日土曜日

モバイルアプリの未来 PWAの作り方〜既存スマホサイトのアプリ化 

先日、ウェブサイトをアプリ化する課題があって、いろいろ調べていくとPWAという2018年ごろから話題になっている技術に出会いました。

この出会いはこの10年ぐらいのテクノロジー基盤としては、かなりのインパクトがありそうなので、自分なりの知識で解説しておこうと思います。

クロスプラットフォームの問題


そもそも、アンドロイドとiPhone のスマホアプリ、それからウェブサイトとしてのスマホサイトの3つを開発しようと思うと、それぞれの開発言語が異なるので、開発者としては3つの言語とそれぞれのシステムの管理が必要です。


ネイティブアプリの開発の場合、iOSだと Swift で Androidだと Kotlinで ウェブサイトはHTMLCSSですね。これだと開発者泣かせということで、iOSでもAndroidの共通開発言語としてクロスプラットフォームという考え方が次に広まりました。有名なクロスプラットフォームとしては XamarinやReact Native がありますが、これもまた独自の言語に近いのでゼロから学習しなければならないし、ネイティブアプリのような体現ができるかといえば、微妙です、、。

PWAの登場


そんな過程で2018年ごろに登場したのがPWAです。
 PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。


特別な技術は必要なく、既存のウェブサイトに数行のJavascriptコードを追加するだけでGoogleストアやアップルストアで見かけるネイティブアプリのようにユーザーは自分のスマホにインストールして使えるようにするものです。

PWAを既存のウェブサイトに実装すると以下のようなメリットがあります。

  • ネイティブアプリと同じく全画面で閲覧できる
  • プッシュ通知が行える
  • オフラインで閲覧できる
  • ファイルがスマホにキャッシュされるので読み込み速度が格段にアップする
  • 検索エンジン経由でアプリをインストールさせることができる
  • 管理者側としてはサイトの審査が不要


などなど、、非常にメリットが大きいのです。

Googleのケース事例として紹介されている、不動産検索サービスを提供するSUUMOの場合、
  • 読み込み時間75%短縮
  • プッシュ通知開封率31%
  • 検索エンジンでのランク評価に好影響
という結果がでています。

そのほかにも、NIKKEIやTwitterやスターバックスなども事例として紹介されています。

ブラウザの対応


PWAという仕組みはスマホのブラウザで動作するため、AndroidとiOSにそれぞれインストールされているブラウザの対応状況によっては正しく動作しない場合があります。

2019年時点では、Google Chromeは完全にPWAに対応しています。Safariについてはまだプッシュ通知ができない、バックグランド同期ができないなど課題が残ります。近い将来、AppleがPWAを完全サポートすることを願うばかりです。

PWAの作り方


前提条件としては、以下の条件です。

  • 最近のバージョン(74以降)のChrome。 PWAは単なるウェブアプリであり、すべてのブラウザで機能しますが、ブラウザレベルで何が起こっているのかをよりよく理解してインストール体験をテストするためにChrome DevToolsのいくつかの機能を使用します。
  • HTML、CSS、JavaScript、そしてChrome DevTools に関する知識。

1、manifest.json ファイルの作成

manifest.json というファイルを作成し、以下の記述をします。
{
  "name": "Weather", //ウェブサイトの名称
  "short_name": "Weather", //ウェブサイトの名称(短文)  "icons": [{
    "src": "/images/icons/icon-128x128.png", //128pxアイコンの場所      "sizes": "128x128", //サイズ定義      "type": "image/png"     }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html", // アプリインストール後のURL転送先
  "display": "standalone", // 変更なし
  "background_color": "#3E4EB8", // アプリ起動時のブラウザの色
  "theme_color": "#2F3BA2" //テーマ色
}

Note: Chromeをインストールするには、少なくとも192 x 192 pxのアイコンと512 x 512 pxのアイコンを用意する必要があります。しかし他のサイズを提供することもできます。 Chromeは48dpに最も近いアイコンを使用します。たとえば、2xのデバイスでは96px、3xのデバイスでは144pxとなります。

2、ウェブアプリマニフェストへのリンクを追加する

アプリの各ページに<link rel="manifest"...を追加して、ブラウザにマニフェストについて通知する必要があります。 index.htmlファイルの<head>要素に次の行を追加します。

public/index.html


<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">


3、iOSのmetaタグとアイコンを追加

iOSのSafariはウェブアプリマニフェストがまだサポートされていません。そのためindex.htmlファイルの<head>に伝統的なmetaタグを追加する必要があります。

public/index.html


<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">


4、アドレスバーのテーマカラーを設定する

PWA監査で、Lighthouseはアプリの「 アドレスバーのテーマカラーが設定されていない 」と指摘しています。ブランドの色に合わせてブラウザのアドレスバーをテーマにすると、より没入型のユーザー体験を提供できます。
モバイルでテーマカラーを設定するには、次のmetaタグをドキュメントの<head>に追加します。

public/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

基本的には以上の実装で終了です。各種パスはサイトの構造に合わせて変更してみてください。また、もっと詳細にスマホアプリとウェブサイトの統合を行う場合は、Googleが提供しているドキュメントに はじめてのプログレッシブウェブアプリを参照してみてください。



AppleはPWAフレンドリーに近づくか?


答えはおそらくYESです。いずれにせよ、AppleがPWAテクノロジーに近づき、それに近づいていることは大きな一歩ですね。iOS 12.2およびiOS 13ベータ版のPWA対応は多くの人が待ち望んでいたことですので。

PWAはモバイルアプリケーションの未来だと考えています。ネイティブアプリケーションは今後数年後、PWAを基本としたウェブアプリに置換えられ、ネイティブアプリはウェブサイトと完全な組み合わせになる可能性があると思われます。


結局のところ、Googleはこの点で先導的であり、常にProgressive Web Appsの開発を推進しています。PWAについては今後もウォッチを続けていこうと思います。最新記事についてはメルマガを購読していただけると助かります。










2019年10月11日金曜日

越境ECビジネスモデル塾

To: デジタルスタジオのサービスをご利用しているお客様へ

Live Commerceでは今月から週1回のメールマガジンを配信しています。以前は私が行なっていたので月に1回がやっとでしたが、担当者が引き継いていただく形になって、これからは週1回の配信です。

メールマガジンのコーナーに作ってもらったのが、越境ECビジネスモデル塾です。
これは、私が経験した越境ECにおけるマーケティング施策の過程で生み出した企業単位での個別のビジネスモデルを紹介します。まあ、ビジネスモデルというか、個別のマーケティング施策と言ったほうがいいかもしれません。それが結果的に企業単位での独自性の高いビジネスモデルになった形ですね。

基本的に越境ECマーケティングは 広告 → LP → 売上 という流れは国内ECと同じです。

ただし、商材によってユーザーの属性が全然違うので LP → 売上 の導線に至るまでに教育させるべき手段が異なります。

消費者は広告を見た後に、その日に注文する人がだいたい46%、12日から30日後に注文する人が23%という数値があります。これは私が直接管理してい越境ECサイトなのですが、広告を見ても後日注文する人は全体としては54%もいるのです。広告を見た人の2人に1人の割合です。

マーケティングの施策としては、広告を見てから2日から30日の間にユーザーにどんなアクションを起こすのかが重要になっています。

一般的にはユーザーとしての足跡を残してもらう仕掛けをLP内に設置しておき、たとえ当日に注文されなくても再訪してもらえるようにしておくのです。

  • メールマガジン登録してもらう
  • SNS登録してもらう
  • リマーケティング広告で追いかける

ただ、ここからが問題です。
広告を見ても後日注文する人(広告を見た全体の54%)に対して、どんな内容のメールマガジンやSNS投稿にするのかです。


メールマガジンにしてもSNS投稿にしてもコンテンツを考えなければなりません。創造(想像)が必要です。

そこで私はクライアントとよく話すのが、

  • メールマガジンの内容(薄い、濃い)は気にしない。とにかく書く、配信する
  • SNSの内容は気にしない。とにかく投稿する

ということを強調します。

というのは、商品の販売に結びつくようなセールスレターは、良質な教材を使って教育された人でないと、書けません。

普通の人が書けるレベルの文章は、商品のちょとしたうんちくか、「かっこいい」とか「かわいい」といった自分がその商品に対して主観的に思うことぐらいではないでしょうか。実際書くとしたら。


世の中のメールマガジンと比較すれば非常に薄っぺらい内容なので、「こんな程度でも配信して大丈夫なのか?」

とよく聞かれますが、全然問題ないと思います。


なぜかというと、文章には他人の言葉自分の言葉があり、人の感情を動かすのは、自分の言葉だからです。自分の言葉は一見薄っぺらそうに思われがちですが、共感されます。

説明します。


他人の言葉とは、その通り誰かが言ったようなことです。まあ、本に書いてあるようなこともそうですね。他の誰かが言ったようなことを焼き直しして自分の言葉に置き換えた内容です。他人の言葉はほとんど響きません。


先日私が買った朝食用のナッツです。



これを紹介するときの他人の言葉。

オーツ麦に自家焙煎された玄米を加えたグラノーラベースに、シールド乳酸菌が500億個入った、甘さ控えめでより健康志向のグラノーラです!!
保存料・着色料・香料は無添加で牛乳や豆乳と一緒に、またはヨーグルトやアイスクリームなどにトッピングしてお召し上がりいただけますよ!!


これを自分の言葉にするとこうなります。

恥ずかしながら、自分はお腹が弱いのであまり食べたことないものを口にすると、昼食後とかに下痢になることがった。ただ、これを朝食としてとるようになってから、お腹の調子がめっちゃいい。下痢もほとんどしなくなったし体もなんとなく軽い感じ。仕事中にお腹痛くなると最悪、仕事集中できないしね。


公式サイトやSNSやブログなどの公にさらす場合は、他人の言葉。
メールマガジンで読者と1対1で送るなら自分の言葉。


私は公式サイトに掲載する文言とメールマガジンに掲載する文言は全く別です。
メールマガジンは読者と1対1なので、自分の言葉でもっと自分を深く知ってもらうように書きます。

自分の言葉で書いた文章は、いままで多くの企業担当者から反応をいただきました。
やっぱり、自分の言葉は人の感情を動かします。

話を戻しますが、広告を見ても後日注文する人(広告を見た全体の54%)に必要なのは、自分の言葉をとにかくニュースレターを介してユーザーに届けることです。


たとえメールマガジンのコンテンツの質が最初は低くても1週間に1度でもそういった言葉をユーザーに届けることができるようになれば、立派なマーケティングです。まずは、これが基本中の基本。

これができるようになったら、少しづつメールマガジンの内容を良質なものにしていけばいいのです。

最初から、きれいな商品画像やビジュアルを用意する必要はないと思います。

大事なことは、自分の言葉で一定の間隔で続けることです。
継続すれば、そこからどうやって改善していけばいいのか、すぐにアイディアが浮かぶと思います。


















フィリピンで求人

To : デジタルスタジオのサービスをご利用のお客様へ

当社ではフィリピンで求人をしているのですが、現在は技術系ではなくデータ入力というデスクトップワークの職種で求人をしています。ECサイトの商品登録をする担当者ですね。


Indeedで求人をしているのですが、1日300円で1週間求人広告をしたところ、100件以上の応募が殺到します。

フィリピン国内でIndeedで求人


Indeedの機能でスペック、学歴、保有資格、居住地などでいろいろフィルターをかけることができるので、採用側としては高スペックの人材を選べるので、日本を一歩出るだけでまったく求人の市場環境が違うことがわかりますね。

日本の1/3のコスト感で同じ仕事ができます。

システム開発やデスクトップ作業など、フィリピンの人材を活用して御社業務も一生に最適化できる提案が可能です。 ⇨ フィリピンオフショア開発