【やってみた】Claudeでホームページ作成！外注せずサーバー代0円で会社HPを公開

専門知識ゼロの初心者が、AIに相談しながら会社の「顔」をつくるまでの手順を全公開

「会社を作ったけれど、ホームページはどうしよう」と悩む事業者は少なくありません。筆者自身も、「作りたいけど、作り方が分からない」という状況で立ち止まっていました。

結論からお伝えすると、外注せずにClaude CodeというAIと一緒に、サーバー代0円で公開までたどり着けました。コードは一行も書いていません。やったのは、AIに日本語で「こうしてほしい」と伝える作業だけです。

この記事では、ホームページが必要だと感じたきっかけから実際の作成手順、公開後の運用までを順番に紹介します。

会社設立で、ホームページの必要性を感じた

会社の信頼を対外的に示す手段として、ホームページは重要な存在です。インターネットで情報を集められる昨今において、事業の実態や社会的な証明を示すうえで欠かせません。

もともと私は個人事業として、社会保険労務士の資格を活かし、人事労務に関する記事の執筆や監修などを行っていました。「事業を広げたい」と考えるなかで、書く仕事だけでなく、人事労務や採用支援などのコンサルティングにも挑戦することに決めました。そこで設立したのが、合同会社柴田人事労務オフィスです。

会社を立ち上げると、取引先から「御社のサイトはありますか」と尋ねられる場面が少なくありませんでした。

そこで「まずは会社の顔となるホームページを作成するか！」と判断。既に付き合いのあるクライアントとの関係を深化させるだけでなく、新規のクライアントを獲得する手段として、会社概要・事業内容・連絡先がきちんと伝わるページを作成することに決めました。

コストをかけずに会社HPを作る方法を検討

ホームページを作ろうと思ったものの、最初に迷ったのは「プロに任せるか、自分でやるか」でした。筆者はサイト制作の経験がなく、デザインのセンスも皆無であるため、「コストはかかるけど、外注しようかな。自分で作れる気がしないし」と考えていました。

しかし、AIでホームページを簡単に作成できる旨の情報を聞き、それぞれの選択肢を比較。判断のため、それぞれの相場を調べて表に整理しました。

※Cloudflare Pagesの無料枠を使う場合、サーバー代は0円。Claude Codeの利用料や独自ドメイン代は別途かかる場合があります。

プロに任せれば安心ですし、クオリティも申し分ないでしょう。ただ、設立直後の身としては、初期コストの重さがどうしても気になりました。さらに、サービス内容や料金は今後も見直すはずです。直すたびに依頼して費用と時間がかかる進め方は、現実的ではないと感じました。

そこで出した結論は、以下のとおりです。

• 外注すると制作費・保守費がかかり、初期コストが重くなる
• テンプレート系サービスも月額費用がかかり、ランニングコストが積み上がる
• Claude Codeで静的HTMLを作り、Cloudflare Pagesで公開すれば、サーバー代0円で始められる

静的HTMLとは、あらかじめ作った内容をそのまま表示するシンプルなページのことです。複雑な仕組みがいらないぶん、無料での公開と相性がよいのです。

なぜClaude Codeを選んだか

数あるツールのなかでClaude Codeを選んだ理由は、専門知識ゼロでも会話だけで進められる点にありました。私はコードが書けないので、ここがいちばんの決め手です。

Claude Codeは、チャットで指示するだけで、ファイルの作成や編集といった作業まで進めてくれるAIツールです。「こういうページを作って」と日本語で伝えれば、AIがコードを書いて形にしてくれます。

たとえば操作の途中でわからない言葉が出ても、その場で「これはどういう意味」と質問できました。隣に詳しい人が座ってくれている感覚に近いものがあります。

実際には難しい部分をAIが引き受けてくれて、私は「どんな会社に見せたいか」を考えることに集中できたのです。

Claude CodeでHPを作成する前の事前準備

事前に必要なものは、次の3つだけでした。特別なソフトも有料契約もいりません。

