概要
群馬県を拠点とする総合建設業者「五料産業株式会社」様のコーポレートサイト制作プロジェクトです。 クライアントとのヒアリングから実装まで一貫して担当。Figmaで作成されたデザインを忠実に再現し、 2つのデザイン案を実装しました。
施工事例ページの工夫
施工事例ページでは、情報量が限られていても効果的に訴求できるよう、 同じ画面内でBefore/After画像がホバーで切り替わるインタラクションを実装しました。 階層ページへ遷移せずに比較できるため、ユーザーの操作負担を軽減し、 より直感的に施工の変化を確認できる設計としています。
目的
企業の信頼性と50年の実績を表現するコーポレートサイトの構築。 地域住民・企業・求職者に向けた情報発信を行い、問い合わせ・採用への導線を最適化。
ターゲット
- 建設・リフォームを検討している地域住民
- パートナー企業・取引先
- 求職者（採用情報）
実装内容
- 全6ページ（トップ×2案、会社案内、施工事例、事業内容、採用情報）
- Figmaデザインを忠実に再現したHTML/CSS/JSコーディング
- パララックス効果・スクロールアニメーションの実装
- 固定CTAバー・ハンバーガーメニューなどインタラクティブな要素
- 完全レスポンシブ対応（PC・タブレット・モバイル）
技術仕様
フロントエンド
HTML5, CSS3, JavaScript
デザイン
Figma
機能
パララックス, スライダー, レスポンシブ
API
Google Maps, Google Fonts
デザイン・UI/UX
赤（#E70012）をプライマリカラーとし、企業の活力と信頼性を表現。 和の品格を感じるNoto Serif JPフォントを見出しに採用し、建設業の堅実さを演出。 固定CTAバーにより問い合わせ・採用への導線を常時確保しています。
成果・特徴
- 2案同時実装: クラシカル案とモダン案の2つのデザインを提案・実装
- 一貫対応: ヒアリング〜デザイン〜実装まで全工程を担当
- 高品質アニメーション: パララックス・スクロールアニメーションで奥行き感を演出
- 完全レスポンシブ: PC・タブレット・モバイル全対応
- パフォーマンス最適化: Lazy Loading・RequestAnimationFrame活用