Melhore páginas de obras com Claude Code

Una página de caso de obra no gana una consultoria solo con fotos finales. El visitante necesita entender el problema inicial, el alcance, el proceso, el resultado y la información que debe enviar antes de pedir presupuesto. Este flujo sirve para contratistas locales, constructoras, reformas y oficios especializados. Claude Code no debe inventar precio, garantía, licencia ni promesas de seguridad; debe ordenar notas, fotos aprobadas, restricciones y un CTA claro.

Use Google image SEO best practices for filenames and alt text, people-first content for page usefulness, and official local construction sources when license wording appears.

Key Takeaways

• A construction case page needs problem, scope, process, before/after photos, constraints, result, and one estimate CTA.
• Claude Code can draft captions, alt text, process timeline, checklist, and CTA copy from approved project notes.
• Humans review publication permission, faces, plates, neighboring buildings, warranty, price, schedule, licenses, and claims.
• Image SEO works best when photos are near relevant text and alt text describes the photo in context.
• Measure form starts, site survey bookings, repeated questions, and accepted estimates, not only page views.

Where the Page Fails

The raw material already exists. Photos sit on phones. The quote lives in a spreadsheet. The foreman wrote notes in chat. The office knows the area and work type. The failure is that this information is not placed in the order a buyer needs.

Finished photos alone hide the reason the work mattered. A roof project needs the leak point. An exterior wall project needs cracks or sealant failure. A shop renovation needs schedule and access constraints. A concrete floor project needs dust, cracks, drainage, and vehicle use. The visitor wants to recognize the same problem before trusting the result.

Workflow from Photos to Estimate

Step	Input	Page role
Before	problem, site condition, photo	recognition
Survey	damage, access, constraints	trust
Scope	included and excluded work	expectation
Process	timeline and inspection	confidence
Result	before/after proof	outcome
Estimate	required info	next action

This structure turns photos into sales evidence. Before photos create recognition. Process photos show care. Finished photos confirm the result. The checklist before the CTA reduces hesitation.

What Claude Code Handles and What Humans Review

Claude Code handles organization. Give it job notes, approved photo names, timeline, material notes, constraints, and the desired CTA. Ask for title ideas, opening copy, captions, alt text, process steps, estimate checklist, and a publication review table.

Humans review the risky parts. Photo permission, faces, license plates, house nameplates, neighboring homes, private documents, warranty wording, price, schedule, qualification wording, and service area must be checked by the company.

Three Use Cases

Use case 1: Before/After photos. Pair each before photo with the customer problem and each after photo with the visible change. Do not let the visitor guess.

Use case 2: Process timeline. Show survey, protection, demolition, repair, installation, inspection, and cleanup. Humans confirm weather, access, noise, and attendance.

Use case 3: Pre-estimate checklist. Put work type, location area, problem point, desired timing, photos, drawings, access, parking, and survey dates before the CTA.

Use case 4: Reuse for sales. Convert the published case into proposal text, short email replies, or Google Business Profile posts, but only with approved public content.

Copy-Paste Prompt

Act as an editor for a construction company case study page.
Do not invent price, schedule, warranty, license, or safety claims.
Organize approved photos, project notes, process steps, constraints, and one estimate CTA.
Flag photos that need human approval before publication.

Working Check Code

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: Common Mistakes

Pitfall 1: finished photos only. Add the problem and process notes.

Pitfall 2: vague price or schedule. Explain the conditions that change estimates: area, material, scaffold, access, existing damage, weather, and attendance.

Pitfall 3: missed privacy review. Check faces, plates, signs, neighboring homes, and documents before publishing.

Pitfall 4: too many CTAs. Keep estimate consultation as the main CTA. Phone or chat can be secondary.

ROI Signal

Track page views, image interactions, CTA clicks, form starts, estimate submissions, site survey bookings, and accepted estimates. If prospects repeatedly ask what photos to send, move the checklist above the CTA.

FAQ

How many pages first? Start with three work types that you want more inquiries for.

Should price be shown? If exact price varies, show conditions and quote timing.

How should alt text be written? Describe the photo in page context. Do not stuff keywords.

What should the CTA ask for? Work type, area, photos, desired timing, and survey candidates.

Consultoria Path

Bring a case URL, field notes, approved photos, and estimate questions to training and consultation. Also read permission decision logs before automating publication.

What I Verified

I drafted a case page workflow, wrote a reusable prompt, and tested the Node.js gate for required sections, photo approval, alt text, and CTA count. The main lesson is that a construction case page is not a gallery. It is the explanation path before an estimate request.