まずありがとうございます！！！！！

おかげさまで本記事は多くの方にご覧いただき、

50部を突破しました！

ご購入いただいた皆さま、本当にありがとうございます。

感謝の気持ちを込めて、この度「50部突破記念キャンペーン」を実施します。

2,980円で購入できる特別割引URLをご用意しました。

ただし、こちらの割引は先着20名様限定となります。

あと数名となっております。

定員に達し次第、通常価格へ戻しますので、気になる方はお早めにご利用ください。

特別割引URLはこちら

また今回の記事は自身の3本目の記事になります。

私の記事は短時間ではありましたが、人気の記事に載りました！

とてもうれしかったです。皆様のおかげで頑張れています。

スクリーンショット 2026-05-26 005740.png

以下は記事の好評を一部抜粋させていただきました。

スクリーンショット 2026-06-07 171359.png

スクリーンショット 2026-06-07 171421.png

スクリーンショット 2026-06-07 171408.png

今回の3本目の記事の魅力というのは、

自分の圧倒的な画像数です。

自分は文面が苦手な方で目で見て一瞬で入ってくる操作画像をたくさん盛り込みました。

なので

文面が苦手である方
websiteを作りたいけど難しそうと思う方
新たなことに挑戦したい方

ぜひ記事を読んで昨日の自分よりもさらに成長していきましょう！

第1章　なぜ今、Claude Codeで自分のサイトを作るのか ― 完成イメージと全体像

「ターミナル」

「コマンド」

「デプロイ」

この3つの言葉を見ただけで、画面を閉じたくなる。

そんなあなたへ、まずこの記事を書いています。

サイトを作りたい気持ちはある。副業で、自分のブログや情報サイトを持ちたい。でも、いざ調べると黒い画面が出てきて、英語のコマンドが並んでいて、「自分には無理だ」と手が止まる。WordPressも検討したけれど、サーバー契約やお金、設定の難しさで挫折した。あるいは、最初の一歩すら踏み出せていない。

その気持ち、よく分かります。だから先に、この記事の結論をお伝えします。

この記事の通りに、コマンドを1つずつ・画面を1枚ずつ確認しながら進めれば、プログラミング未経験のあなたでも、無料で、自分名義のサイトをインターネットに公開できます。さらに、公開したそのサイトで、どうすれば収益が発生するのかという道筋まで分かります。

下の画像のように、自分のPCの前で「公開できた」とガッツポーズする日が、この記事を読み終えるころには現実になります。

「ターミナル」「デプロイ」で固まっていた、あなたへ

最初に、安心してほしいことがあります。

この記事では、

あなたが自分でプログラムを書く必要はありません。

HTML（Webページの構造を定義する言語）もCSS（HTMLで定義された構造にデザインや装飾を加えるための言語）も、覚えなくて大丈夫です。

代わりにやることは、たった1つ。日本語で「こういうサイトを作って」とお願いするだけです。お願いを受けて、実際にコードを書いてくれるのが、これから一緒に使う

「Claude Code」

というツールです。

横文字が出てくるたびに、私はその場で意味を添えます。たとえば、

ターミナル：PCに文字で命令する黒い画面のこと。命令を打ち込む受付窓口だと思ってください。
コマンド：そのターミナルに打つ、命令文のこと。この記事では全部コピペできる形でお見せします。
デプロイ：作ったサイトをインターネットに公開すること。難しそうな言葉ですが、やることはボタンを押す程度です。

意味が分かれば、横文字はただの道具の名前です。身構える必要はありません。

完成イメージ：あなたが手に入れる「自分のURL」

ゴールを先に見ておきましょう。この記事を読み終えたとき、あなたの手元には次のものがあります。

インターネット上に公開された、あなた名義のサイト
https://〜 で始まる、あなた専用のURL（スマホでも友人にも見せられます）
そのサイトで収益を生むための、具体的な次の一歩

しかも、これらをすべて0円で手に入れます。サーバー契約も、有料ソフトも要りません。

私が実際に同じ手順を試したところ、何も入っていないPCから約30分で、サイトの公開まで到達できました。もちろん、初めてのあなたはもっとゆっくりで構いません。大事なのは速さではなく、止まらずに最後までたどり着けることです。この記事は、そのための道案内です。

Claude Codeとは何者か（日本語で頼むと作ってくれるAI）

ここで、主役を紹介します。

Claude Codeは、Anthropicという会社が作った、AIのコーディングツールです。「コーディング」と聞くと身構えるかもしれませんが、あなたがコードを書くのではありません。

あなたは、ターミナルに向かって日本語で頼むだけ。

たとえば「コーヒー器具を紹介する情報サイトを作って」とお願いすると、

Claude Codeがファイルを作り、中身のコードを書いてくれます。

しかも親切なことに、Claude Codeは勝手に進めません。「こう変更しますが、いいですか？」と変更内容を見せて、あなたの許可（承認）を待ってから反映します。だから、知らないうちに変なものができている、という心配は要りません。

「日本語でお願いする → 見せられた内容を確認して承認する」。この対話のくり返しが、この記事のすべての土台です。これは第3章でじっくり練習しますので、今は「そういうものか」とだけ覚えておいてください。

