工事実績20年、ホームページはゼロ。大阪のリフォーム店に「＋」を動かすと変わるサイトができました

大阪府全域で水回り・内装リフォームを手がけるJ-plus合同会社さまのホームページ制作事例。ビフォーアフターを主役にした構成、見送ったデザイン案、薄い茶色×水色の配色に決まるまでを紹介します。

今回ご紹介するのは、大阪府八尾市を拠点に、大阪府全域で水回り・内装リフォームを手がけるJ-plus合同会社さまです。浴室・キッチン・トイレ・洗面などの水回りと内装が得意分野で、間取り変更や全改装（フルリノベーション）にも対応。工事実績は20年とのことですが、これまでホームページはお持ちではありませんでした。今回が、まったくの新規制作です。

ご依頼の背景：ビフォーアフターを主役に

お申し込み時にいただいたご要望は、とてもはっきりしていました。新規のお仕事のご依頼を増やしたい。施工事例のビフォーアフターを主役にしたい。対応できる工事の内容と対応エリアをきちんと打ち出したい。そして、見た人がそのままお問い合わせできる構成にしたい。この4点です。リフォームは、仕上がりの写真そのものが一番の説得力になる業種です。写真を見せるだけでなく、施工前と施工後の差を見せるサイトにしよう、というのが制作の出発点になりました。

検討して、見送ったデザイン案

最終形に至る前に、方向性の異なる案を比べています。ひとつめは「現場の帳面」。濃いチャコールグリーンに明朝体、帳簿のような罫線モチーフで、職人の仕事を記録するようなドキュメンタリー調の案でした。重厚さはあるものの、浴室や笑顔を語るには暗く、あたたかみに欠けると判断して見送りました。ふたつめは「湯上がりの光」。白磁のような淡い地色に水色を効かせた、静かでミニマルな案です。美しいのですが、費用や工期を調べている方にとっては情報が少なく、中身がないと映りかねない。この業種では、情報の密度そのものが誠実さのサインになる、という結論でした。あわせて、紺色の信頼感コーポレート風や、大きな数字とグラデーションのヒーローといった、つい選びがちな定番も意識的に避けています。

選んだのは「まちの明朗会計」

採用したのは、大阪の商店の親しみやすさと、百貨店のフロアガイドのような整理された見やすさを掛け合わせた方向です。見出しにはラベルを添え、工事内容は表で示し、情報はしっかり詰めつつ、あたたかく。目立つ色は要所にだけ使い、それ以外は落ち着かせる、という考え方です。実は当初、配色は深い松葉色を軸に組んでいました。ところがお客さまから「薄い茶色と水色のイメージ」「もう少し柔らかいイメージの文字」というご要望をいただき、生成りの地色に薄茶と水色を重ねる配色へ、書体は丸ゴシック（Zen Maru Gothic）へと全面的に切り替えました。朱色のオレンジは、電話や見積のボタンと「＋」のマークなど、要所にだけ残し、ブランドの目印として働かせています。切り替え後に「丸ゴシックがいいです」と気に入っていただけたことで、この方向で間違いないと思えました。

＋を動かすと、アフターが現れる

このサイトの主役は、ロゴにも入っている「＋」のマークです。施工事例の写真の中央に朱色の＋ハンドルを置き、左右に動かすと施工前と施工後が切り替わる比較スライダーをつくりました。最初に画面に入ったときに一度だけハンドルが自然に動いて、使い方が伝わるようにしています。掲載している事例は現在3件。薄緑色の浴槽だった浴室が木目調タイルのモダンな浴室に生まれ変わった浴室リフォーム（工期2日・費用約75万円）、大阪市住吉区の洗面台交換（工期1日・約30万円）、同じく住吉区のトイレ交換（クロス・クッションフロア張替、工期1日・約18万円）です。費用と工期はお客さまからご提供いただいた数字だけを、そのまま掲載しています。

お客さま自身の素材が主役になったトップページ

制作の途中で、お客さまからご自身のチラシとロゴが届きました。「これをトップにお願いします」というひと言で、トップページの一番目立つ場所は、お客さまのチラシを角丸のカードに収めた構成に。その後、トップ画像を数枚のスライドにできないか、というご相談から、チラシ・浴室・リビングの3枚が順に切り替わる形になりました。切り替えの間隔も、お客さまのご指定どおりに設定しています。見出しの横には、茶色の家の輪郭に4つの青い四角が並ぶ本物のロゴを配置しています。さらに、お知らせは「一番上に」というご要望を受けて、ヒーローのすぐ下に完工報告を並べる小さなお知らせ欄も追加しました。新しい事例やお知らせは、チャットで送っていただくだけで追加できる仕組みです。

5ページの構成：「困った」から電話までを一本の道に

納品したのは、トップ・施工事例・対応工事・お問い合わせ・プライバシーポリシーの5ページです。対応工事のページでは、浴室・キッチン・トイレ・洗面の水回り4つを、よくあるお悩みから入るカードで整理し、その下にクロス・床・建具の内装、そして得意の間取り変更・全改装を、それぞれ節を分けて並べました。お問い合わせページは電話が主役。焦茶色の帯に大きな電話番号ボタンを置き、受付時間（9:00〜20:00・年中無休）を添えています。フォームは、必須の項目をお名前・ご連絡先・ご相談内容の3つだけに絞りました。スマートフォンでは電話と無料見積の2つのボタンが画面の下に常に表示され、どこまで読み進めても、すぐに電話や見積の依頼に進めます。追ってご要望のあった「不動産売買・賃貸・仲介もお問い合わせください」というご案内も、トップと対応工事ページに控えめな帯として加えました。

公開して終わりではなく、チャットで育てていく

このサイトは、公開後もお客さまとのチャットのやり取りで少しずつ形を変えてきました。配色と書体の変更、チラシとロゴの掲載、スライド化、お知らせ欄の新設、事例の追加、文言の細かな修正。どれもご要望をメッセージでいただき、反映し、確認していただく、その繰り返しです。ヘッダーからロゴを外したのも、トップの説明文の文字色を変えたのも、お客さまがスマートフォンの画面に赤枠をつけて送ってくださったのがきっかけでした。専門用語を使わずに、見たままを伝えていただければ、それで十分に通じます。

この事例のようなホームページを、あなたのお店にも。写真と、伝えたいことを、チャットで話すだけ。ホームページ番頭（hpbanto.com）がお手伝いします。