Web制作・SNS運用
制作実績一覧へ

WORKS DETAIL / 01

乙川不動産

地域の信頼を、
使いやすいWebサイトに。

WEB DESIGN
WORDPRESS DEVELOPMENT自主制作 / リニューアル案

地域密着の不動産会社を想定したコーポレートサイト。
信頼感と動線を重視したデザインと、更新しやすいWordPress構築を行いました。

サイトを見る （新しいタブ）GitHubを見る （新しいタブ）
OTOGAWA REAL ESTATEDESIGN & DEVELOPMENT
乙川不動産のPC表示。濃紺と水色の配色で、岡崎城の写真を背景に案内文と物件検索を配置したトップページ
信頼感と、情報の探しやすさを。WordPress / Original Theme

01 / OVERVIEW

プロジェクト概要

制作期間
約4週間
制作形態
自主制作（リニューアル案件）
使用技術
HTML / SCSS・CSS / JavaScript / PHP / WordPress（オリジナルテーマ）
担当範囲
デザイン / コーディング / WordPress構築 / 保守・最適化
対応デバイス
PC / SP（画面幅320px〜2560px想定）

02 / BACKGROUND & DESIGN

必要な情報に、迷わず届く。

制作背景

既存の不動産サイトを題材に、リニューアル案として制作した自主制作物です。

実際に該当の不動産会社様へお電話し、リニューアルのご提案をさせていただきました。その際、「制作自体への関与は難しいが、現サイトは社長のご友人が手がけられたものであるため、採用することはできない」とのご回答をいただきました。

ターゲット

  • 40代〜70代の中高年〜高齢層
  • 岡崎市・豊田市周辺に在住
  • 賃貸より土地の売買・相続・解体の相談
  • 年収400万〜800万円前後
  • ネットに強すぎない層

デザインで意識したこと

  1. 01

    信頼感と誠実さ

    濃紺と水色を基調に、明朝体をアクセントとして使い、信頼感と誠実さを出しています。

  2. 02

    探しやすいナビゲーション

    ユーザーが、必要としている情報にほぼ1クリック以内にアクセスできるナビゲーションを配置しました。

  3. 03

    機能性を優先したシンプルさ

    機能性を重視し、演出を抑えシンプルでテキストベースのデザインにしました。

03 / IMPLEMENTATION

コーディングで工夫したこと

PAGE SPEED INSIGHTS

表示速度の最適化

フォントを制限し、セルフホスト・タイトルのみの使用に変更。MVはAVIFを用意しました。

モバイル

5296点

デスクトップ

6482点

※ 制作時の計測値です。

STRUCTURE

HTML

section、nav、article、dl、フォームラベルなどを使い、情報構造を整理しました。

STYLING

SCSS

SCSSを variables、reset、base、styles に分割し、CSS変数で色やフォントを管理。Grid / Flex、aspect-ratio、object-fit でカード崩れを防止しました。

INTERACTION

JavaScript

Vanilla JSで物件絞り込み、セクション切替、FAQ開閉、質問ナビ、ダミーフォーム送信を実装しました。

CONTENT MANAGEMENT

WordPress

カスタム投稿・タクソノミー・メタボックス・アイキャッチ対応により、物件情報を管理画面から更新可能にしました。

RESPONSIVE

レスポンシブ対応

モバイルファーストで、768px・1025px付近を中心にレイアウトを切替。ヒーロー画像もPC / SPで出し分けました。

MAINTENANCE

保守性・拡張性

物件カード出力を関数化し、メタ項目も配列で一元管理。おすすめ物件もメタ値で出し分け可能にしました。

ACCESSIBILITY

アクセシビリティ

lang="ja"、画像alt、フォームのlabel、required、電話リンク、チャット閉じるボタンの aria-label を設定しました。

04 / REFLECTION & NEXT STEPS

振り返りと、これから。

CHALLENGE

苦労した点

不動産サイトに必要な情報量が多く、物件、サービス、会社概要、FAQ、問い合わせ、法務表記を1ページ内で見やすく整理する点。静的なLP風の見た目とWordPressで更新できる構造を両立する点。

SOLUTION

解決方法

情報をセクションごとに分け、JSで画面遷移のように切り替える構成にしました。物件はカスタム投稿として管理し、カード表示は共通関数化。検索条件は data-* 属性に持たせ、JavaScript側で種別・価格・キーワードを絞り込む形にしています。

AI IN MY WORKFLOW

AIの活用について

不動産サイトの構成案、文章案、画像、ベースコードの作成。実装時のコードの追加・修正、エラーの原因調査、リファクタリングにAI（ChatGPT・Claude・Gemini）を活用しました。最終的な実装・設計・判断はすべて自分で行っています。

学んだこと

  • WordPressでカスタム投稿・メタ情報・一覧表示を組み合わせる実装
  • 物件検索のような簡易インタラクション
  • フォント・メインビジュアルの最適化によるパフォーマンス改善方法

今後改善したいこと

  • 実際に送信できる問い合わせフォーム
  • 物件詳細ページ
  • 並び替え・ページネーション
  • FAQやスタッフ紹介のCMS化

PROJECT HIGHLIGHTS

この作品で見てほしいポイント

  • 地域密着型の不動産会社らしい信頼感のあるデザイン
  • WordPressで物件を更新できる実装
  • 物件検索・FAQ・質問ナビまで含めた実用的な導線設計
  • 表示速度の改善への取り組み
サイトを見る （新しいタブ）
BACK TO SELECTED WORKS制作実績一覧へ戻る制作・運用のご相談