ガチの工務店サイト

特長

1/ SEOに強く、コンバージョンまでを意識した設計

SEOやコンバージョンのことを突き詰めると、基本的にはページ数やコンテンツ量は増える傾向にあります。しかし、「初心者でも使いやすいテンプレート」や「汎用性のあるテンプレート」を作ろうとすると、コンテンツを必要以上に増やすことは難しくなります。ただよく考えると、不要なページ、セクション、機能は、削除したり、使わなかったりすればいいだけです。ですので、この『ガチの』シリーズでは、「マーケティング支援が本業の私が、本気で作ったらこうなる」をコンセプトに、SEOやコンバージョンの獲得に必要なコンテンツと動線設計を考え抜き、妥協のないテンプレートを制作しています。

2/ 工務店のホームページに必要なページを網羅

このテンプレートを制作するにあたって、100件以上の工務店・ハウスメーカーのホームページを研究しました。この業種に必要なページやコンテンツを網羅しているのはもちろん、工務店・ハウスメーカーのホームページを利用するユーザーの視点に立ったサイト設計・ページ設計を行っています。

3/ 主要コンテンツの多くはCMSで更新できるので運用しやすい

お知らせやコラムはもちろん、施工事例、お客様インタビュー、モデルハウス、スタッフ、イベント情報も、CMSダッシュボードで更新できるようにしています。本来はもう少しCMSで管理できる部分を増やしたいところですが、Studioの新料金プランではプランごとにCMSモデル数の上限が設定されています。そのため、Businessプランでのご利用を想定し、CMSモデルはあえて9個に抑えています（Businessプランの上限は10個のため任意のモデルを1つ追加することも可能です）。

→ そもそもStudioとは？

ページ構成

工務店やハウスメーカーだけでなく、一般的な企業のホームページ（コーポレートサイト）に必要なページを幅広く網羅。不要なページは削除するか、非公開にしてご利用ください。

• ホーム

• 家づくりの特長

  1. デザイン

  2. 住宅性能

  3. 価格

  4. 保証

  5. 家づくりの流れ

  6. よくあるご質問

• 施工事例 一覧ページ（CMS）

  1. 施工事例 タグ別一覧ページ（CMS）

  2. 施工事例 詳細ページ（CMS）

• お客様インタビュー 一覧ページ（CMS）

  1. お客様インタビュー 詳細ページ（CMS）

• 商品ラインナップ

  1. 商品 詳細ページ

• モデルハウス 一覧ページ（CMS）

  1. モデルハウス 詳細ページ（CMS）

     1. 来場予約 送信完了ページ

• コラム 一覧ページ（CMS）

  1. コラム 記事ページ（CMS）

• お知らせ 一覧ページ（CMS）

  1. お知らせ 記事ページ（CMS）

• 会社紹介

  1. 会社概要

  2. スタッフ紹介（CMS）

  3. 採用情報（一部CMS）

     1. 採用エントリー 送信完了ページ

• 無料相談・お問い合わせページ

  1. 無料相談・お問い合わせ 送信完了ページ

• イベント 一覧ページ（CMS）

  1. イベント 詳細ページ（CMS）

     1. イベント参加申込 送信完了ページ

• 資料請求ページ

  1. 資料請求 送信完了ページ

• プライバシーポリシーページ

• メニューモーダル

• 404ページ

こだわりポイント

トップページ

スライドショー

トップページのファーストビューには、5枚の画像がズームインしながら切り替わるスライドショーを配置。同様の表現はカルーセル機能を使ってもできますが、ピカっと光るなど、挙動が安定しない傾向があるため、カルーセルはあえて使っていません。そのため無限ループはしませんが、ずっとファーストビューに留まり続けるユーザーもいないと思うため、特に問題はないと考えています。画像の変更はレイヤーパネルから選択して行ってください。

ドロップダウンメニュー付きグローバルナビ

グローバルナビゲーションのメニューは、ユーザーを迷わせないよう、主要なページに絞っています。また、一部のメニューは、オンマウスでドロップダウンメニューが表示されるようにしています。ドロップダウンメニュー内の変更は、レイヤーパネルから選択して行うのが簡単です。

固定追従型CTA

右上には固定追従型のCTAとメニューモダールのボタンを配置しました。工務店サイトを訪れるユーザーに取ってほしい行動は、基本的に「無料相談」「イベント参加」「資料請求」のいずれかのため、その3つのページへの動線が常に表示されるようにしています。

