見出し画像

【事例紹介】楓工務店様Webサイトの構築やデータの連携について

こんにちは。
ADRIATIC吉永です。

少し前になりますが、奈良にある楓工務店様のWebサイトのリニューアルをさせていただきました。

注文住宅や新築を奈良や木津川市でお考えなら楓工務店https://www.kaedekoumuten.jp/

ADRIATICは2人組のフリーランスチームなのですが、サイトのディレクションから動画・写真撮影(写真はご提供頂いているものもあります)、デザイン・コーディング・CMS構築まで2人で制作しました。

CMSはWordpressで構築しています。
今回はデザインの前段階から更新するコンテンツが多いこと、そしてそれらのデータが連携していることが決まっていました。
今回は楓工務店さんのWebサイトの構築について備忘録もかねて書きます。

1.お話するページ

お客様の方で更新できる箇所・ページは多々あるのですが、今回お話するページは以下になります。

・イベント・見学会情報
https://www.kaedekoumuten.jp/event/
・お客様の声
https://www.kaedekoumuten.jp/voice/
・スタッフブログ
https://www.kaedekoumuten.jp/blog/
・スタッフ
https://www.kaedekoumuten.jp/company/staff/
・来店予約
https://www.kaedekoumuten.jp/reservation/

上記の各ページでデータが連携することでページの巡回を促すことを目的にしています。
各ページについて詳しく書いていきます。

2.イベント・見学会情報

イベント・見学会情報では現在受付中のイベントが上に来ます。
その中でも特に目立たせたいものを選んで一番上に表示することが出来る仕様になっています。

上部の右側にはブログでイベントレポートのカテゴリーで投稿されたものを表示しています。
イベントレポートを書いたスタッフのアイコンも表示し、そこからスタッフの詳細ページにリンクすることで、ブログやスタッフページへの巡回を促しています。

イベントの詳細画面は、フォーム一体型のページになっており、このページでお申込みまで完結できる設計にしています。
このフォーム部分は楓工務店様で使用されている外部ツールから出力されたインラインフレームのソースを管理画面から登録し表示しています。

3.お客様の声

一覧ページは各カテゴリーを選択するとajaxでデータを取得するようにしています。各カテゴリー内の下部の「もっと見る」もajaxで次の投稿を取得しています。ajaxでの読み込みは他のページでも組み込んでいます。

詳細ページでは施工事例へのリンクを入れることができます。
お客様の声から施工事例へとページを巡回しそこから来店予約まで繋げていく流れを作っています。
ページング部分には投稿のアイキャッチ画像を入れることで分かりやすくしています。

4.スタッフブログ

スタッフブログの一覧は、書いたスタッフのアイコンを入れて顔が見えるようにし、どんなスタッフなのかスタッフページへリンクしています。

ここで重要なのは裏側のWordpressのデータの連携です。

Wordpressのユーザとスタッフのデータが1対1で紐づいており、スタッフごとのブログアーカイブもWordpressユーザの投稿アーカイブが表示されるような仕様になっています。

スタッフデータは部署によるカテゴリー分けがされています。
左カラムの「スタッフから選ぶ」は全て動的に出力しており、まずスタッフの部署をすべて出して、各部署に所属するスタッフからWordpressユーザを判断し、そのユーザが投稿したブログのアーカイブへのリンクを表示するような仕様になっています。

ブログの詳細にも記事を書いたスタッフのプロフィールを入れ、どのような人が書いているのか分かるようにしています。

5.スタッフ

スタッフの一覧ページはランダムで表示し、特定のスタッフが上に来るということがないようにしています。

ブログのところでも触れたように、スタッフは部署ごとにカテゴリー分けされているので、部署ごとのスタッフ一覧も見ることが出来ます。

詳細ページでは、スタッフの挨拶や趣味やお気に入りを紹介する箇所があり、人となりが分かるようになっています。

スタッフページはイベント、ブログ、物件情報など色んなページからリンクされており、ご来店される方への安心感に繋がるようにしています。

6.来店予約

来店予約フォームは、EFOを施しています。
(本当は項目も必要最低限にした方が良いとは思いますが、この項目数が必要最低限だという結論になっています。)

EFOについてはこちらを参考にしてください。

各店舗の詳細ページから来店予約を押したときにその店舗が選択される仕様になっています。

7.最後に

デザイン面では他にも色々コンバージョンに繋げるための工夫はあるのですが、コーディング面での設計はこのような感じになっています。

他にも分譲住宅の物件情報や施工事例など、お客様で更新できる部分はたくさんあります。

そして、改善点もまだまだあり、現在も改善している最中です。

ホームページは公開したところがゴールではなくスタートなので、ここから色々改善し、より良いホームページになるようにしていきます。

この記事が気に入ったらサポートをしてみませんか?