有限会社プロヴァンス様　コーポレートサイトリニューアル

有限会社プロヴァンス様のコーポレートサイトをリニューアル制作しました。公開先は https://provence-garden.com/ です。

「新鮮な庭木を卸価格で販売・配達」という強みと、年間施工件数約800件の実績を軸に、庭木販売・庭造り・植栽管理をつなぐブランドサイトへ再構築しています。

プロジェクト概要

• クライアント: 有限会社プロヴァンス
• 公開URL: https://provence-garden.com/
• 種別: コーポレートサイト リニューアル
• 事業領域: ガーデンメイク＆デザイン／庭木販売・配達／植栽管理
• 拠点: 東京店（板橋）／埼玉店（戸田）／モデルガーデン（皆野）
• 担当範囲: ディレクション／デザイン／フロントエンド実装／CMS設計／フォーム・メール連携／公開・運用設計

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

1998年創業の造園会社として、次の点が求められました。

1. 強みの明確化
   送料無料・園芸相談無料・枯れ補償付きの庭木販売と、造園工事・管理を同じサイトで分かりやすく見せる
2. 実績の見せ方
   個人邸から店舗まで、施工例を継続的に追加・更新できる運用にする
3. コンバージョン導線
   電話・LINE・お問い合わせ・採用応募へ、PC／スマホ双方から迷わず到達できるようにする
4. ブランド表現
   ベージュ／ブラウン／ゴールド／オリーブを基調にした、自然素材感のある世界観をWebで再現する

デザインのポイント

強みを前面に出したヒーロー

トップでは「送料無料」「園芸相談無料」「安心の枯れ補償付」の訴求と、「新鮮な庭木を卸価格にて販売・配達」のキャッチを大きく配置。イラストと施工写真を組み合わせ、親しみやすさと実績感を両立しています。

庭木販売ページでサービス価値を深掘り

庭木販売・配達ページでは、市場・生産農家との直結、職人による玄関先配達、運賃込み価格などのメリットを写真付きで整理。カタログ・価格目安・枯れ補償まで一連の流れで読める構成にしています。

施工例はカード一覧で地域・種別を可視化

施工例一覧では、エリアとカテゴリを添えたカードUIを採用。個人邸を中心に、屋上庭園や生垣など多様な現場を一覧から辿れるようにしています。

実装した主要機能

1. microCMS連携（施工例・ブログ・お知らせ）

施工例・植木マイスターブログ・お知らせをmicroCMSで管理。ISR（60秒）で公開反映し、運用側がコンテンツを継続更新できる体制にしています。

2. クイックお庭提案

お庭の写真から植栽イメージを作成する「クイックお庭提案」を専用ページ化。Before／提案／Afterの流れと申し込み導線を案内し、相談ハードルを下げています。

3. お問い合わせ・採用フォーム（Resend）

お問い合わせ・採用応募をAPI経由で受け付け、Resendでメール送信。ハニポット対策も組み込み、スパムを抑えつつ実運用に耐える形にしています。

4. 営業エリア・料金・ボトムナビ

料金表（プラン）、営業範囲（地図連携）、会社情報を整備。スマホでは電話・LINE・お問い合わせへすぐ届くボトムナビを配置し、モバイルファーストの導線を強化しています。

サイト構成

ページ	役割
ホーム	メインビジュアル／おすすめ植木／実績訴求／ブログ／Instagram
プロヴァンスとは	沿革・理念（三方よし）・会社情報
庭木のお手入れ	植栽管理・メンテナンス
庭木販売	販売・配達・カタログ・枯れ補償
施工例	microCMS連携の一覧・詳細
料金表	サービス別料金プラン
クイックお庭提案	写真からの植栽イメージ提案
採用情報	募集・応募フォーム
お問い合わせ	フォーム・電話・LINE
ブログ／お知らせ	microCMS連携の情報発信

使用技術

• Next.js 16（App Router）／React 19／TypeScript
• Tailwind CSS v4
• microCMS（施工例・ブログ・お知らせ）
• Resend（お問い合わせ・採用メール）
• Google Maps（営業範囲）
• next/font（Noto Sans JP／Noto Serif JP）

成果・ポイント

• 庭木販売の独自サービスと造園実績を、同じブランド体験の中で訴求
• microCMSにより施工例・ブログ・お知らせを自社更新できる運用基盤を整備
• 電話／LINE／フォーム／採用まで、成果につながる導線をスマホ優先で設計
• ベージュ基調のテクスチャと写真・イラストで、造園会社らしい温かみを表現

公開サイト: https://provence-garden.com/