【ECシステム立ち上げの背景】技術選定理由から注力ポイントまで徹底解説

こんにちは！株式会社ウェルネスの野々山です。
本日は、7月にリリースしたECシステム立ち上げの背景についてご紹介します。

・立ち上げの背景

・注力したポイント

・今後の展望

についてお話しして参りますので、「リリースまでの意思決定について詳しく知りたい方」や「上流工程から開発に携わりたい方」はぜひ最後までご覧ください。

ECシステム立ち上げの背景

ウェルネスのメイン事業であるメンバーシップサービスでは、お客様の健康状態をデータから把握し、リスク分析を行った上で、パーソナルドクターがエビデンスに基づいた健康アドバイスを提供し、サポートしています。

その中で、食生活やライフスタイルにおいて特定の栄養素が不足している方がいる場合、「このサプリメントを1日1回飲んでください」というように、外部ECサイトのサプリメントのURLをお送りすることがありました。

また、健康意識の高いお客様の中には、自発的にサプリメントを摂取している方も多く、「現在飲んでいるサプリメントの組み合わせは適切か？」や、「このサプリメントに効果はあるのか？」といった質問をいただくこともありました。

そこで、「ウェルネスアプリ内で直接サプリメントを購入できる体験を提供できれば、お客様の満足度をさらに向上できるのではないか」と考えたことが、ECシステム立ち上げの背景です。

方針を決めるプロセス（技術選定理由）

今回は、『Shopify』という外部のSaaSサービスを使いECサイトを作りました。

選定理由は以下の通りです。

ー早く小さくリリースし、検証できる

パーソナルドクターがサプリメントをおすすめし、実際に購入して飲み始めたという声もあったので、ECサイトに一定のニーズがあることはわかっていました。一方で、それをアプリの機能として組み込んでリリースした後、どの程度購買が発生するのか、運用コストがどれくらいかかるのかというのが不明でした。そこで、まずは早めに小さくリリースして、市場に出して反応を見てみようという背景から、外部のSaaSサービスを検討し、Shopifyを採用しました。

ークオリティが担保できる

どのSaaSサービスを利用するか検討する際、最初はBASEやSTORESといった比較的軽めのサービスを候補にしていました。しかし、この二つのサービスは実現したいUXに対応していないことがわかりました。具体的には、ユーザーがアプリ上でショップページを開いた際に、すぐに購入できるわけではなく、一度サインアップが必要になる点がネックでしたね。

サービスによってはAPI連携が可能ですが、BASEやSTORESのAPIではこのサインアップを自分のサイトで行う必要があり、要件を満たすことができないという判断になりました。

そこで、早く始められ、かつ自社のアプリに組み込んでシームレスな体験を提供できるSaaSサービスを探したところ、ShopifyのAPIを利用すれば、サインアップせずにスムーズに遷移し、購買までたどり着けることがわかりました。

さらに、商品の設定についても、通常の管理画面では商品のタイトルや数量、説明文を入力して作成ボタンを押すことで商品ページが作成されますが、これでは商品数が増えた際に対応が難しくなります。ShopifyではAPI経由で大量の商品を一気に設定することができ、今後の運用に必要な要件もクリアできると判断しました。

以上が、最終的にShopifyを選択することにした理由です。

注力したポイント

ー変更しやすい開発環境の構築

前提として、運用が簡単であることを重視していました。というのも、検証段階では、小さく始めて早めにリリースし、「購入が発生しない」「このページが使いにくい」といった市場の反応やフィードバックを得て、頻繁に変更が発生するものだと考えています。

なので、それを前提に変更しやすい開発体制を整えていました。具体的には、通常の開発環境では、コードを作成してからプルリクエストを出し、レビューを受けてステージング環境で動作確認を行い、その後に本番環境へリリースするという流れが一般的だと思います。これと同じプロセスをShopifyのストア構築にも適用できるように、Shopify上でも開発環境と本番環境の二つを用意しました。結果的に、開発段階での動作確認や、実際の本番環境のデータを使ったプレビュー確認がスムーズに行うことができたと思います。

ー誰でも商品管理ができる仕組みの構築

商品管理についても工夫した点があります。Shopifyでは商品データにタグを付けることで、様々なカスタマイズが可能です。例えば、「“デリバリー1”というタグがついているものは、合計1万円を超えたら送料無料にする」というようなカスタマイズができます。

このタグはかなり便利なのですが、商品数が増えると、一つずつ手作業で入力するのは、ミスが発生しやすくなり、またタグの使用方法が特定の人に依存してしまうサイロ化の原因にもなりかねません。

そこで、Googleのスプレッドシートを使って必要な情報を入力するだけで、タグが自動生成される仕組みを構築しました。さらに、複雑なShopifyのCSVフォーマットに触れることなく、簡単に商品情報を入力できるようにし、インターン生などでも商品の入稿作業がスムーズに行えるようにしたことによって、効率的に商品管理ができるようになりました。

ーシームレスなログイン体験の提供

実装においても工夫したポイントがあります。まず、最終的なアウトプットは、Shopifyで構築したショップ機能をウェルネスアプリ内に組み込み、ユーザーがスムーズに商品を購入できるようにしました。

