ビフォーアフター事例の作り方｜変化と根拠を誤解なく伝える撮影・掲載ガイド

ビフォーアフター事例は、同じ条件で撮影し、何を行ったか、結果に影響した条件、変わっていない点まで添えて初めて、読者が誤解なく判断できる情報になります。見た目の差を大きくすることより、比較できる証拠と説明を残し、公開許可を取ることを優先してください。

この記事では、施工、修理、整理、デザイン、店舗改善などの事例を想定し、撮影前の準備、同条件撮影、原本管理、担当範囲、画像調整、掲載許可、業種別ルール、ページの作り方、公開後確認までを説明します。

結論：写真・条件・説明を一組の証拠にする

完成写真だけでは、何を変えたのか、どこまで自社が担当したのかを判断できません。事例ごとに「前の状態」「後の状態」「比較条件」「行ったこと」「対象外」「公開許可」を一組で残します。集客全体での事例の役割は、中心記事の中小企業のメディア・集客戦略から整理できます。

撮る前に「何を比べる事例か」を一つ決める

一つの事例で、デザイン、使いやすさ、工期、費用、反応まで全部を証明しようとすると説明が曖昧になります。読者が依頼前に判断したい一つの質問から逆算します。

お客様の言葉を事例へ加える場合は、写真とは別にお客様の声を集めて掲載する手順で、質問、事実確認、公開範囲を決めます。

作業前の状態と撮影条件を記録する

作業後に「前の写真がない」と気づいても同じ比較は作れません。担当者が現場へ入る前に、撮影する箇所、順番、位置、必要な許可を確認します。自社で撮影体制を整える場合は、中小企業の自社撮影ガイドも参考にしてください。

• 事例で比較する一つの質問を決める
• 撮影できる場所と写してはいけない物を確認する
• 床や壁の目印、三脚の高さ、対象までの距離を記録する
• 自然光・照明・撮影時刻をメモする
• 人物、車両番号、書類、画面、家の表札などを写さない配置にする

前後で位置・画角・明るさをそろえる

広角で大きく見せたり、後の写真だけ明るくしたりすると、作業以外の差が印象を左右します。完全に同じ条件が難しい場合は、違った条件を隠さず説明します。写真を撮る担当者が変わっても再現できる記録にします。

原本と公開用画像を分けて管理する

明るさ調整や切り抜きを行う前の原本を残します。公開画像だけでは、後から加工範囲や撮影条件を説明できません。案件名だけのフォルダーへ混ぜず、撮影日、前後、場所、連番が分かる名前にします。

自社の担当範囲と他の要因を分ける

改修後の写真に写る家具、照明、清掃、撮影、装飾のすべてを自社が担当したとは限りません。自社が行ったこと、顧客や他社が行ったこと、既存の条件を分けます。写真に写る結果を丸ごと自社実績として見せないことが大切です。

変わっていない点と個別条件も書く

一つの事例の結果が、すべての依頼で同じになるとは限りません。素材の状態、広さ、利用方法、予算、期間、天候などの個別条件を示します。「新品同様」「必ず改善」など、範囲や根拠を説明できない表現は使いません。

画像調整は比較を壊さない範囲にする

傾きの修正、同じ範囲への切り抜き、表示速度のための圧縮は必要になることがあります。一方、後の写真だけ色を鮮やかにする、不要物を消す、形を変えるなど、作業結果と異なる印象を作る調整は避けます。画像生成・加工を使う範囲の決め方は、画像制作を事業目的につなげる実務ガイドにも共通します。

写真・人物・建物・情報の掲載許可を確認する

撮影者が誰か、写真をホームページやSNSで使えるか、人物・作品・ロゴ・建物・顧客情報を公開できるかは別々に確認します。顔や名札をぼかせば、住所、制服、車両、画面などから個人や会社が分かる場合もあります。利用目的と掲載先を示し、撤回や差し替えの連絡先も決めます。

医療など個別の広告ルールがある業種は別に確認する

業種によって、掲載できる内容や必要な説明が異なります。たとえば医療広告では、治療前後の写真だけで効果を誤認させないよう、治療内容、費用、主なリスク・副作用などの詳細な情報が求められます。一般的な事例の作り方だけで判断せず、公開時点の所管省庁・業界ルールを確認し、必要なら専門家へ相談してください。

• 医療・美容・健康など効果表示に個別ルールがないか
• 不動産、建築、金融など表示すべき条件がないか
• 許認可、資格、価格、保証の表現が現在の事実と合うか
• 一つの事例を一般的な成果として見せていないか
• 表示の裏付けとなる資料を説明できるか

