Case Study

株式会社木と日々

架空の住宅会社のWebサイト（複数ページ）

家づくりの不安ごとにページを分けて情報を整理し、どのページからも相談へ進める構成に重点を置いて制作しました。

この作品は、架空の企業を想定した自主制作です。実在の企業・店舗や受託案件ではありません。

Overview

作品概要

この作品は、架空の企業を想定した自主制作です。実在の企業・店舗や受託案件ではありません。

Background

家づくりを考え始めた家族が、土地・予算・住宅性能といった不安を一つずつ整理できるWebサイトを想定して制作しました。

架空の住宅会社「株式会社木と日々」の企業サイトとして、複数ページで情報を整理し、相談につなげる構成にしています。

Target

初めて家づくりを検討する、子育て世代の家族を想定しました。

想定した不安

Design

不安ごとにページを分けた情報整理: 「お金のこと」「土地探し」「住宅性能」をそれぞれ独立したページにし、トップページの各セクションからそれぞれのページへ案内する構成にしました。
相談までの見通しを示す: 家づくりの流れを「無料相談」から「完成・お引き渡し」までの5つのステップで示し、相談したあとの進み方を想像しやすくしました。
どのページからも相談へ進める導線: ヘッダーに「無料相談・来場予約」ボタンを置き、下層ページ（お金のこと・土地探し・住宅性能・私たちについて）の末尾にも相談への導線を設けました。

Development

Next.js による複数ページ構成: Next.js（App Router）・React・TypeScript で複数ページを構成しました。すべてのページを公開前にあらかじめ作っておく方式（静的書き出し）で、Cloudflare Pages に公開しています。
施工事例をデータから生成: 施工事例の内容を1つのデータファイルで管理し、詳細ページ3件をそのデータから作る仕組み（generateStaticParams）にしています。データを追加することで、対応する詳細ページを生成できる構成です。
操作が必要な部品だけをブラウザで動かす: FAQの開閉、スマートフォン用メニュー、トップへ戻るボタンなど、画面上の操作が必要な部品だけを、ブラウザで動く部品（Client Component）として実装しています。操作が不要な部分は、ブラウザ側で動かす処理を増やさない構成にしています。
デモであることを明示した問い合わせフォーム: 問い合わせフォームは「入力 → 確認 → 完了」の3段階のデモです。入力内容が送信・保存されないことを画面上に表示しています。
CSS Modules によるスタイル管理: 部品（コンポーネント）ごとに見た目の指定（CSS）を分けて管理し、ほかの部品の見た目に影響しないようにしています（CSS Modules）。

Links

https://ki-to-hibi.pages.dev

More Projects