この記事の要点
- プログラミング未経験の私が、AIのClaude Codeに日本語で相談しながら、会社のホームページを全部作り直しました
- 相談を始めてから新しいサイトが公開されるまで約1週間。デザイン会社は一切使っていません
- 有料部分では、ゼロからの設定のしかたと、私が実際にどう進めたかを、会話の例や失敗も含めてすべて書いています
シリコンバレーで夫と経営している会社「Tomorrow Access」のホームページを、2026年10月にまるごと作り直しました。
作り直したサイトは、こちらから見られます。
作ったのは私です。
と言っても、私はプログラミングを習ったことがありません。もともとは専業主婦で、HTMLは聞いたことがある程度で、CSSにいたっては何のことだか分かりませんでした。
そんな私がやったのは、AIの「Claude Code（クロードコード）」に日本語で話しかけて、相談しながら一緒に作ることでした。
しかも、キーボードはほとんど打っていません。音声入力のアプリ「Superwhisper（スーパーウィスパー）」を入れて、指示はほぼすべて声で伝えました。
音声入力そのものは、ずっと前から使っていました。でも、半年ほど前（2026年5月）にSuperwhisperを入れてから、仕事は劇的に楽になりました。最初は無料版で使い始め、翌月に有料の「Pro」を買い切りで購入しました。
使い方も簡単です。キーボードのキーを1つ、自分で決めて設定しておきます。マイクのボタンを探して押す必要はありません。そのキーを1回押してしゃべり、もう1回押すだけで、しゃべった言葉がそのまま入力されます。しかも、聞き取った言葉を、ある程度読みやすく整えてくれます。
実は夫も、私が使っているのを見て、同じSuperwhisperを使い始めました（夫は無料版を使っています）。設定のしかたは夫がnoteに書いているので、気になる人はこちらをご覧ください。
https://note.com/sobazy/n/n1e653e4aab68
今では、このホームページづくりに限らず、メールの下書きも、記事の相談も、ほとんどのことを声でやっています。キーボードをあまりたたかなくなったので、指や腕が疲れることもなくなりました。
思いついた順にしゃべるので、話はあちこちに飛びますし、支離滅裂なこともあります。それでもClaude Codeは、言いたいことをちゃんと読み取って作業してくれました。
ものすごい天才の部下を持った気分です。
これは私だけではありません。代表である夫も、自分のClaude Codeを「AIの部下」として使っています。今では夫婦そろって、AIの部下をフルに活用しながら会社を回しています。
以前のサイトと、作り直したあとのサイト
以前のサイトは、数年前にデザイナーとホームページ制作会社に頼んで、WordPressで作ってもらったものでした。
会社のテーマカラーである黒と金色の雰囲気は、気に入っていたのですが、中身が今の会社の活動と合わなくなっていました。もう開催していないイベントがメニューに残り、リンク切れのページもありました。
作り直しで決めたのは、次のことです。
作り直しで決めたこと
- 黒と金色、サンフランシスコの夕景の写真、ロゴという「見た目の雰囲気」は変えない
- 何の会社なのかが一目で分かるように、中身と並び順を今の活動に合わせて作り直す
- 「ご相談」のボタンを、どのページからも押せるようにする
結果として、トップページ、サービスのページ、ニュース一覧、ガイドブック、イベント情報、英語版まで、サイトのほぼ全部が新しくなりました。
制作会社に頼めば、一般に数十万円から100万円以上かかると言われる規模の作り直しです。それが、デザイナーや制作会社への支払いはゼロでできました（くわしい費用は第7章に書いています）。
文字の書体、メニュー、スマホで見たときの並び方、ゆっくり切り替わる冒頭の画像、スクロールすると文字がふわっと浮かび上がる動き。これも全部、Claude Codeと相談しながら決めて、Claude Codeが作りました。
かかった時間
相談を始めたのが10月18日。
デザインの見本を作り直しながら夫にも見てもらい、本番のサイトへの入れ替えは10月23日の午後、約4時間で終わりました。翌24日からは、細かい手直しとChatGPTによるチェックです。
つまり、相談を始めてから公開まで、約1週間でした。
本番のサイトへの入れ替え作業にかかる時間について、最初にClaude Codeが出してきた見積もりは「2週間」でした。
私が「なんで2週間もかかるの？Claude Codeでやるんでしょ？」と聞いたら、「人の手で作業する前提で見積もっていました」と言って、「実作業は3日」に直してくれました。
ところが実際には、本番への入れ替えは半日もかからずに終わりました。
一体何だったんだろう？？
AIに遠慮しなくていい。これは前から感じていたことですが、今回あらためて実感しました。
AIは、いわば鋼のメンタルです。人間が相手なら気をつかうような強い言い方をしても、文句ひとつ言いません。だから、言いたいことを遠慮なく、どんどん言えます。
しかも、休みもいりません。働いてもらおうと思えば、夜中でも休日でも、24時間いつでも作業してくれます。
「これはできないの？」「じゃあ、これは？」と、どんどん聞いてみるのも大事です。最初は「この作業は、ご自身でやってください」と言われたことでも、「Claude Codeでやって」と頼むと、「分かりました」とやってくれることがよくあります。
まずは「やって」と頼んでみる。それが一番の近道でした。
私がやったこと、AIがやったこと
役割分担を書くと、こうなります。
私がやったこと
- 「こうしたい」「ここが変」と、日本語で伝える（ほとんど音声入力で、思いついた順にしゃべるだけ）
- AIが出してきた案から選ぶ（冒頭の文言は5案から、書体は4案から選びました）
- できあがった画面を、パソコンとiPadで見て、気になるところを指摘する（スマホでの見え方は、Claude Codeが確かめてくれました）
Claude Codeがやったこと
- デザインの見本づくり。100回以上の作り直しも、毎回Claude Codeがやりました（私は希望を伝えただけです）
- 本番のWordPressへの組み込み、作業前のバックアップ
- 夫に確認してもらうためのメールの下書き
ChatGPTがやったこと
- できあがったサイトの「第三者チェック」（欠陥がないかの監査）
夫に頼んだ作業は、確認事項への返事と、いくつかの手続きくらいです。
こんな人に読んでほしい
- 自分の会社やお店のホームページを、自分で何とかしたいと思っている人
- WordPressのサイトを持っているけれど、古くなっていて手を付けられずにいる人
- Claude CodeやChatGPTの名前は聞くけれど、何から始めればいいか分からない人
- 「AIでサイトが作れるらしい」と聞いても、自分には無理だと思っている人
私も、AIを使い始めたころは「ウェブサイトを作るなんて、自分には無理」と思っていた側です。
ただ、使っているうちに、AIがどんどん賢くなっていくのを肌で感じるようになりました。「Claude Design（クロードデザイン）」のような、デザインまでできる道具も出てきました。それを見て、「これなら自分でもできるのでは」と思ったのが、今回やってみようと思ったきっかけです。
先にお伝えしておきたいこと
この記事の続き（設定のしかた・実際の進め方・話しかけ方の例など）は、note の有料記事にまとめています。購入してから「思っていたのと違った」とならないように、前提を書いておきます。
購入前に確認してほしいこと
- この記事は、すでにWordPressで作ったホームページがある場合の手順です。Wix、ペライチ、Jimdoなどのサービスで作ったサイトは仕組みが違うので、本番への入れ替えの手順はそのままでは使えません
- まだホームページを持っていない人は、サーバーとドメインの契約が別に必要です。その手順は、この記事には書いていません
- かかる時間は、サイトの大きさや、決めることの多さで変わります。「1週間」は私の場合です
- ClaudeやChatGPTの画面や料金は、変わることがあります。この記事は2026年10月時点の内容です
この先に書いてあること
ここから先は、私が実際にやった手順を、ゼロからすべて書きました。
第1章 準備するもの（全員向け）
第2章 Claude Codeの設定のしかた（初めての人向け）
→ すでにClaude Codeを使っている人は、第3章へ飛ばしてください
第3章 ChatGPTの設定のしかた（初めての人向け）
→ すでにChatGPTを使っている人は、第4章へ飛ばしてください
第4章 私がClaude Codeとホームページを作り直した流れ（この記事の本題）
– 最初に、以前のサイトを見せて伝えたこと
– デザインの見本を作って、直して、また直す
– 本番のサイトに入れ替える前にしたこと
– ChatGPTに「欠陥チェック」を頼んだ方法
第5章 実際に使った話しかけ方の例（そのままマネできる形）
第6章 失敗したこと・気をつけたほうがいいこと
第7章 費用と、やってみての正直な感想
設定の章は、初めての人がつまずきやすいところを中心に、順番に書いています。「設定で止まってしまいそう」という人こそ、読んでもらえたらうれしいです。