事例ページは背景・対応・結果・条件の順に作る

前後の写真を冒頭へ置くだけでは、読者は自分の状況と比べられません。相談の背景、自社の担当範囲、比較条件、行ったこと、結果、制約、次に確認することを順番に示します。

写真の必要性から判断したい場合は、ホームページに動画や視覚素材が必要か判断する方法も参考になります。地域や店舗の写真を来店前の判断材料にする場合は、地域店舗の写真を来店につなげる設計と役割を分けてください。

スマートフォンでも順番と説明を読めるようにする

横に並べた前後写真は、小さな画面では差が見えにくくなります。「作業前」「作業後」を画像内の小さな文字だけにせず、見出しや説明文でも順番を示します。画像には内容が分かる代替テキストを付け、写真の近くに比較条件と担当範囲を置きます。

• 390pxと320pxで前後の順番が分かる
• 画像内文字に頼らず、本文でも違いを説明する
• 代替テキストは写真の内容を簡潔に説明する
• 拡大しなくても注目箇所と条件を読める
• 画像の幅・高さを指定し、読み込み時のずれを抑える

事例から関連サービスと相談方法へつなぐ

事例の直後に問い合わせだけを求めず、似た課題に対応するサービス、対象になる会社、相談時に伝えてほしいことを示します。写真で見せた変化と、サービスページで説明する内容を一致させます。

• 事例と同じ課題に対応するサービスへつなぐ
• 対応できる範囲と別見積もりになる内容を示す
• 相談前に用意できる写真や資料を伝える
• 同じ結果を保証する表現を使わない
• 現在の料金・期間・保守条件と矛盾させない

Bämのサービス紹介サイト制作では、事例写真だけでなく、依頼前の背景、会社の担当範囲、読者が判断できる説明を一緒に整理します。掲載できる事例が決まっていない段階でも、ホームページ制作の相談窓口からお話をお聞かせください。

公開後は閲覧数より相談時の理解を確かめる

ページが見られた回数だけで、事例が役立ったとは判断できません。相談時にどの事例を見たか、担当範囲を正しく理解していたか、同じ誤解や質問が続いていないかを記録します。誤解があれば、写真を増やす前に説明と条件を直します。

公開前チェックリスト

• 比較で答える読者の質問を一つ決めた
• 前後の撮影位置、高さ、画角、照明、時刻をそろえた
• 加工前原本と撮影メモを上書きせず残した
• 自社、顧客、他社の担当範囲を分けた
• 変わっていない点と個別条件を説明した
• 結果を誇張する切り抜き・色補正・削除をしていない
• 写真、人物、建物、ロゴ、コメントの掲載許可を確認した
• 業種固有の広告・表示ルールを公開時点で確認した
• スマートフォンでも順番、代替テキスト、説明を確認した
• サービス内容と相談方法が現在のBäm仕様と一致している

よくある質問

前の写真がない場合、似た別案件の写真を使えますか？

同じ案件の前後としては使えません。別案件であることを明記し、工程例や参考写真として分けます。比較できる証拠がなければ、完成写真と担当範囲を正確に説明する事例にしてください。

明るさや色を直すのは問題ですか？

撮影時の見え方を戻す最低限の調整はあり得ますが、前後で異なる補正をして結果を大きく見せないでください。加工前原本を残し、比較条件が変わらない範囲か複数人で確認します。

お客様の顔をぼかせば許可は不要ですか？

顔以外の服装、名札、場所、車両、室内などから本人や会社が分かる場合があります。ぼかしだけで判断せず、掲載目的、媒体、期間を伝えて確認し、人物が不要なら写らない構図を選びます。

事例には成果の数字を入れた方がよいですか？

正本データ、期間、比較対象、他の要因を説明できる場合だけ使います。数字がなくても、相談背景、担当範囲、工程、確認できた変化を具体的に示せば、読者の判断材料になります。

ほかの集客・事例づくりの記事は、マーケティングの案内ページから確認できます。

参考資料

• 消費者庁「不実証広告規制」（2026年9月4日確認）
• 消費者庁「優良誤認とは」（2026年9月4日確認）
• 厚生労働省「医療法における病院等の広告規制について」（2026年9月4日確認）
• 個人情報保護委員会「個人情報の保護に関する法律についてのガイドライン（通則編）」（2026年9月4日確認）
• 文化庁「著作権テキスト 令和8年度版」（2026年9月4日確認）
• Google 検索セントラル「画像のSEOベストプラクティス」（2026年9月4日確認）