植毛事例メディア - 経過写真で比較できる症例データベース
自毛植毛の症例を、施術前から1年後までの経過写真とともに集約したメディアを開発しました。4000枚を超える事例を、施術箇所や経過月数から引けるように構造化し、検討段階のユーザーが自分に近いケースを探せる設計としています。
プロジェクト概要
- 4000枚以上の症例写真を掲載する事例データベース
- 施術前から1年後までの月ごとの経過写真
- 施術箇所(前頭部・後頭部・全体)による絞り込み
- 経験者へのインタビュー記事
- 気になる事例を後から見返せるブックマーク機能
依頼者の目指した目標と解決したい課題
自毛植毛を検討している人が本当に知りたいのは、「自分と近い状態の人が、施術後どうなったか」です。しかし既存の情報は、施術直後のビフォー・アフター写真が中心で、その後どう定着していくかが分かりませんでした。
植毛は結果が出るまでに時間がかかる施術です。直後の写真だけを見ても、半年後・1年後の姿は想像できません。検討している人にとっては、この「時間の経過」こそが判断材料でした。
また、年齢や薄毛の進行度、施術方法は人によって大きく異なります。事例が大量にあっても、自分に近いケースにたどり着けなければ意味がありません。「経過」と「条件」の両方から症例を引けることが、このメディアに求められた要件でした。
開発したシステムの特徴
- 時系列で並ぶ経過写真:
- 施術前・施術直後から1年後まで、月単位で経過を掲載
- 同一人物の変化を時間軸に沿って追える構成
- 条件による絞り込み:
- 施術箇所(生え際・前頭部/後頭部/全体)で症例を検索
- 年齢層や施術方法の異なる事例を横断して比較できる
- 症例以外の判断材料:
- 施術方法と費用感の記載
- 経験者へのインタビューによる、術後の心理的変化や日常生活への影響
- 相談コーナー
- ブックマーク:
- 気になった症例を保存し、後から見返せる
- 掲載許諾の管理:
- 掲載しているすべての事例は、本人の許可を得たうえで公開
技術的背景
Ruby on Rails をベースに、Hotwire(Turbo)で構築しています。症例の絞り込みは、条件を変えるたびに一覧が差し替わる操作が中心になるため、Turboによる部分更新でページ全体の再読み込みを避けています。
このプロジェクトの中心的な課題は、大量の画像を扱いながら閲覧速度を保つことでした。1つの症例につき経過写真が十数枚あり、全体では数千枚規模になります。一覧では軽量なサムネイルを、詳細では原寸に近い画像を配信する形で出し分け、遅延読み込みと組み合わせることで、症例を次々に見比べる使い方でも待たされない構成としました。
集客は検索経由が中心となるため、症例ページや施術箇所ごとのページがそれぞれ個別の検索意図に対応するよう情報設計を行っています。
なお本サービスは医療に関する情報を扱うため、症例写真は本人の許諾を得たもののみを掲載する運用としており、システム側でも掲載可否を管理しています。
ホスティングにはfly.ioを使用しています。
解決された問題
検討段階のユーザーが、施術直後だけでなく半年後・1年後の姿まで含めて判断できるようになりました。施術箇所での絞り込みにより、自分に近い条件の事例に短時間でたどり着けます。
症例数と経過写真の網羅性そのものがコンテンツの価値となり、検索からの継続的な流入につながっています。
チーム構成
- (KW) プロジェクトマネージャー
- (KW) バックエンドエンジニア
- (KW) フロントエンドエンジニア
- コンテンツ編集担当
(KW) はKaito Wingsが担当
プロジェクト期間
- 要件定義・情報設計 - 1ヶ月
- 開発・テスト - 4ヶ月
- コンテンツ拡充・SEO改善 - 継続
システム構成
- Ruby on Rails
- Hotwire (Turbo)
- 画像配信最適化(サムネイル生成・遅延読み込み)
- Google Tag Manager
- fly.io (ホスティング)