— WORKS

Cosmé Lab

— コスメ診断サイトの企画・制作・運用

種別
自主制作
担当
企画・デザイン・実装・運用のすべて
構成
静的サイト+Cloudflare Pages/楽天API連携/スプレッドシート連携
公開
cosmelab-recipe.pages.dev →
トップページのファーストビュー

課題

パーソナルカラーや顔タイプの診断サービスは数多くありますが、そのほとんどが「似合うかどうか」で終わります。

けれど実際にコスメを選ぶときは、「似合う」と「肌に合う」は別の話です。この2つを一度に知る方法がありませんでした。

「似合う」と「肌に合う」は、別の話。というコンセプトのセクション

やったこと

顔タイプ×パーソナルカラー×肌質の3軸で診断するサイトを作りました。9つの質問に答えると、メイクとスキンケアの両方を含む「レシピ」が出てきます。

診断画面。9問のうち1問目 診断結果画面

紹介する商品は楽天APIから自動で取得しているため、在庫切れや価格変更に手作業で追随する必要がありません。この処理はサーバー側で動かしていて、APIキーがブラウザに出ない作りにしています。

公開して終わりにせず、運用まで続けています。SNSで発信し、投稿ごとの反応を記録して「どの型が読まれるか」を検証しました。その結果、問いかけ型の投稿が他より明確に伸びることが分かり、投稿の構成そのものを組み直しています。

スマートフォンでの表示

この案件で見せられること

企画から実装、公開後の運用と数字にもとづく改善まで、一人で一周した経験です。

前職で化粧品開発に携わった経験があり、成分や表示のルールを踏まえた内容を書けることも、この案件で示しています。