建設会社の施工事例ページをClaude Codeで整える: 写真・工程・問い合わせ導線

建設会社の施工事例ページは、写真を数枚並べただけだと問い合わせにつながりません。現場写真はある。職人メモもある。けれど、何に困っていた工事なのか、どの工程で何を直したのか、見積もり前に何を伝えればよいのかが見えない。読者は「うちの現場も頼めそう」と思う前に、別の会社へ移ってしまいます。

特に地域の建設会社、工務店、リフォーム会社では、施工事例が営業資料そのものです。営業が説明する前に、写真、工程、工期、材料、制約、職人の工夫がページで伝われば、問い合わせの質が変わります。逆に、写真だけの事例は「きれいに仕上がりました」で止まり、見積もり相談へ進む理由が弱くなります。

この記事では、建設会社の施工事例ページをClaude Codeで整える手順をまとめます。狙いは、AIに工事の良し悪しを判断させることではありません。職人メモ、写真一覧、工程メモを読みやすいページ構成へ変え、最後に「見積もり相談」へ進める道筋を作ることです。画像の扱いは Google画像SEOのベストプラクティス、記事品質は Googleのpeople-first content、許可や法令表記は 国土交通省の建設業の許可 など一次情報を確認します。

この記事の要点

• 建設会社の施工事例ページは、写真だけでなく「困りごと、工事範囲、工程、結果、見積もり前の確認項目」を並べる。
• Claude Codeには、職人メモの整理、写真alt文、工程タイムライン、CTA前の不安整理を任せる。
• 人が見る範囲は、掲載許可、工期、金額、保証、建設業許可、資格、近隣や施主情報の写り込み。
• 施工事例はSEO記事ではなく営業資料。問い合わせ数だけでなく、見積もり前の聞き返し回数を見る。
• 主CTAは「見積もり相談」に絞る。資料請求、電話、LINE、無料診断を同じ強さで並べない。

現場で起きる失敗シーン

施工事例ページが止まる理由は、写真不足ではないことが多いです。スマホには写真が残っています。LINEには職人メモがあります。見積書には工事項目があります。けれど、それらが別々の場所に散らばっていて、Webページにできる形になっていません。

よくある失敗は、完成写真だけを載せることです。見た目はきれいでも、読者は「何を直した工事か」「同じ悩みに対応してくれるか」「どのくらいの規模か」を判断できません。屋根、外壁、基礎、内装、店舗改装、倉庫、土間、電気、配管。工種が違えば、読者が見たい情報も変わります。

もう1つの失敗は、専門用語が先に出ることです。「ガルバリウム鋼板」「シーリング打ち替え」「既存下地補修」と書いても、発注者には伝わりにくい場面があります。まずは「雨漏りを止めたい」「外壁のひびが気になる」「店舗を休まず改装したい」といった相談者の言葉で入り、後から材料や工法を補足します。

業務フロー: 写真整理から見積もり相談まで

施工事例ページは、次の6段階に分けると作りやすくなります。

段階	集める情報	ページで見せる形
施工前	困りごと、現場条件、写真	相談者の悩みとして書く
調査	劣化箇所、制約、近隣条件	工事前に確認した点
工事範囲	どこを直したか	箇条書きと図解に近い説明
工程	日ごとの作業	タイムライン
完成	Before/After写真	写真と短い説明
次の相談	見積もりに必要な情報	CTA前の確認リスト

この流れにすると、ページの役割が明確になります。施工前写真は「不安の共有」、工程は「任せられる理由」、完成写真は「結果の確認」、CTA前のリストは「問い合わせの準備」です。

建設会社のサイトでは写真が強い武器です。ただし、Googleは画像の周辺テキスト、キャプション、タイトル、alt文などから画像の内容を理解すると説明しています。写真ファイル名がIMG_2938.jpgのまま、alt文が「施工写真」だけではもったいない。roof-gutter-after-amagasaki.jpgのように短く説明的な名前にし、本文の近くに置きます。

Claude Codeに任せる範囲と人が見る範囲

Claude Codeに任せる範囲は、散らかった材料をページの型に入れる作業です。職人メモを読ませて、施工前の困りごと、工事範囲、工程、使った材料、完成後の変化、見積もり前に聞く項目に分けます。写真一覧から、Before、作業中、Afterに分類し、alt文の下書きも作らせます。

人が見る範囲は、公開してよいかの判断です。表札、車のナンバー、近隣住宅、施主の顔、室内の個人情報が写っていないか。掲載許可があるか。工期や金額が正しいか。保証や耐久性の表現が言い過ぎになっていないか。建設業許可、資格、対応可能工種の表記に誤りがないか。ここはAIに任せきりにしません。