キャッチコピー

ファーストビューの下部に配置している2行のコピーは、上のサブコピーが説明的なテキストで、下のメインコピーがいわゆるキャッチコピーです。また、検索結果ページのタイトルリンクにも影響のある＜h1＞タグは、あえてサブコピーのほうに設定しています。通常こちらに、会社名や地名、業種名などの主要なキーワードが入ることが多いためです。

モバイルのファーストビュー

モバイルサイズのファーストビューでは、グローバルナビが省略されることも多いですが、ユーザーが目的のページにすばやくたどり着けるよう、本テンプレートでは、モバイルサイズでもグローバルナビを表示しています（トップページのみ）。

コンポーネント化した見出しとボタン

繰り返し使う見出しとボタンは、コンポーネント化しているため、デザインを変更したい場合も一括して変更できます。オプションで、見出しは白文字に変更可能。ボタンは別ウィンドウで開く外部リンクに変更可能です。

テキストスライダー

ページ上に、デザイン的な奥行きや動きを加えるため、無限ループ風のスライダーを2ヶ所に設定しています。カルーセル機能でも同様の表現は可能ですが、挙動が安定しない傾向があるため、あえてカルーセルは使わずに実装しています。この部分の仕組みについては、こちらのポストを参照ください。

 YouTubeリンク

工務店では、YouTubeチャンネルでルームツアーなどの動画を公開しているケースが多いため、「お知らせ」「コラム」と合わせて、「YouTube」の更新情報欄を設けています。StudioではYouTube動画を直接サイトに埋め込むことも可能ですが、現状の仕様上、そうするとCMSでは管理ができないため、本テンプレートでは、埋め込み形式ではなく、YouTubeの動画ページに遷移する形になっています。詳しい仕組みについては、こちらのポストをご参考ください。

CMSダッシュボードでは、動画のタイトルと「YouTube動画ID」を入力します。「YouTube動画ID」とは、YouTubeの各動画ページのURLの「?v=」より後の文字列のことです。

下層ページ 共通

大見出しコンポーネント

動的ページをのぞく下層ページの大見出し部分（ページ最上部のタイトル周り）は、再利用やデザイン変更がしやすいようにコンポーネント化しています。コンポーネントのプロパティから背景画像や見出し・パンくずリストの表記を変更できます。コンポーネント化している大見出し部分は以下の4種類です。

• 第二階層大見出し

• 特長下層ページの大見出し

• ラインナップ下層ページ大見出し

• 第三階層大見出し

フッター

フッターからは、動的ページをのぞくすべてのページに直接アクセスできるようにしています。工務店では「施工地域」も重要な情報であるため、どのページからアクセスしてきたユーザーでもすぐに目につくよう、全ページのフッターに掲載しています。また、PCブラウザでは、ページ最下部から最上部に戻るのに手間がかかる場合もあるため、フッターにはページトップに戻るボタンも設置しています。

回遊リンク

各下層ページの下部には「回遊リンク」コンポーネントを設置しています。それぞれのページごとに、任意のリンク先を2つ設置できます。「そのページを開いた人が次に読みたいであろうページ」をリンクに設定することで、訪問者にサイト内を回遊しやすくする狙いがあります。

その場で読めるプライバシーポリシー

本テンプレートでは、「無料相談・お問い合わせページ」「資料請求ページ」「イベント詳細ページ」「モデルハウス詳細ページ」「採用情報ページ」に、それぞれの問い合わせフォームが設置されています。送信時に同意が必要なプライバシーポリシーは、すべてその場で読める形にしています。また、プライバシーポリシーのテキスト部分はコンポーネント化しているため、修正は、プライバシーポリシーページも含め、すべてに反映されるようになっています。

家づくりの特長ページ

5つの特長とよくあるご質問

「家づくりの特長」には、「デザイン」「住宅性能」「価格」「保証」「家づくりの流れ」という5つの特長の詳細ページと「よくあるご質問」ページを設けています。これらをCMSの動的ページにすることも検討しましたが、Studioの新料金プランではCMSモデル数の上限が設定されていることを踏まえ、あえて通常の静的ページにしています。ちなみに、静的ページのため、それぞれの詳細ページを自由にデザインできます。

回遊しやすい設計