なぜ「静的サイト」なのか（サーバー契約もお金も不要）

もう1つ、大事な言葉を紹介します。静的サイトです。

静的サイトとは、ざっくり言うと「HTML/CSS/JSだけでできた、サーバーの処理がいらないシンプルなサイト」のこと。サイト作りで挫折した原因の多くは、実はこの「サーバー」まわりの契約や設定でした。

この記事では、そのサーバーを契約しません。素のHTMLファイル（1つのファイルが1つのページに対応する、いちばん分かりやすい作り）でサイトを作ります。だから、

月額のサーバー代がかからない（0円で公開できる）
「1つのファイル＝1つのページ」と、目で対応を追えるので迷子になりにくい
公開も、無料のサービスにつなぐだけで完了する

未経験のあなたが、最短距離で「公開」までたどり着くために、この記事はあえて一番シンプルな作り方を選んでいます。

この記事の全体地図（4フェーズ・9章分）

では、ここからの旅の全体像を見ておきましょう。

この記事は、大きく「ゼロ → 構築 → 公開 → 収益化」の4つのフェーズで進みます。下の画像が、その地図です。今いる場所が分からなくなったら、この図に戻ってきてください。

上の画像のように、左から順に進みます。それぞれのフェーズで、あなたのサイトが少しずつ完成へ近づきます。

フェーズ0：ゼロ（準備）……Claude CodeをあなたのPCに入れて、使える状態にします（第2章）。
フェーズ1：構築……日本語でお願いして、トップページや記事ページを作ります（第3〜5章）。
フェーズ2：公開……動作確認をして、無料のサービスでインターネットに公開します（第6〜7章）。
フェーズ3：収益化……アフィリエイト広告を貼り、集客と継続の道筋を立てます（第8〜9章）。

全9章。各章の終わりには「あなたは今ここまで来た」という達成地点を置きます。一歩ずつ、確実に進みましょう。

未経験でも再現できる理由と、正直な期待値

最後に、2つだけお伝えしておきます。

1つ目　→「なぜ未経験のあなたでも再現できるのか」

理由は、この記事が「丸投げ」をしないからです。コマンドは全部コピペできる形で載せます。打つ前に「なぜ打つか」を一言、打った後に「何が起きたか」を一言、必ず添えます。手順は「1つのコマンド＝1枚の画面」まで細かく刻みます。さらに、エラーが出ても止まらないように、第6章で「Claudeへの聞き方テンプレ」を用意しています。だから、あなたは一人になりません。

2つ目　→　「正直な期待値」

私は「必ず稼げる」「誰でも稼げる」とは言いません。それは事実ではないからです。実際、1年目は土台づくりの期間で、月数千円が普通という調査もあります。第8章で、その現実の数字を正直にお見せします。

それでも、この記事をおすすめする理由は、

収益化の「スタートライン」に確実に立てるからです。

自分のサイトを持ち、広告を貼れる状態になること。続けた人ほど伸びやすい、その入り口に立つこと。そこまでの再現性は、本気で高くします。

地図は見えました。まずは、道具を揃えましょう。次の第2章で、Claude CodeをあなたのPCに入れていきます。黒い画面も、1コマンドずつ一緒に進めば、必ず突破できます。

第2章　準備編：VS CodeとClaude CodeをあなたのPCに入れる

地図は見えました。ここからは、道具を揃える番です。

第1章の最後で、私はこう約束しました。「黒い画面（ターミナル）も、1コマンドずつ一緒に進めば、必ず突破できます」と。この章は、その約束を実際に果たす場所です。何も入っていないあなたのPCを、Claude Codeがちゃんと動く状態にするまでを、画面1枚ずつ確認しながら進めます。

やることは、大きく分けて4つだけです。

VS Code（コードを書くアプリ）を入れる
その中でターミナル（命令を打つ黒い画面）を開く
Claude Codeを、たった1行のコマンドで入れる
サインインして、使える状態にする

どれも「ボタンを押す」「コマンドを1行コピペする」だけの作業です。一気にやろうとせず、1つの画面が出てから次へ。それだけ守れば大丈夫です。

なお、この章のゴールはとてもシンプルです。最後にターミナルへ claude --version と打って、バージョン番号が表示されればクリア。それが「武器を手にした」合図になります。

まずVS Codeを入れる

最初の道具は、VS Codeです。これはMicrosoftが無料で配っている、文章やコードを書くためのアプリ。あなたがこれから作るサイトのファイルを開いたり、Claude Codeを動かす「作業部屋」になります。

ここで入れるもの＝VS Code：Microsoftの無料コードエディタ（文章・コードを書くアプリ）。あとで「Claude Codeが書いた変更を、目で見て確認する」のにも使います。

ブラウザで公式サイト code.visualstudio.com を開いてください。すると、大きなダウンロードボタンが見えます。下の画像のように、あなたのPCに合ったボタン（Windowsなら「Download for Windows」、Macなら「Download for Mac」）を押します。サイトが自動でPCを判別してくれるので、基本は中央の大きいボタンを押せばOKです。

スクリーンショット 2026-06-07 131234.png