AIで作ったWebアプリをスマホで使いやすくする|PWA化してホーム画面に置いた理由

AIで作ったWebアプリをスマホで使いやすくする|PWA化してホーム画面に置いた理由 海外AI・ビジネス

前の記事で、私はAIを使ってリアルタイム通訳アプリを約30分で形にした体験を書きました。

ただ、動くものができたあとに、もう一つ気になったことがありました。

実際に使うとき、毎回ブラウザを開いてURLへアクセスするのは面倒ではないか。

通訳アプリは、旅行中や会話中など「今すぐ使いたい」ときに開けることが重要です。

そこで私は、このWebアプリをスマホのホーム画面から直接起動できる形にしました。

このようにWebアプリを、インストール可能なアプリのように扱える仕組みをPWA(Progressive Web App)と呼びます。

実際に作った通訳アプリでは、機能を増やすより先にPWA化し、スマホのホーム画面からすぐ起動できる状態にしました。

Webアプリが動いても、毎回URLを開くのは使いにくい

WebアプリはURLを開けば使えます。

ただ、実際に日常で使うとなると、毎回ブラウザを起動して、履歴やブックマークから探して開くのは少し面倒です。

特に通訳アプリのように、必要な瞬間にすぐ使いたいものでは、この数ステップが気になります。

機能が足りないのではなく、起動するまでの手間が使いにくさになっている。 私はここを先に直すことにしました。

PWA化すると、Webアプリをホーム画面から起動できる

PWAは、Web技術で作られたアプリを、対応するブラウザや端末でインストール可能な形として提供する考え方です。

対応条件を満たすと、Webアプリをホーム画面などから起動できるようになります。一般的にはWeb App Manifestなどの情報を使って、アプリ名やアイコン、起動時の表示方法を定義します。

MDN:Making PWAs installable

私がやりたかったのは、難しい仕組みを見せることではありません。

スマホのホーム画面にアイコンがあり、必要なときにすぐ通訳アプリを開ける状態にすることです。

通訳アプリでは「すぐ開けること」自体が機能になる

通訳アプリは、使うタイミングが限られています。

外国語で話しかけられた、相手に伝えたいことがある、店員と会話したい。そういう場面では、起動までに手間がかかるほど使いにくくなります。

そのため私は、翻訳精度や機能追加だけでなく、アプリへ到達するまでの時間を短くすることも重要だと考えました。

ホーム画面から1回タップして開けるだけでも、Webページを探して開くより「日常の道具」に近づきます。

ホーム画面のアイコンも、使いやすさの一部になる

PWA化すると、ホーム画面に表示されるアイコンも必要になります。

私は通訳アプリのアイコンについて、次の要素を入れる方向で考えました。

  • マイク
  • 日本語の「あ」
  • 外国語を示す「A」
  • 双方向の矢印
  • 音声波形

狙いは、小さく表示されても「音声」「翻訳」「双方向」が伝わることです。

アプリを開いた後のUIだけでなく、開く前に見えるアイコンも使いやすさの一部だと感じました。

中身が同じでも「Webページ感」と「アプリ感」は変わる

中身の機能がまったく同じでも、ブラウザのタブとして使うのと、ホーム画面から起動するのでは印象が変わります。

特に、普段あまりWebツールを使わない人に渡す場合は、「URLを開いてください」より「このアイコンを押してください」の方が説明しやすいことがあります。

機能追加をしなくても、起動方法を変えるだけで使いやすさの印象は変わる。 これは実際にPWA化して感じた部分です。

PWA化はネイティブアプリを作ることとは別

PWA化したからといって、WebアプリがそのままiPhoneやAndroidのネイティブアプリと同じになるわけではありません。

ブラウザやOSによって、インストール方法や利用できる機能には違いがあります。

たとえばiPhoneではSafariからWebサイトをホーム画面へ追加でき、条件を満たすWebアプリはWeb Appとして開くことができます。

Apple:WebサイトをiPhoneのホーム画面に追加する

私の場合は、最初からアプリストア配布まで目指すのではなく、今あるWebアプリを日常で使いやすくするための一段階としてPWA化しました。

まとめ:AIでWebアプリを作ったら「どう起動するか」まで考える

AIを使うと、Webアプリそのものを作る速度はかなり上げられます。

しかし、動くものができたあとに考えたいのは、ユーザーが実際にどう使うかです。

  1. Webアプリとして動く状態を作る
  2. 実際にスマホで使ってみる
  3. 起動までの手間を確認する
  4. 必要ならPWA化してホーム画面から開けるようにする
  5. アイコンや起動方法まで含めて使いやすさを整える

AIアプリ開発では、機能を増やすことだけが改善ではありません。

私が通訳アプリを作って感じたのは、「日常でどう起動するか」を整えるだけでも、Webページから道具へかなり近づくということでした。

この通訳アプリを最初に約30分で形にしたときの考え方は、AIで実用アプリを30分で形にして分かったこと|先に決めるべきはコードではなく使い方で説明しています。

コメント

タイトルとURLをコピーしました