PLAN A / 症状先行
ADOPTEDHERO + TEL → TRUST → SYMPTOM → PROMISE → REASON → SERVICE → PRICE 0 → RECORD → FLOW → CRAFTSMAN → AREA → FAQ → TEL CTA + FORM
停電の最中に開かれる前提なので、自分の症状が並んでいるのを最初に見せて「これは頼んでいい案件だ」と決めてもらう順を採用しました。9月の作り直しでも、この順番は変えていません。
電気工事 トモシビ電設
緊急対応LP と 現場写真からの見積書ドラフト
2026.09
電気が止まってから探される業種です。ページを開いてから電話するまでが数分しかないので、その数分で決まる「今日来るか、いくらか、誰が来るか」の3つを最上部から順に先出しし、電話に直結させました。FVは夜の現場写真を全面に敷き、「暮らしに、灯りを」の8字と、受付8:00-22:00の「電話で相談する」ボタンだけを置いています。そこから先はページ左の1本の線に電気が通っていき、章ごとのランプを点けながら最後の相談の窓口まで案内します。あわせて、これまで現場から戻ったあとに書いていた見積書を、写真1枚からその場でドラフトまで組み上げる業務デモを付けています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 需要は故障が起きてから発生する。検索語は「ブレーカー 落ちる」「コンセント 焦げ臭い」のような症状の言葉で、店名の指名検索はほぼ起きない。
- 開いてから電話までは長くて数分。比較されるのは2社か3社で、先に不安を消したところが受注する。
- 屋内が停電していれば、調べる手段は手元のスマホだけになる。流入も操作もSPを本番として設計する必要がある。
- 作業単価の幅が5,500円から44,000円まで広い。金額の目安がページ内にないと、問い合わせの手前で離脱する。
02
狙った導線
- FVで「暮らしに、灯りを」の8字を出し、その下に受付8:00-22:00と「電話で相談する」のボタンを置く。直下の銘板4点(第一種電気工事士・登録電気工事業者・請負業者賠償責任保険・自社施工)は、ランプ付きの4列にして、読ませずに視認だけで通過させる。
- 2番目に症状6件。危険度 高の3件と中の3件を2枚のボードに分け、その間にテスターで測る手元の写真を挟んだ。自分の症状が並んでいるのを見た時点で、頼んでいい案件かどうかが決まる。煙や火花が見えたときの手順は、橙の斜線を引いた別枠に切り出した。
- 料金は出張・点検・見積0円を先に、作業11項目の表と夜間割増を後に置く。無料の範囲を確定させてから金額の話に入る。「0」は、このページで唯一、目を止めるために大きくした数字にした。
- 出動記録4件を料金の直後に、職人紹介を流れの直後に置く。「いくらか」の次に来る「誰が家に入るのか」に答えるため。最後の相談では電話の窓口を大きく置き、ページ左の通電ラインの終点にした（電話番号は制作デモのため「電話番号はデモ表示です」と出す）。
03
デザインの根拠
- 地は夜紺 #0A1626、差し色は電気の黄 #FFC93C。夜紺の面はFVと銘板、約束、出動記録、相談、フッターに絞り、症状や料金を読む面は紙色 #F6F3EC と #EDE8DC にした。黄は見出しの1語、章の端子のランプ、電話ボタンの塗り、料金の「0」、通電ラインまで同じ1色で通し、紙色の上で黄系の文字を読ませる所だけ琥珀 #7A5410 に落とした。フィラメントの橙 #FF7A1A は危険度 高のランプと注意枠の斜線に限り、119番の一文だけ赤 #D23A24。
- 見出しは Dela Gothic One、本文は M PLUS 2、数字と端子番号と電話番号は Chakra Petch。H1は画面幅に合わせて44pxから96px、料金の「0」は最大208px。3書体とも使う字だけを切り出して同梱し、Google Fonts の読み込みはやめた(H1の8字で1.7KB)。困っている最中に読まれる前提なので、飾り罫や斜体は使っていない。
- FVは夜、投光器で外壁の開閉器盤を照らす写真を全面に敷き、文字の裏だけに薄い幕を掛けた(濃さは最大0.45)。PCでは写真を右に置いて左端を夜紺へ溶かし、文字を左に。スマホでは縦位置の同じ場面を全面にして、ボタンを下端に置いた。夜紺の面は上下を斜めに切り、紙色の面と交互に並べてスクロールの単調さを消した。
- 看板の演出は「通電」にした。開いた直後、主幹ブレーカーのレバーが上がって火花が散り、暗がりが一度またたいて明け、見出しの文字が橙から温まって点く。以後はページ左の細い線にスクロールで上から電気が通り、T-01からT-11の端子に届くたび章名のランプが点いて、最後に電話の窓口へ横に通電して終わる。画面に入った写真も一度またたいて明るくなる。同じタブの2回目と、動きを減らす設定では幕を出さず、線は全部通った状態で止める。
04
検証で捨てた案
- FVで電話を「24時間受付」と書く案と、点滅する緊急バー。受付は8時から22時なので事実と食い違ううえ、試しに見せた家族から「押し売りのチラシみたい」と言われた。電話ボタンには受付時間を併記し、24時間受けられるのはフォームだけだと書き分けた。資格4点を流れる文字帯で見せる案も、読む前に流れていくので動かない4列に戻した。明滅は、煙・火花の注意枠の警告アイコンが薄く息をする程度に留めている。
- 施工実績を仕上がり写真のギャラリーで並べる案。きれいな写真は「自分の症状が直るのか」に答えないので、依頼内容・作業時間・費用を書いた出動記録4件に替えた。写真は12枚に増やしたが、並べたのは測る・書く・積む・外すといった作業の途中の手元で、仕上がりのギャラリーにはしていない。
- 料金を「5,500円から」の下限1本で見せる案と、金額を到達時に数えて動かす案。安く見える一方で当日の追加請求への警戒を強め、動いている途中の数字は本物の料金に見える。11項目の表と夜間割増の併記に変え、金額は最初から確定の値で出した。
- 対応エリアの地図画像。市区町村名と最短到着時間のリストのほうが、自分の住所が入るかどうかを速く判定できる。画像は読み込みも重い。位置関係は30分・45分・60分の同心円をSVGで描いて補い、その横に地域名のチップと到着目安の3行を置いた。
(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の順番はそのまま、2026年9月に見せ方を作り直した最終形です。夜の現場写真を全面に敷き、「暮らしに、灯りを」から受付時間と「電話で相談する」のボタンまでを1画面に収め、左端の通電ラインが章ごとに灯りを点けながら最後の相談の窓口まで下りていきます。
FIG.07 / PC版(1440px) 全体スクリーンショット(枠の中を縦にスクロールできます)
(08)
Smartphone
部屋の明かりが落ちたとき、頼れる画面は手元のスマホだけです。SP表示を本番として組みました。
FIG.08-A / FVと電話CTA
FIG.08-B / 料金(出張・点検・お見積りは0円)と画面下の固定バー
SP DESIGN NOTE
- 画面下に電話とフォームの2ボタンを固定。電話側の幅を1.45倍に取り、迷ったときに電話へ流れるようにした。FVの電話ボタンが画面の上へ消えた時点で、下から出てくる。
- FVは縦位置の写真を全面に敷き、地域名・見出し・リードを写真の暗い上半分に、「電話で相談する」と受付8:00-22:00を書いた黄色いボタンを下端に置く。見出しは画面幅の14%(390pxで約55px)。スクロールしなくても電話の窓口に届く（制作デモのため発信はせず、押すと相談フォームへ案内する）。
- 固定バーは高さ72px(ボタン56pxと上下8pxの余白)。本文を隠しすぎない高さに抑えつつ、暗い室内でも親指が届く画面の下端に置いた。ページの最下部にはバーと同じ高さの余白を足し、フォームの送信ボタンが隠れないようにした。
- 料金表は横スクロールをやめた。11項目を削らず、1行を「作業名と目安時間を左、料金を右」の明細に組み替えて縦に並べた。金額を丸めたり行を隠すと、比較の材料として使えなくなる。横に送るのは出動記録4件のカードだけにし、対応内容は住宅・店舗・緊急の3タブで1つずつ見せる。
(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 ↓
(04) ✶ 2026 / DENTAL
Asanagi Dental Clinic
あさなぎ歯科クリニック / 不安解消型のLP × 問診票のデジタル化とリコール通知