IM ベューティーグロウ

IM Beauty Glowは、一般消費者向けの美容・サロンマーケットプレイスであり、Next.jsストアフロントとReact Native連携アプリという対をなす構成で構築されています。両者はリクエストのフィールド名に至るまで、まったく同一のバックエンドAPI契約を共有しています。ゲストはサロンを検索し、個別サービスやセットになったパッケージ・オファーを予約し、サロンの商品を購入し、どちらの画面からでも予約や注文を同じように管理できます。サロン側も同じプラットフォームを通じて自ら登録し、自身の情報を管理します。

この取り組みには 一般消費者向けウェブストアフロント(サロン検索、予約、カート、チェックアウト、アカウント), iOS/Android連携アプリ(React Native), サロン向けセルフオンボーディングフロー(「List Your Salon」), サービス・パッケージ・オファー共通の予約フロー, SEOパイプライン(ビルド時に生成されるサイトマップと.htaccess), プッシュ通知連携(OneSignal、Notifee) が含まれます。

Muhammad Muzammil Qureshi は 最高技術責任者（CTO） として、本事例で説明されている技術方針、アーキテクチャ、デリバリー、運用体制全般に責任を持ちました。

IM ベューティーグロウは Next.js 15 · React 19 · TypeScript · Tailwind CSS v4 · React Native 0.86 を使用しています。

Next.jsのウェブアプリは、検索、サービス、パッケージ・オファー、カート、チェックアウト、アカウントといったコマース領域を担っており、型付けされたAPI層の背後で予約・カート・税金・支払いのロジックをプレゼンテーション層から切り離しています。React Native連携アプリはこの契約を正確に踏襲しており、パッケージとオファーの価格は端末側で再計算されるのではなくサーバー側が常に正であるため、両アプリ間で割引にずれが生じることはありません。

はい。同一の予約フローが、個別サービス、割引パッケージ、期間限定オファーという3種類の予約元を、一つのエンドポイントとウェブアプリが既に送信しているものと同じオプションの識別子を通じて受け付けます。そのため、パッケージとオファーは別の予約システムを構築することなく追加されました。

サロンは「List Your Salon」フローを通じて自らオンボーディングを行い、事業情報、所在地、サービス内容、営業時間を登録します。登録後は、ゲストが利用するのと同じプラットフォーム上で、公開プロフィール、予約、商品販売を管理します。

ウェブストアフロントは47のルーティングページ、連携モバイルアプリは29画面から成り、いずれもリクエストのフィールド名に至るまで同一のバックエンド契約に基づいて構築されています。モバイルのコードベースは、デッドコードとモックデータの除去作業の後、TypeScriptエラー・ESLintエラーがゼロであることを検証済みです。