ステップホーム様 Figmaで制作

ファミリー向けにカジュアルで親近感が湧く雰囲気が伝わるよう、ベージュなど柔らかいカラーをベースにデザインしました。
フォントもペン字のような筆記体を用いて、可愛らしくも、フェミニンすぎないイメージを与えられるように工夫しました。

デザイン

【案件概要】
木のぬくもりを大切にする工務店「STEP HOME様」のWebサイト制作を担当しました。
「ブランドの世界観を統一したい」「施工事例をしっかり見せたい」
「問い合わせにつながる導線を整えたい」というご要望をいただき、
Figmaでのデザイン設計からWordPress構築まで一貫して制作しました。

【課題】
・既存サイトではブランドの世界観が統一されていない
・施工事例が埋もれており、魅力が十分に伝わらない
・問い合わせまでの導線が曖昧
・運用側が投稿・更新しにくい構造になっている

【制作コンセプト】
“安心とあたたかさが伝わる家づくり” を軸に、
ブランドのトーン&マナーを整えながら、
施工事例がしっかりと伝わる構成へ再設計しました。

【担当範囲】
・ヒアリング
・サイトマップ作成
・ワイヤーフレーム制作
・Figmaでのデザイン制作
・WordPress構築
・カスタム投稿の設計
・公開後の運用マニュアル作成

【工夫した点】
世界観の統一とブランド価値の視覚化
ナチュラルで落ち着いた配色を採用し、
“木のあたたかみ”が感じられるデザインを意識しました。

施工事例の見せ方を最適化
・カテゴリ分けを見直し
・ユーザーが比較しやすいレイアウトで見せる
・写真を活かす余白設計で、魅力を最大化

問い合わせ導線の強化
サイト内の重要ポイントにCTAを適切に配置し、
迷わず問い合わせにつながる導線を設計しました。

運用しやすいWordPress構築
・施工事例の投稿を簡単に行えるカスタム投稿を実装
・担当者が画像とテキストを入れるだけで更新できる構造に
・固定ページも柔軟に編集できるよう設計

【成果】
・ブランドとして統一されたデザインにより信頼性が向上
・施工事例ページの閲覧性が改善され、魅力が伝わりやすくなった
・問い合わせ導線が改善され、コンバージョンにつながりやすい構造に
・「更新しやすくなった」と運用担当者から評価を獲得

【使用ツール】
Figma / WordPress / Photoshop / HTML / CSS

【制作期間】
約1ヶ月