Corporate WordPress

大和建築工房

大和建設工房

サイト種別コーポレート採用サイト(WordPress)
目的築30年以上の住宅を持つ施主に対し、耐震リノベーションへの安心感を伝え、無料耐震診断への申込を後押しする。
ターゲットユーザー築30年以上の実家・持ち家を持つ40〜60代
「親の家をそろそろ何とかしたい」「二世帯同居を検討中」という動機を持つ層
埼玉県川越市近郊在住、または遠方に住み実家を心配している子世代
制作環境WordPress / 自作カスタムテーマ / Local(ローカル開発環境)
対応デバイススマートフォン優先(SP/PC レスポンシブ対応)
製作期間約3週間

コンセプト

築30年以上の木造住宅を持つ施主に対し、「古い家でも安全に住み続けられる」という安心感を伝え、無料耐震診断への申込を後押しするコーポレートサイト。

世界観の演出よりも、実績の可視化診断プロセスの透明化によって信頼を積み上げる方向性で設計。派手な表現に頼らず、情報設計そのものを見せ場とした。

ターゲット

築30年以上の実家・持ち家を持つ40〜60代

「親の家をそろそろ何とかしたい」「二世帯同居を検討中」という動機を持つ層

埼玉県川越市近郊在住、または遠方に住み実家を心配している子世代

デザイン

配色:ネイビー(信頼・堅実さ)/ペーパーホワイト(誠実さ・余白)/木目調ブラウン(職人・手仕事感)+差し色グリーン(診断フローの進行ハイライト・CTAに限定使用)

タイポグラフィ:見出し・本文ともにNoto Sans JP。装飾書体を使わず、ウェイト差のみで階層を表現

世界観:紙の技術資料のような端正さ。演出は「実績カウントアップ」と「診断フローのスクロール連動ハイライト」の2箇所に絞り、それ以外は控えめなフェードインに留めている

サイト構成:複数ページ型(TOP+下層9ページの計10ページ)。施工事例をカスタム投稿タイプで管理し、一覧・絞り込み・詳細という構造を成立させている

担当箇所

企画・設計・実装すべてを一貫して担当(ヒアリング〜要件定義〜情報設計〜デザイン〜実装ディレクション〜品質管理)。本案件はAI社員体制(制作担当CLAUDE.md/QA担当QA_CLAUDE.mdによる業務定義書ベース)での初の案件で、Claude CodeがWordPressテーマ実装を担当し、実機確認・不具合修正の指示出しまでディレクション。

使用技術・ツール

CMS:WordPress(自作テーマ、ページビルダー・既成テーマ改造は不使用)

カスタム投稿タイプ:施工事例(タクソノミー:施工エリア/工事種別/築年数帯)、お客様の声

フロントエンド:HTML/CSS(FLOCSSベースの設計)/JavaScript(実績カウントアップ、診断フローのスクロール連動ハイライト、施工事例の絞り込みAjax、FAQアコーディオン、SP追従CTA制御)

フォーム:申込フォーム自作実装(入力→確認→完了の3ステップ、メール通知)

画像管理:wp.mediaメディアアップローダーによる管理画面登録の仕組み(設定画面+各投稿タイプのメタフィールド、全34点の画像すべてコード編集なしで差し替え可能)

タイポグラフィ:Noto Sans JP

開発環境:Local(Local by Flywheel)

制作のポイント

1. カスタム投稿タイプ×タクソノミーによる「絞り込める」施工事例設計

単なる実績一覧ではなく、施工エリア・工事種別・築年数帯で絞り込めるアーカイブ構造にし、実案件で頻出する要件にそのまま対応できる実装力を示した。

2. 演出に頼らない、情報設計主導の信頼構築

見せ場を「実績カウントアップ」と「診断フローのスクロール連動ハイライト」の2箇所に絞り、それ以外は堅実な配色・余白設計に徹することで、「派手さより安心感」というクライアントの意図を表現として一貫させた。

3. 運用まで設計

施工事例・スタッフ・お客様の声・サイト内の全34点の画像を、すべて管理画面から更新できる構成にした。コード編集が必要な箇所を残さない設計を徹底している。

4. 実装後の継続的な品質改善プロセス

実装完了後も、実機確認で見つかった不具合(JS読み込み条件の脆弱性、パンくずの階層不足など)を都度修正し、引き継ぎ資料をv1.0からv1.8まで版を重ねて更新。仕様変更のたびに影響範囲を明記するスコープ管理を一貫して行った。

制作物一覧

| ヒアリング | ヒアリングシート v1.0 |

| ペルソナ設計 | ペルソナシート v1.0(2名) |

| 要件定義 | 仕様書 v1.0 |

| 情報設計 | サイトマップ/ディレクトリ構成 v1.0 |

| コンテンツ設計 | コンテンツマップ v1.0 |

| 画面設計 | ワイヤーフレーム(PC/SP)v1.1 |

| デザイン | デザインカンプ(PC/SP)v1.1 |

| コピーライティング | コピー文書 v1.0 |

| 画像ディレクション | 画像生成プロンプト集 v1.1(全34カット) |

| 実装 | WordPressカスタムテーマ(Claude Code実装、CPT2種・自作フォーム・演出JS4種) |

| 品質管理 | 実装引き継ぎ資料 v1.0〜v1.8(不具合修正3件・機能追加2件を含む) |