PLAN A / 症状先行
ADOPTEDHERO + TEL → TRUST → SYMPTOM → PRICE → RECORD → CRAFTSMAN → AREA → TEL CTA
停電の最中に開かれる前提なので、自分の症状が並んでいるのを最初に見せて「これは頼んでいい案件だ」と決めてもらう順を採用しました。
電気工事 トモシビ電設
緊急対応LP と 現場写真からの見積書ドラフト
2026.08
電気が止まってから探される業種です。ページを開いてから電話するまでが数分しかないので、その数分で決まる「今日来るか、いくらか、誰が来るか」の3つを最上部から順に先出しし、電話に直結させました。あわせて、これまで現場から戻ったあとに書いていた見積書を、写真1枚からその場でドラフトまで組み上げる業務デモを付けています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 需要は故障が起きてから発生する。検索語は「ブレーカー 落ちる」「コンセント 焦げ臭い」のような症状の言葉で、店名の指名検索はほぼ起きない。
- 開いてから電話までは長くて数分。比較されるのは2社か3社で、先に不安を消したところが受注する。
- 屋内が停電していれば、調べる手段は手元のスマホだけになる。流入も操作もSPを本番として設計する必要がある。
- 作業単価の幅が5,500円から44,000円まで広い。金額の目安がページ内にないと、問い合わせの手前で離脱する。
02
狙った導線
- FVで「最短で当日・夜間も動く」を受付時間と電話番号ごと出す。直下の信頼バー4点(第一種電気工事士・登録電気工事業者・請負業者賠償責任保険・自社施工)は、読ませずに視認だけで通過させる。
- 2番目に症状トリアージ6件。自分の症状が並んでいるのを見た時点で、頼んでいい案件かどうかが決まる。
- 料金は出張・点検・見積0円を先に、作業11項目の表と夜間割増を後に置く。無料の範囲を確定させてから金額の話に入る。
- 出動記録4件を料金の直後に、職人紹介を流れの直後に置く。「いくらか」の次に来る「誰が家に入るのか」に答えるため。
03
デザインの根拠
- 帯色は鉄紺 #1B2A41。夜間対応が売りなので、明るい色ではなく夜の現場に近い濃色を敷き、緊急性を彩度の高さで叫ばせない。
- 差し色は安全イエロー #F2B705。現場の注意表示から取った色で、ロゴマーク・45度のハザードストライプ・見出しのハイライト・チェックアイコンまで同じ1色で通し、鉄紺の地の中で「注意して見る場所」を1色に揃えた。電話は色ではなく面積と固定で分け、ベタ塗り高さ74pxのボタンと、画面下の固定バーでは電話側を一回り広く取っている。
- FVの写真は夜間、投光器で外壁の開閉器盤を照らす1枚にした。日中の整った作業写真より「夜に来る会社」だと先に伝わる。
- 見出しは太いゴシックで詰め、飾り罫や斜体を使わない。困っている最中に読まれる前提なので、装飾より判読を優先した。
04
検証で捨てた案
- FVで電話を「24時間受付」と書く案と、点滅する緊急バー。受付は8時から22時なので事実と食い違ううえ、試しに見せた家族から「押し売りのチラシみたい」と言われた。電話ボタンには受付時間を併記し、24時間受けられるのはフォームだけだと書き分けた。
- 施工実績を仕上がり写真のギャラリーで並べる案。きれいな写真は「自分の症状が直るのか」に答えないので、依頼内容・作業時間・費用を書いた出動記録4件に替えた。
- 料金を「5,500円から」の下限1本で見せる案。安く見える一方で当日の追加請求への警戒を強めるため、11項目の表と夜間割増の併記に変えた。
- 対応エリアの地図画像。市区町村名と最短到着時間のリストのほうが、自分の住所が入るかどうかを速く判定できる。画像は読み込みも重い。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、停電中のスマホで最初の1分に何を見せるかで選びました。
PLAN B / 実績先行
HERO + TEL → RECORD → LICENSE → PRICE → SYMPTOM → TEL CTA
出動記録から入ると読み物になり、自分の症状に当てはめる作業が後ろへずれます。数分で決まる業種には遅いので見送りました。
PLAN C / エリア先行
HERO + TEL → AREA → PRICE → SYMPTOM → CRAFTSMAN → TEL CTA
対応エリアは頼めるかどうかの判定に要りますが、先頭に地図を置くと発信までの操作が1つ増えるので見送りました。
(07)
Final Design PC View
採用した案Aで組んだ最終形です。夜間の現場写真の上に、受付時間と電話番号までを1画面に収めています。
FIG.07 / PC版 全体スクリーンショット(枠の中を縦にスクロールできます)
(08)
Smartphone
部屋の明かりが落ちたとき、頼れる画面は手元のスマホだけです。SP表示を本番として組みました。
FIG.08-A / FVと電話CTA
FIG.08-B / 料金表の横スクロールと画面下の固定バー
SP DESIGN NOTE
- 画面下に電話とフォームの2ボタンを固定。電話側の幅を1.35倍に取り、迷ったときに電話へ流れるようにした。
- FVは、エリア・最短当日・夜間対応・受付時間・電話番号までが1画面に収まる位置で切っている。スクロールしなくても発信できる。
- 固定バーは高さ54px。本文を隠しすぎない高さに抑えつつ、暗い室内でも親指が届く画面の下端に置いた。
- 料金表は11項目を削らず、表だけを横スクロールにした。上の図は右へ送って料金の列まで出した状態。金額を丸めたり行を隠すと、比較の材料として使えなくなる。
(09)
Operation Note
業務設計メモ / 現場写真から見積書ドラフトを起こすデモを作るまでに整理したこと。
01
現状の課題
- 住宅の修理はその場で手書きの概算を渡せるが、法人・店舗の工事見積(分電盤取替・LED化など)は現場から戻ったあとに事務所で作る。1件30分前後かかり、夜の作業のあとの手作業になる。
- 工事項目と単価は代表の頭の中と過去の見積書にあり、似た案件を探すところから始まっている。
- 現場では写真だけ撮って帰るため、数量や型番の確認が抜けると、翌日もう一度現地へ行くことになる。
- 提出が翌日以降にずれると、待っている間に他社で決まってしまう案件がある。
02
ゴール
- 現場で撮った写真から、その場で見積書のドラフトまで組み上げる。
- 工事項目・仕様・数量・単位・単価が入った状態から編集を始められるようにする。
- 出す前に必ず人が金額を直す。自動で確定させず、下書きであることを画面上でも示す。
03
打ち手
- サンプル現場3ケース(分電盤の取替・屋外コンセントの増設・倉庫照明のLED化)を用意し、写真を選んで解析を走らせると検出枠が順に付く画面にした(デモは単一HTML)。
- 「AIで項目起こし」を押すと、読み込みから明細の組み立てまで5段階の処理ログが流れ、明細が1行ずつ組み上がる。
- 明細は全項目が編集可能。数量と単価を直すと、小計・値引き・消費税・合計が同時に動く。
- 右側は見積書のPDF風プレビュー。社判とDRAFTの透かしを入れ、下書きのまま出回らないようにした。
04
効果試算
- 見積書1件の作成時間 30分 → 5分 (試算)
- 工事見積の提出まで 翌日以降 → 当日中 (試算)
- 単価表を探す時間 1件8分 → ほぼ0分 (試算)
- 項目の抜けによる再訪問 月1〜2件 → ほぼ0件 (試算)
上記はすべて架空ブランドを前提とした試算値です。実測値ではありません。実際の数値は業務量と体制によって変わります。
(10) SELECTED WORK ↓
(03) ✶ 2026 / DINING
Sumioto
炭火焼鳥と純米 炭音 / 焼鳥・居酒屋の世界観型LP × 予約・問い合わせAIチャット