WordPressデモサイト なりなり工務店

「スマホで気持ちよく見られること」と「工務店の方が、管理画面から自分で更新できること」を軸に作りました。

雑誌のような施工事例

• 写真が主役：施工事例のページは、大きな写真に英字の見出しを重ね、写真・説明・建物の表・お客様の声の順に、雑誌をめくるように読める作りにしました
• 種類に合った表：新築なら延床面積・構造と工法・間取り、リフォーム・リノベーションなら施工箇所や築年数と、種類に合った項目だけを表に出します。施工前と施工後の写真も並べられます
• 一覧の絞り込み：施工事例の一覧は、種類・エリア・価格帯で絞り込めます
• エリアのページ：「〇〇市 工務店」で探す人に向けて、エリアごとに施工事例を並べたページを用意しました。事例が少ないエリアのページは、検索結果に出さない設定にしています

見た目

• 木の家らしい色と文字：深い緑と木の茶色を基調に、明朝体の見出しと、写真に重ねた大きな英字（LIVE IN COMFORT・WORKS など）でまとめました
• すぐに連絡できる：スマホでは、画面の下に「電話する」「見学会を予約」のボタンをいつも出しています

工務店の方が自分で更新できる

• 施工事例：「基本」「写真」「建物・工事」「声と担当」「掲載」のタブに分けた入力欄で書きます。種類を選ぶと、新築用・リフォーム用の項目に切り替わります
• 見学会：日付・時間・会場・定員を入れて載せ、申し込みはサイトのフォームで受け付けます。終了日を過ぎると、一覧から消え、申し込みが止まり、ページに「終了しました」と出るので、消す作業は要りません
• 募集要項：自作の採用プラグイン（NARI Recruit）で、「仕事」「契約」「時間と休み」「賃金」「掲載」のタブに分けて入力します。法令で明示が必要な項目は、すべて埋めるまで公開できないので、入れ忘れを防げます。Google の求人検索向けのデータと、応募フォームも出します
• この画面の使い方：更新の担当者が替わっても迷わないよう、各画面の上に「この画面の使い方」を置き、開けば手順を読めるようにしました。ダッシュボードには、よく使う操作のリンクを並べています
• 権限：会社の担当者と、施工事例・見学会・お知らせだけを書く人に分けました。書く人は、募集要項や固定ページには触れません

施主のお宅を守る仕組み

• 掲載の許可：施工事例は、「掲載」のタブで施主から掲載の許可をもらった印を付けるまで公開できません。印を外せば、すぐに下書きに戻り、サイトに出なくなります
• 場所は市区町村まで：施工事例にも見学会にも、番地を入れる項目を作っていません。見学会の詳しい場所は、申し込んだ人にだけ伝える流れにしています
• 写真の位置情報：スマホで撮った写真の位置情報（どこで撮ったか）は、アップロードのときに自動で消えます。写真のファイル名も自動で付け替わります
• お客様の声：署名は「K様」のようにして、氏名を書かないよう入力欄で案内しています

架空の工務店なので、全ページに「デモサイト」の帯を出し、検索結果には出ない設定にしています。会社・人物・住所・電話番号はすべて架空です。写真は素材サイト（Unsplash・Pexels）のもので、写っている家は、なりなり工務店が建てた家ではありません。スタッフの写真は、顔の写らない手元の写真にしています。