ホームページをAIで作って公開する方法｜パソコンが得意でない社長が、話しかけるだけで作れる7つの手順【Claude Code】

「ホームページを作りたい。でも、制作会社に頼むと高いし、自分で作るのはとても無理だ…」

会社の紹介ページ、新しく始めるサービスのページ、採用のページ。作りたいものはあるのに、見積もりと打ち合わせを考えると、手が止まってしまう。そんな社長は多いと思います。

それは、あなたがパソコンに詳しくないからではありません。ホームページは、これまで専門の人にしか作れないものでした。

実は、いまは違います。このサイト（社長のAIの教科書）も、運営者がClaude Codeに話しかけて作りました。 プログラムは1行も書いていません。

この記事では、登録者の数のわりに多くの人に見られている解説動画を見比べて、パソコンが得意でない社長でも失敗しにくい順番を、7つの手順にまとめました。社員が数人〜数十人で、ホームページの担当がいない会社の社長に向けて書いています。

この記事で手に入るもの

• ホームページを作って公開するまでの、7つの手順
• そのまま貼れる、最初の一言と直し方の頼み方
• 「AIが作ったっぽい」見た目にしないコツ
• 公開の前に、社長が自分で確かめる3つのこと

うちの場合：このサイトは、話しかけるだけで11日で公開できました

運営者は、会社の仕事をAIに任せていく様子を、ほかの社長にも伝えたいと考えていました。でも、サイトを作るとなると、制作会社に頼むか、自分で覚えるしかないと思っていました。

そこで、Claude Codeに「こういう読者に、こういうことを伝えるサイトを作りたい」と話しかけるところから始めました。2026年10月7日に作り始めて、10月18日に公開しました。いまは記事や発言録を合わせて、400ページほどになっています。

会社のホームページも、同じやり方で作り直しました（自社のホームページをAIで刷新する方法）。

やったことは、言葉で頼んで、できたものを見て、「ここを直して」と伝えることの繰り返しです。

AIは「何度でも嫌な顔をせずに直してくれる、腕のいい職人」です

ホームページ作りでAIに任せるのは、形にすることです。ページを組み立てる、スマホでも崩れないようにする、色や文字の大きさを整える。こうした手を動かす仕事は、AIが引き受けてくれます。

一方で、誰に、何を伝えて、見た人に何をしてほしいかを決めるのは社長です。ここは、会社のことをいちばんよく知っている人にしか決められません。

職人さんに家を建ててもらうときと同じです。間取りを決めるのは施主、建てるのは職人。AIは、何度「やっぱりここを変えて」と言っても、嫌な顔をしない職人です。

AIと作ると、こう変わります

	これまで	AIと作ると
頼み方	制作会社に説明して、見積もりを待つ	話しかけると、その場で形になる
直したいとき	連絡して、直してもらうのを待つ	「ここを直して」で、すぐ直る
見た目を選ぶ	案を2〜3個もらうのがやっと	「違う雰囲気で10案」と頼める
かかる日数	数週間〜数か月	下書きは1日、公開まで1週間ほど
費用	制作費＋直すたびの費用	Claudeの月額＋サーバー代

解説動画でも、会社のサイトを「片手間で1週間、集中すれば1〜2日」、社内の道具を「1〜3日」で作ったという話が出てきます。

まずはこれだけ：7つの手順で公開できます

ステップ1：空のフォルダを1つ作って、Claude Codeで開く

パソコンに「ホームページ」のような名前のフォルダを1つ作ります。Claudeのアプリの「Code」の画面で、そのフォルダを選びます。始め方はClaude Codeの始め方にまとめています。

会社案内のPDFや、今の名刺、載せたい写真があれば、このフォルダに入れておきます。AIが読んで、材料にしてくれます。

ステップ2：いきなり作らせず、「計画を立てて。質問して」と頼む

見た解説動画のほとんどが、最初にこう言っていました。いきなり作らせると、欲しいものとずれる。まずは計画を立ててもらいます。

会社のホームページを作りたいです。いきなり作らずに、まず一緒に計画を立ててください。
分からないことは、1つずつ私に質問してください。
会社案内は、このフォルダの「会社案内.pdf」にあります。

