
■企業名:株式会社イロップ
■コーポレートサイト:
■ECサイト(サービスサイト):https://irop.jp/shop
■店舗:〒151-0053
東京都渋谷区代々木1-58-5 代々木吉野ビル5階
クライアントのビジネス的課題
- ヘアケア商品の新規サービス「irop」のローンチにあたり、エンドユーザーが、自身に合ったヘアケアアイテムを診断を通して購入できるようにしたい。
クライアントが抱えていたシステムで解決したい業務課題
- エンドユーザーが、自身の髪の長さ/髪色/その他の条件を入力して、その人に合ったヘアケアアイテムとケア方法が分かる診断の仕組みを導入したい。
- 診断結果で出てきたヘアケア商品のEC商品詳細ページに飛んで、商品購入が出来るように導線を作りたい。
- ユーザーの診断回答結果をデータで出力されるようにしたい。
アプローチ
- もともと他社で制作されたデザインが存在しており、EnlytではECサイト構築プラットフォーム「ecforce」上でのコーディング対応のみのご依頼があった。
- 要件を整理している上で追加要件が発生し、Enlyt 側で柔軟に対応した。
- 「ecforce profile」を使用し、髪色診断→診断結果に応じた商品を提案するという要件に対してはカスタマイズを加えて実装し、実現した。
カスタマイズの詳細

- ecforce profileを用いて理想の髪色や現在の髪質などを質問する診断を作成。全10問以上の診断となっており、各質問の回答結果によって次の質問が変化するロジックとなっている。
– 診断内の見た目やアニメーションをHTML,CSS,JavaScriptにて独自に実装
– 当初の仕様では実現が難しい状況だったが、クライアントやecforce側と協議や調整の上、実装し実現 - 質問結果のスコアを基に、最終的に表示する診断結果がユーザー毎に異なり、各人に適したカラーシャンプーが提案される仕組み。
– ecforce profile内のスコア機能を用いて100通り以上の結果分岐を実現
– コードの文字数制限があったため、診断結果判定プログラムを別サーバーに格納し使用 - 診断結果画面に表示されたカラーシャンプーの購入画面に直接遷移が出来、遷移時には選択されたカラーシャンプーのセットがカートに入っている状態となる。
– 単品購入、定期購入などの様々な購入方法が可能
– カスタマイズしたURLを使用することで商品が事前に選択された状態を実現
クライアントの感想
今回、ecforceのテーマをカスタマイズするコーディングの作業と、ecforce profileを使って診断の仕組みを取り入れる開発を行って頂きました。
どちらも複雑な要素が入っておりましたが、当初の要件を実現する形で開発・リリースに至ることが出来ました。
弊社では、イベント等でエンドユーザーの方々と触れる機会もありますが、そこで髪色診断の仕組みを使って、その人に合った商品へと誘導することも出来ており、開発して頂いた仕組みがオンラインだけではなく、オフラインでも売上に直接的に関わっています。
リリース後も保守運用を継続していますが、ユーザーデータを基に、ページデザインや診断のロジックに手を加える改修を行って頂いています。
初期開発工数
- 3ヶ月
- 合計人月:2.0人月
開発体制
国内開発
役割 | アサイン割合(平均) |
---|---|
コーダー/エンジニア | 0.65人月 |