株式会社草深建創様　コーポレートサイト新規制作

三重県鈴鹿市の軽天工事専門会社・株式会社草深建創様のコーポレートサイトを新規制作しました。

「プロフェッショナルな軽天工事で空間に価値を」というメッセージを軸に、現場写真を前面に出したビジュアル設計と、受注・採用につながる導線設計を両立しています。

プロジェクト概要

• クライアント: 株式会社草深建創
• 公開URL: https://www.kusafukakenso.co.jp/
• 種別: コーポレートサイト 新規制作
• 所在地: 三重県鈴鹿市
• 担当範囲: ディレクション／デザイン／フロントエンド実装／CMS設計／フォーム・メール連携／公開・運用設計

クライアントの課題と目的

軽量下地（LGS）・ボード工事を主力とする専門会社として、次の点が求められました。

1. 専門性の可視化
   「軽天・ボード」という専門領域を、一般のお客様にも伝わる言葉と写真で表現する
2. 施工実績の継続更新
   現場完了後に社内で施工事例を追加・更新できる運用にする
3. 問い合わせ・採用の導線強化
   BtoBの見積依頼と、現場職・営業職の採用応募をサイト上で完結させる
4. ブランドの統一
   ネイビー／ブルー／イエローを軸にした、信頼感のあるビジュアルアイデンティティ

デザインのポイント

現場写真を主役にしたヒーロー

トップは施工現場の実写スライドショーを全面配置。キャッチコピーとCTA（お問い合わせ／サービス詳細）を重ね、初見で「軽天工事の専門会社であること」が伝わる構成にしています。

専門サービスを5領域で整理

• 軽量下地工事（LGS工事）
• 各種ボード貼り工事（PB工事）
• 内装工事全般
• 店舗工事（電気・給排水を含む建築一式）
• 各種リフォーム工事（ビフォーアフターギャラリー付き）

「見えない下地にこそ価値がある」というメッセージを、サービス解説と特徴リストで一貫して訴求しています。

施工事例はカテゴリフィルタ付きのカード一覧

施工事例はカテゴリ（軽天／内装／内装仕上／PB／補修）で絞り込み可能。サムネイルとタイトルで現場の種類が一目で分かるUIにしました。

実装した主要機能

1. microCMS連携の施工事例

施工事例・カテゴリをmicroCMSで管理。WebhookとOn-Demand Revalidationにより、CMS更新後にトップ・一覧・詳細を即時反映できる構成です。ISR（300秒）をフォールバックとして併用し、Webhook未着時にも遅延を抑えています。

2. お問い合わせフォーム（Resend）

React Hook FormとZodでバリデーション。Resend経由で社内通知メールと自動返信を送信します。問い合わせ種別を明示し、見積・採用・その他を振り分けやすくしています。

3. 採用情報・応募導線

軽天・ボード工事スタッフ／営業職の募集情報を掲載。未経験歓迎の現場職と、インセンティブ付き営業職の訴求を分け、応募ページへつなぐ導線を設置しています。

4. モーションとレスポンシブ

Framer Motionによるスクロールイン演出、モバイルハンバーガーメニュー、タッチ操作を想定したレイアウトを実装。スマホでもヒーローの訴求とCTAが崩れないよう調整しています。

サイト構成

ページ	役割
ホーム	ヒーロー／サービス概要／会社概要／施工事例／CTA
サービス	5領域の詳細解説・リフォーム事例ギャラリー
会社概要	沿革・理念・強み・会社情報
施工事例	microCMS連携の一覧・詳細・カテゴリ絞り込み
採用情報	募集職種・働き方・応募導線
お問い合わせ	フォーム・電話・所在地

使用技術

• Next.js 13.5（App Router）／React 18／TypeScript
• Tailwind CSS／shadcn/ui／Radix UI／Framer Motion
• microCMS（施工事例・カテゴリ）＋ Webhook再検証
• Resend（お問い合わせ通知・自動返信）
• React Hook Form／Zod

成果・ポイント

• 専門工事業の「見えない価値」を、写真とコピーで伝わるコーポレートサイトへ落とし込み
• 施工事例の更新を社内運用可能なヘッドレスCMS構成に
• 問い合わせ・採用の両コンバージョン導線を同一サイトで整備
• ブランドカラーと現場写真で、信頼感と専門性を両立

公開サイト: https://www.kusafukakenso.co.jp/