木と暮らす工務店（工務店コーポレートサイト）
- 制作区分
- 自主制作
- 担当範囲
- 情報設計 / UIデザイン / レスポンシブデザイン / コーディング
- 制作期間
- 約1か月
- 使用ツール
- Figma / VS Code / HTML / SCSS / JavaScript
- サイトタイプ
- コーポレートサイト
- ターゲット
- 自然素材の家づくりを検討している30〜50代のご家族
架空案件概要
クライアント
木と暮らす工務店
事業内容
自然素材を使用した注文住宅の設計・施工
ご依頼背景
地域密着型で施工実績には自信があるものの、紹介や口コミ中心の集客に依存していました。
工務店ごとの違いが伝わらない、施工事例が十分に見られていない、問い合わせまでの導線が弱いという課題を抱えていました。
サイトの目的
メイン
サービスやブランドの魅力をわかりやすく伝え、閲覧者の興味・行動につなげること。
サブ
情報を整理し、回遊しやすい導線を設計する
PC/SPどちらでも世界観を崩さず表示する
お問い合わせ・購入・閲覧など次の行動へつなげる
ターゲット
メインターゲット
自然素材の家づくりを検討している30〜50代のご家族
ペルソナ
デザインの雰囲気や使いやすさを重視し、スマートフォンからもスムーズに情報を確認したいユーザー。
制作意図
架空の依頼背景地域密着型の工務店様を想定し、自然素材へのこだわりや暮らしをイメージできる雰囲気を伝えるサイトを目指しました。制作のポイント自然素材の温もりが伝わるナチュラルな配色写真を大きく使用し、暮らしをイメージしやすく設計スマホでも見やすいレスポンシブ対応
デザインのポイント
世界観を優先した余白設計
写真・文字・余白のバランスを整え、作品ごとの雰囲気が伝わるように構成しました。
ファーストビューで印象を訴求
制作物の特徴が最初に伝わるよう、メインビジュアルと導線を整理しています。
情報を見やすく整理
目的・ターゲット・担当範囲を管理画面から更新できる情報設計にしました。
家づくりの流れを掲載し不安を解消
CTAを複数配置し相談予約へ誘導
デザインコンセプト
余白・写真・タイポグラフィを活かし、既存の世界観を壊さず上質で見やすいデザインに整えました。
制作担当
情報設計
ワイヤーフレーム設計
UIデザイン
レスポンシブデザイン
コーディング（HTML / SCSS）
アニメーション設計