TL;DR: ネイティブかWebViewか？Evlokなら選択は不要です。もっと良い方法があります：ページごとに選び、再設計せずにトグルでいつでも切り替えられます。
ほとんどのShopifyアプリビルダーは、初日から一方の道を選ばせます：完全にネイティブか、完全にWebViewか。その選択は後で元に戻すのが高コストです。ハイブリッドアプローチならロックインが完全に解除されます。ページごとに、どの画面を完全にネイティブで表示し、どれを最適化されたWeb埋め込みで表示するかを決められます。100％ネイティブ、100％WebView、あるいはその間の任意の比率にし、再構築せずにトグルでいつでも変更できます。
| アプローチ | 何を意味するか | コスト |
|---|---|---|
| 完全ネイティブ | すべてのページが本物のネイティブ画面です。手動でコードを書くか、ノーコードビルダーでネイティブコンポーネントをドラッグ＆ドロップして作成します。 | 将来の更新はすべて、そのページを再度コード化またはブロックをドラッグして作り直す必要があります。ウェブサイトから自動的に引き継がれるものはありません。 |
| 完全ウェブビュー | アプリシェルでラップされたあなたのウェブサイト | ヘッダーやフッター、ポップアップなどのブラウザ要素が表示されやすく、ページの読み込みはアプリではなくウェブサイトと同じ速度になります。 |
| ハイブリッド | ページごとに選択でき、いつでも変更可能です | ブラウザ部分を除去し、カートとチェックアウトを完全に連携させるプラットフォームが必要です。さもなければ、つなぎ合わせたように感じられます。 |
誰も警告しない選択
Shopifyアプリを構築する多くのマーチャントは、初期段階で同じ分岐点に直面します。完全ネイティブにするか、ウェブサイトをウェブビューでラップするかです。
技術的な詳細のように思えるかもしれませんが、実際はそうではありません。この決定一つでアプリ全体が決まり、ほとんどのプラットフォームではリリース時にロックされます。
ネイティブを選べば、アプリ内のすべてのページをビルダーのツールで一から作成する必要があります。ウェブビューを選べば、アプリはウェブサイトのヘッダー、フッター、ポップアップを継承しますが、これらはスマートフォン画面に適しません。
本当の問題は「間違えて選んでしまうこと」ではありません。後から方針を変えたいとき、ほとんどのプラットフォームは一からやり直しを強いることです。
ネイティブアプリで実際に得られるもの
完全なネイティブとは、アプリ内のすべての画面が本物のネイティブ画面であることを意味します。そこに到達する方法は2つあります。コードを手書きするチームもあれば、今日のほとんどのShopifyマーチャントはノーコードのアプリビルダーを使い、コードを一切書かずにネイティブコンポーネントをドラッグ＆ドロップで配置しています。どちらの方法でも結果は同じです。ウェブサイトのふりをしたページではなく、本物のネイティブ画面です。
動作は速く、滑らかで、アプリらしい使い心地。なぜなら、本物のアプリだからです。
しかし、何かを更新したい瞬間にそのトレードオフが現れます。コードを書く場合でもブロックをドラッグする場合でも、ウェブサイト上の新しい商品ページのレイアウトは自動ではアプリに反映されません。誰かがアプリビルダー内で、ウェブサイトとは別にそのページを作り直す必要があります。
WebViewで実際に得られるもの
WebViewアプリなら、その作り直しは不要です。既存のウェブサイトをそのままアプリの枠の中に表示します。
ローンチは迅速。再デザインは一切不要です。
しかし、ほとんどのWebViewアプリは、その実態そのものに見えます。つまり、スマートフォンに押し込んだウェブサイトです。ブラウザ向けに作られたヘッダーやフッターはそのまま残り、デスクトップ訪問者向けのポップアップがそのまま表示され、読み込み速度もウェブサイトのままで、アプリに期待される軽快な操作感とは程遠いものになります。
どちらか一方を選ぶ必要はない理由
ほとんどのマーチャントが知らされていない事実があります。アプリ全体を単一の方式にする必要はないのです。
ストアのニーズに合わせて、すべてのページを完全ネイティブで運用することもできます。早期リリースを優先するなら、すべてのページを埋め込みWebViewにすることもできます。あるいは、その中間の選択肢もあります。パフォーマンスの高いページはウェブサイトのまま活かし、それ以外を完全ネイティブで構築するのです。
これはスイッチではなく、ダイヤルです。最適な設定はストアごとに異なります。
カート、チェックアウト、アカウント画面は、完全ネイティブにすることで大きなメリットが得られる傾向があります。これらの画面はユーザーが素早く操作する場所であり、ここでの速度が購入完了の可否に直結します。
カスタムコンフィギュレーターを備えた商品ページや、すでにデザインに時間をかけたコレクションページを作り直す必要はありません。アプリ内でも、今のウェブサイトとまったく同じ見た目・動作で表示できればいいのです。
EvlopのWebView埋め込みがこの課題を解決する方法
「ネイティブとWebViewを混在できる」と言うのは簡単です。しかし、それをうまく実現するのは難しく、多くのプラットフォームが2つの点でつまずいています。
判断の変更には通常、大きなコストがかかります。ほとんどのアプリビルダーでは、WebView方式でリリースした後に、あるページをネイティブにしたいと思ったら再構築が必要です。その逆も同様です。初日に下した判断が、取り消すには時間と開発工数がかかるため、黙って恒久的なものになってしまいます。
ここでEvlopのWebView Embeddingは動き方が違います。すべてのページにトグルが用意されており、ネイティブかWebViewかはあなたが選択でき、いつでも切り替えられます。再構築も、アプリの新バージョン公開も、開発者を待つことも不要です。ページが思いどおりに動いていない場合は、トグルを切り替えるだけで先へ進めます。
多くのWebViewソリューションは、いまだに「ウェブサイト感」が残ります。Evlopの方式は、ウェブサイト全体をアプリに読み込むのではなく、すでに制作費用をかけて整えたページコンテンツだけを取り込み、ブラウザでしか意味を持たないヘッダー、フッター、ポップアップを取り除きます。残ったコンテンツはアプリのネイティブフレームに包まれるため、見た目も操作感もネイティブで作られたものと変わりません。
カートとチェックアウトも同じ仕組みの一部です。埋め込み商品ページからカートに追加すると、それはシミュレーションではなく本物のカート操作です。追加した商品は、アプリ内のどこからでも使われる同じネイティブカートに表示されます。どのページが埋め込みで、どのページがネイティブなのか、体験からはまったく分かりません。
このアプローチはあなたのストアに向いていますか？
以下に当てはまる項目が多ければ、ハイブリッド方式がおすすめです：
- すでにデザイン性の高いShopifyストアフロントがあり、それを活かしたい
- すでに機能しているページを作り直さずに、素早くアプリをリリースしたい
- ウェブサイトとアプリを自動で同期させたい
- どのページをネイティブにすべきかまだ決めかねており、後からテストや変更を自由に行いたい
以下のような場合は、フルネイティブでの構築が向いているかもしれません：
- アプリの見た目や操作感をウェブサイトとは変えたい
- ウェブサイト自体にパフォーマンスの問題があり、それをアプリに持ち込みたくない
そもそもプラットフォーム選びで迷っている方には、おすすめのShopifyモバイルアプリビルダー比較記事で、EvlopとTapcart、Shopney、MobiLoudなどを価格と連携の深さの観点から比較しています。
日常的な運用イメージ
あるマーチャントは、ほぼWebView構成でアプリをリリースしました。公開までが早く、サイトの見た目もすでに整っていたからです。
数週間後、商品ページだけがアプリの他のページより少し遅いことに気づきます。そのページだけネイティブに切り替えるトグルをオンに。10分後には解決です。開発者も、新規ビルドも、承認待ちも不要でした。
一方、埋め込みページとしてすでに良好なパフォーマンスを発揮しているコレクションページは、そのままの状態を維持します。オール・オア・ナッシングの選択を迫られることもなく、今日選んだ内容が永久に固定されることもありません。
本当の強みはネイティブかWebViewかではなく、一つの選択に縛られないことです。
どのアプリビルダーも自社のアプローチこそ正しいと言うでしょう。しかし正直なところ、正しいアプローチはページごとに異なり、しかも半年後には変わっているかもしれません。
本当に使う価値のあるプラットフォームとは、後から考えを変えても二重の代償を払わずに済むものです。
それがEvlopのWebView埋め込みが作られた目的です：今日の完全な柔軟性と、最初からやり直すことなく後から調整できる自由です。
アーキテクチャが整ったら、EvlopのAnalyticsがアプリのパフォーマンスを正確に示します。
ハイブリッドアプリとしてのストアフロントがどのように見えるかをご確認ください。Evlopで始めましょう。