AIが「お客様はどんな人ですか」「見た人に最後に何をしてほしいですか」と聞いてきます。話すように答えれば大丈夫です。分からない言葉が出てきたら、「その言葉の意味を、やさしく教えて」と聞き返してください。

ステップ3：色・ページ・スマホの3つだけ決めて、「まず骨組みを」

計画ができたら、作ってもらいます。このとき、3つだけ伝えると仕上がりが大きく変わります。

この計画で作ってください。
・色：白と濃い紺を基本に
・ページ：トップ、事業内容、会社概要、採用、お問い合わせ
・スマホで見ても崩れないように
まずは骨組みだけ作ってください。デザインは、そのあとで整えます。

「いい感じに作って」と丸投げすると、ありきたりなものが返ってきます。そして、一度に全部を頼まないこと。一度に頼むと、「1か所直すと別の所が崩れる」ことが起きやすくなります。骨組み→デザイン→中身の順に、段階を分けて頼みます。

ステップ4：見て、言葉で直す

できたら、パソコンのブラウザで開いて見てみます。気になるところは、ふだんの言葉で伝えれば直ります。

問い合わせのボタンを、もっと目立つオレンジ色にして、角を丸くしてください。
トップの見出しを、お客様の困りごとから始まる言い方に変えてください。

画面の写真（スクリーンショット）を貼って、「ここの余白を詰めて、文字を少し大きく」と頼むこともできます。専門用語は要りません。

ステップ5：「AIが作ったっぽさ」を消す

AIに任せると、どこかで見たような見た目になりがちです。解説動画では、次のようなコツが紹介されていました。

雰囲気がまったく違うデザインを10案作ってください。
グラデーション（色が少しずつ変わる塗り方）は使わないでください。

10案から気に入ったものを選び、「この案をもとに、また違う方向で10案」と繰り返すと、自分の会社らしい見た目に近づきます。真似したいサイトがあれば、そのURLを渡して「色と文字の使い方を参考にして」と頼むのも効きます。

ステップ6：写真と文章を本物にして、点検してもらう

仮の写真や文章を、自社のものに差し替えます。写真は、自社で撮ったものか、使ってよいと確かめたものだけにします。

最後に、検索で見つけてもらえるかを点検してもらいます。

このサイトを、検索で見つけてもらいやすいかの点で点検して、直してください。
各ページの題と説明文、画像の説明、見出しの順番を見てください。
実績の数字やお客様の声は、私が渡したものだけを使ってください。

ステップ7：インターネットに公開する

公開のやり方は、大きく2つあります。

1. 会社ですでに借りているレンタルサーバーに、できたファイルを上げる：会社のメールやホームページで、サーバーを借りていることが多いと思います。このサイトもこのやり方です。
2. 無料で公開できるサービスを使う：解説動画では、フォルダをドラッグするだけで公開できるサービスや、GitHub（作ったファイルの保管場所）とVercel（公開のサービス）をつなぐやり方が紹介されていました。会社のサイトに使ってよいかなどの条件は、各サービスの規約で確かめてください。

どちらの場合も、手順はAIに聞けば教えてくれます。

できたホームページを、インターネットに公開したいです。
うちの会社は〇〇（サーバー会社の名前）のサーバーを借りています。
公開までの手順を、パソコンが得意でない人にも分かるように、1つずつ教えてください。

途中でエラーが出たら、その文面をそのまま貼って「これはどういう意味？どうすればいい？」と聞けば大丈夫です。

気をつけること：公開の前に、この3つを自分の目で確かめれば大丈夫です

1. スマホで見て、お客様のつもりで押してみる

AIは、ボタンが「押せるか」は確かめても、「お客様にとって自然か」までは気づかないことがあります。解説動画でも、電話で予約するボタンを押すと、すぐ「予約が完了しました」と出てしまう例が紹介されていました。公開の前に、社長がお客様のつもりで、スマホで一通り押してみてください。

2. 問い合わせが本当に届くか、自分で送ってみる

自分のパソコンの中では届いたのに、公開したら届かない、迷惑メールに入っていた、ということがよく起きます。公開したら、まず自分で問い合わせを1通送ってみてください。

3. 元のファイルを残し、上げるときは「足すだけ」にする

