教えて!Webviewって何?ネイティブと何が違うの?

アプリ開発において、「Webview」や「ネイティブ」というワードを耳にすることがあると思います。
それってなに?何が違うの?という疑問にお答えします。
(2023年1月更新)

  • Q

    そもそもアプリ内の「Webview」ってなんですか?

    A

    アプリの中にHTMLコンテンツ(Webページ)を表示できる技術のことです。
    通常、スマホのアプリの表示部分は専用のプログラムで書いてますが(これを一般的にネイティブ開発と呼びます)、WebviewではSafariやChromeなどのブラウザで表示できるHTMLを読み込み、通常のWebページと同じように見られる枠をつくれます。

    Webviewは「アプリ内ブラウザ」と呼ばれることもあります。

     

    webviewとネイティブの見え方の違い

  • Q

    Webviewを選択する場合のメリットを教えてください。

    A

    制作や管理にかかるコストを抑えられる点です。
    元々Web上にコンテンツがあって、それを流用したい場合、Webviewなら新規でプログラムすることなくアプリ上で同じコンテンツを表示できます。

    ネイティブ開発だとiOS・Androidそれぞれ個別に作ることになりますが、Webviewであれば同じHTMLコンテンツで両OS対応できるので、その点もメリットになります。

    またコンテンツの変更もWebサーバ上のHTMLを更新するだけでOKなので、アプリの申請の手間もかからず、管理コストも押さえることができます。

     

  • Q

    それだけ聞くと、Webviewでいいじゃん!と思えてしまうのですが、ネイティブのメリットって何なのでしょうか?

    A

    サクサク・快適・スムーズな操作感はネイティブならでは。ユーザー体験にこだわるなら断然ネイティブです。
    スマホのウェブブラウザで、通信が滞って、くるくる回る表示からなかなか動かない、みたいなことってよくあると思うのですが、Webviewだと同様の事がアプリでも起こりがちです。

    一方ネイティブアプリでは、アプリ内にある程度のパーツを持っているので、画面遷移時の通信量を抑えることができ、よりなめらかで、サクサクした操作感を実現できます。また「画像が『ふわっと』表示される」というようなアニメーションもネイティブアプリならより自由に表現可能です。

    Webviewとネイティブのどちらかでしか絶対にできない、ということは実はそれほどないのですが、ネイティブのほうがよりよいユーザー体験を提供できますし、ひいてはブランドの世界観を表現しやすいと思います。

    Webviewのリスクについては、こちらの記事で詳しく紹介しています。(※弊社noteに飛びます。)

  • Q

    ストア申請なしで変更できるのは、便利なのでは?

    A

    審査を通さずに機能追加や入れ替えをすることは避けたほうがよいでしょう。
    ECサイトの表示内容がアクセスするたびに変わっていたり、掲載されている記事等が更新されているのと同様に、コンテンツ内容が更新されることは問題ないですが、Webviewを使ってHTMLで提供されている機能そのものを入れ替えたり追加してしまうのはかなりリスクがあると考えています。

    実際、Appleが開示しているガイドラインにも、アプリに含まれる機能はレビューのチームに対して具体的に伝え、参照できる必要があると書かれています。

    “2.3.1 Appに隠れた機能、休止中の機能、明文化していない機能を含めないでください。エンドユーザーにも、App Reviewチームにも、Appの機能が明確に伝わる必要があります。新しい機能、特長、プロダクト変更はすべて、App Store Connectの「Notes for Review(審査向けのメモ)」のセクションに具体的に記載し(具体性に欠ける説明は却下されます)、審査時に参照できるようにする必要があります。”

    ■引用:「App Store Reviewガイドライン」(2022年12月9日時点で掲載されていた内容から抜粋)

    App Store Reviewガイドラインの序文には、審査プロセスに対する不正を働こうとした場合にはアプリだけでなくそのデベロッパー(アプリ提供会社)のアカウントを除名するという内容の記載もあります。

     

  • Q

    Webviewを使うときのコツはありますか?

    A

    単にWebサイトを表示するだけでなく、アプリと連携させてUX向上を狙いましょう。
    Webviewを使って既存のWebサイトを並べるだけだと、前述のようにリジェクトのリスクがあるのはもちろんですが、ユーザーにとってもWebサイトの利用と大差なくアプリならではの顧客体験を提供することができません。

    弊社が提供するアプリプラットフォーム「MGRe(メグリ)」が作るアプリでよく行われているのが、Webviewでサイトへの「自動ログイン」です。アプリでお買い物をしようとしたときにログインを求められて買うのをやめてしまった経験がある方は多いと思いますが、自動ログインを実現することでこの不快な顧客体験を解消することができます。

    自動ログインは、主にECサイトやポイントカードの残高・履歴を参照するマイページなどで使われることが多い機能です。自動ログインを実現することで、アプリとWebサイトの境目が一般的なユーザーには意識されなくなり、一体化した顧客体験をアプリで提供できるようになります。

    この機能を実装するためには、Webサイト側と連携を取り、カスタマイズ対応をする必要があり、それなりに知識や経験が必要になります。
    MGReはこの実績が豊富で、多くのアプリで自動ログインを実現させています。これに対応可能なプラットフォームであるという理由でMGReを選ばれたり、他社プラットフォームからの載せ替えを決断される企業様も多くいらっしゃいます。

    自動ログインについては、こちらの記事で詳しく解説しているので気になる方はご覧ください。(※弊社noteに飛びます。)

     

  • Q

    ネイティブを選択するときのコツはありますか?

    A

    独自機能の開発や快適な操作性を実現できるが、まずは実績あるプラットフォームの利用から始める手も。
    Webサイトとアプリの標準的なUIには差異があるので、自動ログインを使ってアプリの利用体験を一体化したとしても、細かいところで違和感が生じることは否めません。
    ネイティブ開発にはどうしても開発・運用(メンテ) コストがかかってしまいますが、その問題がクリアできるのであれば、快適な操作性を実現できるメリットはとても大きいです。

    ただ、独自の機能をいきなりネイティブ開発するのはリスクがあります。リリース直後は改良・改善を繰り返す必要がどうしても出てしまうので、そのコストも見込まなくてはいけませんし、そのたびにユーザーにアップデートを強いることになる点もデメリットと言えるでしょう。

    このあたりはまずWebベースでアプリ向けの新機能開発を試していき、改善が落ち着いたタイミングでネイティブ化を検討するというステップアップ開発を検討するのもよいでしょう。

    また、MGReのように実績のあるネイティブ機能が最初から提供されているプラットフォームを活用して、リスクなく快適なアプリ開発を行う方法も有効です。

    MGReは各社独自のカスタマイズ開発も可能なプラットフォームですが、多くの企業様がMGReの標準機能+Webサイトへの自動ログイン、あとは既に使用中の会員システムと連携させる最小限のカスタマイズだけでアプリをリリースし、EC売上や会員数の増加、アプリ利用率の向上など目に見える実績をあげていらっしゃいます。

    まずは他社で結果の出ているMGReの標準的なアプリ機能を使ってアプリビジネスの実績を作り、次のステップでオリジナルの機能開発に着手していく形で、段階的にアプリビジネスを立ち上げていく方法はおすすめです。

     

  • Q

    結局、Webviewとネイティブどちらを選ぶべき?

    A

    ざっくり言ってしまうと、以下の視点で選択ということになります。
    コストで考えるならWebview
    UX重視ならネイティブ
    ただ、弊社がご支援する小売業向けのアプリ開発ではWebviewで開発することが多いです。

    通常、Webviewの場合、アプリからECサイトを表示するたびにログイン操作が必要になってしまい、これがユーザー体験を大きく損なう原因となるのですが、MGReの場合はECサイトを表示する際に自動ログインさせる機能をカスタマイズ開発できます。
    これにより、WebviewであってもUIUXを考慮したアプリ開発が可能です。

    Webviewとネイティブどちらも活用したアプリの事例を最後にご紹介したいと思います。

    バロックジャパンリミテッド様のアプリ「SHEL’TTER PASS」では、ECのコンテンツを利用した機能でWebviewとネイティブをうまく使い分けています。
    WEBSTOREタブではお気に入りのブランドのECサイトに簡単にアクセスできる仕組みになっていますが、この部分はWebviewを利用してECサイトと同じ体験・サービスが利用できるようになっています。
    シェルターパス アプリ画面の画像
    対照的にホームタブにあるスナップやランキングにあるコンテンツは、ECサイトにある商品の詳細情報の画面までネイティブで作り込まれています。

    これはなぜかというと、コーデスナップやランキング商品は閲覧数が多いためです。ランキングを見て、ランキング内の商品をクリックして、またランキングに戻ってとユーザーがwebブラウザを行ったり来たりします。Webviewではwebブラウザを表示する度に読み込みが発生するため、タイムラグが生じてしまいます。コンテンツをたくさんサクサク見てもらいたい場合はWebviewよりも快適に閲覧できるネイティブがおすすめです。

    さらに、こちらのアプリでは、コーデスナップからスムーズに商品購入ができるなど、作り込まれたスマホ向けのECサイトをそのまま活用しています。
    シェルターパス アプリ画面の画像2

     

まとめ

・アプリならではの快適な顧客体験を作り込みたい場合はネイティブ
・コストを抑えるならWebview 

ただし、ECサイトへの自動ログインが実現できると、アプリとWebサイトを一体化させた顧客体験を提供することも可能になります。

ネイティブとWebviewの違い、参考になりましたでしょうか?

ネイティブとWebviewについてもっと知りたい方、アプリ用語を他にも知りたい方は、こちらのホワイトペーパーで図解を交えて解説しています。

アプリの知識を深める際にぜひお役立てください。