具体的には、アプリ内に「ショップタブ」を設け、このタブにWebビューでショップのページを表示する形を取りました。ユーザーがタブを開くと、Webビュー内でショップのページが開き、購入時にはカートに入れるボタンを押し、カートに進んで支払いを確定する流れです。

この時に、Shopifyや他のサービス（BASE、STORSなど）でも共通する課題として上がるのが、商品を購入する際にはログインが必要だということ。同じアプリ内に表示されているものの、実際には別のサービスが表示されているため、再度ログインが求められるんです。ログイン画面が突然表示されると戸惑ってしまうお客様もいると思います。

この課題に対応するため、いくつかの解決策を検討しました。例えば、Shopifyの認証機能をカスタマイズする方法も考えましたが、それには高額なプランに入る必要があり、スモールスタートには適していませんでした。そこで、既存のShopifyのログインフローを利用し、ログイン画面にウェルネスアプリ上で既にログインしているアカウントのメールアドレスを自動入力する仕組みを導入しました。結果として、ログイン画面が表示されても、ユーザーはスムーズに次のステップへ進むことができる、シームレスなログイン体験が実現できました。

ークオリティとスピードのバランスを担保したUI画面の構築

ショップのUI画面をどのように構築するかについても、三つの方針を検討しました。

一つ目は、Shopifyのテンプレートを使用する方法。二つ目は、もう少しカスタマイズ性やブランディングを意識したい場合に、テンプレートをShopify用のリキッドという言語を使って編集する方法があります。三つ目は、さらに高度なカスタマイズが必要な場合には、Shopifyが提供しているAPIを使って、完全に自前で開発するという方法もあります。

二つ目と三つ目の方法のどちらかで検討した結果、中長期的には三つ目の方針を採用することになると考えましたが、限られたリソースの中でリリースを進める今のタイミングでは、二つ目の方法で進めることにしました。デザイナーとも相談し、この方法であればお客様に必要最低限の体験を十分に提供できるという結論に至りました。振り返ってみても、この決断は悪くなかったと考えています。

ー全体的なユーザー体験の一貫性を両立

ショップタブ内のブラウザ遷移でカートや注文履歴へのリンクを置くのではなくアプリ内のナビゲーションにそれらを用意することで、他のタブ（チャットによるおすすめやサマリーからの自動おすすめなど）からショップ関連機能への接続が自然になるようにしました。

これによりユーザーは、ひとつのWellnessのアカウントの中で多くのことが完結しているように感じられるようになります。

また、 Wellnessアカウントから住所などを流用したり、Shopiifyのサインインを自動化をすることで、可能な限りユーザーの負担を減らすよう心掛けました。

今後の展望

お客様がよりスムーズにサプリを購入できるような仕組みを構築

現状、パーソナルドクターが個々の健康状態を確認し、「このサプリをどれくらい取った方がいいです」といったリコメンドをチャットや面談で行い、お客様がショップ内で商品を探し購入するというような流れになっています。これは、正直あまりスムーズとは言えないと思っていて。

この部分を短期的に改善しようと考えており、現在開発を進めているのが、パーソナルドクターが直接カートに商品を追加できる機能です。この機能があれば、お客様はカートの中身を確認し、最終的な購入をスムーズに決定できるようになり、コミュニケーションも円滑になると期待しています。

リコメンド機能を実装し、健康データに付加価値を

現状のショップ機能にはリコメンド機能がないため、これを追加で開発していく計画です。リコメンドの中には、パーソナルドクターでなければできない高度な部分もありますが、一方で自動化できるリコメンドもあると考えています。

この自動リコメンド機能が構築されれば、パーソナルドクターがいる高価格帯のサービスだけでなく、無料で利用できるアプリとして、マス向けにリリースすることも可能になると考えています。例えば、ユーザーが自分の健康診断データをアプリに入力すると、「あなたにはこの課題があり、こうした行動を取ると改善の可能性が高いです」「あなたの健康状態にはこのサプリがおすすめです」といったリコメンドが表示されるようになるといったイメージです。

さらに、これによって、アプリにデータを蓄積していくことに価値をつけられると考えています。というのも、現在、多くの健康データがスマホ内に点在している状態です。健康診断のデータはPDFで受け取ったり、歩数や体重データはOSのアプリに入っていたりしますが、それらを一箇所に集約するインセンティブがあまりありません。ここにウェルネスアプリが価値を提供できる施策があると考えたとき、ショップ機能はその一つの方針として有力だと思いますね。

最後に

​​正直なところ、今回のプロジェクトでは技術的な挑戦はあまりなく、抜け漏れなく進行することが大変だったという印象です。

コストを考えたり、リソースが不足する中で、期限内にやらなければならないことがあると、機能や実現可能なことをある程度削減していかないといけなくて。でも、最終的には、「ここだけは絶対に譲れない」というポイントにフォーカスし、その枠内で何ができるかを繰り返し検討しながら、形にしていくというプロジェクトでした。

このようなプロジェクトに興味を持てる方であれば、現在のウェルネスのフェーズを楽しんでいただけるのではないかと思います。