各特長の詳細ページの上部と下部には、それぞれ、他の特長ページへ横移動しやすい回遊動線を設けています。また、条件付きスタイルの「現在のページ」機能を活用し、今いるページがわかりやすいように工夫しています。

よくあるご質問ページ

よくあるご質問ページは、Toggleボックスを使っているため、最初は質問の一覧のみが表示され、クリックすると回答が表示されます。また、リスト機能もを使っているため、テキストやデザインの変更も容易に可能な仕組みになっています。

施工事例

タグで絞り込み

工務店サイトを訪れるような注文住宅検討層のユーザーは、建てたい家のイメージがある程度決まっていることも多く、希望にあった家の施工実績があるかを確認したいと思っています。そのため、施工事例の一覧ページは、CMSダッシュボードで登録しているタグで絞り込みができるようにしています。タグの種類は自由に変更可能です。

オンマウスで内観表示

ユーザーの中には、外観から事例を選びたいユーザーもいれば、内観から選びたいユーザーもいます。そのため、一覧の外観写真をオンマウスすると内観写真が表示されるようにしています。

オリジナルカルーセル

事例詳細ページには、私がオリジナルで作ったドットインジケーター付きのカルーセル（スライダー）を設置しています。自動再生はしませんが、Studioのカルーセルより挙動が安定しているのが特長です。

基本情報一覧

施工事例に関してユーザーが知りたい基本情報は、CMSダッシュボードで登録ができ、事例詳細ページに一覧表示されるようにしています。それぞれの項目に表示条件を設定していますので、CMSダッシュボードで空欄の項目は表示されない仕組みになっています。

お客様インタビューとYouTubeへの動線

同じお客様の「施工事例」と「お客様インタビュー」は、それぞれの詳細ページから行き来できるようにしています。「施工事例」はあって「お客様インタビュー」がない場合は、表示条件の設定で、該当箇所が表示されない仕組みになっています。

同様に、「施工事例」と同じお宅の「YouTube動画」がある場合も、施工事例の詳細ページからYouTubeの動画ページへのリンクを設けています。

お客様インタビュー

オンマウスで外観写真

お客様インタビューの一覧は、実際のお客様の顔が見えることが重要なため、メイン画像は人物写真にしています。ただし、オンマウスすると、そのお客様のお宅の建物写真が表示されるようにしています。

施工事例ページと連動

お客様インタビュー記事ページの「Data（基本情報）欄」は、当該のお客様の施工事例ページの情報が表示されるようになっており、その施工事例ページに遷移するリンクも設けています。該当する施工事例ページがない場合、この欄は非表示となります。

商品ラインナップ

あえて静的ページで

特長ページと同様、商品ラインナップの詳細ページも、あえてCMSの動的ページではなく、通常の静的ページにしています。Studioの新料金プランではCMSモデル数の上限が設定されているためです。もちろん静的ページのため、それぞれの商品詳細ページを自由にデザインできるメリットもあります。

回遊しやすい設計

各商品詳細ページの上部と下部には、それぞれ、他の商品詳細ページへ横移動しやすい回遊動線を設けています。また、条件付きスタイルの「現在のページ」機能を活用し、今いるページがわかりやすいように工夫しています。

モデルハウス

機能的な一覧ページ

モデルハウスの一覧ページは、最寄りのモデルハウスを探しやすいよう、所在地も一覧に表示されるようにしています。また、すぐに行動にも移しやすいよう、「詳細を見る」ボタンだけでなく、来場予約フォームへのリンクと電話番号も記載しています。

モデルハウス 詳細ページ

モデルハウスの詳細ページには、施工事例と同様のカルーセル（スライダー）のほか、関連YouTube動画へのリンク、基本情報、Googleマップも表示されるようにしています。モデルハウスのCMSも記事タイプのため、CMSダッシュボードで入力した本文部分も詳細ページに表示されます。必要な情報を自由に追加してご利用ください。

CMSでGoogleマップも管理

CMSダッシュボードで、各モデルハウスのアイテムに「GoogleマップのiframeのURL部分」を登録すると、モデルハウスの詳細ページにGoogleマップが表示される仕組みになっています。

各詳細ページに来場予約フォーム

モデルハウスの各詳細ページには、それぞれ来場予約フォームを設置しています。ただし、Studioにはどのページからの問い合わせかを判別できる機能がないため、「モデルハウス名」の欄を設け、その下に、当該ページのモデルハウス名が表示されるようにしています。これによりユーザーは、コピー&ペーストで入力することも可能です。ちなみに、ご希望日時欄の下にも、当該モデルハウスの営業時間が表示されるようにしています。

