📋 この記事の内容
🤖 Claude Codeとは？
Claude Codeは、Anthropic社が開発したAIコーディングアシスタントです。 「こんなウェブサイトを作って」と日本語で話しかけるだけで、 AIが自動でHTMLやCSSなどのコードを書いてくれます。
「プログラミングって難しそう…」と思っているけど、自分のサイトを持ってみたい人。 コードの書き方を覚える必要はありません。AIに指示するだけです。
従来との違い
従来のウェブサイト制作
HTML・CSS・JavaScriptを1行ずつ自分で覚えて書く。独学で数ヶ月〜数年かかることも。
Claude Codeを使う場合
「青いヘッダーのある飲食店サイトを作って」と入力するだけ。数分でサイトが完成します。
🖥️ ターミナルとは？
Claude Codeを使うには「ターミナル」というソフトを使います。 普段はマウスでアイコンをクリックしてパソコンを操作しますが、 ターミナルでは文字を入力してパソコンに命令を出します。
決まった文字をコピー&ペーストするだけです。意味を全部理解する必要はありません。 Enterキーを押すと命令が実行されます。
ターミナルを開くと、このような画面が表示されます：
← ここに文字を打ってEnterキーを押します
Windowsでターミナルを開く方法
Windowsでは「PowerShell」または「コマンドプロンプト」を使います。
方法1：スタートメニューから検索する
方法2：キーボードショートカット
powershell と入力してEnterを押す。
PowerShellが開いたらこのような画面になります：
Copyright (C) Microsoft Corporation. All rights reserved.
PS C:\Users\あなたの名前>
Macでターミナルを開く方法
方法1：Spotlight検索（おすすめ）
方法2：Finderから開く
user@MacBook-Pro:~$
以降の手順では、ここに命令を打ち込んでいきます。コピー&ペーストを活用してください。
📦 Node.jsのインストール
Claude Codeを動かすには、まずNode.js（ノードジェイエス）というソフトが必要です。 Node.jsはJavaScriptというプログラミング言語をパソコン上で動かすための実行環境です。
Pythonスクリプトを動かすのに「Python」が必要なのと同じで、 Claude CodeはNode.jsが入っていないと動きません。
インストール手順
Node.js公式サイトにアクセス
ブラウザで nodejs.org/ja を開き、「LTS（推奨版）」と書かれたボタンをクリックしてダウンロードします。
推奨版（ここをクリック）
最新版
ダウンロードしたファイルを開いてインストール
ダウンロードされた .pkg（Mac）または .msi（Windows）ファイルをダブルクリックして、画面の指示に従って「次へ」を押し続けます。
インストールできたか確認する
ターミナルを開いて、以下のコマンドを1行ずつコピー&ペーストしてEnterを押します。バージョン番号が表示されれば成功です。
① まずNode.jsのバージョンを確認：
② 次にnpmのバージョンを確認：
v22.11.0
$ npm --version
10.9.0
← このようにバージョン番号が出れば成功！
インストールが正しく完了していない可能性があります。 ターミナルを一度閉じて再度開いてから試してみてください。 それでもダメな場合はNode.jsを再インストールしてください。
⚡ Claude Codeのインストール方法
Node.jsが入ったら、次はClaude Codeをインストールします。手順通りに進めれば5分で完了します。
Step 1：インストールコマンドを実行
以下のコマンドをターミナルにコピー&ペーストして、Enterキーを押してください：
added 234 packages in 18s
found 0 vulnerabilities
✓ インストール完了
インストール中は数十秒〜数分かかることがあります。文字が流れている間はそのまま待ちましょう。 プロンプト（$）が再び表示されたら完了です。
Step 2：Anthropic APIキーを取得する
Claude Codeを使うにはAPIキーが必要です。 APIキーとは「あなたが正規のユーザーである」ことを証明するパスワードのようなものです。
Anthropicのサイトでアカウントを作成
console.anthropic.com にアクセスして、メールアドレスでサインアップします。Googleアカウントでのログインも可能です。
APIキーを発行する
ログイン後、左メニューの「API Keys」をクリックし、「+ Create Key」ボタンを押します。
キーをコピーして保存する
キー名（例：My Key）を入力して作成すると、sk-ant-... から始まる長い文字列が表示されます。この画面を閉じると二度と表示されません。必ずコピーしてメモ帳などに貼り付けて保存してください。
Step 3：Claude Codeを起動する
4つの手順に分けて説明します。ターミナルを開いたまま順番に進めてください。
まずデスクトップに移動する
ターミナルを開いた直後はホームフォルダ（C:\Users\名前\など）にいます。 ファイルをどこに保存するかは今いる場所によって変わります。 わかりやすいデスクトップを保存先にするのがおすすめです。 まず下のコマンドでデスクトップに移動します。
Windows の場合：
Mac の場合：
~/Desktop $ ← Desktop に移動できた
デスクトップに作業フォルダを作る
mkdir は「Make Directory（フォルダを作る）」の略です。 このコマンドを実行すると、デスクトップに「my-website」というフォルダが作られます。 フォルダ名は半角英数字なら何でも変えてOKです。
$ ← 何も表示されずプロンプトが戻ればOK
「my-website」という名前のフォルダがデスクトップに作られているはずです。 ここにサイトのファイルがすべて保存されます。
作ったフォルダの中に移動する
cd は「Change Directory（フォルダを移動）」の略です。 今作った my-website フォルダの中に入ります。 ここに入ってからClaude Codeを起動することで、ファイルがこのフォルダに保存されます。
~/Desktop/my-website $ ← Desktop/my-website になればOK
Claude Codeを起動する
claude と入力してEnterを押すと、Claude Codeが起動します。 初回のみ、APIキーの入力を求められます。
Welcome to Claude Code!
? Enter your Anthropic API key:
APIキーを貼り付けてEnter
先ほどメモしておいた sk-ant-... から始まるAPIキーを ターミナルに貼り付けてEnterを押します。 貼り付けても文字は表示されません（セキュリティ上の仕様）が、正しく入力されているので安心してEnterを押してください。
Windows：Ctrl + V または右クリック→「貼り付け」
Mac：⌘ + V
✓ APIキーを保存しました。次回から入力不要です。
✓ Claude Code が起動しました！
日本語で話しかけてください。
> ← ここに指示を入力します
> が表示されたらAIに話しかけられる状態です。 2回目以降はAPIキーの入力は不要で、claude を実行するだけですぐ起動します。
✨ Claude Codeの使い方｜実際にサイトを作ってみる
Claude Codeの基本的な使い方はシンプルです。日本語で指示を出すだけでサイトが完成します。
わかりました。カフェのホームページを作成します...
📝 index.html を作成中...
🎨 style.css を作成中...
✓ ファイルの作成が完了しました！
index.html をブラウザで開いて確認してみてください。
>
指示を入力してEnter
どんなサイトを作りたいか、日本語で詳しく説明します。色・レイアウト・掲載内容を具体的に書くほど、希望通りの仕上がりになります。
生成されたファイルをブラウザで確認
デスクトップの my-website フォルダを開くと index.html が入っています。そのファイルをダブルクリックするとブラウザで開いて確認できます。
修正も日本語でOK
「ボタンの色を赤にして」「フォントを大きくして」など、気になる点を伝えれば即座に修正してくれます。
作ったサイトはあなたのパソコン上にあるだけで、 他の人はまだ見ることができません。 インターネットに公開するには、次のステップが必要です。
🤔
ドメイン設定やファイルアップも
Claude Codeにお願いできる？
「サイトを作るだけでなく、公開までClaude Codeに全部やってもらえないの？」 という疑問はよくあります。結論から言うと、できることとできないことがあります。
| 作業 | Claude Codeで可能？ | 理由 |
|---|---|---|
| HTMLファイルの作成・修正 | ✅ できる | Claude Codeの得意領域 |
| ドメインのネームサーバー設定 | ❌ できない | お名前.comの画面操作が必要 |
| エックスサーバーの契約・設定 | ❌ できない | Webブラウザの画面操作が必要 |
| ファイルマネージャーでのアップ | ❌ できない | ブラウザのGUI操作が必要 |
| SFTPコマンドでのファイルアップ | ✅ できる | ターミナルのコマンド操作のため |
「Webブラウザの画面をクリックする操作」はClaude Codeには無理です。 でも「ターミナルでコマンドを打つ操作」はClaude Codeが得意です。 ドメイン設定とサーバー契約は自分でやる必要がありますが、 ファイルのアップロードはClaude Codeに任せることができます。
なぜブラウザ操作はできないの？
Claude Codeはターミナル（黒い画面）上で動くツールです。 マウスでボタンをクリックしたり、ブラウザの画面を見たりする機能を持っていません。 お名前.comやエックスサーバーの管理画面はブラウザ上のサービスなので、 残念ながら自分で操作する必要があります。
申し訳ありませんが、私はブラウザを操作する機能を
持っていないため、Webサイトへのログインや
画面上のボタン操作はできません。
ネームサーバーの設定手順をご案内しますので、
お名前.comの管理画面で設定をお願いします。
>
SFTPを使えばファイルアップはお任せできる
ファイルのアップロードには「SFTP（エスエフティーピー）」という方法が使えます。 SFTPとはファイルをサーバーに送るための仕組みで、ターミナルのコマンドで操作できます。 つまり、Claude Codeに「ファイルをサーバーに送って」と頼むことができます。
SFTPでアップロードするには、エックスサーバーのログイン情報（ホスト名・ユーザー名・パスワード）を Claude Codeに伝える必要があります。 これらは大切な情報なので、他人に見られない環境で作業してください。 不安な場合は、後述するブラウザのファイルマネージャーを使う方法の方が安心です。
SFTPを使ってClaude Codeにアップロードしてもらう流れは次のとおりです：
エックスサーバーにアップロードして。
ホスト名：sv12345.xserver.ne.jp
ユーザー名：xs123456
パスワード：（メールに記載のパスワード）
アップ先：/public_html/my-website-japan.com/public_html/
了解しました。SFTPでアップロードします。
接続中... sv12345.xserver.ne.jp
✓ 接続しました
アップロード中...
✓ index.html をアップロードしました
✓ style.css をアップロードしました
✓ すべてのファイルのアップロードが完了しました！
https://my-website-japan.com にアクセスして確認してください。
>
一度SFTPの設定を伝えておけば、サイトを修正するたびに 「最新のファイルをサーバーにアップして」と言うだけで自動的にアップロードしてくれます。 ファイルマネージャーを開く手間が省けてとても便利です。
結局どちらの方法でアップすればいい？
ブラウザで操作する方法
- パスワードを入力不要
- 画面を見ながら確認できる
- 初心者に安心・安全
- 毎回ブラウザを開く手間がある
Claude Codeに任せる方法
- 「アップして」の一言でOK
- 更新が何度でも楽になる
- ログイン情報を渡す必要あり
- 慣れたら断然こちらが便利
🚀 インターネットに公開するには
作ったサイトを世界中の人が見られるようにするには、 ①レンタルサーバーの契約・②ドメインの取得・③ファイルのアップロードの3ステップが必要です。 それぞれ画面付きで詳しく解説します。
エックスサーバーを契約する
国内シェアNo.1のレンタルサーバー。申し込みから10分で使い始められます。
お名前.comでドメインを取得する
「example.com」のような独自URLを年間1,000円前後で取得できます。
ファイルをサーバーにアップロードする
Claude Codeで作ったファイルをエックスサーバーのファイルマネージャーから送信します。
① エックスサーバーの契約方法
エックスサーバーは国内最大手のレンタルサーバーです。 申し込みページにアクセスして、プランを選んで情報を入力するだけで契約できます。
個人サイトやブログなら月額990円〜のスタンダードプランで十分な性能があります。 10日間の無料お試し期間もあるので安心して申し込めます。
STEP 1：申し込みページでプランを選ぶ
エックスサーバーの公式サイトにアクセスし、「お申し込み」ボタンをクリックします。
STEP 2：アカウント情報を入力する
「Xserverアカウントの登録へ進む」をクリックすると、アカウント登録画面が表示されます。
STEP 3：支払い情報を入力する
クレジットカードまたはコンビニ払いで支払い情報を入力します。
STEP 4：確認メールを受け取る
以下の情報でサーバーをご利用いただけます。
サーバーID： xs123456
ログインURL： https://www.xserver.ne.jp/login
FTPホスト名： sv12345.xserver.ne.jp
※ログイン情報は大切に保管してください。
メールに記載されているIDとパスワードでログインできます。次はドメインを取得します。
② お名前.comでドメインを取得する
ドメインとは example.com のような、サイトのURL（住所）のことです。 ここでは国内最大手のドメイン登録サービス「お名前.com」での取得方法を解説します。
.com（約1,500円/年）が最もポピュラーで信頼感があります。 .net や .jp も人気です。 サイト名や自分の名前に関連する短い文字列を選びましょう。
STEP 1：ドメイン名を検索する
お名前.comのトップページで取得したいドメイン名を入力して検索します。
STEP 2：取得するドメインを選ぶ
検索結果が表示されます。取得可能なドメインにチェックを入れてカートに追加します。
STEP 3：会員登録・お支払いをする
初めての方はアカウント登録が必要です。メールアドレスとパスワードを入力して登録後、支払い情報を入力します。
STEP 4：取得したドメインをエックスサーバーに設定する
ドメインを取得したら、エックスサーバーの管理画面からドメインを設定（紐付け）します。 お名前.com側では「ネームサーバー」をエックスサーバーのものに変更します。
ns1.xserver.ne.jp ／ ns2.xserver.ne.jp
設定後すぐには反映されません。翌日になってからサイトにアクセスして確認しましょう。
③ ファイルをエックスサーバーにアップロードする
エックスサーバーにはファイルマネージャーという機能があり、 ブラウザ上でファイルのアップロードができます。FTPソフトは不要です。
STEP 1：サーバーパネルにログインする
契約完了メールに記載されているIDとパスワードでサーバーパネルにログインします。
STEP 2：ファイルマネージャーを開く
サーバーパネルのトップページから「ファイルマネージャー」をクリックします。
マネージャー
STEP 3：public_html フォルダを開く
ファイルマネージャーが開いたら、左側のフォルダ一覧から ドメイン名 → public_html の順にクリックして開きます。ここがサイトの公開フォルダです。
ここにファイルをアップロードします
STEP 4：ファイルをアップロードする
「アップロード」ボタンをクリックして、デスクトップの my-website フォルダの中にある index.html などのファイルを選択します。
STEP 5：ブラウザで確認して完成！
スマホやほかのパソコンからURLにアクセスして、サイトが表示されることを確認しましょう。
🏆 おすすめレンタルサーバー比較
初心者がClaude Codeで作ったサイトを公開するのにおすすめのサーバーを比較しました。
| サービス | 月額料金 | WordPress | おすすめ度 |
|---|---|---|---|
| エックスサーバー | 990円〜 | ◎ 簡単導入 | ★★★★★ |
| ConoHa WING | 660円〜 | ◎ 自動設定 | ★★★★★ |
| さくらインターネット | 524円〜 | ○ 対応 | ★★★★☆ |
| ロリポップ | 220円〜 | ○ 対応 | ★★★★☆ |
国内最大手で信頼性・安定性が高い。WordPressのインストールも管理画面から数クリックで完了。 困ったときのサポートが手厚く、初心者に最もおすすめ。
エックスサーバーを見る →GMOグループ運営の高速サーバー。「WINGパック」ならドメイン取得からWordPress設定まで まとめて完結できるのが人気の理由。価格も業界最安クラス。
ConoHa WINGを見る →よくある質問
今日から始められます
Claude Codeでサイトを作り、レンタルサーバーで公開する。
難しいプログラミング知識は不要です。今日の午後には公開できます。
