※本記事はプロモーション（アフィリエイト広告）を含みます。実際に使って良かったものだけを紹介しています。
「Claude Codeを使えば、自分のホームページも作れるらしい」
そう聞いて、いざ始めようとすると——「で、何から手をつければ…？」と固まりますよね。
コードを書けない私も、まさにそうでした。
でも先に言うと、作り始める前に“4つの準備”さえ済ませれば、あとはスムーズです。
この記事では、Claude Codeでホームページを作る前に、最初に整えておくべき準備をまとめます。
なお、準備から公開までの全体の流れを先に知りたい方は、ホームページ作成から公開までの5ステップをまとめた記事もあわせてどうぞ。
この記事でわかること
- サイト制作の前に最初に整える4つの準備
- コードを書かない人がつまずかない順番
- 公開サイトだからこそ先に守るべきこと
（そもそもClaude Codeって何？という方は、まずClaude CodeとChatGPTの違いを解説した記事を読むと土台が分かります。）
なぜ“準備”から入るのか
気持ちは分かります。早く「作って！」とお願いしたい。
でも、準備をすっ飛ばすと、料金で止まったり、ファイルが散らかったり、最悪鍵（パスワード）が外に漏れるといった事故が起きます。
先に土台を整えるほうが、結局いちばん早い——これは何度かやらかして学びました。
準備①：有料プラン付きのClaudeアカウント
まず大前提。Claude Codeは無料では使えません。
月20ドル（約3,000円）程度のProプラン以上が必要です（料金は変わるので最新は公式で確認）。
「いきなり課金はちょっと…」と感じるかもしれませんが、まずはProで十分。物足りなくなってから上位プランを考えればOKです。
準備②：デスクトップアプリを入れて「Code」に切り替える
次に、Claudeのデスクトップアプリをインストールします。
プログラマーが使う“黒い画面（ターミナル）”は不要です。アプリを開いて、左上で「Code」に切り替えるだけで準備完了。
あとは日本語で「〇〇を作って」と話しかければ、AIが実際にファイルを作ってくれます。
インストールの手順そのものは、Claude Codeのインストール方法（Mac・Windows対応）で画像つきで解説しています。
準備③：サイト専用の「作業フォルダ」を1つ作る
地味ですが超重要。サイト1つにつき、専用フォルダを1つ用意します。
例えば「書類」の中に「my-site」のようなフォルダを作り、Claude Codeにはそのフォルダを開いて作業してもらいます。
こうすると、関係ないファイルを触られる心配がなく、後から見ても中身が散らかりません。「どこに何があるか分からない」を防ぐ第一歩です。
準備④：先に“安全ルール”を置いておく
ホームページは外に公開するもの。だからこそ、作り始める前に安全のルールを決めておきます。
具体的には、その作業フォルダにCLAUDE.mdというルールファイルを置き、こう書いておきます。
- APIキーやパスワードを、コードに直接書かない
- 機密情報を外部にアップロードしない
- 外部に保管するなら必ず非公開（Private）にする
この一手間で、AIが自分から“戸締まり”を意識してくれるようになります。
あわせて読みたい
【初心者向け】CLAUDE.mdの作り方｜Claude Codeに“ルールブック”を持たせる
準備④で使うCLAUDE.mdの作り方を、そのまま使えるテンプレ付きで解説しています。
Claude Codeで作ったサイトを公開する方法｜サーバーにアップする手順
準備→作成ときたら、最後は公開。サーバーとドメインを用意して世界に出すまでの手順をまとめました。
このブログで使っているサーバーについて
私自身、このブログ（ai-jissen-log.online）を ConoHa WING で運営しています。決め手は「サーバーとドメインを、まとめて1か所で用意できた」ことでした。
- WINGパックなら、サーバー契約と同時に独自ドメインも取得できる
- 別々のサービスで申し込む手間がなく、最初の設定でつまずかなかった
- 表示が速く、初心者でも管理画面で迷いにくい
- WordPressの設置が数クリックで終わる
正直、最初は「サーバーとドメイン、どこで揃えるの？」が一番の不安でした。でも結果的に、ConoHa WINGでまとめてしまうのが、初心者が公開までたどり着く一番ラクな道でした。
最初の題材は「小さく」始める
準備ができたら、いきなり大作を狙わないこと。
最初の1つは「1ページの自己紹介サイト」がおすすめです。
「自己紹介の簡単なホームページを作って」とお願いするだけ。小さく成功体験を積むほうが、結局うまく育ちます。
私の失敗談：準備せず作り始めて冷や汗
恥ずかしい話、私は最初この準備をサボりました。
フォルダも決めずにいきなり「サイト作って」と頼んだ結果、ファイルがあちこちに散らかり、どれが本番か分からなくなりました。
さらに、安全ルールを置いていなかったので、設定の中に鍵がそのまま書かれている状態に。公開直前で気づいて冷や汗をかきました。
準備の4つを先にやっておけば、どれも防げたことです。
ポイント
作り始める前に「①有料プラン ②デスクトップアプリでCode ③サイト専用フォルダ ④安全ルール（CLAUDE.md）」の4つを整える。これだけで、あとがスムーズです。
注意
ホームページは外に公開するもの。APIキーやパスワードはコードに直書きせず、外部保管は必ず非公開（Private）にしましょう。
次の一歩：AIで“作って公開する力”を市場価値に変える
準備を整えたあなたは、もう「AIをなんとなく触る人」ではありません。
AIに安全に作らせて、形にできる人です。
この“作って世に出す力”は、これからのビジネスでそのまま評価につながります。
方向は3つ——体系的に学ぶ、資格で「できる」を可視化する、AIスキルが評価される環境を選ぶ。実際に試して良かった学び方は、今後このブログで紹介していきます。
まずは4つの準備を済ませて、「1ページの自己紹介サイト」から作ってみましょう。
※本記事は、私自身が自分の環境で検証・運用している内容をまとめたものです。アプリの仕様や料金は変更される場合があるため、最新の情報は公式の案内もあわせてご確認ください。
コメント