写真が少ない掃除屋さんのサイトは、一枚の「正直な見積書」になった

船橋市のハウスクリーニング店を想定した制作サンプル。写真が少ないことを隠さず、サイト全体を白い紙と青いインクの「見積書」に見立てた設計の考え方と、途中で却下した3つのデザイン案を紹介します。

この事例は、ハウスクリーニング業のホームページがどんなふうに仕上がるかをご覧いただくための制作サンプルです。「おそうじの佐藤」という店舗も、代表の佐藤さんも、スタッフも、すべて当スタジオが設定した架空のモデル店舗で、掲載している写真もこのモデル店舗のためにAIで生成したものです。ただし、デザインの検討から5ページの公開までの工程は、本物の案件とまったく同じ手順で進めています。「うちみたいな小さな掃除屋でも、こういうサイトになるのか」という目で読んでいただければうれしいです。

モデル店舗の設定：写真が少ない、値段で勝負する一人親方

モデル店舗の設定はこうです。船橋市を拠点にしたハウスクリーニング店で、代表は大手フランチャイズで10年働いたあと2019年に独立。現在はスタッフ2名（うち女性1名は指名可）を含む3名体制で、船橋市・市川市・習志野市・鎌ケ谷市・八千代市・千葉市（花見川区・稲毛区）の6市を車で回ります。売りは明朗会計で、壁掛けエアコンクリーニングは1台11,000円（税込・出張費込み・追加料金なし）。一方で、作業中は手が汚れるうえ、依頼主の家の中は撮らない方針なので、使える写真は9枚しかない。この「写真の少なさ」が、設計の出発点になりました。サイトの合格基準として置いたのは、船橋の共働きのご夫婦が夜11時にスマホで開いて「値段が分かった、追加料金なし、明日LINEしよう」と20秒で決められること、です。

検討して、やめた3つの方向

最初に検討したのは「帳簿」の方向でした。灰緑の帳簿用紙に細かい方眼、簿記のような淡々とした語り口で、数字の信頼感を前面に出す案です。数字が主役という点では筋が通っていたのですが、並べてみると会計事務所のサイトに見えてしまい、夜11時に疲れた主婦の決断を後押しする温かさがありませんでした。数字を見せたいのであって、冷たくしたいわけではない。却下です。

次に「町の職人」の方向。クラフト紙の質感に筆文字の見出し、明朝体と土色で、手仕事の誠実さを雰囲気で伝える案です。ハウスクリーニングのサイトとしては王道で、写真が少なくても様になるのが強みでした。ただ、それはつまり「写真不足を雰囲気でごまかす」ということでもあります。雰囲気が強いほど肝心の料金が背景に沈んでいき、このモデル店舗の芯である明朗会計から逸れてしまう。これも却下しました。

3つ目は「ビフォーアフター写真主義」。黒い背景にエアコン内部のフィンの写真を巨大に置き、汚れと洗浄後の劇的な対比で引き込む案です。掃除屋さんのサイトで一番わかりやすい見せ方ですが、この手法は写真の量が命で、ビフォーアフターに使える写真は3枚しかありません。大きく見せるほど、逆に少なさが露呈する。写真の少なさを隠す方向はどれも無理があると気づいたのが、この時点でした。

たどり着いた答え：サイト全体を「一枚の正直な見積書」にする

隠せないなら、正面から言い切る。そう決めて選んだのが、サイト全体を一枚の見積書に見立てる方向です。白い紙、濃い青のインク、罫線の上に桁を揃えて並ぶ太い数字、そして各ページに一つだけ押された朱色の判子。色はこの3色だけで、グラデーションも影も使いません。文字は公文書向けのユニバーサルデザイン書体BIZ UDPゴシックを本文17px以上で組み、年配の方にも読みやすいコントラストを守りました。数字だけは等幅のAzeret Monoで、桁が縦にぴたりと揃います。トップページを開くと、御見積書という見出しの下に「エアコンクリーニング（壁掛け・1台）11,000円」が幅いっぱいに現れ、その右肩に朱の「追加料金なし」の判子がポンと押される。写真がないことを、もう誰も気にしません。

細部もすべて伝票の文法で統一しています。各セクションの上端には1pxの罫線が引かれ、その左に「見積書」「件名」「エアコン」といった小さなフィールドラベル、右端に「No.01」「No.02」と通し番号が乗ります。料金は必ず「品名｜金額」の表組みで、金額は右揃え、行の区切りは点線のリーダー。判子は1ページに朱色が一つだけで、残りの「出張費込み」「キャンセル料なし」「保険加入」はすべて青インクの判子です。数字は画面に入ると下の桁から印字されるように現れ、判子は少し傾いて押される。動きはそれだけにとどめました。

スマホで最初に見える画面に、電話とLINEを

合格基準が「夜11時にスマホで20秒」なので、スマホの最初の画面がすべてです。屋号、見積書の帳票ヘッダー、品名、11,000円、朱の判子、続く3行の伝票までが一画面に収まり、画面の下には電話とLINEの固定バーが常に出ています。設定上、この店は作業中に電話に出られないことが多いので、LINEに「おすすめ」の小さなラベルを付け、ヘッダーからも案内しています。LINEのボタンをよくある緑にせず、白地に青い枠と自作の吹き出しアイコンだけで組んだのも、紙とインクの世界を崩さないためです。ヘッダーは下にスクロールすると隠れ、上に戻すと細いバーで戻ってくるので、長いページでも電話番号がすぐ見つかります。

お届けした5ページ

構成はトップ、料金表（/price）、佐藤について（/about）、対応エリア・お問い合わせ（/contact）、プライバシーポリシー（/privacy）の5ページです。料金表は全7品目を税込・出張費込みで並べ、水回り3点セットが単品合計よりいくら安いかまで明記。「エアコン2台＋浴室＝37,400円」という記入済みの見積り例も置きました。「佐藤について」は代表の一人称で、大手フランチャイズでの10年から独立までの経歴、3名の体制、損害賠償保険への加入を罫線のタイムラインで見せます。お問い合わせページは電話番号を最上部に大きく置き、千葉県北西部の地図に対応6市を落とし、追加料金・キャンセル・女性スタッフ・繁忙期などのFAQと、必須項目を名前と連絡先とメッセージだけに絞ったフォームを続けました。プライバシーポリシーも同じ帳票の様式で、ここだけは朱の判子を押していません。法定ページに印はいらない、という判断です。

あえて載せなかったもの

小さなお店のサイトにありがちな「お知らせ一覧」は、最初から作りませんでした。一人親方のお店では更新が止まりやすく、日付の古いお知らせはかえって不安を与えます。代わりに常設したのが「予約の目安」で、エアコンは6〜8月が繁忙期で2〜3週間待ち、それ以外は最短翌日、という季節情報を固定で出しています。更新しなくても古びない情報だけを載せる。これも、正直な見積書という考え方の延長です。なお、このサイトはサンプルなので、フッターには「制作サンプルです（架空の事業者です）」と明記しています。

この事例のようなホームページを、あなたのお店にも。ホームページ番頭では、チャットで話すだけでAIがデザインの検討から公開まで進めます。写真が少なくても、料金しか自慢できるものがなくても、それを正面から見せる形はきっとあります。hpbanto.com からお気軽にどうぞ。