GAL-004 公開  更新

ビフォーアフター型 ギャラリー

同じ場所の施工前と施工後の写真を並べ、何を行い、どう変わったかを比べられるようにする設計です。
リフォーム・外構・清掃など、変化そのものが仕事の成果になる業種で使います。

ワイヤーフレーム(PC)

ビフォーアフター型 ギャラリー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

ビフォーアフター型 ギャラリー SP版ワイヤーフレーム

SP版の特徴

  1. 切り替えて1枚ずつ見せる:左右に並べると写真が小さくなり、変化が見えにくいためです。
  2. 最初に表示する写真を目的で決める:成果を先に見せたいなら施工後、変化の過程を追ってもらいたいなら施工前から見せます。デモでは施工後を先に表示しています。

採用前の判断ポイント

向いているケース

  • 仕事の成果が、施工前と施工後の違いで伝わる
  • リフォーム・外構・清掃・修理など、変化を写真で示せる
  • 同じ位置・同じ向きで、前と後の写真を撮れる

向かないケース

  • 施工前の写真がない、または同じ位置から撮れていない(比べにくい写真を並べると、かえって変化が伝わりません。グリッド型 ギャラリーが向きます)

このワイヤーの特徴

前と後を並べて、変化を比べられる

施工前と施工後の写真を左右に並べ、矢印でつないで、同じ場所がどう変わったかを比べられるようにしています。

どちらの写真かを、ラベルで示す

写真の下に「施工前」「施工後」のラベルを付け、色の反転でも区別しています。
写真だけでは、どちらが前か分からないことがあります。

行ったことと工期を、写真の下に書く

写真の下に「行ったこと」と「工期」を書き、変化の理由と、どのくらいかかったかを伝えています。

SPでは、切り替えて見せる

SPでは左右に並べると写真が小さくなるため、「施工前/施工後」の切り替えボタンで1枚ずつ大きく見せています。
最初にどちらを見せるかは、成果を先に伝えたいか、変化の過程を追ってもらいたいかで決めます。

制作時のよくある失敗

前と後で、撮る位置や向きが違う

撮る位置や向きが違うと、どこが変わったのかが比べられません。
施工前に撮影した位置を記録しておき、同じ位置から撮ります。

施工後の写真だけ、明るく加工する

施工後の写真だけを明るく加工すると、変化を大きく見せているように受け取られます。
前と後で、同じ条件で撮り、同じように調整します。

どちらが施工前か、分からない

ラベルがないと、読み手は写真の順番から推測することになります。
「施工前」「施工後」の文字のラベルを付けます。

スライダーで重ねるだけにする

写真を重ねて左右に動かす見せ方は目を引きますが、操作に気づかれない場合や、キーボードで操作できない場合があります。
並べて見せる形を基本にし、重ねる場合も操作を分かりやすくします。

よくある質問

施工前の写真は、どう撮ればよいですか?

施工後にも同じ位置から撮れるよう、立つ位置と向きを記録しておきます。
部屋全体と、変える部分の近くの2枚を撮っておくと、比べやすくなります。

写真の掲載は、お客様の許可が必要ですか?

住まいや店舗の写真は、お客様の許可を得てから掲載します。
プライバシーに配慮し、必要に応じて住所・表札・人物など、特定につながる情報を隠します。

施工前と施工後を、重ねて左右に動かす見せ方はどうですか?

変化が分かりやすい一方で、操作に気づかない人や、キーボードで操作しにくい場合があります。
使う場合は、並べて見る方法も合わせて用意すると安心です。

同じパーツのPattern

ギャラリーの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開