施工事例を蓄積・分類し、顧客自身で育てられるリフォームサイト構築

リフォームの技術や施工内容だけでなく、相談しやすさや手仕事の温かさまで伝え、初めて住まいの改修を検討する人にも親しみを感じてもらえるサイトが求められました。モノクロを基調とした世界観の中で、施工写真や人の表情を生かし、サービスごとの違いと企業らしさを両立させる必要がありました。

運用面では、施工事例や基礎知識などの記事を顧客側で継続的に追加し、担当者やカテゴリなど複数の条件から絞り込めることが重要でした。記事の中には同じ形式の情報を複数登録する項目もあり、入力のしやすさと表示の柔軟性を両立する必要があります。また、担当者がHTMLを編集できる場合でも、サイト全体の表示ルールを壊さず安全に運用できる編集範囲と、フォーム・サーバーを含むセキュリティ対策が求められました。

サイトの世界観は「モノクロで親しみやすい」「手作り感があり温かい」という言葉を軸に、施工写真を主役にしながら、余白、線、文字の組み合わせで人の気配が伝わるデザインへ落とし込みました。サービス紹介、施工事例、基礎知識などの役割を整理し、初めての人は検討の基礎から、具体的な希望がある人は事例やメニューから情報へ入れる導線を設計しています。

WordPressでは、公開後に多数の記事が増えることを想定し、カテゴリ、担当者、施工内容などの関係を先に定義しました。投稿画面には必要な入力項目をまとめ、繰り返し登録する情報も同じ操作で追加できるようにしています。登録後の一覧・詳細・絞り込み結果を事前に想像できるよう、ダミー記事を用いた確認と運用説明を実施。顧客が編集する範囲と制作側が保守する範囲を分け、継続的な更新と品質維持を両立しました。

企業が大切にしている手仕事の感覚を、過度な装飾ではなく、写真、文字、余白、細い線の組み合わせで表現しました。モノクロを基調にすることで施工写真の素材感を生かし、画面全体は落ち着かせながらも、見出しや手書き感のある要素で親しみを加えています。

施工内容や基礎知識は文章量の差が大きいため、短い記事でも長い記事でも読みづらくならないカードと詳細ページのルールを用意しました。メインビジュアルやお客様の声など、動きが効果的な箇所は実装担当と事前に挙動をすり合わせ、静止画のデザインだけでは伝わりにくい時間軸も設計しています。顧客との対話を重ね、企業らしさとして譲れない部分と、運用上変化する部分を切り分けて仕上げました。

施工事例や基礎知識を顧客自身で登録できるよう、カスタム投稿とカスタムフィールドを組み合わせてWordPressを構築しました。記事そのものの分類に加え、記事内の繰り返し情報も扱えるようにし、担当者別・カテゴリ別など複数の条件から目的の記事を探せる構造にしています。入力項目は、表示される場所と内容が対応するよう整理し、大量の記事を追加しても操作が複雑にならない管理画面を目指しました。

フロント側では、投稿内容の長さや画像点数が変わってもレイアウトが破綻しないテンプレートを作成し、画面幅だけでなく高さやファーストビューの見え方にも配慮してアニメーションを調整しました。フォームには既存テンプレートにない要件を追加し、サーバー公開時にはバックアップや設定を確認。公開後の脆弱性対応や大規模なページ改修でも、投稿データを維持したまま表示側を更新できる構成としています。