メンズ用髪型診断アプリを作ってみた
はじめに
髪の毛が伸びてきたけど、どういう髪型にしようかな...と思うあまりに、美容院に行くことすらめんどくさくなり、ただただ髪の毛を伸ばしてしまうことはないですか。
自分では「なんかいい感じに」としか言えないけど、美容師さんはきっと困るんだろうなぁと思い、2択×6回で好みの髪型の雰囲気を診断するアプリを作ってみました。
期限は半日で頑張りました。
アプリのコンセプト
「自分がどんな世界観が好きか」を診断して、その世界観に似合う髪型を提案する
髪型そのものを選ぶんじゃなくて、「こういう雰囲気が好き」という傾向から逆算するアプローチです。simple is bestということで、直感で選べる2択形式にしました。
技術スタック
- Next.js 15
- TypeScript
- Tailwind CSS
- Netlify (ホスティング)
主要な機能
1. 2択クイズシステム
ユーザーは6つの質問に答えます。各質問は2枚の画像カードから1つを選ぶ形式。
interface Card {
id: number;
image: string;
weights: {
[key: string]: number;
};
}
各カードには8つのアーキタイプ（髪型カテゴリ）への重み付けスコアが設定されています。
2. スコアリングロジック
選択されたカードのスコアを集計して、最も高いアーキタイプを判定します。
export function calculateScores(selectedCards: Card[]): ScoreResult {
const scores: { [key: string]: number } = {};
selectedCards.forEach((card, index) => {
const isLastQuestion = index === selectedCards.length - 1;
const bonus = isLastQuestion ? LAST_QUESTION_BONUS : 1;
Object.entries(card.weights).forEach(([archetype, weight]) => {
scores[archetype] = (scores[archetype] || 0) + weight * bonus;
});
});
// 最高スコアのアーキタイプを返す
return findTopArchetype(scores);
}
ポイントは最終質問にボーナスを付けていること。同点の場合は最後の選択を重視するようにしました。
3. 結果画面
診断結果では、以下の情報を表示します：
- アーキタイプ名（例：「韓国系・マッシュ」）
- キャッチコピー（例：「柔らかい曲線と透明感で魅せる、今っぽスタイル」）
- 詳細説明
- 推奨スタイリング
- メンテナンス難易度
これらの情報は全てarchetypes.jsonで管理しています。
{
"韓国系・マッシュ": {
"title": "柔らかい曲線と透明感で魅せる、今っぽスタイル",
"description": "丸みのあるシルエットとツヤ感。K-POPアイドルのような洗練された雰囲気。",
"keywords": ["やわらかい", "ツヤ", "丸み", "透明感", "洗練された", "今っぽい"],
"length": "ボブ〜ミディアム",
"styling": "セミウェット〜ツヤ系スタイリング剤",
"maintenance": "中程度(定期的なカットとスタイリング)"
}
}
データドリブンな設計にすることで、新しいアーキタイプの追加がJSONを編集するだけで済むようにしました。
工夫したポイント
モバイルファースト設計
髪型診断は「美容室に行く前にスマホでサクッと」というシーンを想定しているので、モバイル専用にしました。
デスクトップでアクセスすると案内画面が表示されます。
おわりに
「髪型どうしよう、めんどくさい、切りに行くのやめよう」と思っているうちに髪の毛が伸びてしまうという悩みを、ちょっとでも楽しく解決できたらいいなという気持ちで作りました。
美容室に行く前に使ってもらえると嬉しいです。