会社のHPを業者なしで作る方法──AI（Claude Code）で1時間でできた話

「会社のホームページを作りたいけど、業者に頼むと数十万円。自分で作るのは難しそう…」

そう感じている個人事業主さんや小規模企業の方、いらっしゃいませんか？

実は先日、架空の工務店をモデルにしたサンプルとして、たった1時間で本格的な会社HPを作って公開してみました。しかも、コードはほとんど自分で書いていません。

使ったのは Claude Code という、最近話題のAI開発ツールです。

「AIにHPを作ってもらうって、本当にできるの？」
「専門知識がなくても大丈夫？」

そんな疑問を持った方に向けて、実際の手順を最初から最後まで解説していきますね。

こんな方におすすめの記事です

• 自分の会社・お店のHPがほしいけど、業者に頼む予算がない方
• HPを作りたいけど、何から始めればいいか分からない方
• AIで業務を効率化したい個人事業主の方
• 既存のHPが古くて、リニューアルを考えている方

きっかけは「古すぎるHP」だった話

ある日、地域の小さな工務店さんのHPを見て、こう感じたんです。

「スマホで開くと文字が小さすぎて読めない」
「メニューが動かない」
「『創立60年以上』と書いてあるのに、計算してみたら実際は70年」
「情報が何年も更新されていない」

でもこれって、その会社さんが怠慢なわけではないんですよね。本業で忙しい中、HPの更新まで手が回らない、というのは多くの会社さんに共通する悩みだと思います。

「こういう古いHPを刷新したら、どう変わるんだろう？」
「サンプルを作って、Before/Afterで見せてみよう」

そう思って始めたのが、今回の挑戦でした。
※今回は実在の会社をモデルにせず、架空の工務店「あけぼの工務店」という設定でBefore/After両方を作っています。

完成したサンプルがこちらです

実際にできあがったサンプルがこちらです。

👉 【Before】リニューアル前：https://akebono-koumuten-old.pages.dev/
👉 【After】リニューアル後：https://akebono-koumuten.pages.dev/

スマホでもPCでも、ぜひ両方開いて見比べてみてくださいね。
「これ、本当にAIが作ったの？」と思っていただける仕上がりになっているはずです。

含まれている要素（After）

• ヒーロー（キャッチコピー＋背景画像）
• 強み紹介（5つの理由をカード表示）
• 事業内容・料金表
• 施工事例ギャラリー
• お客様の声
• 会社概要・お問い合わせフォーム
• スマホ画面下に電話固定ボタン

業者さんに頼んだら30〜50万円はかかりそうな構成です。

📥 テンプレートを無料配布しています

「自分で一から書くのは大変…」「他の業種では、どう書けばいいか分からない」── そんな声に応えて、今回使ったテンプレート一式を無料で配布しています。

• 01_店舗情報.md：会社情報を書き込む雛形
• 02_業種別の記入例/：工務店・飲食店・美容室・士業 の記入済みサンプル
• 03_Claudeへのお願い文.md：Claudeに渡すプロンプト例（基本＋ブラッシュアップ）
• 04_公開後チェックリスト.md：公開後にやるべき 12項目のチェックリスト

👉 ダウンロード： こちらからどうぞ（ZIP形式・無料）

このあとの手順は、このテンプレートを使う前提で説明していきますね。
（テンプレートを使わずに「ゼロから書きたい」方も、もちろん大丈夫です）

必要なもの・かかる費用

実際にやってみる前に、必要なものを確認しておきましょう。

用意するもの

• パソコン（Mac / Windows どちらでもOK）
• インターネット環境
• Claudeのアカウント（Pro プラン：月額$22〜）
• Cloudflareのアカウント（無料）

かかる費用

• 初期費用：0円
• 月額費用：$22（約3,600円。Claude Pro）だけ

業者に頼めば数十万円のHPが、月3,000円台のAI利用料で作れる時代になりました。今回はデスクトップアプリを使うので、黒い画面（ターミナル）に難しいコマンドを打ち込むようなプログラミング知識は不要です。

実際の手順を解説

それでは、ここから具体的な手順を順番に見ていきましょう。

ステップ1：Claude デスクトップアプリをインストールする

まずはAnthropic社が提供している「Claude」のデスクトップアプリをパソコンに入れます。

