Docsコンテンツ作成
ビフォーアフター比較セクション
医療・美容施術のビフォーアフター写真をカテゴリー・アングル別に比較表示する方法をご紹介します。
4 min read
2026-07-02
ビフォーアフター比較セクション
医療・美容施術の施術前/施術後の写真をカテゴリーとアングル別に整理して表示する、ビジネス専用セクションです。
ビフォーアフター比較セクションとは？
- 施術ケース単位での管理: ケースごとにカテゴリー、ラベル、施術前/施術後の写真を登録
- アングル別比較: 正面・45度・90度のアングルごとに施術前/施術後の写真を個別に登録可能
- カテゴリーフィルター: 登録したカテゴリー値に基づいて、ビューワー上部にフィルタータブが自動生成される
設定方法
エディターでの設定
- 編集画面左側でビフォーアフター比較セクションを追加
- 上部アイコン・タイトル（eyebrow・見出し）を入力
- 追加ボタンで施術ケースを作成
- 各ケースごとに以下の項目を設定：
| 設定項目 | 説明 |
|---|---|
| カテゴリー | 例: eye、nose、リフティング — 同じ値同士がビューワーで1つのタブにまとめられる |
| 施術名ラベル | 例: 「Rhinoplasty + Tip Refinement」 |
| アングル別ビフォーアフター | 正面 / 45° / 90° のアングルごとにBefore・After画像を登録 |
カテゴリーフィルター
各ケースに入力したカテゴリー値が、ビューワー上部のフィルタータブとして自動生成されます。
- よく使われるカテゴリーは入力時にオートコンプリートで候補表示（目/鼻/輪郭/肌）
- 別の値を直接入力することも可能（例: 「リフティング」「歯列矯正」）
- カテゴリーを空欄にすると「すべて」タブにのみ表示される
同じカテゴリー値を複数のケースで使用すると、訪問者がフィルタータブで見たい施術事例だけを選んで閲覧できます。
アングル別ビフォーアフター画像
1つのケースに正面・45度・90度まで、最大3つのアングルを登録できます。
- アングル追加ボタンをクリックしてアングルを選択
- Before（施術前）、After（施術後）の画像をそれぞれアップロード
- 不要なアングルは削除可能
複数のアングルを登録すると、訪問者がさまざまな視点から施術前後の変化を確認できるため、信頼度が高まります。
ビフォーアフター写真は、実際の施術結果と異なる画像を使用しないよう注意してください。医療広告に関する法規をご確認の上、登録するようにしてください。
サポートが必要ですか？
ビフォーアフター比較セクションの設定についてご不明な点がございましたら、**お問い合わせ**までお問い合わせください！