Blog ブログ

<WordPressでできること>ビフォーアフター画像つきの施工事例集を作りたい

弊社では、ウェブサイト制作の基盤となるシステムとしてWordPressを採用しております。

お客様からウェブサイトに欲しい機能のヒアリングをおこない、「お問い合わせフォーム」や「商品カタログ」「事例集」など、ご要望にあわせてWordPressのカスタマイズをおこなっております。

本コンテンツ<WordPressでできること>では、実際の制作業務でお客様からいただいたご要望と、その解決事例をご紹介いたします。

ビフォー・アフター画像つきの施工事例をホームページに掲載したい!

建築業者様やリフォーム業者様などから多くいただく要望として、施工事例を自社のウェブサイトに載せたいというご要望をいただくことがあります。

中でも、リフォーム業者様の場合は、ただ写真を載せるだけではなく、某テレビ番組のように”劇的!”に変わった様子をビフォーアフター画像付きで見せたいというお話をいただきます。

「写真と説明文を管理画面上で追加していくだけで施工事例が作れるようなカスタマイズはできますか?」
そんなご相談をいただいたお客様のために、WordPressのカスタマイズで実現できる、施工事例ページを構築させていただきました。

カスタマイズ前の管理画面

こちらは、WordPressの記事の投稿画面です。

お使いの環境やWordPressの設定により若干違いはありますが、基本的な構成は、

  1. タイトルの入力欄
  2. 本文の入力欄
  3. カテゴリーの選択欄

この3つです。

施工事例を載せるに当たり、必要な情報は…

  • 施主名 … (例)「〇〇県××市 A様邸」
  • 完成年月日 … (例)「2018年11月」
  • 施工期間 … (例)「3ヶ月」
  • 施工内容 … (例)「外壁塗装」「水廻りリフォーム」など
  • ビフォー・アフター画像
  • 解説文

このような感じでしょうか?

ちなみに、今回の紹介例では、このほかに「ケースナンバー」と「担当者」の項目が追加されました。
これらの項目を、カスタマイズによって管理画面に追加していきます。

WordPressで施工実績の管理画面を作る

カスタマイズをおこない、WordPressの管理メニューに「施工実績」の項目を追加しました。
この画面から登録や編集がおこなえるようになります。

次に、登録画面を見てみましょう。

 

手入力項目

タイトル・ケースナンバー・施主名・完成年月・担当者名・施工内容をそれぞれ手入力できるようにしました。

 

解説文

ブログやWord感覚で自由に写真を入れたり、解説文を入力できます。

 

カテゴリー

施工内容をカテゴリー登録できるようになっています。
一覧ページでは、好きな施工内容に絞ってページを見ることができます。

 

ビフォー・アフター画像(ポップアップ)

ビフォー・アフター画像を登録します。
今回は2種類の登録方法をご用意いたしました。こちらで登録した画像は…

このように一覧で表示され、

クリックすると画面いっぱいに拡大して表示されます。

 

ビフォー・アフター画像(解説付き)

もう一つの登録方法は、先ほどと似ていますが、見出しをつけられるようになっています。
こちらで登録した内容は…

このように比較画像として並べて掲載されます。
​​​​​​​ここから更にカスタマイズをして、コメントをつけられるようにすることもできます。

建築業者様やリフォーム業者様以外でも、業種に合わせて応用・カスタマイズ可能です!

今回は建築業者様やリフォーム業者様を例にご紹介いたしましたが、ビフォー・アフター系は他の業種でもご利用いただけるカスタマイズの一つです。
ぜひ当社でもやってみたい!というご相談がございましたら、お気軽にお問い合わせください。

ただし、中にはビフォー・アフター画像がページ上に載せられないお客様もございます。
例えば、医院・クリニック系のページでは、医療法により「詳細な説明文(具体的な治療内容、副作用、リスクなど)」がなければ載せてはいけないことになっております。
制作をご依頼される際は、事前に御社の業種・業態の広告宣伝ルールをご確認のうえ、ご依頼ください。

弊社では今回のケースのほかにもさまざまなWordPressのカスタマイズ事例がございます。
「こんな機能をもたせたい」「こんな機能を追加できますか?」など、ご要望がございましたら、お気軽にご相談ください。

WordPressのカスタマイズには別途費用が発生いたします。
価格はお客様のご要望により変動いたしますので、詳しくはお問い合わせください。