合同会社バックアップ
Blog

ブログ

WebViewとは?メリットとブラウザアプリとの違いをわかりやすく解説

アプリのメリット/できること
2024.03.22
Contents
目次を非表示

    初めてアプリ事業を検討する際に、まずスモールスタートの手段として耳にするのが「WebView(ウェブビュー)」という言葉ではないかと思います。

    アプリ事業とは切っても切り離せない技術なので、アプリ事業を始める上ではそのメリット・デメリットを正しく理解しておくことが大切になります。

    そこで、本記事ではアプリ企画・設計を始める前にまず知っておきたい WebView のメリットとデメリット、Web ブラウザアプリとの違い・比較を含めて基礎知識を解説していきます。

    1. WebView(ウェブビュー)とは?をわかりやすく解説

    img - webview解説

    WebView とはスマホのネイティブアプリ(iOS/Android OS)独自の統一ブラウザで、Google Chrome や Safari などとは違う仕様で Web のデータを処理し、ページを表示します。

    Web ブラウザでは、Web サイトを読み込んでいるときに https://backapp.co.jp/blog/ のような URL(オンライン上の住所)やブックマークボタンなどが表示されますが、アプリ内の WebView ブラウザではシンプルにページ内容だけを表示します。普段の Web サイトの見え方とは異なるので、ここだけを見るとアプリの中で独自のページを表示しているように感じるかもしれません。

    ただし、html/css/javascript などのコードによって既に記述されている Web ページを読み込むだけなので、Web ブラウザアプリと自社アプリ(のアプリ内ブラウザ)でページ全体の中身・見え方の違いはありません。 当然、読み込んでいる Web サイトが更新されると、アプリを起動・更新した際には更新された新しい画面がすぐに表示されます。

    いわゆる「ウェブビュー(メイン)のアプリ」とは、基本的には Web サイトと同じコンテンツをそのまま読み込みながら、多少の付加価値をつけて iOS/Android アプリ化するというものです。

    既存のページをアプリ内ブラウザで読み込むメリットとは?

    既存の Web ページを開く際に自社アプリから離れて Chrome や Safari(別のアプリ)を起動するよりも、アプリ内ブラウザでそのまま同じアプリに滞在してもらうほうが滞在時間が伸び、購買行動につながりやすいというメリットがあります。

    一般的に、アプリは Web に比べて閲覧時間が長く、購買行動にもつながりやすいというデータがあります。すべてをネイティブで構築しなくとも既存の Web を生かしながら滞在時間の長いアプリを作れるため、WebView は多くの iOS/Android アプリでは欠かせない機能となっています。

    WebView 機能を活用したアプリの構築例

    WebView 機能は、ゲームやツールアプリをのぞくほとんどの企業アプリで活用されています。

    たとえば、小売企業が EC を含めたアプリを構築する場合を例とすると、

    • 店舗や商品の情報ページをネイティブで構築
    • 店舗や商品の一覧:自動的にリスト表示 ※カテゴリ別の表示に切り替え可
    • 店舗や商品の検索:ネイティブで構築
    • 各項目をタップした際に、店舗詳細(最新の営業時間など)や商品詳細は Web ページに飛ぶ

    といった使い分けはよくある事例といえます。

    ネイティブアプリの中の WebView 部分の見分け方

    アプリ内ブラウザで既存の Web ページを読み込んでいる場合でも、アドレスバーなどが消えるため、ひと目で分かるわけではありません。

    ただ、Chrome/Safari でその企業の Web サイトを確認し、スマホサイトのページデザインがアプリと全く同じ場合は、WebView で読み込んでいる可能性が高いといえます。

    一般的ではありませんが、作り方や通信環境などにより、ハンバーガーメニューのボタンがほんの一瞬表示されることがあったりもします。

    2. WebView メインで自社アプリを構築するメリット・デメリット

    一般的な傾向としては

    WebView メインのアプリ ネイティブ構築が多いアプリ
    メリット ・開発量が減るため、開発費用が下がる
    ・Web を更新すればアプリも更新されるので、更新がラクになる
    ・動作速度を速くしやすい
    デメリット ・動作が重くなりがち
    ・「アプリを使う意味」を生み出しづらい
    ・開発費用が高くなりがち
    ・更新しやすさは開発ベンダーの工夫次第

    となります。ただし、開発費用の低さ以外には補足説明が必要になります。

    WebView のメリット:更新性について

    WebView メインで構築したアプリは Web サイトを更新すれば自動で反映されるので、アプリの更新にかかる労力は削減できます。

    また、「flutter flow」などのノーコードサービスを使ってアプリをネイティブで構築した場合、画面を更新する際にアプリのアップデート=App Store/Google Play の審査が必要になる場合もあるので、一般的には WebView メインのほうが更新性は高い傾向にあります。

    ただし、ネイティブで構築した画面でも、スクレイピングなどの技術を使えば Web サイトの更新をアプリ内に自動で同期させることは可能なので、WebView でなければ更新が二度手間になるというわけではありません。

    たとえば、当社のアプリプラットフォーム「Pasta」では、ネイティブで構築した画面の中で既存の Web サイトの記事コンテンツや商品情報などを表示・更新させることができます。
    (※ちなみに、当社 Pasta ではすべての画面をストア審査不要で管理画面から更新することも可能です)

    img - スクレイピング

    参考:既存のWebからデータを同期する機能について(当社製品アップデート情報)

    WebView のデメリット:動作速度について

    Android アプリは Java/Kotlin、iOS アプリは Swift/Object-C という、それぞれ Web(html/css/Javascript など)とは異なるコードで開発されます。Kotlin や Swift で構築されているネイティブ部分と比較すると、WebView 部分は html などのコードをアプリで表示するために処理するので、動作が遅くなる傾向にあります。

    ですので、世の中の WebView メインのアプリは、ネイティブ部分が多いアプリに比べて「もっさり」したアプリの割合が高いです。

    ただし、あくまで既存の Web サイトをネイティブアプリのブラウザで読み込んでいるという仕組みなので、既存の Web サイトの品質が高い場合は、ユーザー体験はさほど悪くなりません。

    さらに、月額数万円など格安のパッケージで iOS/Android のネイティブアプリを提供するサービスの場合、ネイティブで構築しているのに開発品質が原因でむしろ動作速度が遅くなるというリスクもあります。

    WebView の注意点:アプリ固有の価値について

    WebView メインで構築したアプリは、普段から自社の Web/SNS をよく見てくれている顧客や EC サイトで買い物をしたことがある顧客にとっては「見たことがある内容」が多くなります。

    しかし、

    • 会員登録をしていないゲスト状態でもコンテンツのお気に入り登録ができる
    • 端末内にパスワードを保存し、サインインの手間を省ける
    • プッシュ配信によって、継続的に接点を創出できる(LINE と比較すると、タップした際の遷移先を指定できる点がメリット)
    • デジタル会員証やクーポンなど、コンテンツ以外の機能をつけられる
    • Web ブラウザアプリ (Chrome, Safari) に比べて、購買につながりやすい ※後述

    など、アプリならではの価値も付与することができます。

    ですので、「ウェブビューメインのアプリだと顧客に使う意味を感じてもらえない」というほどではなく、企画・設計で工夫できる部分もあります。

    関連記事

    会員カードをアプリ化するメリットとは?「デジタル会員証」の事例と導入のポイント
    紙やプラスチックのカードではなく、アプリなどのデジタル会員証を導入することで、企業はリピート率向上やファンを獲得しやすくなります。また、デジタル化したことにより、顧客情報を容易に集めることが可能となり、情報分析によりさらなるマーケティング施策に役立てます。本記事ではデジタル会員証とは何かというところから、デジタル会員証を導入するメリットと導入するためのポイントや注意点を詳しくお伝えいたします。
    続きを読む

    3. WebView メインのネイティブアプリと、Web ブラウザの違い

    ネイティブアプリの黎明期から、特にEC 事業者は「アプリ化のメリットが大きい」と語られています。

    img - ECメリット

    滞在時間やカート追加率なども高くなる上に、EC サイトをスマホの Web ブラウザアプリで読み込んでいる場合と、WebView(アプリ内ブラウザ)を活用した EC アプリを使っている場合で、CV 率に大きな違いがある というデータがあるからです。

    Criteo の 2018 年レポートでは、モバイルブラウザで 3%、アプリでは 20% とされています。Adjust の同時期のレポートでも、アプリユーザーの CV 率は 12% とされています。

    ブラウザアプリ(Chrome, Safari)で EC サイトを読み込んでいるときと比べると、アプリを使っているときのほうが

    • ログイン状態を保存しているため、「パスワードを忘れた」などの離脱率が下がる
    • プッシュ通知経由で起動した場合、その時点での購買意欲が高い(パルス型消費)
    • お気に入り商品の保存など、比較検討がしやすい
    • 商品検索など一部をネイティブで構築した場合、その段階では動作が快適になる

    といったメリットが要因として考えられます。

    ※注意点:比較検討をする時間が長い高価格の商材ではパソコンからの購入、および「店舗で実物を見てから」の購入が多くなる傾向にあります

    4. 「アプリ」と名のつくものの分類と、それぞれの解説

    簡単にまとめると

    大枠では Web(ブラウザで閲覧)

    • Web サイト = 情報を見せるためのページ群
    • Web アプリ = Web ブラウザ上で情報を見せるだけでなく、さまざまな機能を利用できるアプリケーション

    大枠ではネイティブアプリ

    • フルネイティブアプリ = Web とは異なる技術で、iOS/Android それぞれの OS で動くように中身をイチから構築するアプリ。ゲームアプリなどは基本フルネイティブ
    • ハイブリッドアプリ = 時代とともに定義が揺らいでいるが、開発コストを抑えてネイティブアプリを構築する手法
    • WebView アプリ (俗称) = ネイティブアプリのアプリ内ブラウザで、既存の Web サイトを読み込んでいる、特に Web を読み込む部分が多いアプリ

    という分類となります。

    より詳しい分類はこちら

    【開発の現場から】結局ハイブリッドアプリとは何?って話と、事例・メリットなど基礎知識
    アプリの企画をしようとすると、一言に「アプリ」といっても「ネイティブアプリ」「Web アプリ」など、多くの種類があることに気づくと思います。特に「ハイブリッドアプリ」などは、定義があいまいだったりするので、混乱することもあるかと思います。そこで、今回は自社アプリを企画中の方向けに、「アプリ」と名がつくものの特徴を解説し、企画・設計に生かせるようそれらの比較をしていきます。
    続きを読む

    まとめ + どこまで WebView に頼るか迷ったら?

    初めてのアプリ事業においては、「WebView ばっかりだと良くない」「WebView のアプリは顧客にメリットがない」といった声に惑わされることも少なくありません。

    注意点としては、WebView が明らかに優れた手法・ダメな手法というわけではありません。

    ですので、

    1. WebView のメリット・デメリットを把握する
    2. 自社のアプリの場合、どこにこだわるか(ネイティブ化する候補になるか)をイメージする
    3. 最終的には設計段階から伴走してくれる開発会社に頼るのも一つの手段

    など、段階を踏みながら自社の企画を固めていくことをおすすめします。

    実際に当社でも、WebView メインでの安価なノーコード開発から、ネイティブ構築が多いフルスクラッチ開発まで幅広く手掛けています。

    ご不明な点などありましたら相談に乗らせていただいますので、お気軽にお問い合わせください。

    お手頃価格で簡単に自社アプリを開発~運用するなら
    img
    • 「自社アプリを考えているが、初期投資を抑えてまずは試してみたい」
    • 「LINE からの PUSH 配信で顧客と継続的に接点は作れているが、費用対効果が見合わなくなってきた」
    • 「安すぎるシステムだと動作速度や拡張性などが不安」

    といったお悩みを抱えている企業様に向けて、ノーコードでアプリを開発するサービス「PASTA」を展開しています。