Codex（OpenAI）を利用する場合については、下記のページを参照ください。
目次
AIでサイトを作って公開するまで
アップロードスキルはベータ版です。ご利用の環境（AIエージェントやモデルの組み合わせなど）によっては、うまく動かない可能性があります。
AIエージェントに話しかけるだけで、Webサイトの見た目やページ構成をつくることができます。ただ、できあがったサイトを実際にインターネットへ公開するには、サーバーへファイルを送り、正しく表示されるか確認する、という作業が別に必要です。
この記事では、AIエージェント「Claude Code（クロードコード）」で小さなコーヒーショップのサイトをつくり、それをさくらのレンタルサーバーで公開するところまでを、ひと続きの流れとしてご紹介します。次の順で進みます。
- Claude Code を用意する
- プロンプトでサイトをつくる
- ブラウザで表示を確認する
- ドメインとSSLを設定する
- アップロードスキルを読み込む
- 最初に、利用シーンを聞かれます
- 準備ガイドを確認する
- 環境の確認は自動で行われます
- SSH公開鍵を用意する
- 接続情報を伝える
- 公開する
- 修正して、もう一度公開する
以下の見出しには、この順番と対応する「Step」の番号を振っています。「1つのドメインに複数のサイトを置く」以降は、必要になったときに読む補足です。
公開の部分で使う「レンタルサーバーSkills（アップロードスキル）」は、AIエージェントに一連の作業手順を渡す仕組みです。読み込ませると、AIエージェントがさくらのレンタルサーバーへの接続・ファイル転送・公開後の表示確認までを、決められた手順で進めます。
なお、アップロードスキルは現在、ベータ版として提供しています。AIエージェントやモデルの種類・バージョンは今後も増えていき、その組み合わせや利用環境もさまざまなため、すべての組み合わせを検証しきれていません。お使いの環境によっては、手順が一部省略されたり、案内の表現がこの記事と異なったりすることがあります。うまくいかないときは、後半の「よくある質問」もご覧ください。ベータ版のため、意図しない動作をする可能性があります。AIエージェントが示す接続内容（アカウント名・ドメイン・転送先など）は、接続する前によく確認してください。すでにサイトや大切なファイルがあるフォルダーへアップロードする場合は、あらかじめバックアップを取っておくことをおすすめします。
なお、業種に合わせてしっかり作り込んだサイトを用意したい場合は、専用の「サイト作成スキル」を使う方法もあります（「サイト作成スキル」でサイトを開設する流れ：デザイン確認から動作確認まで）。この記事では、まず一番手軽な「プロンプトで依頼する」方法で進めます。
用意するもの
- さくらのレンタルサーバー（スタンダードプラン以上）：ファイル転送にSSHという接続方式を使うため、SSH接続に対応したプランが必要です。スタンダードプラン以上が対応しています。
- Claude Code（有料プラン）：Claude Codeは有料プランでなければ、コーディングやスキルの実行そのものができません。 この記事のようにアップロードスキルを実行するには、有料プランへの登録が必要です。
- Node.js（ノードジェイエス）：ファイル転送に使う土台のソフトです。バージョン20.19以上、または22.12以上が必要です。入っていない場合は、あとの「環境の確認は自動で行われます」で案内があります。
- 公開するドメインと、無料SSLの設定：さくらインターネットの初期ドメイン（契約時に発行される「〇〇.sakura.ne.jp」）でも、独自ドメインでも公開できます。設定は「ドメインとSSLを設定する」で行います。
- 上位モデル・思考レベル「中」以上の設定：このスキルは手順が長く複雑なため、Claude Codeの中でも上位のモデルを、思考レベル「中」以上に設定してお使いください。下位モデルや低い思考レベルでは、手順の一部が省略されるなど正しく動作しない場合があり、動作を保証できません。 どのモデル・思考レベルが上位にあたるかはClaude Codeの更新にあわせて変わるため、そのときに使える最も上位のものを選んでください。執筆時点（2026年9月）では、Sonnet 5（思考レベル「中」）以上でこの記事の手順を確認しています。
Step 1. Claude Code を用意する
Claude Code は、Anthropic（アンソロピック）社が提供するコード生成向けのAIエージェントです。下記の公式ページから、Windows版・Mac版をダウンロードできます。
コードの生成はブラウザ版でも行えますが、この記事のようにパソコン上のフォルダやファイルを直接扱う作業には、アプリ版が向いています。アプリを開いたら、左メニューから「Code」モードを選びます。モデルと思考レベルは、「用意するもの」で説明した基準（上位モデル・思考レベル「中」以上）に設定してから、次に進んでください。
Step 2. プロンプトでサイトをつくる
いきなり「サイトを作って」と頼む前に、まずはどんなサイトにするかを相談し、指示文（プロンプト）を用意します。この指示文の質でサイトの仕上がりが大きく変わるため、ここで方向性を固めます。見栄えのよいサイトになりやすいよう、Tailwind CSS というスタイルの仕組みを使うよう伝えるのがポイントです。
プロンプト
シックで落ち着いたコーヒーショップのサイトを作るためのプロンプトを作成して。 スタイルには Tailwind CSS を使って。
指示文ができると、ページの構成・配色・デザインの方針が示されるので、イメージに合うところまで調整します。固まったら、その指示文で完成イメージの表示を依頼し、希望どおりになるまで調整を繰り返します。
指示文と完成イメージが固まったら、サイトの作成を依頼します。作成が終わると、Claude Code がプレビューを表示します。
このように、指示文だけでも一からサイトをつくることができます。一方で、業種に合ったデザインや構成、配色パターンの比較検討、お問い合わせフォームまで含めて作り込みたい場合は、「サイト作成スキル」を使う方法があります（「サイト作成スキル」でサイトを開設する流れ：デザイン確認から動作確認まで）。
Step 3. ブラウザで表示を確認する
Claude Code の中でもサイトを確認できますが、ブラウザで開くと全体像をつかみやすくなります。「ブラウザでプレビューしたい」と伝えると、確認用のURLが案内されるので、ブラウザで開いて確認します。
プロンプト
ブラウザでプレビューしたい
内容や見た目で直したいところがあれば、この段階で伝えて調整します。ここで確認しているのはパソコン内での表示で、インターネットにはまだ公開されていません。
Step 4. ドメインとSSLを設定する
サイトができたら、公開先のドメインと、通信を暗号化するSSLを設定します。サーバーへ接続するための「SSH公開鍵」も必要ですが、こちらは次のアップロードスキルの手順の中で用意します。
ドメインを設定する
さくらのレンタルサーバーのコントロールパネルを開き、左メニューの「ドメイン/SSL」→「ドメイン/SSL」と進みます。画面右側の「ドメイン新規追加」をクリックします。
公開に使うドメインは、お持ちの独自ドメインでも、さくらインターネットのサブドメイン（初期ドメインのもとに作る「任意の名前.〇〇.sakura.ne.jp」）でも構いません。どちらでも、このあとの手順は同じです。独自ドメインを追加する手順は、さくらインターネットのヘルプ「ドメインを設定したい」（https://help.sakura.ad.jp/purpose_beginner/2589/）をご覧ください。以降の画面は、サブドメインを追加した例です。さくらインターネットのサブドメインを使う場合は、別途ドメイン費用はかかりません。詳細は、さくらインターネットのヘルプ「さくらインターネットのサブドメインを設定したい」（こちら）をご覧ください。
SSLを設定する
追加したドメインに、通信を暗号化するSSLを設定します。追加したドメインの「設定」→「基本設定」から設定画面を開き、SSLを利用する設定にして保存します。
しばらくすると、対象のドメインに「共有SSL」などSSLの種類が表示されます。無料SSL（Let's Encrypt）について詳しくは、さくらインターネットのヘルプ「無料SSL（Let's Encrypt）を設定したい」（https://help.sakura.ad.jp/rs/2153/）をご覧ください。
Step 5. アップロードスキルを読み込む
準備ができたら、アップロードスキルをClaude Codeに読み込ませます。スキルは、次のzipファイルで配布しています。
スキルのダウンロード
アップロードスキル（zipファイル）
sakura-rental-server-upload-skills_latest.zip（常に最新版）
Claude Codeに次のように伝えると、ダウンロードから読み込みまでをAIエージェントが行います。
プロンプト
次のURLからzipファイルをダウンロードし、~/.claude/skills/sakura-rental-server-upload-skills/ に 前のファイルが残っていたら削除して置き換えて、スキルとして読み込んで： https://rs-vps.sakuraweb.com/ai-skills/releases/sakura-rental-server-upload-skills_latest.zip
~/.claude/skills/は、Claude Codeがスキルとして自動的に認識する専用の場所です。ここに置いておくと、次回以降は「アップロードスキルを使って」のように伝えるだけで、URLを伝え直さずに再利用できます。「アップロードして」「デプロイして」のどちらの言い方でも、同じスキルが動きます。サイトの登録情報（アカウント名やSSH鍵の場所など）はスキル本体とは別の場所に保存される仕組みになっているため、スキル本体を新しいバージョンに置き換えても、登録済みのサイト情報が消えることはありません。
読み込むと、AIエージェントはスキルの手順に沿って進め始めます。まず「今回のご利用はどれに近いですか？」と利用シーンを尋ねられるので、初めて公開する場合は「初めての利用」と答えます。続けて開始前の案内が表示され、そのままアップロード準備ガイドの表示に進みます（詳しくは次項以降で説明します）。
まずは表示されたガイドの内容を確認してください。 ドメインとSSLの設定、SSH公開鍵の登録など、公開に必要な準備が一通りまとまっています。もしガイドがブラウザに表示されない場合は、「ガイドを表示して」とAIエージェントに伝えてください。
AIエージェントに「Codex」を使っている場合は、スキルの渡し方や一部の手順が変わります。詳しくは別の記事（Codexでサイトを作ってさくらのレンタルサーバーで公開する ― Codex × アップロードスキル）で扱います。
Step 6. 最初に、利用シーンを聞かれます
アップロードスキルは、はじめに次の3つのうちどれに近いかを質問します。
- 初めての利用（このスキルでの公開が初めて）
- 設定済みで、同じサイトをもう一度アップロードしたい
- 設定済みだが、今回は別のサイトを新しくアップロードしたい
「1. 初めての利用」を選んだときだけ、このあと準備ガイドの表示と、接続情報の確認を最初から行います。「2」「3」を選んだ場合は、前回の設定を引き継ぐため、確認が少なくなります。初めて公開する場合は「1」を選びます。
Step 7. 準備ガイドを確認する
「初めての利用」を選ぶと、AIエージェントが「アップロード準備ガイド」をブラウザで表示します。ドメインとSSLの設定、SSH公開鍵の登録、公開前に控えておく情報など、公開に必要な準備が一通りまとまっています。
あわせて、次のような案内が表示されます。
- Node.jsが未導入・古い場合だけ、確認結果に従って導入します。
- 転送を始める前に、一度だけ転送用のライブラリを導入します。
- SSH公開鍵が必要です。なければ作成し、コントロールパネルへ登録します。秘密鍵の中身は共有しないでください。
- 公開は、接続内容を提示し「この内容で接続してよいですか？」の確認をいただいたあとにだけ行います。
まれに、パソコン内のファイル表示が制限されていて、ガイドがブラウザに自動で表示されないことがあります。その場合、保存場所のパスだけが示されることがありますが、自分でファイルを探して開くのが難しいと感じたら、無理に開こうとせず、もう一度「ガイドを表示して」と伝えてみてください。 それだけで表示されるようになることがあります。それでも表示されない場合は、案内されたテキストの内容を確認するだけで、そのまま次に進むことができます。
ガイドを確認したら、「確認しました」と伝えます。この返事をするまで、AIエージェントは次に進みません。
Step 8. 環境の確認は自動で行われます
準備ガイドの確認が済むと、AIエージェントが公開できる状態かどうかを自動で確認します。確認するのは、Node.jsのバージョンが条件を満たしているか、ファイル転送用のライブラリが入っているか、SSH接続に使う鍵があるか、といった項目です。
結果はまとめて表示され、「次のステップへ進めるか」が「はい」になっていれば、そのまま次の手順に進みます。
「いいえ」だった場合は、表示された内容に応じて対応します。よくあるのは次の2つです。
- Node.jsが見つからない、またはバージョンが古い：Node.js の公式サイトから、推奨版（20.19以上、または22.12以上）を入れ、画面を開き直してから、もう一度確認してもらいます。
- SSH接続に使う鍵が見つからない：次の「SSH公開鍵を用意する」で対応します。
Step 9. SSH公開鍵を用意する
サーバーへの接続には「公開鍵」と「秘密鍵」という、2つで1組の鍵を使います。手元に秘密鍵を置いたまま、公開鍵だけをさくらのコントロールパネルに登録します。
鍵をまだ持っていない場合は、この初期設定のステップの中でそのまま作成するのがおすすめです。 環境の確認で鍵が見つからないと、アップロードスキルが鍵の作成コマンドを案内します。実行すると ~/.ssh/sshkey という鍵が1組つくられます（すでに鍵がある場合は、上書きされず、その鍵がそのまま使われます）。さくらのコントロールパネル（左メニュー「サーバー情報」→「SSH公開鍵」）で作成することもできます。
鍵ができたら、公開鍵をコントロールパネルに登録します。左メニューの「サーバー情報」→「SSH公開鍵」→「新規追加」と進みます。
「作成済みの公開鍵を登録」を選び、公開鍵ファイル（拡張子が .pub のファイル）の中身を貼り付けて保存します。秘密鍵の中身は、AIエージェントにもチャットにも貼らないでください。
登録したら、AIエージェントに「公開鍵を登録しました」と伝えます。この返事をするまで、ファイルの転送には進みません。SSH公開鍵について詳しくは、さくらインターネットのヘルプ「SSH公開鍵認証の設定をしたい（手動で作成した公開鍵を登録）」（https://help.sakura.ad.jp/rs/2804/）をご覧ください。
Step 10. 接続情報を伝える
次に、公開先を特定するための情報を伝えます。AIエージェントから順に聞かれるので、コントロールパネルで確認しながら答えます。
- さくらのアカウント名（会員名）：確認方法はさくらインターネットのヘルプ「契約中のサービスの契約者名や会員IDを確認したい」（https://help.sakura.ad.jp/purpose_beginner/2560/）をご覧ください。
- 公開するドメインと、対応するWEB公開フォルダー：コントロールパネルの左メニュー「ドメイン/SSL」→「ドメイン/SSL」で、ドメイン名とWEB公開フォルダーが対になって表示されます。公開したいものを選んで伝えます。
- サブフォルダー（任意）：WEB公開フォルダーのもとに、さらにフォルダを分けて置きたい場合に指定します。指定すると、そのフォルダ名が公開URLの一部になります（例：
https://ドメイン/サブフォルダー名/）。1つのドメインに複数のサイトを置きたいときに使います。指定しなければ、ドメインの直下に公開されます。 - 作成したサイトのフォルダ：公開したいサイトのファイル一式が置いてある場所です。サイトをつくったチャットで「作成したサイトを保存したフォルダの場所を教えて」と聞くと教えてくれます。ビルド（配布用ファイルの書き出し）が必要なつくりのサイトでは、書き出したあとのフォルダを指定します。指定したフォルダが公開用として正しいかは、アップロードスキルが転送の直前に自動で点検し、プロジェクト全体を誤って指定しているような場合はそこで止めて知らせます。
公開URLは、AIエージェントが「ドメイン＋サブフォルダー」から候補を組み立てて提示します。表示された公開URLが正しいかを確認します。違っていれば、正しいURLを伝えます。
Step 11. 公開する
情報がそろうと、AIエージェントが接続内容をまとめて提示し、「この内容で接続してよいですか？」と確認します。
出力例
ホスト名: （アカウント名）.sakura.ne.jp アカウント: （アカウント名） WEB公開フォルダー: （WEB公開フォルダー） サブフォルダー: （サブフォルダー） 転送先: /home/（アカウント名）/（WEB公開フォルダー）（サブフォルダー） 公開URL: （組み立てられた公開URL）
内容を確認して問題なければ、その旨を伝えます。AIエージェントがファイルをサーバーへ転送します。このとき公開鍵の登録が済んでいない、または内容が正しくないと、接続に失敗した旨が伝えられます。 その場合は「Step 9. SSH公開鍵を用意する」に戻り、登録内容を確認してください（よくある原因は「よくある質問」にまとめています）。
転送が終わると、AIエージェントが公開URLを実際にブラウザで開き、次を確認します。
- トップページが表示され、本文・見出し・各セクションが出ている
- ページ内のプログラム・スタイル・主要な画像が正しく読み込まれている
- パソコンの画面幅でも、スマートフォンの画面幅でも、レイアウトが崩れていない
問題がなければ、公開は完了です。作成したコーヒーショップのサイトが、設定したドメインで表示されます。
お問い合わせフォームを設置している場合、実際にメールが届くようにする設定は、公開したあとに別途行います。手順はサイト作成スキルのチュートリアル記事（「サイト作成スキル」でサイトを開設する流れ：デザイン確認から動作確認まで）で扱っています。
Step 12. 修正して、もう一度公開する
公開後にサイトを直したくなったら、修正してから「もう一度アップロードして」と伝えます。前回との違いだけが転送されるため、更新は短時間で終わります。「利用シーンの確認」では「2. 同じサイトをもう一度アップロードしたい」にあたる進み方になり、接続情報の確認も最小限で済みます。
1つのドメインに複数のサイトを置く
接続情報でサブフォルダーを指定すると、1つのドメインのもとに複数のサイトを分けて公開することができます。
https://ドメイン/サイトA/
https://ドメイン/サイトB/別のサイトを新しく追加するときは、「利用シーンの確認」で「3. 別のサイトを新しくアップロードしたい」を選びます。アカウント名やSSH鍵は前回の設定を引き継ぎ、ドメイン・WEB公開フォルダー・サブフォルダー・サイトのフォルダだけを新しく確認します。
いま公開しているものの一覧は、AIエージェントに聞けば確認できます。サーバー上のフォルダー名と、各サイトのタイトル、更新日時が表示されます。
公開したあとにサブフォルダーの名前（＝公開URL）を変えたい場合は、サーバー上でフォルダ名を変更するのではなく、新しい名前で作り直してから公開し、古いものを削除する、という手順になります。名前だけ変えると、ページ内のプログラムや画像の参照先がずれて表示が崩れるためです。この手順もAIエージェントが案内します。
公開をやめる（サイトを削除する）
公開したサイトをサーバーから削除したいときは、「サーバーからこのサイトを削除して」と伝えます。AIエージェントが対象のフォルダと公開URLを提示し、確認のうえで削除します。削除は取り消せません。
よくある質問
Q. 「SSH 接続に失敗」「認証に失敗しました」のように表示され、公開できません。
A. 多くの場合、公開鍵の登録内容に問題があります。「Step 9. SSH公開鍵を用意する」の手順に戻り、次を確認してください。
- コントロールパネルに登録した公開鍵が、実際に使っている鍵（
.pubの拡張子のファイル）の中身と一致しているか（貼り付けが途中で切れていないか） - 公開鍵の登録自体を忘れたまま、先の手順に進んでいないか
- 複数の鍵を作ったことがある場合、今回使っている鍵とは別の鍵（古い鍵など）を登録していないか
登録内容を確認・修正したら、もう一度接続を試してもらってください。鍵を新しく作り直す必要はありません。
Q. 会話が長くなると、途中の手順を飛ばされたり、案内された通りに進まなかったりすることがあります。
A. やり取りが長くなると、AIエージェントが手順の一部を忘れてしまうことがあります。「用意するもの」で説明した通り、上位モデル・思考レベル「中」以上を使うことで、この可能性を減らせます。それでも起きた場合は、「SKILL.mdの手順に沿って、最初から（またはつまずいたステップから）進めて」ともう一度伝えてください。手順書を読み直して、正しい進め方に戻ります。
Q. アップロードの途中で使用量の上限に達し、操作できなくなりました。
A. Claude Codeはプランに応じて利用量の上限があります。上限に達した場合は、案内された時間だけ待つか、上位のプランへの切り替えをご検討ください。この記事の手順を一度に最後まで進めたい場合は、時間に余裕を持って進めることをおすすめします。
まとめ
Claude Code とアップロードスキルを使うと、指示文でサイトをつくり、さくらのレンタルサーバーへ公開するところまで、対話で進めることができます。準備として必要なのは、SSH接続に対応したプラン、Node.js、公開するドメインとSSLの設定、SSH公開鍵の登録です。公開後の修正も、直して「もう一度アップロードして」と伝えるだけで反映できます。
業種に合わせて作り込んだサイトをAIで用意する流れは、次の記事で扱っています。
AIで個人向けのブラウザゲームをつくって公開した例は、次の記事でご紹介しています。