国土交通省は、建設業の許可では許可行政庁への申請や添付書類の提出に触れています。施工事例ページで許可番号や資格を出すなら、社内の確認済み表記だけを使います。未確認のまま「許可あり」「有資格者が対応」と書くと、信用を作るどころかリスクになります。

3つのUse case

Use case 1: Before/After写真を問い合わせにつなげる

写真は「きれいな完成形」を見せるだけでは弱いです。施工前の何が問題だったのか、作業中に何を確認したのか、完成後に何が変わったのかを3枚で見せます。Claude Codeには、写真ファイル名と職人メモから、写真ごとの短い説明を作らせます。

たとえば外壁補修なら、施工前はひび割れとシーリング劣化、作業中は既存材撤去と下地確認、完成後は補修後の外観と雨仕舞いの説明にします。読者は写真を見ながら「自分の家ならどこを見ればよいか」を理解できます。

Use case 2: 工程タイムラインを作る

建設工事は、発注者から見ると中身が見えにくい仕事です。調査、養生、解体、下地補修、施工、検査、清掃。どの順番で進むかを短く見せるだけで、問い合わせ前の不安が減ります。

Claude Codeには、職人メモや日報から工程名と説明を抜き出させます。人は、工期、天候による変動、立ち会いが必要な日、騒音や車両の注意点を確認します。ページでは「標準の流れ」として出し、現場ごとに変わる点は見積もり時に確認すると書きます。

Use case 3: 見積もり前の確認リストを作る

問い合わせの質を上げたいなら、CTA前に確認リストを置きます。住所、建物種別、困っている箇所、希望時期、写真の有無、図面の有無、駐車スペース、立ち会い可能日。これをページに出すと、問い合わせ後の聞き返しが減ります。

Claude Codeには、工種ごとの確認項目を下書きさせます。屋根なら勾配、雨漏り箇所、築年数。店舗改装なら営業を止められる時間、搬入経路、近隣への配慮。土間や外構なら面積、勾配、水はけ、車両の出入り。人は、聞きすぎになっていないかを見ます。

Use case 4: 施工事例を営業資料に転用する

施工事例ページは、Webだけで終わらせるともったいないです。営業メール、提案書、LINE返信、Googleビジネスプロフィール投稿にも使えます。Claude Codeには、公開済みの施工事例から短い紹介文、提案書用の説明、SNS投稿案を作らせます。

ただし、写真や施主情報の扱いは用途ごとに確認します。Web掲載は許可済みでも、広告やSNSへの再利用は別確認が必要な場面があります。ここも人が止めるポイントです。

コピペで使えるプロンプト

建設会社の施工事例ページを編集する担当として作業してください。
目的は、写真と工程を整理し、見積もり相談へ進む人の不安を減らすことです。

入力:
- 工事種別:
- 地域:
- 施工前の困りごと:
- 工事範囲:
- 工期:
- 使用した材料や設備:
- 職人メモ:
- 使える写真一覧:
- 掲載許可の有無:
- 主CTA: 見積もり相談

出力:
1. 施工事例タイトルを3案
2. 冒頭3行
3. Before/After写真の並べ方
4. 工程タイムライン
5. 見積もり前に確認したい項目
6. 写真alt文
7. 公開前に人が確認するチェック表

制約:
- 金額、工期、保証内容を勝手に作らない
- 表札、車のナンバー、顔、近隣住宅が写る写真は要確認にする
- 建設業許可、資格、対応エリアは事務所が確認した表記だけ使う
- CTAは「見積もり相談」を1つだけ強くする

このプロンプトは、工事内容を勝手に良く見せるためではありません。職人メモと写真を、発注者が読める順番に並べるためのものです。Claude Codeが出した文章は、現場担当、営業、責任者で確認してから公開します。

動く確認コード

次のNode.jsコードは、施工事例ページに必要なセクション、写真の掲載許可、alt文、CTA数を確認する小さなチェックです。

const caseStudyPage = {
  sections: [
    "projectSummary",
    "beforeAfterPhotos",
    "workScope",
    "processTimeline",
    "materialsAndConstraints",
    "safetyAndPermissionNotes",
    "result",
    "estimateCta",
  ],
  photos: [
    { file: "roof-before.jpg", phase: "before", alt: "工事前の屋根と雨樋の劣化部分", approved: true },
    { file: "roof-after.jpg", phase: "after", alt: "葺き替え後の屋根と新しい雨樋", approved: true },
  ],
  ctas: ["requestEstimate"],
};

const requiredSections = [
  "projectSummary",
  "beforeAfterPhotos",
  "workScope",
  "processTimeline",
  "materialsAndConstraints",
  "safetyAndPermissionNotes",
  "result",
  "estimateCta",
];

