NEWPEAKJAPAN様（サービスサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回、リニューアルの主要な目的として、「新規顧客からのお問い合わせを増やしたい」というご要望をいただきました。

そのため、トップページの「住宅の断熱リフォーム」コンテンツでは、PCの広い画面幅を活かして、左側に住宅のイラストを固定表示し、右側の各サービスプランのみがスクロールするレイアウトを採用しております。

右側には、「戸建てまるごと断熱プラン」「床断熱プラン」「窓断熱プラン」「ドア断熱プラン」「屋根・天井断熱プラン」という5つのプランを順番に表示し、スクロールに合わせて、左側の住宅イラスト内の該当する施工箇所が丸いマーカーで点滅するデザインにしました。マーカーには、オレンジやサーモンピンク、ターコイズブルーなどの各プランのイメージカラーを採用しています。

これにより、ユーザーが気になっている施工内容を視覚的に把握し、目的のページへスムーズに進める導線設計となっております。

「夏の暑さや冬の寒さ対策で断熱工事をしたい方」「国の補助金を使ってお得に工事したい方」などの個人ユーザーをメインターゲットとしているため、スマートフォンとPCの使用比率を8：2に想定し、モバイルファーストで設計しております。

ハンバーガーメニューの左隣には、家のアイコンとともに「断熱サービス」ボタンを設け、ユーザーが各プランページへすぐに遷移できるよう、モーダル形式で表示しています。モーダル内では、施工箇所のサムネイル画像やイメージカラーに加え、短いキャッチコピーを掲載することで、それぞれのプラン内容がひと目で伝わるデザインとなっています。

さらに、トップページの「住宅の断熱リフォーム」コンテンツでは、スマートフォンの限られた画面幅に合わせて、PCとは異なるレイアウトを採用しております。

具体的には、住宅のイラスト上に各プランへの導線をそれぞれのイメージカラーやアイコンを用いて配置しました。ユーザーは、気になる施工箇所をタップするだけで、該当のプランページへ直接遷移できます。

デザイン面では、お客様オリジナルのキャラクターである、ひまわりを持った熊のイラストをアクセントとして配置しています。柔らかいタッチのイラストを使用することで、親しみやすさや安心感を与え、ユーザーに寄り添う姿勢や丁寧な対応を印象づけるデザインに仕上げています。

また、「床下断熱リフォーム」ページなどの一部のサービスページでは、「この施工を行うことで、住まいがどのように変わるのか」視覚的にわかるよう、オリジナルの作図を用いて表現しました。

システム面では、お客様が手掛けた断熱リフォームの詳細な情報を更新できる「施工事例」ページをオリジナルのCMSで自社開発しました。

こちらのCMSでは、サーモカメラで撮影した施行前後の表面温度の変化がわかるお写真を、管理画面から簡単に登録できます。目視ではわかりにくい断熱効果を確認できるため、施工品質の高さをユーザーにしっかりと訴求できます。

また、施工前後の表面温度を入力すると、その温度差を自動で計算し、サーモ画像の上に表示する機能も実装しました。温度が下がり涼しくなった場合はブルー、温度が上がり暖かくなった場合はレッドで表示するなど、変化に応じて色分けすることで、施工効果がひと目で伝わるよう工夫しています。

「対策キーワード＋地域名」などの地域検索からの流入を目的に、各エリアに特化したページを作成しました。特に強化したい神奈川エリアでは、区単位でも個別ページを作成できるようにしています。

各エリアページでは、その地域で利用できる補助金情報などを掲載しており、エリア名と補助金名を組み合わせた複合キーワードからの検索流入も狙える構成にしました。その結果、リニューアル公開直後から、狙っていた複数のキーワードで検索順位上位を獲得し、お問い合わせの増加に貢献することができました。

また、リニューアル前から「エリア名＋断熱リフォーム」などのキーワードで検索上位を獲得していたページにおいては、既存サイトが持つSEO評価をできる限り引き継げるよう、細心の注意を払ってURLの移行作業を行いました。

具体的には、旧サイトのURL構造をすべて洗い出し、新サイトの各ページと一つひとつ照合したうえで、301リダイレクトを設定しています。これにより、旧URLから新URLへ適切に評価を引き継げるようにし、リニューアルに伴う検索順位への影響を抑えています。