• メールアドレス（公開サービスのアカウント作成に使用）
• 載せたい情報（会社概要・事業内容・連絡先・代表者プロフィールなど）
• 手元のSNSや紹介ページのURL・画像（あれば反映に使える）

なかでも大切なのは、会社として何を伝えたいかを、あらかじめ言葉にしておく準備です。「載せたいことをメモに書き出す」程度で十分なので、身構える必要はありません。

Claude CodeでHPを実際に作成する手順

基本的には、Claude Codeと会話しながら作成を進めます。途中で「次はどうするの」と止まったら、画面のスクリーンショットを撮って渡し、「次はどこを押せばいい」と聞けば、AIが画像を見て案内してくれます。

一人で抱え込まず、焦らず二人三脚で進めましょう。実際の流れは、次の3ステップでした。

Step 1. どんなHPを作りたいか伝える

最初に、作りたいものと公開方法をまとめてAIに伝えます。私が実際に送ったのは、次のようなプロンプトです。

ポイントは、使いたいサービス（Cloudflare Pages）を最初に伝える点にあります。公開方法を前提に置くと、AIがその仕組みに合った作り方で設計を進めてくれるからです。

あとは、Claude Codeからの質問に答えていくだけです。すでにSNSや紹介ページがあればURLを渡すと内容に反映され、使用許諾を持つ画像なら取り込みも頼めます。

Step 2. 見た目を整える

土台ができたら、納得いくまで日本語で修正を頼むだけです。気に入るまで何度でも頼める点が、外注との大きな違いだと感じました。実際に私が伝えた指示は、たとえば次のようなものです。

信頼感を出したかったので、ブランドカラーを青系で統一してもらいました。さらに、代表社員である筆者が持つ社会保険労務士・ファイナンシャル・プランニング1級技能士・行政書士・宅地建物取引士という4つの資格を、バッジ形式で見せる工夫も加えています。

詳細な指示を出すだけで、自分の強みやアピールポイントなどがページへ反映されていきました。

Step 3. インターネットに公開する

完成したら、Cloudflare Pagesという無料サービスで公開します。Cloudflare Pagesの利点は以下の4つです。

• ドラッグ&ドロップだけで公開できる
• サーバー代0円
• 更新もフォルダをドラッグ&ドロップするだけ
• 過去のバージョンにいつでも戻せる

「ホームページの公開にはGitHubが必要」と聞いた経験があるかもしれません。GitHubとは、プログラムを保存・共有する開発者向けのサービスですが、この方法では一切使いません。

完成したフォルダを画面にドラッグ&ドロップするだけで、公開用のURLが発行されます。公開画面で戸惑ったときも、スクショをClaude Codeに渡せば、押す場所を案内してくれるので安心です。

実際に完成したホームページの内容

完成したホームページは、見た目はシンプルでも中身は会社の顔として十分に機能しています。

ファイル名は「index.html」ひとつだけですが、ヘッダーのタブで複数の画面を切り替えられる構成にしました。以下で、入れた情報と確認したポイントを紹介します。

トップページに入れた情報

トップページには、見込み客の判断材料になる情報を1枚にまとめました。盛り込んだ要素は次のとおりです。

• ヒーロー：いちばん伝えたいメッセージとキャッチコピー
• お悩み→解決策：採用や定着の悩みと、それへの答え
• 選ばれる理由：資格や労働行政での経験など、強みを3つに整理
• 代表者プロフィール：顔写真・保有資格・仕事への想い
• 問い合わせフォーム：その場で連絡できる導線

問い合わせフォームには、無料枠のあるFormspreeを使い、送信内容がメールに届く仕組みにしました。無料枠には月間送信数などの上限があるため、問い合わせ件数が増える場合はプラン確認が必要です。

また、ヘッダーのタブからは「事業内容」「サービスと料金」「執筆・監修実績」にも切り替えられる設計にしました。

スマホ表示で確認したポイント