公式サイト（ https://claude.ai/download ）から、お使いのパソコンに合わせてMac版またはWindows版をダウンロードします。難しい設定は不要で、普段使っている他のアプリと同じように、ダウンロードしたファイルを開いて画面の指示に従うだけでインストールできます。

インストールが終わったらアプリを起動し、Claudeアカウントでログインすれば準備完了です。

ステップ2：業種別サンプルから、自社の情報に書き換える

先ほどダウンロードした テンプレートZIPを、デスクトップに展開してください。

まず、近い業種のサンプルを開く

02_業種別の記入例/ フォルダの中に、こんなファイルが入っています。

• 工務店.md
• 飲食店.md
• 美容室.md
• 士業（行政書士・税理士など）.md

ご自身の業種に 一番近いものを開いてみてください。
Macなら「テキストエディット」、Windowsなら「メモ帳」でOKです。

中を見ると、会社情報・強み・サービス内容・お客様の声まで、ひと通り埋まった状態になっています。

⚠️ 大事なこと
サンプルはあくまで 「項目の見本」 です。
そのまま使うと、他社と似通ったHPになって、検索で評価されにくくなります。
必ず ご自分の会社の言葉で書き換えてくださいね。

サンプルをコピーして、書き換える

サンプルファイルを コピーして名前を変える（例：うちの店舗情報.md）。
そして、以下の項目を ご自身の会社の情報に置き換えていきます。

• 基本情報（社名・住所・電話など）
• 事業内容（自分の言葉で）
• 強み・特徴（ここがいちばん大事。他社と差がつく部分）
• サービスと料金
• お客様の声（実際にいただいた声があればそれを優先）
• よくある質問
• HPを見た人に取ってほしい行動

きれいに整える必要はありません。「ここはまだ書けないな」と思った項目は、空欄のままで構いません。あとはAIが整えてくれます。

業種に当てはまるサンプルがない場合は？

整体院、学習塾、ペットトリマー、フリーランスデザイナーなど、サンプルにない業種の方は、
テンプレート内の 01_店舗情報.md（空欄の雛形）を直接使ってください。
項目の構成は同じです。

書き終わったら、保存して閉じます。

ステップ3：Claudeに「HPを作って」とお願いする

Claudeのアプリを起動して、書き終えた 01_店舗情報.md を チャット画面にドラッグ＆ドロップします。
あとは、頭の中にある「こうしたい」を、そのまま日本語で書いてあげるだけ。

テンプレート内の 03_Claudeへのお願い文.md に、コピペで使える文例が入っています。
最初は、こんな感じで頼んでみましょう。

添付の店舗情報を見ながら、ホームページを作ってもらえますか。

イメージはこんな感じです。
・スマートフォンで開いて読みやすいレイアウト
・色は「白＋青」で、清潔感のある印象に
・文字サイズと行間は、読み疲れないように大きめで
・電話番号はスマホで見たとき、画面下にずっと貼り付いていてほしい
・写真は仮置きで構いません（あとで差し替えます）

ページの構成は、ヒーロー → 強み → サービス → 料金 → お客様の声 → 会社概要 → お問い合わせ。
HTML（index.html）とCSSをまとめて作ってください。

ポイントは、「お願いの仕方」を、人にお願いするときと同じテンションで書くことです。
「スマホで読みやすく」「文字は大きめ」「色は清潔感のある感じ」── 業界用語を覚える必要はありません。普段使う日本語の語彙だけで十分伝わります。

数十秒〜1分ほどで、AIがHTML・CSS・JavaScriptを一気に書き出してくれます。
あとはそれをコピーして、作業用フォルダの中に index.html というファイル名で保存するだけ。

⚠️ ここが大事：「一発で完成」を期待しない

正直にお伝えしておくと、最初に出てきたデザインは 「無難で安全」止まり ということが多いです。今回も初版は、よくある「青と白の真面目な企業サイト」で、正直、印象に残るものではありませんでした。

ここからが、AIに任せる本当の面白さです。
気になったところを、思いつくままに 言葉で伝え直していくと、雰囲気がガラッと変わります。

たとえば今回は、こんなふうに頼み直しました。

もう少し建築雑誌っぽい、上品な雰囲気に変えてもらえますか。

・配色は、白・木目（ベージュ）・黒の3色だけで
・タイトル文字は明朝体（Noto Serif JPがあれば使ってください）
・施工事例は、写真の大きさを揃えずに雑誌風のグリッドで配置
・トップは画面いっぱいの大きな建築写真を背景にしたい
・スクロールしたとき、要素が下からふわっと出てくる動きをつけて
・写真は Unsplash の建築写真でお願いします

