合同会社バックアップ
Blog

ブログ

【開発現場より】結局ハイブリッドアプリとは?事例・メリットなど基礎知識【つまりwebview?】

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

    (2023 年 12 月更新)

    ディレクターの高橋です。

    アプリの企画をしようとすると、一言に「アプリ」といっても「ネイティブアプリ」「Web アプリ」など、多くの種類があることに気づくと思います。

    特に「ハイブリッドアプリ」などは、定義があいまいだったりするので、混乱することもあるかと思います。

    そこで、今回は自社アプリを企画中の方向けに、「アプリ」と名がつくものの特徴を解説し、企画・設計に生かせるようそれらの比較をしていきます。

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

    簡単にまとめると

    大枠では Web

    • Web アプリ = Web ブラウザ上で情報を見せるだけでなく、さまざまな機能を利用できるアプリケーション
    • LINE ミニアプリ = LINE というプラットフォームの中で動作する Web アプリ
    • PWA = Progressive な(進化した)Web アプリ。ネイティブアプリに近い
    • App Clips = iOS 限定。アプリをインストールしてもらうために Web 上で動作させている、ネイティブアプリの一部分(機能)

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

    • フルネイティブアプリ = Web とは異なる技術で、iOS/Android それぞれの OS で動くように中身をイチから構築するアプリ。ゲームアプリなどは基本フルネイティブ
    • ハイブリッドアプリ = ??(詳しくは後述します)
    • WebView アプリ (俗称) = ネイティブアプリの中で、既存の Web サイトを読み込んでいる、特に Web を読み込む部分が多いアプリ

    ※ネイティブアプリは公開時と大きなアップデート時に App Store/Google Play の審査が必要です
    ※Web アプリは審査が不要ですが、LINE ミニアプリは LINE ヤフー社の審査が必要です


    という分類となります。

    2. ハイブリッドアプリって何? 具体例は?

    私もアプリ業界に長くいますが、最近ググったところでは意味が変わってきているように感じます。というか、そもそも明確な定義はあったのでしょうか?

    昔から「WebView 部分が多いネイティブアプリ」のことを指していたり、「Monaca などクロスプラットフォームで開発したアプリ」のことを指していたり、とりあえず意味とか考えずにコピペで量産された記事があったりした印象です。

    近年では、flutter という iOS/Android 両方のネイティブアプリを構築できるクロスプラットフォームの言語がかなり普及したことで、「Web とネイティブアプリの中間がハイブリッドアプリ、つまり flutter(または Monaca/Cordova など)が代表例」とか書かれることが増えた気もします。

    ですので、自社アプリを企画する際はハイブリッドアプリなど定義が曖昧な言葉に惑わされず、

    • Web アプリ(SPA や PWA 含む)にする
    • ネイティブアプリを iOS/Android それぞれで作る
    • ネイティブアプリを flutter などのクロスプラットフォームのフレームワークで作る(動作速度などを我慢し、開発費用を下げる)

    のいずれかから選択すると良いと思っています。

    補足

    • Web アプリはコード一つで iOS/Android 両方に対応できます(Web なので)
    • flutter や LINE ミニアプリは、「クロスプラットフォームなので一つコードを書くだけで両方に対応できて開発コスト削減!」という訴求をしています
    • しかし flutter の成果物は Web アプリではなくネイティブアプリです

    このへんを理解して書かれているブログがあまりない印象で、「Web とネイティブアプリの中間がハイブリッドアプリ」という一文だけがコピペされ、解釈が人によって分かれてしまったのではないかと思っています。

    ※もしこのへん私より詳しい方いたら教えてください

    ハイブリッドアプリと混同されがちな「webview(ウェブビュー)」とは?

    いわゆる「ウェブビューのアプリ」とは、基本的には Web サイトと同じコンテンツをそのままスマートフォンやタブレットで読み込むために iOS/Android アプリ化するというものです。WebView とはスマホアプリ独自の統一ブラウザで、Google Chrome や Safari などとは違う仕様で Web サイトをレンダリングします。

    「自社アプリなんて作っても、Web とアプリの二つにいちいちお知らせとかのコンテンツを投稿するのは面倒でしょ」と言われることもありますが、WebView 主体のネイティブアプリでは、既存の Web を読み込めば Web を更新するだけでアプリの中身も更新されます。

    ※そもそもスクレイピングなど他のやり方もあるので、「更新が二度手間になる」という懸念はあまり気にしなくていいと思っています

    「プッシュ通知で継続的に顧客と接点を持ちたい」という目的だけであれば、ほとんど WebView で構築したネイティブアプリでも達成できます。

    ただ、その作り方だと、既存の Web が高品質なものではないと「もっさり」したアプリになり、「アプリを使う意味がない」とユーザーから不満を抱かれる傾向にあります。ですので、一般的に 「WebView アプリのデメリットは動作が遅いこと」と語られます。

    ※作りこまれた Web を WebView で表示して、ブックマークや SSO やクーポンなどで付加価値をつけ、うまくプッシュ配信したりするだけでユーザー体験は良くなるので、WebView=悪 というわけではありません

    関連記事

    Webviewとは?メリットとブラウザアプリとの違いをわかりやすく解説
    初めてアプリ事業を検討する際に、まずスモールスタートの手段として耳にするのが「WebView(ウェブビュー)」という言葉ではないかと思います。アプリ事業とは切っても切り離せない技術なので、アプリ事業を始める上ではそのメリット・デメリットを正しく理解しておくことが大切になります。そこで、本記事ではアプリ企画・設計を始める前にまず知っておきたい WebView のメリットとデメリット、Web ブラウザアプリとの違い・比較を含めて基礎知識を解説していきます。
    続きを読む

    3. ハイブリッドアプリのメリット

    いったん、ハイブリッドアプリを flutter や Web アプリなど広く定義します。

    ネイティブアプリと Web の中間に位置する手法は、総じて iOS/Android それぞれでの開発が必要なネイティブアプリに比べて開発期間・開発費用を削減できます。

    また、二つの OS で保守・運用をする必要がないため、初期費用だけでなくアップデート対応などのランニングコストも削減できます。

    ネイティブアプリとの違い

    ハイブリッドアプリ ネイティブアプリ
    開発方法 一つのコード(Javascript, flutter など) Android: Java/Kotolin
    iOS: Swift/Object-C の二つが必須
    向いている企業 開発費用を抑え、まずは試してみたい 予算よりも、顧客に提供するメリットを第一に考えたい
    デメリット ・動作が重くなりがち
    ・できることに限りがある
    ・開発費用が高くなりがち
    ・運用後も一定の予算が必要(OS アップデート対応+インストール促進の宣伝施策)

    Web アプリ・PWA・flutter アプリなどは、総じてネイティブアプリよりは動作が遅くなる傾向にあることが最大のデメリットです。

    現代人は「もっさり」した Web やアプリを嫌うため、「一定時間でページが表示されないと離脱する」という人が多く、ページの表示速度を改善すると売上も向上したという事例も多くあります。

    また、Web アプリやクロスプラットフォーム開発のアプリでは、できることに限りがあります(flutter も、カメラ・GPS・生体認証などを使う際には iOS/Android 固有のコードを書く必要があり、ネイティブアプリ同様の開発が必要になります)。

    一方で、iOS と Android という二つの OS にあわせてネイティブアプリを作る場合は、開発費用が明らかに高くなります。

    開発費用の投資分の回収、運用コストを踏まえた黒字化を果たすには一定のアクティブユーザーとアプリ経由での売り上げが必要なので、ネイティブアプリに投資するのはある程度デジタルマーケティングが自社でうまくいっている状態からをおすすめします。

    img - 表

    4. ハイブリッドアプリの例とそれぞれの特徴

    定義はあいまいですが、ハイブリッドアプリ(仮)と呼ばれるであろうアプリたちの特徴と事例をまとめます。

    flutter

    クロスプラットフォームでネイティブアプリを作る手段は増えてきましたが、普及率で頭一つ抜けているのが flutter です。事例はちょっと調べるだけでたくさん出てくると思います。

    1 つのコードで iOS と Android の両方に対応させるように変換できる機能が備わっているので、Java/Kotolin と Swift/Object-C それぞれのエンジニアに依頼する必要がなくなり、開発期間やコストを抑えて開発できます。

    ただし、カメラや位置情報取得機能を実装する場合は、iOS や Android ごとにネイティブ言語の記述が必要です。

    コードを書かずに GUI(ドラッグ&ドロップ操作)でアプリを作れる「FlutterFlow」というサービスもありますが、こちらはできることに限りがあり、実際のプロダクトを運用するのはなかなかリスキーな印象があります。細かくカスタマイズしようとすると結局コードを書くことになるので、だったら最初から flutter エンジニアに任せたほうが良いのでは?という疑問が拭えません。

    PWA (Progressive Web Apps)

    プログレッシブな Web アプリです。

    全世界にユーザーを持つ Google が生み出した技術で、Web アプリに所定の形式の Javascript を追加するなどの改修を加えることで、ネイティブアプリの強みである「プッシュ通知」などの機能を持たせられます。

    机上の論理では、「ネイティブアプリを開発しなくても Web アプリだけで『アプリ』の機能を顧客に提供できる」ことがメリットです。

    ただし、iOS 側の提供者である Apple は昔から全然乗り気ではなく、長らくプッシュ通知に対応していませんでした。日本では iPhone のシェアが多く、iPhone ユーザーのほうが課金額が高かったりもするので、PWA は日本では厳しいという見方が続いていました。

    2024 年からはようやく Apple が(5~6 年越しで)プッシュに対応するとのことで、今後はもう少し普及するかもしれません。

    関連記事

    Googleが推すPWAにiOSもそれなりの対応?メリット・できないことを改めて整理
    PWA の発表自体から実は 7 年ほど経っていますが、このニュースによって日本国内でも PWA が再注目され始めています。そこで、今回は iOS/Android アプリ開発案件が多い会社の立場から、PWA の定義・役割・メリットなどまず知っておきたい情報をまとめました。
    続きを読む

    LINE ミニアプリ

    LINEミニアプリは、ネイティブアプリで実装するような一部の機能を切り出し、LINE 上で提供する Web アプリです。

    LINE はまごうことなきネイティブアプリなので、LINE の中で動いている Web アプリとなると「ハイブリッドアプリ」感は強いですね(※実際の定義ではありません)。

    主に「デジタル会員証(仮会員証)」「モバイルオーダー」「順番待ち」で使われていますが、ミニ EC 機能なども作れます。
    最大のメリットは、LINE 経由で集客やリマインドのプッシュ通知を送ることで、圧倒的な普及率を誇る LINE に自社の継続集客基盤を作れることです。※LINE ミニアプリ自体に集客機能はないので、「LINE 公式アカウント」とセットで運用することがほとんどです。

    ちなみに大枠は Web アプリですが、LIFF ではない LINE ミニアプリは公開するために LINE ヤフー社の審査が必要です。なので厳密にいえば「Web アプリやハイブリッドアプリはストアの審査が必要なく即リリースできる」というのは誤りです。

    このあたりを調べると「LINE ミニアプリ」と「LIFF アプリ」が出てくるので混乱しますが、下記の記事を参考にしてください。

    関連記事

    LINE ミニアプリの機能とは?特徴・メリット・デメリット・活用事例について
    本記事では、LINE ミニアプリではどのようなことができるのか? また、LINE ミニアプリと LINE 公式アカウント・ネイティブアプリとできることや役割の違いについて、メリット・デメリット触れながら、活用事例をご紹介いたします。
    続きを読む

    5. ネイティブアプリかハイブリッドアプリか迷ったら?

    アプリ開発においてはどうしても聞き慣れない単語が多いため、「ネイティブアプリとハイブリッドアプリどちらがいいのか」という手法自体の比較になってしまいがちです。

    しかし、どちらかが明らかに優れた手法というわけではなく、手法自体でプロジェクト成功率の違いはないので、

    • アプリを作ることで実現したいこと
    • 使える予算と運用体制
    • 業種とビジネスモデル
    • 使うユーザー層

    などを踏まえて必要な要件を洗い出し、最適なアプリ構築手法を考えるのがベストです。

    実際に当社でも、flutter 開発・ノーコード/ローコードでのネイティブアプリ開発・フルスクラッチでのネイティブアプリ開発を比較し、それぞれのメリット・デメリットを理解いただいてから双方納得の上で開発形式を決定し、ご契約に至った事例などがございます。

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

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

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