1. プロジェクト概要
化粧品の個人販売代理店向けに、ブランドサイトの企画・制作から、LINE公式アカウント連携・AIスキンケア診断機能の実装までをワンストップで支援。「商品を売る」のではなく「信頼を伝える」サイト設計を軸に、相談予約への導線を構築しました。
2. 課題と背景
クライアントは高品質なスキンケア商品を扱う個人代理店でしたが、以下の課題がありました。
- オンライン上の存在感がゼロ: 口コミと紹介のみで活動しており、Webでの信頼構築ができていなかった
- 商品の魅力を伝えきれない: パンフレットの情報だけでは、こだわりや背景ストーリーが伝わらない
- LINE活用の余地: 既存のLINE公式アカウントがあるものの、Webサイトとの連動ができていなかった
- 薬機法リスク: 化粧品の効能表現には法的制約があり、不用意な表現が法令違反につながる
3. アプローチ
「商品スペックの羅列」ではなく、代理店オーナーの人生ストーリーと商品体験を軸にしたブランドサイトを設計。来訪者が共感し、自然にLINE相談へ進むコンテンツ導線を構築しました。
4. 施策内容（実装機能）
ストーリーテリング型ブランドサイト
- 代表者の体験談を中心に据えたヒーローセクション
- 商品ラインナップ（スキンケア・ヘアケア・インナーケア計15商品）の詳細ページ
- お客様の声セクション（実際の利用者コメントを掲載）
- 特定商取引法に基づく表記ページ
AIスキンケア診断チャット
- 3ステップの対話型UI（肌悩み選択→分析→おすすめ商品提案）
- 乾燥・ハリ不足・くすみなど主要な悩み別にパーソナライズ
- 診断結果からLINE相談への自然な誘導
LINE公式アカウント連携
- サイト内の要所にLINE友だち追加ボタンを配置
- リッチメニューからサイトの商品ページ・問い合わせセクションへ直接遷移
- Web → LINE → 個別相談の流れを設計
A/Bテスト基盤
- ランディングページの2パターン自動出し分け（Cookie制御）
- コンバージョン率の比較検証が可能な設計
薬機法対応コンテンツ設計
- 効能効果の表現を薬機法ガイドラインに準拠してレビュー・修正
- 「個別相談で詳しくご説明」への誘導で法的リスクを回避
- OTC医薬品該当商品の表現を適切に管理
SEO・構造化データ対応
- 全15商品のJSON-LD構造化データ（Product Schema）を実装
- Organization・Person・WebSiteのスキーマ対応
- OGP画像・サイトマップ・robots.txt の最適化
5. 技術スタック
- フロントエンド: Next.js (App Router) + TypeScript + CSS Modules
- メール通知: Resend API（お問い合わせフォーム → 自動メール送信）
- データ連携: Google Sheets webhook（問い合わせログ自動記録）
- アクセス解析: Google Analytics 4
- デプロイ: Vercel
6. プロジェクト成果
定量成果
- 商品掲載: 15商品の詳細情報をWeb上に体系的に整備
- 問い合わせ導線: Web → LINE相談の動線を確立
- 開発期間: 初期リリースまで約3週間
定性成果
- オンラインでの信頼構築: 代表者のストーリーを通じて、商品への信頼感を醸成
- 薬機法コンプライアンス: 法的リスクを排除したコンテンツ運用体制を確立
- LINE活用の最大化: Webサイトを「LINE友だち追加」の入口として機能させることに成功
7. 今後の展望
動画テスティモニアル（お客様インタビュー映像）の追加、GA4イベントコンバージョン計測の本格運用、コラム記事のSEO強化を計画中。
8. お問い合わせ
Webサイト制作・LINE連携・ブランディングにご興味のある方は、ぜひご相談ください。
ステップアウトマーケティング合同会社 Email: info@step-out.jp