これでガラッと変わって出来上がったのが、冒頭の After のサンプル（ https://akebono-koumuten.pages.dev/ ）です。

💡 AIをうまく使うコツ

• 一発で完成を狙わない（むしろ、最初の出力は「下書き」だと思っておく）
• 思いついた直しを、その都度、口語で投げる
• 「ここが好き」「ここはイマイチ」と、感想ベースで伝えて大丈夫

業者さんに頼んでいたら、「修正依頼」と聞いただけで身構えてしまいますよね。
AIは何度修正をお願いしても怒りませんし、追加料金も発生しません。「気軽に直してもらえる」のがAIに任せる最大の魅力だと、私は思っています。

ちなみに、AIは 同じ指示でも毎回まったく同じ結果は出ません。これはバグではなく、AIという仕組みの特性です。だからこそ、出てきたものを叩き台にして、対話の中で理想形に寄せていく── そんな付き合い方がしっくりきます。

ステップ4：できたサイトをパソコンで確認する

保存した index.html ファイルをダブルクリックしてブラウザで開くだけで、実際の画面を確認できます。

「ここの文字をもう少し大きくして」
「ボタンの色を赤に変えて」
「お客様の声をもう2件追加して」

こんな修正も、全部日本語でClaudeに伝えればコードを直してくれます。直したコードを再度ファイルに上書き保存して、ブラウザを更新（リロード）すればOKです。

ステップ5：Cloudflare Pagesに公開する

ローカルで満足できたら、いよいよインターネットに公開です。

事前準備

Cloudflare で無料アカウントを作っておきます。メールアドレスとパスワードだけで登録できます。

Claude Codeに依頼する

デスクトップアプリにこう伝えるだけです。

Cloudflare Pages にデプロイしてください。
プロジェクト名は「my-hp」でお願いします。

途中でブラウザが開いて「Cloudflareにログインして承認してください」という画面が出るので、ボタンを押すだけ。

数十秒後、こんなメッセージが返ってきます。

✨ Deployment complete! https://my-shop-hp.pages.dev

これで完了！もう誰でもアクセスできる本物のHPになりました。

ステップ6：あとから修正したいときは？

「電話番号を変えたい」「文章を少し直したい」と思ったら、また Claude Code を起動して伝えるだけ。

電話番号を 03-1111-2222 に変更してください
「お客様の声」のセクションをもう2件追加してください

修正が終わったら、

変更を Cloudflare Pages にデプロイしてください

これでHPに反映されます。業者さんに連絡して、見積もりとって、修正待って…という時間は不要です。

ここから先：実運用に向けて必要なこと

ここまでで「動くサンプル」はできました。ただし、これを本物の会社HPとして運用していくには、まだやることがあります。「ここで終わりじゃないよ」というのを正直にお伝えしておきますね。

▶ 必須：これだけはやっておきたい（最低限）

1. 独自ドメインを取る

〇〇〇〇.pages.dev のままだと「お試し感」が拭えません。お名前.com や ムームードメイン で年1,500円〜3,000円程度。Cloudflare Registrar でもOK。取得後、Cloudflare Pagesに カスタムドメイン として設定すれば数分で https://your-company.com で見られるようになります。

2. 本物の写真を用意する

プレースホルダ画像のままでは説得力ゼロです。

• 自社で撮るなら：外観・代表者・社員集合・施工事例（5枚以上）をスマホで撮影
• プロに頼むなら：1〜2万円〜（地元のカメラマンに依頼）
• 撮った写真は Claude Code に「写真を差し替えて」と依頼すれば自動で組み込み

3. 会社の正式情報を入れる

住所、電話番号、建設業許可番号、代表者名など、嘘のない情報に差し替えます。電話番号は tel: リンクでスマホからワンタップ発信できる形に。

4. お問い合わせフォームを実際に動作させる

HTMLのフォームだけだと、送信ボタンを押しても 何も起きません。以下のいずれかの対応が必要です。

方法	難易度	コスト
メールリンクだけ（mailto:）	易	0円
Google フォーム埋め込み	易	0円
Formspree（フォーム送信SaaS）	中	無料枠あり
Cloudflare Workers + Resend	中	月3,000円〜

迷ったら、まずは mailto: か Google フォーム で十分です。

▶ さらに、集客と運用のために整えていく8項目

