プロジェクト概要
沖縄県を拠点に総合不動産事業を展開する日建ハウジング様のコーポレートサイト制作プロジェクトです。ディレクター、デザイナー、エンジニア（自身）の3名体制による分業体制のもと、私はフロントエンド領域（HTML / CSS / JavaScript）のコーディング、およびWordPressのオリジナルテーマ開発を専念して担当しました。デザイナーが構築した高級感あふれるリゾートの世界観をブラウザ上で正確に再現するとともに、クライアントが自社で「実績」や「ニュース」を容易に更新できる堅牢なCMS環境を構築しました。
基本情報
サイト名：株式会社 日建ハウジング コーポレートサイト
担当領域
フロントエンドエンジニア
（HTML・CSS・JavaScriptコーディング / WordPressオリジナルテーマ構築 / チーム開発における実装面のすり合わせ）
※ディレクションおよびデザインは別担当者
プロジェクトの目的と課題
-
デザインの完全再現: デザイナーが意図した「余白の美しさ」や「透明感のあるリゾートの空気感」を損なうことなく、あらゆるデバイスでピクセルパーフェクトに表示させること。
-
拡張性の高いCMS構築: 不動産の実績（PROJECTS）や日々の更新情報（NEWS）など、情報量の多いコンテンツをクライアント自身でスムーズに運用・管理できるWordPress環境を作ること。
-
チーム内での円滑な連携: 3名体制のプロジェクトにおいて、実装上の制約やアニメーションの要件などをデザイナー・ディレクターと密に連携し、手戻りなく進行すること。
施策とこだわったポイント
1. 余白とタイポグラフィの美しさを引き出す、緻密なフロントエンド実装（HTML/CSS）
提供されたデザインは、美しい写真素材と洗練された明朝体・ゴシック体の組み合わせ、そしてたっぷりと取られた余白が特徴的でした。この「高級感」と「静けさ」をブラウザ上で正確に表現するため、CSSでの緻密なマージン設計とレスポンシブ対応を徹底。プロジェクト詳細ページの整然とした表（OUTLINE）や、コンサルティングページにおけるプロセス図（STEP）など、情報が整理された美しいレイアウトを崩すことなく実装しました。
2. 運用者とユーザーの双方に配慮した、WordPressオリジナルテーマの開発
要件に合わせたオリジナルのWordPressテーマをゼロから構築しました。特に更新頻度の高い「PROJECTS（実績）」や「NEWS（お知らせ）」セクションにおいては、カスタム投稿タイプとタクソノミー（カテゴリ）を適切に設計し、パラメータ式URL（/?category=...）ではなく、ディレクトリ階層（/news/category/など）となるようパーマリンクをカスタマイズして実装しました。 これにより、ユーザーにとってのURLの視認性を高めるとともに、検索エンジンがサイトの階層構造を正確にクロールしやすいクリーンなURL設計（内部SEOの最適化）を実現しています。
3. クリックを促す心地よいマイクロインタラクション
実装においては、ユーザーが直感的に操作したくなる細やかなUIの動き（マイクロインタラクション）にこだわりました。例えば「PROJECTS（実績）」ページでは、一覧の写真にマウスカーソルを合わせた際、滑らかなトランジションでダークトーンのオーバーレイがかかり、カテゴリ名・物件名と矢印が浮かび上がるリッチなホバー効果を実装。美しいビジュアルを邪魔することなく、自然に詳細ページへの遷移を促しています。
成果・評価
デザインのポテンシャルを最大化する実装力と、円滑なチーム開発の遂行
ディレクターの要件定義、デザイナーの視覚的アプローチを受け取り、最終的なWebサイトとして完璧な形に組み上げる「フロントエンドエンジニア」としての役割を完遂しました。チーム内でのスムーズな連携により、企業のブランド価値を大きく引き上げる高品質なコーポレートサイトを実現。現在もクライアントのビジネスを支える重要なプラットフォームとして稼働しています。