コラム・お知らせ

「コラム」と「お知らせ」は、「ブログ」などとして、ひとつにしてしまうケースもありますが、それぞれの役割が異なるため、本テンプレートでは別々のCMSモデルにしています。また、「コラム」にはカテゴリーを設ける場合もありますが、まだStudioに新機能の「選択プロパティ」が実装されておらず、CMSモデルがひとつ増えることになるため、現時点ではあえてカテゴリー機能を設けておりません。

会社紹介

3つのコンテンツ

会社紹介には、デフォルトで「会社概要」「スタッフ」「採用情報」という3つのコンテンツを設けています。もちろん、必要に応じて増やしていただくことも可能です。

CMSでスタッフ情報を管理

スタッフページのスタッフ一覧と、採用情報ページのメッセージ一覧は、同一のCMSモデルで管理できるようにしています。スタッフ一覧には掲載するが採用情報のメッセージ一覧には掲載しない、という選択もスタッフごとに可能です。

採用サイトもこれ1本

一般的なコーポレートサイトのテンプレートには、採用ページが含まれておらず、別途採用サイトを制作する必要がある場合もありますが、本テンプレートには必要十分な採用ページを設けていますので、これ1本で完結できます。ただし、採用ページにとことんこだわろうと思うと、CMSモデルが複数必要になるため、今回は敢えて、必要十分なコンテンツにとどめています。

必要項目を網羅した募集要項

採用情報ページの募集要項はToggleボックスで作成しているため、1つのページに複数の募集要項を掲載しても煩雑にならないデザインになっています。また、募集要項のデフォルト項目には、明示することが法律で義務づけられている項目をすべて含んでいます。

クリックで開閉するメッセージ

採用情報ページのスタッフから求職者へ向けたメッセージ欄では、Toggleボックスを活用し、顔写真をクリックするとメッセージが表示される仕組みにしています。CMSで管理しているため、動的ページや動的モーダルに遷移させることも可能ですが、ユーザーのページ遷移を減らしたほうが快適に多くのコンテンツを閲覧できると考え、このような形にしています。

採用エントリーフォーム

採用ページの同一ページ内に、採用エントリーフォームを設けているため、ユーザーはページを遷移することなくエントリーが可能です。

無料相談・お問い合わせフォームと資料請求フォーム

問い合わせフォームと資料請求フォームは一緒にしてしまうこともありますが、ページで伝えるべきメッセージや必須の入力項目も異なりますので、それぞれ別ページで制作しています。送信完了ページ（サンクスページ）も、それぞれにありますので、アクセス解析時に別々のコンバージョンとして計測いただけます。

イベント

イベント一覧

工務店サイトには欠かせない「イベント情報」は、CMSダッシュボードで管理できるようにしています。終了したイベントには、CMSダッシュボード上で印をつける（トグルをONにする）ことで、画面上の「受付中」ラベルを「終了」ラベルに変更できます。

CMSでGoogleマップも管理

CMSダッシュボードで、各イベントに「GoogleマップのiframeのURL部分」を登録すると、各イベントの詳細ページにGoogleマップが表示される仕組みになっています。

各詳細ページに参加予約フォーム

イベントの各詳細ページには、それぞれ参加予約フォームを設置しています。ただし、Studioにはどのページからの問い合わせかを判別できる機能がないため、「イベント名」の欄を設け、その下に、当該ページのイベント名が表示されるようにしています。これによりユーザーは、コピー&ペーストで入力することも可能です。ちなみに、ご希望日時欄の下には、当該イベントの開催日程が表示されるようにしています。

プライバシーポリシー

プライバシーポリシーの本文はコンポーネント化しているため、内容の更新は、各フォームに設定しているプライバシーポリシーとも連動する仕組みになっています。

メニューモーダル

電話番号とSNSも表示

メニューモーダルには、各ページへのリンクだけでなく、電話番号と各種SNSへのリンクも表示しています。不要な場合は、削除してご利用ください。

アイコンのアニメーション

ちょっとしたデザイン上のギミックですが、メニューモーダルを開くための3本線のアイコンをクリックすると、それがそのまま✕印のアイコンに変化するアニメーションを設定しています。