上記4つができたら、次は 集客の土台づくりと、長く運用していくための準備が待っています。

• 5. Google Search Console に登録する（検索結果に出るための必須作業）
• 6. Google Analytics（GA4） を設置する（誰が見ているか把握）
• 7. Google Business Profile（GBP） に登録する（地図検索で表示）
• 8. OGP画像・favicon を設定する（SNS拡散・ブラウザタブ）
• 9. プライバシーポリシー・特商法表記 を作る
  10. SEO対策（構造化データ・タイトル最適化など）
  11. 定期的な更新・メンテナンス
  12. バックアップ・セキュリティ

これらの 詳細・優先順位・具体的な進め方は、ダウンロードできるテンプレ内の 04_公開後チェックリスト.md にまとめてあります。チェックボックス付きなので、1つずつ消し込みながら進められます。

「全部やるのは大変そう…」と思った方へ

正直、12項目を すべて自分で対応するのは時間がかかります。だからこそ、AIに頼める部分と、誰かに頼んだほうが早い部分の 見極めが大事です。

• AIに頼めること：フォーム実装、SEO設定、OGP画像生成、構造化データ追加など
• 人に頼んだほうが早いこと：独自ドメインの取得・DNS設定、写真撮影、GBP の初期設定、文章のブラッシュアップ

しんITサポートの料金イメージ

「自分でやってみたけど、ここだけ詰まった…」という方のために、必要な部分だけのスポット支援も承っています。
お見積りや初回のご相談は無料です。

プラン	金額（税込）	こんな方に
無料相談（30分・オンライン）	0円	「自分のケースだとどれが必要？」を整理したい
スポット支援	11,000円〜	独自ドメイン設定だけ、GBP登録だけ、写真差し替えだけ、など1作業
半日コース	33,000円〜	お問い合わせフォーム構築、SEO初期設定、複数ページの修正など
HP制作フルパック	110,000円〜	ゼロから作って公開まで全部おまかせ（独自ドメイン・フォーム・GBP登録込み）
継続メンテナンス	月額 5,500円〜	月1回の更新・修正代行

※ 金額は基本構成のものです。写真撮影や複雑な機能追加は別途お見積りいたします。
※ 既存のIT訪問サポート（基本料金 11,000円）と同じ料金単位なので、組み合わせてご依頼いただけます。

業者に頼めば30〜50万円のHPが、自分でやれば月3,000円台。途中で詰まったところだけ、必要な分だけお手伝いします。

「自分の業種だとどう書けばいいか相談したい」「うまく動かないので一緒に見てほしい」── そんなときも、まずは無料相談から お気軽にご連絡ください。

実際にやってみて感じたこと

良かったポイント

• デザインの方向性を言葉で伝えるだけで、それなりのクオリティになる
• 修正指示も自然な日本語で通じる
• コードが読みやすく書かれているので、後から自分で手を加えやすい
• 公開作業もAIが一緒にやってくれる
• 月3,000円台から始められる

注意したいポイント

• 完全にノーコードではないので、ターミナルを少し触る場面はある
• 写真・ロゴ・実際の会社情報は自分で用意する必要がある
• お問い合わせフォームの送信機能など、動的な機能は別途対応が必要
• AIは時々間違えるので、生成された情報は必ず自分の目で確認

まとめ：HP制作のハードルは下がっています

「HPを作りたいけど、業者に頼むと高い」
「自分では難しそう」

そう感じていた時代は、もう過去のものになりつつあります。

業者に頼めば数十万円かかるHPが、AIに頼めば数時間・月3,000円台で土台ができてしまう。これが今の現実です。

完璧なものを最初から作る必要はありません。まずは「動くサンプル」を作って公開してみること。そこから少しずつ手を入れていけば、必ず形になります。

「やってみたいけど、ターミナル操作で躓きそう…」
「自分の業種だとどんな構成がいいか相談したい」

そんな方は、しんITサポートまでお気軽にご相談くださいね。AIを使ったHP制作のサポートも承っています。

技術の敷居は、あなたが思っているよりずっと低くなっています。
ぜひ今日から、自分の会社のHPづくり、はじめてみませんか？

---

使用ツール：Claude Code / Cloudflare Pages
想定費用：Claude Pro 月額$22 + Cloudflare Pages 無料

※本記事内に登場する「あけぼの工務店」は架空の会社です。実在する企業・団体とは一切関係ありません。