Claude Codeは、日本語で指示するだけで、パソコンの中にホームページやランディングページのファイルを作ってくれるAIツールです。この記事では、プログラミングの知識がない私が実際にページを1枚作るまでの手順を、画面つきでお見せします。使うにはClaudeの有料プラン（Pro以上）が必要で、無料プランでは使えません。
追記：この記事は2025年6月に書いたもので、画面写真は当時のままです。そのあと変わった点が2つあります。土台として入れていた「Node.js」は必要なくなり、今はコマンド1行で入ります（当時の手順もStep1・Step2に記録として残しています）。もう1つは、ターミナルを開かずに使えるようになったことで、Claudeのデスクトップアプリの「Code」タブから始められます。公式ドキュメントのリンクも現在のものに差し替えました。
Claude Codeなら非エンジニアでもホームページが作れる理由
自分の商品やサービスを売るために、ウェブサイトやランディングページを作りたい。そう思っても、「専門の制作会社に頼むと費用が高いし、かといって自分で作るのは専門知識がなくて難しそう…」と、なかなか一歩を踏み出せずにいませんか？
かつての私も、まさにそうでした。プログラミングの知識なんて全くないですし、何から手をつけていいのかサッパリ。結局、高いお金を払って業者さんにお願いするしか選択肢がなかったのです。
でも、もし。まるで専属のプログラマーと会話するように、自然な言葉で指示するだけで、あなたのパソコン上にウェブサイトが自動で出来上がっていくとしたら、どうでしょう？
そんな夢のような話が、今や現実のものとなりました。今回ご紹介するAIツール「Claude Code」を使えば、プログラミングの知識が一切なくても、驚くほど簡単にウェブサイトを自作できてしまうんです。
この記事では、「AIコーディング」なんて言葉に馴染みがないあなたのために、Claude Codeの基本的な使い方から、実際にランディングページをサクッと立ち上げるまでの全手順を、私が試した実体験をもとに包み隠さずお伝えします。
この記事を読み終える頃には、あなたは「ウェブサイト作りは難しくてお金がかかる」という古い常識から解放され、自分の手でアイデアを形にするワクワク感を手に入れているはずです。
「Claude Code」とは？ ChatGPTや通常のClaudeとの決定的な違い
まるで専属プログラマー？あなたのパソコンを直接操作するAI
「AIにコードを書いてもらう」と聞くと、ChatGPTのようなチャット画面を思い浮かべるかもしれません。AIが書いたコードをコピーして、自分でファイルに貼り付けて…といった作業が必要でしたよね。
しかし、この「Claude Code」が画期的なのは、あなたのパソコンの中にあるファイルを直接、作成したり書き換えたりできる点にあります。
これは、開発者がよく使う「ターミナル」という黒い画面（ご安心ください、難しい操作は不要です！）上でClaudeを動かすことで実現しています。あなたが「こんなサイトを作って」と日本語でお願いするだけで、Claude Codeがあなたの指示を理解し、パソコン内に必要なHTMLファイルやCSSファイルを自動で生成してくれるのです。（2026年9月時点では、Claudeのデスクトップアプリの「Code」タブを使えば、ターミナルを開かずに同じことができます。くわしくは記事の後半でご説明します。）
まさしく、あなたのパソコンの中に、専属のプログラマーがやってきて作業をしてくれるような感覚です。
これまでのAIと何が違うの？
この「パソコン上のファイルを直接操作できる」という点が、ChatGPTやGemini、そしてWeb版のClaudeといった、これまでのAIチャットツールとの決定的な違いです。
今までのAIは、あくまでWebブラウザの中で完結していました。コードを生成することはできても、それをあなたのパソコンに保存したり、既存のファイルを修正したりするには、必ず「あなた自身」が手作業でコピー＆ペーストをする必要があったのです。
その一手間が、Claude Codeでは一切不要になります。「この文章を目立たせて」「ボタンの色を変えて」といった指示を出すだけで、AIが自動でファイルを更新してくれるので、あなたはただその結果を確認するだけ。このスピード感と手軽さは、一度体験すると元には戻れないほど快適ですよ。
どうすれば使えるの？利用条件について
「そんなにすごいツールなら、利用料も高いんじゃないの？」と心配になるかもしれませんが、その点もご安心ください。
Claude Codeは、月額20ドルのClaude Proプランに登録している方であれば、追加料金なしで利用できます。これは2026年9月時点でも変わりません。ただし、ひとつ大事な条件があります。Claude Codeは無料プランでは使えません。Pro・Max・Team・Enterpriseという有料プランのいずれかに入っていることが必要で、この4つにはすべて含まれています。つまり、いちばん安いProプランで十分です。
日本円だといくらなの？という点も書いておきます。日本のApp StoreからClaudeのアプリで申し込む場合、Proプランは月3,000円、年払いなら年35,000円です。上位のMaxプランは月20,000円と月40,000円の2種類があります（いずれも2026年9月時点）。ただし申し込む場所や時期によって金額が変わることがありますので、最新の金額は公式ページでご確認ください。
以前は、使った分だけ料金がかかるAPI課金や、もっと高額なプランでしか利用できなかったため、正直なところ、私たちのような非エンジニアには少し敷居が高いツールでした。しかし、Proプランの範囲内で使えるようになったことで、グッと身近な存在になりました。私が試した2025年6月当時は、（常識の範囲内での利用制限はありますが）使い放題に近い感覚で使えていました。もっとも、使用量には上限があります。
この「利用制限」について、2026年9月時点でわかっていることを補足しておきます。使いすぎて上限に達しても、5時間ごとの区切りでまた使えるようになります。有料プランには、これに加えて週ごとの上限もあります。ウェブ版・デスクトップアプリ・スマホアプリ・Claude Codeの利用は、すべて同じ枠から消費されます。「何回まで」という決まった回数は公表されていません。残りの量は、ターミナルで /usage と打つか、Claudeの設定＞使用状況でいつでも確認できます。
【実践レビュー】Claude Codeで本当にホームページ（ウェブサイト）は作れるのか？
百聞は一見に如かず。このツールがどれほどパワフルなのか、私が実際に試した結果をそのままお見せするのが一番早いでしょう。ウェブサイト作成の前に、まずはClaude Codeの能力を試すために、簡単なゲームを作ってもらうことにしました。
まずは小手調べ！5分でドラクエ風ゲームを作ってみた
ターミナルを開き、Claude Codeを立ち上げて、私はこう頼んでみました。
「ドラクエ風のゲームを作って」
本当に、たったこれだけです。すると、Claudeは私にいくつか質問をしながら、数分でゲームのファイルをパソコン上に作り上げてしまいました。
完成したゲームは、スライムやオークといった敵と戦い、経験値を得てレベルアップしていく、昔ながらのRPG。もちろん、キャラクターが画面上を動き回るような複雑なものではありませんが、「攻撃」「呪文」「道具」といったコマンドが機能する、しっかり遊べるゲームが爆速で完成したのには驚きました。
さらにすごいのは、ここからです。少し遊んでみて、「プレイヤーの攻撃力がちょっと弱いな…」と感じた私は、再びClaude Codeにこう話しかけました。
「プレイヤーの攻撃力をもっと強くしてください」
すると、Claude Codeは即座にゲームのプログラム（game.jsというファイル）を解析し、攻撃力を設定している箇所を特定。自動でその数値を書き換えてくれたのです。
結果、リロードしたゲーム画面では、主人公の攻撃力が大幅にアップ！サクサク敵を倒せるようになりました。コードの中身なんて一切見ていません。ただ日本語でお願いしただけです。この体験を通して、「これはウェブサイト制作にも間違いなく使える！」と確信しました。
本番！たった1つの指示で本格的なランディングページを作成
ゲームでウォーミングアップは完了。いよいよ本番のランディングページ（LP）制作です。
今度は、あらかじめ用意しておいたLPの原稿（テキスト）をClaude Codeに渡し、「この内容でランディングページを作って」と、またもや丸投げしてみました。
すると、Claude Codeはテキパキと作業を開始。index.html（ページの骨格）、style.css（デザイン）、script.js（動き）といったウェブサイトに必要なファイルを次々と私のパソコン上に作成していきます。
そして、ものの数分で完成したのがこちらです。
どうでしょう？見出しやボタン、さらにはメールアドレスを入力させるポップアップまで、すべて自動で実装されています。もちろん、このままではデザイン的に少し寂しいですが、ゼロからLPの骨格が数分でできてしまったのは、衝撃的としか言いようがありません。
会話するだけでデザイン修正や機能追加も自由自在
ここからが、Claude Codeの真骨頂です。完成したLPを見ながら、気になるところをどんどん修正していきます。ここでもプログラミングの知識は一切不要。すべて日本語での「会話」です。
私：「デスクトップで表示したとき、上の余白が広すぎるので修正して」
Claude Code：「承知しました。CSSファイルを修正します」
このやりとりだけで、ヘッダー部分の余白がキュッと引き締まり、より見やすいデザインになりました。
私：「このフォームを、私が使ってるメルマガシステムの埋め込みコードに差し替えて」
Claude Code：「承知しました。HTMLファイルを修正します」
これで、実際のメルマガリストに登録される、「本当に使える」フォームが完成です。
その他にも、
- プライバシーポリシーや特商法ページのリンクを追加
- アクセス解析用のGoogleタグマネージャーのコードを埋め込み
といった、ビジネスでウェブサイトを運営する上で必須の作業も、すべて会話ベースで依頼するだけで完了してしまいました。
コードを一行も書くことなく、ただAIと対話を続けるだけで、実用的なランディングページが完成してしまったのです。
いちばん簡単な始め方：デスクトップアプリの「Code」タブ
ここまでは、ターミナルでの手順をご紹介してきました。私が2025年6月に試したのがターミナル版だったからです。2026年9月時点では入口が増えていて、ターミナルを一度も開かずにClaude Codeを使うこともできます。ここから先は私が試した体験ではなく、公式の案内をもとにした説明ですが、「ターミナルがどうしても苦手」という方の助けになると思うのでまとめておきます。
デスクトップアプリの「Code」タブ
Claudeのデスクトップアプリを入れると、画面の上のほうに「Chat」「Cowork」「Code」という3つのタブが並びます。このうちClaude Codeにあたるのが「Code」タブです。ここでフォルダを選んで日本語で指示すれば、ターミナルを開かずにファイルを作ってもらえます。アプリの中にClaude Codeが入っているので、Node.jsもCLIも別に用意する必要はありません。ただし「Code」タブは有料プランでないと使えません。無料プランのまま押すと、アップグレードをうながす案内が出ます。
同じアプリにある「Cowork」は別の機能です
同じデスクトップアプリの中に「Cowork」というタブもありますが、これはClaude Codeとは別の機能です。Coworkは隔離された仮想マシンの中で、自分とは別に動いてくれる調べものや資料作り向けの機能。Codeは自分のパソコンのファイルを直接いじってもらうコーディング向けの機能。こういう住み分けになっています。なお、Coworkも無料プランでは使えません。
ブラウザからも使えますが、条件があります
claude.ai/code を開けば、ブラウザからもClaude Codeを使えます。ただし2026年9月時点では「研究プレビュー版」という位置づけで、対象はPro・Max・Teamなどの有料プランです。しかも動く場所は自分のパソコンではなくAnthropicが管理するクラウドで、GitHubというサービスにコードを置くことが前提になります。作ったファイルを自分のパソコンに残しておきたい非エンジニアの方には、デスクトップアプリの「Code」タブか、この記事でご紹介したターミナル版のほうが向いています。
このほか、VS CodeなどのIDE（プログラミング用のアプリ）からも使えます。ProプランやMaxプランは、そちらでの利用もカバーしています。どの入口から使っても、使用量は同じ枠から消費されます。
【非エンジニア向け】Claude Codeのインストール手順を完全ガイド
「でも、インストールが難しそう…」「黒い画面に英語の文字とか、見るだけでアレルギーが…」
そう感じているあなたの気持ち、すごくよく分かります。正直に言うと、私も最初はそうでした。専門家ではない私たちが、開発者向けのツールをインストールするのは、確かに少しハードルがあります。
でも、大丈夫です。 私もあなたと同じ非エンジニアですが、分からないことは全部AIに聞きながら、無事にインストールできました。 ここでは、その時の経験を元に、専門用語を極力使わず、つまずきやすいポイントをしっかり押さえた手順を解説します。
Claude Codeの公式ドキュメントはこちら
https://code.claude.com/docs/ja/overview
↑こちらのページの内容に従ってインストールをしてみてください。（わからない点はClaudeに質問しながらインストールすることをお勧めします。私もそうしました笑）
追記（2026年9月）：公式ドキュメントの置き場所が変わり、この記事を書いた当時に貼っていたページは開けなくなりました。上のリンクは現在の入口に差し替えてあります。ターミナルを触るのが初めてという方は、ターミナルガイド（公式）から読むとやさしいです。
最初の関門「ターミナル」も怖くない！AIに聞きながら進めよう
この記事でご紹介するターミナル版を使う場合は、「ターミナル」というアプリを操作します。これはMacに最初から入っている、キーボードで命令を打ち込んでパソコンを動かすためのツールです。（2026年9月時点では、Claudeのデスクトップアプリの「Code」タブを使えば、ターミナルを開かずに始められます。くわしくは記事の後半をご覧ください。）
なんだか難しそうに見えますが、やることは基本的に公式サイトに書かれている命令文（コマンド）をコピー＆ペーストするだけ。 もし途中で意味不明なメッセージが出てきても、それを丸ごとコピーして「これってどういう意味？次は何をすればいい？」と、いつものようにClaudeに質問すれば、丁寧に教えてくれます。最強の家庭教師が隣にいるようなものなので、何も怖がる必要はありません。
Step1：事前準備（Node.jsのインストール）※現在は不要
先にお知らせです（2026年9月時点）。このStep1とStep2は、私が試した2025年6月当時の手順です。その後インストールの方法が変わり、Node.jsは必要なくなりました。今はMacやLinuxなら、ターミナルに次の1行を貼り付けてEnterキーを押すだけで入ります。
curl -fsSL https://claude.ai/install.sh | bash
Homebrewを使っている方は brew install --cask claude-code でも入りますし、WindowsにはWinGetという入れ方もあります。公式のシステム要件にも、今はNode.jsは書かれていません。この方法で入れると、あとは自動で最新版に更新されていきます。
とはいえ、どこでつまずきやすいかという話はそのまま参考になりますので、ここから下は当時の記録として残しておきます。
まず、Claude Codeを動かすための土台となる「Node.js」というものをインストールする必要がありました。（「Node.jsとは何なのか？」を理解しなくてもClaude Codeを使用することは可能ですのでご安心ください。）
公式サイトからmacOS用のインストーラーをダウンロードし、画面の指示に従ってクリックしていけば完了でした。
Step2：コマンドを貼り付けてClaude Codeをインストール（当時の手順）
Node.jsの準備ができたら、いよいよClaude Code本体のインストールでした。
これも公式サイトに書かれているインストール用のコマンド（npm install -g @anthropic-ai/claude-code のような一文です）をコピーして、ターミナルに貼り付けてEnterキーを押すだけでした。
追記（2026年9月）：この npm を使う入れ方も残っていますが、その場合はNode.js 22以上が必要です。今の主流はStep1でご紹介した1行のインストーラのほうなので、そちらで入れた方は、Step1とStep2の手順はまるごと飛ばして大丈夫です。Step3から読み進めてください。
Step3：エラーが出ても慌てない！AIを使った最強の解決方法
ここが一番の山場かもしれません。解説サイトの通りに進めても、なぜかエラーが出てしまう…。これは本当によくあることです。私も「権限がありません」といった意味のエラーが出て、一度つまづきました。
でも、ここがAI時代におけるブレークスルーポイントです。
パニックになる必要はありません。ターミナルに表示されたエラーメッセージを、そのままClaudeにコピペして「こんなエラーが出たんだけど、どうすればいい？」と聞いてみましょう。
私の場合は、「あ、それは権限の問題ですね。このコマンドを試してみてください」と、具体的な解決策を教えてくれました。提示されたコマンドを順番に試していくだけで、あれほど悩んだエラーがあっさり解決してしまったのです。
この「エラーが出たらAIに聞く」というスタイルさえ身につければ、インストールの9割は成功したも同然です。
Step4：アカウントを連携して準備完了
インストールが無事に終わったら、最後にあなたのClaudeアカウントと連携させるための認証作業を行います。
当時は、ターミナルで claude oauth というコマンドを実行すると、ブラウザが立ち上がり、認証を求める画面が表示されました。そこで許可をすると、私のClaude Proアカウントとターミナルが紐づけられ、準備が完了しました。
2026年9月時点の手順：今はもっと簡単になっています。ターミナルで claude と打つだけで、初回は自動的にログインを求められ、ブラウザで許可すれば連携が終わります。あとからアカウントを切り替えたいときは、Claude Codeを動かしたまま /login と打ちます。ターミナルのコマンドとして実行するなら claude auth login です。
ひとつだけ気をつけたい点があります。パソコンに ANTHROPIC_API_KEY という設定が残っていると、Claude Codeは有料プランではなくそちらを使って認証してしまい、プランに含まれる分ではなく、別途APIの利用料が請求されます。心当たりのない方は気にしなくて大丈夫です。
これで、あなたのパソコンはAIと対話しながら開発を進められる、最強のマシンになりました！
まとめ：AIを相棒に、自分の手でビジネスを加速させよう
さて、ここまでClaude Codeの魅力と、具体的な活用法について解説してきました。いかがでしたでしょうか。少し未来が、すぐそこまで来ている感覚を味わっていただけたのではないでしょうか。
専門家ではない私たちが、なぜ今、このツールに注目すべきなのか。最後に、その理由を3つのメリットとしてまとめておきたいと思います。
- 圧倒的な時間とコストの削減
これまでウェブサイト制作を外部に依頼すれば数十万円、自分で学ぼうとすれば数ヶ月の学習時間が必要でした。Claude Codeは、その両方を劇的に圧縮します。「こんなサイトが欲しい」というアイデアを、わずか数分、数時間で形にできるのです。これは、ビジネスのスピードを大きく左右する、とてつもないアドバンテージです。 - コピー＆ペーストの手間からの完全な解放
地味ながら、これがClaude Codeを唯一無二の存在にしている最大のメリットかもしれません。AIが書いたコードをいちいちコピーし、正しい場所に貼り付ける作業は、知識がないと本当に骨が折れます。その面倒な作業をAIがすべて代行してくれることで、あなたは本来集中すべき「何を伝えたいか」「どんなデザインにしたいか」という、より本質的な部分に思考を使えるようになります。 - 「とりあえず作って、話しながら直す」という新しい開発スタイル
完璧な設計図なんて、最初からなくてもいいんです。まずはAIに雑に作ってもらい、それを見ながら「ああでもない、こうでもない」と対話を繰り返して改善していく。この試行錯誤のサイクルを、驚くべき速さで回せるのがClaude Codeの強みです。失敗を恐れずに、何度でも挑戦できる環境が手に入ります。
確かに、インストールという最初のステップには、少しだけ勇気が必要かもしれません。しかし、そこさえ乗り越えてしまえば、あなたのビジネスの可能性を大きく広げる、本当に頼もしい「AI相棒」が手に入ります。
もはや、プログラミングの知識がないという理由だけで、あなたの素晴らしいアイデアや商品を世に出すのを諦める必要は一切ありません。
ぜひ、この新しい時代の武器を手に取って、あなたの手で、あなたのビジネスを動かしていく楽しさを味わってみてください。この記事が、その最初の一歩を踏み出すきっかけになれば、これほど嬉しいことはありません。
最後に、大事なことをもう一度だけ。Claude Codeは無料プランでは使えません。2026年9月時点では、Pro・Max・Team・Enterpriseのいずれかの有料プランが必要です。いちばん安いProプランは月20ドル、日本のApp Storeからの申し込みだと月3,000円です。申し込む場所や時期によって金額が変わることがありますので、最新の金額は公式ページでご確認ください。まずはご自身のプランを確かめて、ターミナル版とデスクトップアプリの「Code」タブの、始めやすいほうから試してみてくださいね。
編集後記：（筆者による追記）
私自身は非エンジニアなのでコードは一切書けません。Macのターミナルも普段使うことはないので、今回Claude Codeをインストールする際も、公式サイトのドキュメントや海外の解説YouTube動画を見たり、実際にClaudeに何度もしつこくチャットして質問をしながら、なんとかClaude Codeをインストールしてみました。（上記の工程を自分で行うのが不安な方はあえてClaude Codeを使わずに、Claudeのウェブアプリ上でClaudeにコードを書いてもらうほうが良いでしょう。）
もちろん、実際にClaude Codeをインストールした今でもClaude Codeを使いこなせているとは言えませんが、簡単なアプリやWebサイトを作ることができました。しかも、生成してくれたコードをコピペして、自分でhtmlファイルなどを作る必要もなく、Claude CodeがMac上に必要なファイルを生成してくれるので、簡単にアプリやサイトを作ることができます。
わからないことは何でもAIに聞きながら使っていけばよいですので、最近話題になっているClaude Codeを使ってみたい方は、ぜひチャレンジしてみてくださいね！
追記（2026年9月）：上の編集後記は2025年6月に書いたものです。当時は「ターミナルが不安な方は、Claude Codeを使わずにClaudeのウェブアプリでコードを書いてもらうほうがよい」と書きましたが、その後、Claudeのデスクトップアプリに「Code」タブが加わりました。こちらならターミナルを開かずに同じことができます（有料プランが必要です）。ターミナルに抵抗のある方は、この記事の後半に足した「ターミナルを使わずに始める方法も増えました」の節をご覧ください。
Claude Codeの公式ドキュメントはこちら
https://code.claude.com/docs/ja/overview
ほかにどんなAIツールがあるか、まとめて知りたい方へ
無料電子書籍「最新AIツール大全」で、私が実際に試したAIツールを目的別にまとめています。
メールアドレスをご登録いただくと、無料電子書籍と、その後のお役立ち情報・講座のご案内をメールでお届けします。
関連記事はこちら
この記事がお役に立ちましたら、下のボタンから当ブログを Google の「優先する情報源」に追加できます。
次回から Google 検索で記事を見つけやすくなります。
