Claude AIで地域ビジネスのサイトをリニューアルする

古くなった地域ビジネスのサイトを、問い合わせを増やすために設計されたモダンでスマホ対応の1ページサイトに作り替えます。

ロードマップと資料

地域ビジネスのサイトを見つける

Googleマップで地域ビジネスを検索する

Googleマップを開く

https://maps.google.com

改善の余地があるサイトを選ぶ

サイトの主な目的を決める

Claude用にサイトのURLかスクリーンショットを保存する

Claudeでリニューアル案を作成する

リニューアル用プロンプトをカスタマイズする

サイトのURLとわかっている店舗情報を入力します。

地域ビジネスのリニューアル案を作成する

既存の地域ビジネスのサイトを、モダンな1ページ構成にリニューアルします。

Open and analyze this existing local business website before creating the redesign. Website URL: {{WEBSITE_URL}} {{OPTIONAL_BUSINESS_DETAILS}} If screenshots are attached in the Claude chat, use them as additional visual and content references. Use the existing website as the primary source for: - the real business services - about information - existing branding - logo and brand colors when identifiable - available images - contact information - business positioning Use the reviewed optional business details only as additional factual information. Do not copy the old visual design. Do not copy large sections of the old text. Rewrite the copy so it is clearer, more professional, and conversion-focused. Do not invent: - contact information - testimonials - customer quotes - ratings - awards - certifications - guarantees - licenses - prices - promotions - years of experience - project counts - business claims Only include testimonials when real testimonials are available on the existing website or in the attached screenshots. If real testimonials are unavailable, use a suitable "Why Choose Us," "Our Process," or trust-focused section instead. If the website cannot be accessed, use the attached screenshots and provided business details. If important information is unavailable, use clearly editable placeholders rather than presenting invented information as factual. Redesign the website into a modern, premium, conversion-focused one-page website suitable for the real local business. Choose the most appropriate conversion goal based on the business, such as: - phone calls - quote requests - bookings - consultations - contact leads Create an appropriate page structure that may include: - responsive header and navigation - strong hero section - clear headline and subheadline - primary and secondary call-to-action buttons - services based on the real website content - trust or credibility section - about section - gallery when suitable content is available - real testimonials only when available - Why Choose Us or Process section - service-area information when relevant - contact section - clickable phone number - address and opening hours when provided - Google Maps link when provided - professional footer Do not force sections that are not suitable for the business. Design requirements: - modern and premium design - polished typography and spacing - strong visual hierarchy - professional local-business layout - responsive desktop, tablet, and mobile design - accessible contrast - clear mobile call-to-action - subtle professional animations - no excessive gradients - no excessive glow - no visual clutter - preserve useful brand cues from the original website when identifiable - improve the original website rather than reproducing it Generate the complete website as one index.html file containing: - semantic HTML - embedded CSS - vanilla JavaScript - responsive navigation - smooth scrolling - subtle animations - basic SEO title and meta description - appropriate alt text - clickable phone and email links when real values are available The result must be ready to preview and publish as a static website. Do not require React, npm, a backend, a build process, or additional files. Return the completed website as a single HTML artifact.

Claudeを開く

サイトのURL

https://example.com

店舗・会社名

サンライズ歯科クリニック

都市・エリア

Austin, Texas

電話番号

+1 512 555 0134

住所(全体)

123 Main St, Austin, TX 78701

営業時間

月〜金:9:00〜18:00 土:10:00〜14:00

Googleマップのリンク

https://maps.google.com/...

ブラウザでClaudeを開く

ブラウザからClaudeをそのまま使えます — デスクトップアプリや開発環境の準備は不要です。

Claudeを開く

https://claude.ai

最初のリニューアル案を生成する

完成したプロンプトをClaudeに貼り付け、保存してある場合のみ鮮明なスクリーンショットを添付します。

サイトを改善して公開に備える

サイトを確認して明らかな問題を修正する

コンテンツ、画像、ロゴ、リンク、全体のレイアウトを確認します。明らかな問題は先に修正してから進みます。