最初に頼んだとおり、スマホ対応も整えています。実際に手元の端末で開いて、表示の崩れがないかを確認しました。チェックしたのは、次の3点です。

• 文字が小さすぎたり、画面からはみ出したりしていないか
• ボタンが指で押しやすい大きさか
• 写真が崩れずに表示されるか

気になる箇所は「スマホで〇〇が見づらいので直して」と頼むだけで調整できました。パソコンでもスマホでも読みやすい状態に仕上がっています。

公開後に感じたメリット

公開してまず感じたのは、「ちゃんとした会社に見える」という安心感でした。名刺やメール署名にURLを載せられるようになり、相手からの信頼も得やすくなっています。

費用がほぼ0円で済んだ点も、設立直後の身には大きな支えになりました。

公開後に修正したくなっても簡単

ホームページは、公開してからのほうが「ここを直したい」が増えます。その点でも、この方法は身軽さで応えてくれました。

修正したくなったら、Claude Codeに日本語で「〇〇を〜に変えて」と頼むだけです。直してもらったファイルを Cloudflare Pagesにドラッグ&ドロップすれば、更新は完了します。

外注の場合、わずかな文言修正でも依頼の手間や待ち時間がかかります。Claude Codeでは思い立ったその場で自分が対応できため、ストレスが発生しません。

Claude CodeでHPを作るときにつまずいたポイント

ここまで順調に進んだ一方で、「先に知っておきたかった」という落とし穴もありました。これから挑戦する方のために共有します。

つまずきやすいのは、ファイル名のルールと、独自ドメインの扱いの2点です。それぞれ具体的に説明します。

トップページのファイル名は「index.html」にする

トップページのファイル名は、必ず「index.html」にしてください。ここを外すと、URLを開いてもページが表示されないからです。

理由は、ブラウザの仕組みにあります。ブラウザは「https://〇〇.pages.dev/」のようなURLにアクセスすると、自動的に「index.html」というファイルを探しに行く仕様だからです。

たとえばトップページが「index_shibata.html」のような別名だと、ファイル自体は存在しても見つけてもらえません。結果として、404エラー（ページが見つかりませんという表示）になってしまいます。

対策はClaude Codeに作成を頼むとき、「トップページのファイル名はindex.htmlにして」と最初に伝えるだけです。

会社HPとして使うなら独自ドメインも検討する

会社のHPとして使うなら、独自ドメインの取得も検討する価値があります。自分だけのURLは、無料URLよりも信頼感を高めてくれるからです。

Cloudflare Pagesで公開すると、最初は「〇〇.pages.dev」という無料URLがもらえます。公開自体はこのまま無料で続けられますが、「会社名.com」のようなアドレスのほうが、名刺に載せたときの印象が大きく変わります。

独自ドメインを使う場合の流れは、次のとおりです。

• ドメインを取得する（お名前.com や Cloudflare Registrar等。年間1,500〜2,000円程度。種類や為替で変動）
• Cloudflare Pages の「カスタムドメイン」タブからドメインを追加する
• DNS設定を行って紐付けが完了する

DNSとは、ドメイン名と公開先のサーバーを結びつける、住所録のような仕組みです。私のおすすめは、ドメインをCloudflare Registrarで取得する方法です。実際に、筆者もCloudflare Registrarで独自ドメインを取得しました。

まとめ

会社のホームページを、外注せずサーバー代0円で公開できました。実際にかかった費用は、独自ドメイン代の年2,000円ほどだけです。

作業時間も、空いた時間に少しずつ進めて、思っていたより短く済みました。修正したい部分は自分でいつでも直せるので、これからも育てていける安心感があります。

「コードが書けないから」「専門知識がないから」と諦めていた方でも、小規模な会社HPであれば、Claude Codeを活用して十分に作成を進められます。専門知識がなくても、AIと二人三脚なら、会社の顔となるページは作れます。設立直後でコストを抑えたい方は、まず一度試してみてください。

（編集：創業手帳編集部）