今あるホームページを置き換えるときは、元のファイルを丸ごと控えに取ってから進めます。同じサーバーに、ほかのファイルが一緒に置いてある会社も少なくありません。上げるときは、前からあるファイルをまとめて消すような操作はせず、新しいファイルを足すだけにしてください。AIに上げる作業を手伝ってもらうときも、上げる前に「何を、どこに上げるか」を見せてもらい、社長がOKを出してからにすると安心です。

よくある質問

本当にプログラムを書かなくていいのですか？

書かなくて大丈夫です。このサイトも、運営者は言葉で頼んで、できたものを見て直してもらっただけです。中で何が書かれているかが気になったら、「いま何をしたのか、やさしく説明して」と聞けば教えてくれます。

あとから文章を自分で直せますか？

Claude Codeに「この文章をこう直して」と頼めば直せます。社員が管理画面から文章を直したい場合は、WordPress（管理画面で更新できる仕組み）で作るやり方もあります。解説動画では、まず自分のパソコンの中でWordPressのサイトを作り、できてから本番のサーバーに移す手順が紹介されていました。

予約や決済、会員のページも作れますか？

作ること自体はできます。ただ、お客様の個人情報やお金を扱うページは、守りの設定や法律の表示などが必要になります。解説動画でも、社内で使うだけなら始めやすい一方、お客様が使うものは専門家に相談を、と話していました。まずは会社の紹介と問い合わせのページから始めるのがおすすめです。

費用はどれくらいかかりますか？

Claude Codeを使うには有料のプランが要り、個人向けのProは月20ドル（年払いなら月17ドル）です（2026年10月20日に公式ページで確認）。ほかに、レンタルサーバーとドメイン（ホームページの住所）の費用がかかります。すでに会社で借りていれば、追加の費用はかからないこともあります。

もっと詳しく知りたい方へ

解説動画に共通していた「作って公開するまでの型」

1. 空の作業フォルダを1つ作り、材料（会社案内・写真）を入れる
2. プランモード（先に計画だけを立てる使い方）で、計画を作ってもらう。「分からないことは質問して」と添える
3. 骨組み→デザイン→中身の順に、段階を分けて頼む
4. ブラウザで、スマホの表示も見ながら、言葉やスクリーンショットで直す
5. 写真と文章を本物にし、検索で見つけてもらいやすいかを点検してもらう
6. レンタルサーバーか、無料の公開サービスで公開する。エラーは文面を貼って聞く
7. 元のファイルを残し、決めたことを書いたファイルを更新しながら育てる

仕上がりを良くするコツ（梶谷健人さんの8つのポイントから）

• AIは「毎朝、記憶をなくして目覚める天才」のようなもの。決めたことや進み具合をファイルに書き残させると、次の日も話が続く
• 完成までを5段階くらいに分けて、1段ずつ進める
• 声で話して、背景まで十分に伝える
• 一から作り直さない。ログインのような仕組みは、すでにあるサービスを使う

動画どうしで意見が分かれていたところ

• 見た目の作り方：10案出させて選ぶ、真似したいサイトから色のルールを作らせる、デザインが得意な別の道具で作ってから渡す、など人によって違います。社長には「10案から選ぶ」がいちばん簡単です
• 公開のやり方：無料のサービスを使う人と、レンタルサーバーを使う人に分かれます。会社のサイトなら、すでに借りているサーバーを使うのが分かりやすいと思います
• 作る形：自分で直せるようにWordPressにする人と、ふつうのファイルのまま作る人がいます。このサイトは、ふつうのファイルで作っています

まとめ：まずは「計画を立てて。質問して」と頼んでみてください

• ホームページは、Claude Codeに話しかけるだけで、作って公開するところまで進められます
• 何を伝えるかは社長が決め、形にするのはAI。骨組み→デザイン→中身の順に、段階を分けて頼みます
• 公開の前に、スマホで押してみる・問い合わせを送ってみる・元のファイルを残す。これで慌てずに済みます

今日やることは1つだけです。フォルダを1つ作って、Claude Codeに「会社のホームページを作りたい。まず一緒に計画を立てて。分からないことは質問して」と話しかけてみてください。

関連ページ

• Claude Codeの始め方
• 自社のホームページをAIで刷新する方法
• Claude Code活用術（入口）