必要に応じてサイトを改善する

サイトに必要な改善だけを使います。

デザインとコンバージョンを改善する

ヒーロー、サービス、信頼要素、CTAの各セクションを改善します。

Improve the design and conversion sections of this website. Focus on: - making the hero section feel more premium and clear - strengthening the headline and call-to-action buttons - making the services section easier to scan - improving trust elements such as reviews, service area, experience, guarantees, and contact details - making the website feel more professional and focused on getting calls, bookings, or leads Keep the design clean, modern, and suitable for a local business. Do not make the page too busy.

Claudeを開く

モバイル版を改善する

モバイルのレイアウトを見やすく、読みやすく、タップしやすくします。

Improve the mobile version of this website. Make sure the layout is clean, the text is readable, the buttons are easy to tap, and the sections have enough spacing on small screens.

Claudeを開く

サイトを公開する準備をする

必要に応じて基本的なSEOを追加します。リニューアルのデモとして作った場合は、公開・共有する前に実在の店舗情報を差し替えてください。

基本的なローカルSEOを追加する

タイトル、メタディスクリプション、見出し、地域キーワード、alt属性、シェア用情報を追加します。

Add basic SEO to this website before publishing. Improve: - page title - meta description - main H1 heading - section headings - local business keywords - image alt text - Open Graph title and description for sharing - clear contact and service information Make the SEO natural and professional. Do not keyword-stuff. The website should be optimized for a local business in this niche: {{BUSINESS_NICHE}} The target location is: {{TARGET_LOCATION}} Keep the design and layout the same unless a small content improvement is needed.

Claudeを開く

事業ジャンル

水道業者、歯科医院、クリーニング会社

対象エリア

Austin, Texas

実際の情報をデモ用ブランドに差し替える

デモを公開する前に、実際の店舗情報は削除してください。

Before publishing this website, replace all real business details with demo information. Change: - business name - logo or brand references - phone number - email address - physical address - staff names - testimonials - images or image descriptions Use a realistic demo brand for the same niche. Keep the website structure, design, and overall idea the same, but make sure it is clearly a demo website and not pretending to be the real business. Business niche: {{BUSINESS_NICHE}}

Claudeを開く

事業ジャンル

水道業者、歯科医院、クリーニング会社

Hostingerでサイトを公開する

完成したサイトのファイルをダウンロードする

メインのファイル名をindex.htmlに変更する

ZIPを作成する前に、最終的なHTMLファイルの名前がindex.htmlになっていることを確認します。

Hostingerを開く

Hostingerを開く

サイトをアップロードして公開するために、Hostingerのダッシュボードを開きます。

USED IN TUTORIAL

https://www.hostg.xyz/SHJjE

サイトをアップロードして公開する

Hostinger Add Website Migrate an Existing Website Upload Backup Files Choose a Domain

index.htmlをZIPファイルに圧縮します。 ZIPをアップロードして移行リクエストを送信します。 公開が完了したら公開中のドメインを開きます。

営業メッセージ(おまけ)

デモを公開したあと、地域のお店にリニューアル案を見せるときにこれらの文面を使います。このステップは任意です。

シンプルな最初のメッセージ

Hi, I came across your website and noticed a few ways it could look more modern and help visitors take action. I created a quick redesign example to show what an improved version could look like. Would you like me to send it over?

プレビューリンク付きメール

Subject: I created a quick redesign example for your website Hi, I came across your website and noticed a few ways it could look more modern and help visitors take action. I created a quick redesign example to show what an improved version could look like. Here is the preview: [Paste your link] If you like it, I can customize it further for your business. Best, [Your Name]

返信が来たら

Thanks — here is the preview: [Paste your link] This is just a sample to show the direction. If you like it, I can customize it further for your business, replace the demo details with your real business information, and help publish it properly.

店舗オーナーに一斉送信のような売り込みはしないでください。本当に関係がある場合にだけデモを送り、具体的な改善点を見せることに集中しましょう。