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

※EAPは2020年6月に「MGRe(メグリ)」へとリブランディングしました。

  • Q

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

    A

    HTMLコンテンツを、アプリ内で表示できるようにするものです。
    いわゆるスマホのアプリは、コンテンツのある程度の枠組をすでにアプリ側で持っているのですが、その中にSafariやChromeなどのブラウザで表示できるHTMLが見られる枠をつくることができます。それを「Webview」と呼んでいます。

  • Q

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

    A

    一番大きなメリットはコスト面です。
    元々Web上にコンテンツがあって、それを流用したい場合、Webviewなら新規でプログラムすることなくアプリ上で同じコンテンツが表示できます。コンテンツの更新もHTMLの書き換えをすればよく、アプリストアへの申請や審査、ユーザー側のアップデートなどの必要がありません。また、iOS・AndroidのどちらもWebviewに対応しているので、個別に開発することなく共通のコンテンツを表示することが可能です。

  • Q

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

    A

    サクサク・快適・スムーズな操作感はネイティブならでは。ユーザー体験にこだわるなら断然ネイティブです。
    スマホのウェブブラウザで、通信が滞って、くるくる回る表示からなかなか動かない、みたいなことってよくあると思うのですが、Webviewだと同様の事がアプリでも起こってしまうんです。
    一方ネイティブアプリでは、アプリ内にある程度のパーツを持っているので、画面遷移時の通信量を抑えることができ、よりなめらかで、サクサクした操作感を実現できます。また「画像が『ふわっと』表示される」というようなアニメーションもネイティブアプリならより自由に表現可能です。

    また、Webviewで同じコンテンツを表示することはできても、機能全体をWebviewでとなると、操作性やデザイン面がOSの標準と異なってしまうんです。EAPの場合、基本的な機能に対して、iOSとAndroidそれぞれのデザインガイドラインを押さえたベースを用意していますので、ユーザーからすると、より使いやすい「わかってる」アプリを提供できるということになります。

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

  • Q

    そんなEAPでも、あえてWebviewを選択することがあると聞きました

    A

    開発コストや運用コストと、実現できるユーザー体験とを比較して、よりメリットが大きい方をご提案しています。
    Webviewを選択している事例として、例えばバロックジャパンリミテッド様のアプリ「SHEL’TTER PASS」では、ECをアプリ内の「WEBSTORE」タブから利用できますが、こちらはWebviewです。


    コーデスナップからスムーズに商品購入ができるなど、作り込まれたスマホ向けのECサイトをそのまま活用しています。もちろんただWebviewで表示いているだけではなくて、購買までをスムーズに繋げられるよう、シングルサインオン(SSO)機能で、ECサイトへのログインをアプリ側で自動で行うようにしていたり、アプリのメニューとECサイトのメニュー表示が重複する画面ではヘッダーとフッターを非表示にすることで、お客様が操作方法などで混乱しないように調整しています。

    ちなみに「SHEL’TTER PASS」以外でも、ECは決済など複雑な処理を伴うため、アプリ側でコマース機能をすべて持つよりもECの既存機能を使ったほうがメリットがあると考え、最終的にWebviewに遷移させることが多いです。

    開発コストや運用コストと、ユーザー体験として実現したいブランドの世界観とを考えて、バランスよく選択いただけるようご提案しています。

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

MGReでは、ネイティブ開発での対応も可能です。 「こんな機能をつくりたいけど、実現可能?」「今のアプリ、動作が遅くて見直したいんです。。」など、ぜひご相談ください!

【次のコラム】

【Meetup開催レポート】シーボン.のアプリを活用したマーケティングとは?

【前のコラム】

何度もログインさせられるアプリはイヤだ

コラム一覧へ