const missingSections = requiredSections.filter((section) => !caseStudyPage.sections.includes(section));
const unapprovedPhotos = caseStudyPage.photos.filter((photo) => !photo.approved);
const weakAlt = caseStudyPage.photos.filter((photo) => photo.alt.length < 12 || /^IMG_|写真|image/i.test(photo.alt));
const ctaProblem = caseStudyPage.ctas.length !== 1 || caseStudyPage.ctas[0] !== "requestEstimate";

if (missingSections.length || unapprovedPhotos.length || weakAlt.length || ctaProblem) {
  console.error({ missingSections, unapprovedPhotos, weakAlt, ctaCount: caseStudyPage.ctas.length });
  process.exit(1);
}

console.log("Construction case study page is ready for human review.");

このコードは、施工品質や法令適合を判定しません。公開前に「ページとして最低限の部品がそろっているか」を見るだけです。実際の運用では、写真掲載許可、金額、保証、許可番号、近隣情報の写り込みを人が確認します。

Pitfall: よくある落とし穴と直し方

落とし穴1: 完成写真だけで終わる

完成写真だけだと、読者は自分の悩みと結びつけられません。直し方は、施工前の困りごと、作業中の確認、完成後の変化をセットにします。最低でもBefore、工程、Afterの3枚を並べます。

落とし穴2: 工期や金額を雑に書く

「短期間で対応」「低価格」だけでは、問い合わせ後にズレが出ます。標準的な流れは書きつつ、現場条件で変わる点を明記します。工期や金額は、確認済みの範囲だけ出します。

落とし穴3: 写真の写り込みを見落とす

表札、ナンバー、近隣住宅、室内の書類、顔が写る写真は、そのまま公開しません。ぼかし、トリミング、差し替え、掲載許可の再確認を行います。Claude Codeには写真名だけで判断させず、人が画像を見る工程を残します。

落とし穴4: CTAが多すぎる

「電話」「LINE」「資料請求」「無料診断」「お問い合わせ」を同じ強さで置くと、読者は迷います。施工事例ページの主CTAは「見積もり相談」に絞ります。電話やLINEは補助導線として置けば十分です。

ROIの見方

施工事例ページの成果はPVだけでは見えません。見る数字は、施工事例ページの閲覧数、写真クリック、CTAクリック、見積もりフォーム開始、送信、現地調査予約、見積もり後の受注率です。

問い合わせ後の会話も記録します。「同じような工事はできますか」「いくらくらいですか」「写真を送れば見てもらえますか」が増えたなら、施工事例が営業の入口になっています。逆に、PVはあるのに相談が来ないなら、CTA前の確認リストや料金の考え方が不足しています。

よくある質問

Q. 建設会社の施工事例ページは何件くらい必要ですか。

最初は10件より、工種別に3件あるほうが使いやすいです。屋根、外壁、店舗改装、外構など、問い合わせが欲しい工種から作ります。

Q. 施工金額は書くべきですか。

確定額を出しにくい場合は、金額ではなく「見積もりで変わる条件」を書きます。面積、材料、足場、搬入経路、既存状態、天候、立ち会い条件などです。

Q. 写真のalt文はSEO用にキーワードを詰めればよいですか。

詰め込みは避けます。Googleは、ページ文脈に合った説明的なalt文を推奨しています。写真で伝える内容を短く書きます。

Q. 相談へつなげるなら、ページ末尾に何を書くべきですか。

見積もり前に送ってほしい情報を書きます。住所、工事種別、困っている箇所、希望時期、写真の有無、現地調査の候補日です。

相談へ進むなら

建設会社の施工事例ページは、写真整理、文章、許可表記、CTA、公開前確認が絡みます。自社の施工事例を営業導線に変えたい場合は、施工事例URL、職人メモ、写真一覧、見積もり前の確認項目を持って 研修・相談 に進んでください。Claude Codeに任せる整理作業と、人が見る確認作業を分けて、ページの型を作ります。

関連して、AIに渡す境界を先に決めたい人は Claude Codeの権限判断ログ と 安全な自律レベル も読むと、公開作業の事故を減らせます。

実際に試した結果

この記事では、建設会社の施工事例ページを想定して、職人メモ、写真一覧、工程、見積もりCTAをページに変えるプロンプトを作りました。Node.jsのチェックでは、必要セクション、写真の掲載許可、alt文、CTA数を確認する形にしました。

試して分かったのは、施工事例ページは「文章を書く作業」ではなく「現場情報を問い合わせ前の順番に並べる作業」だという点です。Before/After写真、工程、見積もり前の確認リストがそろうと、読者は自分の工事を相談する準備ができます。Claude Codeは、その並べ替え役として使うのが合っています。