工務店のWebサイト
- サンプルサイトの会社名、店舗名、所在地、人物名、メニューや価格などは全て架空のものです。
- また、サンプルサイトのお問い合わせフォームは見た目のみで実際の送信はできません。
- 画面内で操作できます。
要件定義
【目的】
- 地域密着型工務店としてのブランド認知拡大
- 見込み顧客からの「資料請求」「相談会予約」といったコンバージョン（CV）の獲得
【ターゲット】
- メインターゲット層： これからマイホームの建築を検討している30代〜40代の子育てファミリー層。特に、地域での評判や担当者との距離感、施工の柔軟性を重視し、自分たちのライフスタイルに合った家づくりを求めている層。
- サブターゲット層： リフォームや二世帯住宅への建て替えを検討している50代以上の層および、地元での就職を希望する求職者。
【機能要件】
- レスポンシブWebデザイン: スマートフォンでの閲覧率が高いターゲット層を考慮し、マルチデバイス対応を徹底。
- 「施工事例」や「お知らせ」などの掲載（本番実装時はWordPressにて実装）。
- Google Maps埋め込み
デザインや実装のポイント
【カラーリング】
- フォレストグリーン: 自然、調和、安らぎを象徴する深みのある緑を採用。「家族の健康」というコンセプトとリンクさせた。
- ブリックレッド・エンジ: 職人の情熱や、家の温もりを感じさせる暖色系をアクセントに使用。緑との補色効果により、画面にメリハリを与える。
- ホワイト・ベージュ: 清潔感と居住空間の明るさを表現。テキストの可読性を確保しつつ、全体のトーンを柔らかくまとめている。
【レイアウト & UI】
- セクションの明確化: 背景色を「白→エンジ→緑→グレー」とセクションごとに切り替えることで、情報の区切りを明確化。長くなりがちなトップページでも、ユーザーが飽きずにスクロールできるリズム感を生み出している。
- タイポグラフィ: 見出しには明朝体を使用し、プロフェッショナルとしての「品格」と「信頼感」を演出。対して本文には可読性の高いゴシック体を採用し、情報の伝わりやすさを優先したフォントペアリングを行っている。
- グリッドによる施工事例表示: 施工事例セクションでは、写真を均等なグリッドで配置し、視覚的な一覧性を確保。
【その他】
- ビジュアルストーリーテリング: ファーストビューに複数の「笑顔の家族写真」をスライドショーで配置することで、家を建てた後の幸せな生活を想起させるストーリーテリングを意識。スペック情報よりも先に、ユーザーの共感を呼ぶアプローチを採用している。
- 採用ページ: 慢性的な人材不足が課題となる業界特性を踏まえ、トップページ内に採用情報への導線をしっかりと確保。詳細ページでは募集要項の詳細を掲載し、応募フォームを設置。「働く人の顔」が見えるデザインにすることで、応募者だけでなく、施主に対しても「どんな人が家を作るのか」という安心感を与える副次効果を狙った。