AIでサイトを作成 & さくらのレンタルサーバーで公開しよう

「Webサイトを作ってみたい」

そう思ったとき、少し前までの選択肢はこうでした。

・HTMLやCSSを一から勉強する
・テンプレート付きのサービスを使う
・CMS（WordPressなど）を立てる

多くのサイト構築で活用されている方法ですが、
「ちょっと試しに作ってみたい」 には、少し重たい選択でもありました。

今は「AIでサイトを作る」という選択肢がある

いまは、生成AIにこう話しかけるだけで、

・ページ構成を考え
・見た目（デザイン）を整え
・HTMLやCSSを書き出す

ところまでやってくれます。

しかも、

・プログラミング初心者でも
・デザインが苦手でも
・完成形をイメージしきれなくても

イメージを形にしてサイトを作ることができます。

注目のAIツール「Claude Code」でサイトを作ろう

ここでは具体的にAIツール「Claude Code (クロードコード)」を使ってサイトを作る手順をご紹介します。
Claude Codeは米のAIベンチャーのAnthoropic社が提供するAIツールでコード生成に強みを持っています。
作りたいサイトのイメージを伝えたり、具体的な修正内容を伝えることでサイトを作成することができます。

作ったサイトはさくらのレンタルサーバーで公開できます

作成したサイトはさくらのレンタルサーバーで公開することができます。
さくらのレンタルサーバーはスタンダートプラン以上が対応しています。

AIとさくらのレンタルサーバーを繋ぐ『Skills』について

AIが、さくらのレンタルサーバーを扱って作成したサイトをアップロードする手段として『Skills(スキルズ)』をご紹介します。
SkillsはAIに作業の手順を教える仕組みです。
さくらのレンタルサーバーSkillsを用いることで、作成したサイトをAIによって簡単にサーバーに配置することができるようになります。

まずはClaude Codeを用意しよう

それではさっそくClaude Codeのセットアップを進めていきましょう。
Claude Codeはコマンドラインツールとして提供されているツールで、コードの生成やPC上のフォルダの管理などを行うことができます。
コードの生成はブラウザ版のClaude Codeで行うこともできますが、アプリ版であるClaude Codeを使うことで直接PCのフォルダやファイルを扱うことができ、より快適にコード生成を行うことができます。

Claude Codeは下記の公式ページよりダウンロードできます。(Windows版とMac版があります。)

https://claude.com/download

※Claude Codeの無料枠では今回ご紹介するSkillsを十分に実行することはできません。
　本記事は有料プラン前提としてご紹介します。

※ファイル作成や操作などを行うため、左メニューから「Code」モードを選択してください。

サイトの作成を作成しよう

早速サイトを作成していきましょう。
作りたいサイトのイメージをまずはClaude Codeに相談しながら固めます。
下記のように相談してまずはプロンプトを作成します。
このプロンプトの質でサイトの品質が大きく変わるため、この段階で詰めていきます。
リッチなサイト作成ができるTailwind CSSを利用することを指定するのもポイントです。

シックで落ち着いたコーヒーショップを作成するプロンプトを作成して
CSSはTailwind CSSを利用して

プロンプトが生成されるのでページのセクション構成、カラーパレット、デザイン要件などを確認してイメージが合うところまで調整します。

プロンプトを作成したら、出来上がりのイメージの表示を依頼します。。
イメージが希望通りのものになるように、プロンプトの調整を繰り返すのがおすすめです。

プロンプトとイメージが固まったらサイト作成を依頼します。
作成完了するとプレビューを表示してくれます。

作成したサイトをブラウザでプレビュー(確認)しよう

Claude Code内で作成したサイトを確認することもできますが、ブラウザでプレビューすることでサイトの全体像を見ることができます。
「ブラウザでプレビューしたい」と依頼をしてみてください。
表示するためのURLを教えてくれますのでブラウザで開いて確認します。

ブラウザでプレビューしたい

(TBD)作成したサイトのURL

作成したサイトをさくらインターネットにアップロードする準備をしよう

ここからは作成したサイトをさくらインターネットのレンタルサーバーへアップロードするための準備を行っていきます。

下記の手順で説明していきます。
・レンタルサーバーSkillsの読み込み
・レンタルサーバーへの接続準備と確認
・Claude Code Desktopから作成したサイトをアップロード

レンタルサーバーでの準備

レンタルサーバーでの必要な設定を行います。

(1) ドメインを設定する

まずは公開するドメインの設定を行います。

レンタルサーバーのコントロールパネルを開いて、
左メニューから「ドメイン/SSL」- 「ドメイン/SSL」と開いて設定メニューへ移動します。
画面の右側にある「ドメイン新規追加」をクリックします。

今回の例ではさくらインターネットのサブドメインを利用する方法で進めます。

「独自ドメイン」を利用したい場合には下記のページを参考に設定してください。

ドメインを設定したい
https://help.sakura.ad.jp/purpose_beginner/2589/

(2) SSLの設定を行う

追加したドメインに対してセキュリティ対策としてSSLを設定します。
追加したドメインの「設定」-「基本設定」をクリックして設定画面を開きます。

保存後に「ドメイン/SSL」ページをリロードして、対象のドメインに「共有SSL」と付いていると完了です。

【ステップとして不要？/フォルダは自動作成してくれる可能性あり】 (3) 公開フォルダを作成する

右メニューの「Webサイト/データ」- 「ファイルマネージャー」をクリックして、ファイルマネージャーを起動します。

ファイルマネージャーの「表示アドレスへの操作」- 「フォルダ作成」を選択してサイトを配置するフォルダを作成します。
今回の例では「ai-site-test」とします。

SSLについて詳しく知りたい方は下記ページをご覧ください。

無料SSL（Let’s Encrypt）を設定したい
https://help.sakura.ad.jp/rs/2153/

(4)SSHの設定を行う

Claude Code Desktopからレンタルサーバーに接続するためのSSHの設定と確認を行います。
ここでは安全性と利便性より「公開鍵方式」を利用します。（事前に作成した鍵を使うセキュリティ認証方式です）

Windows(Windows 11)とMAC OSでの設定方法
WindowsではPowerShell、MAC OSではターミナルでの操作を前提とします。

共通手順（Windows / Mac）

ターミナルを起動します。
Windows：PowerShell (検索窓でPowerShellと入力して起動）
Mac：ターミナル
必要に応じて .ssh ディレクトリを作成します。

cd ~/.ssh

MAC OSではフォルダに権限の追加が必要になるケースがあるため、下記のコマンドを実施しておきます。

chmod 700 ~/.ssh

SSH公開鍵の作成（Windows / Mac）

公開鍵を作成します。
~/.sshのフォルダに移動します。

cd ~/.ssh

SSH鍵を作成します。

ssh-keygen -t ed25519 -f sshkey

-f sshkey は作成する鍵ファイル名の指定
パスフレーズは任意です。
パスフレーズ入力画面が表示されたら、設定するか Enter でスキップします。

~/.sshフォルダに下記のように鍵が作成されます。
sshkey （秘密鍵）
sshkey.pub （公開鍵）

公開鍵のレンタルサーバーへの設定

作成した公開鍵をレンタルサーバーへ設定します。
コントロールパネルを開いて「サーバー情報」- 「SSH公開鍵」を開いて、「新規追加」をクリックします。

「作成済みの公開鍵を登録」を選択した状態で、公開鍵を設定します。
公開鍵には先ほど生成したsshkey.pubの内容を入力します。

レンタルサーバーへのSSH接続の確認

公開鍵を設定後、下記のコマンドを実行してレンタルサーバーへの接続を確認してください。
「ユーザー名」と「初期ドメイン名」はコントロールパネル右上の赤枠の部分より確認することができます。

※WindowsはPowerShell、MAC OSはターミナルを利用してください。
※ユーザー名と初期ドメインはコントロールパネルの情報に合わせて置き換えてください。

ssh -i ~/.ssh/sshkey アカウント@初期ドメイン

例として

ssh -i ~/.ssh/sshkey XXX@XXX.sakura.ne.jp

コマンドを実行してレンタルサーバーへログインが成功すればsshの公開鍵の設定は完了です。

SSH公開鍵についての詳細情報

SSH公開鍵について、より詳しい詳細を知りたい場合は下記のページをご確認ください。

SSH公開鍵認証の設定をしたい (手動で作成した公開鍵を登録）
https://help.sakura.ad.jp/rs/2804/#heading-2

レンタルサーバーSkillsの読み込みと必要な情報の設定

実行のためにはssh, rsync (利用できない場合はscpで代用）が必要です。
環境が構築されていない場合にはSkills実行の段階でClaudeに確認してセットアップを進めてください。

レンタルサーバーレンタルサーバーSkillsを読み込んで設定します。
Claude Code Desktopで下記の入力を行います。

(TBD)本番URLに差し替え

/Users/k-uezato/ai/skills/SKILL.md のスキルを読み込んで

(TBD) 本番URLでスキル読み込み画像に差し替え

表示された内容に沿って下記を指定していきます。

アカウント名 (さくらのレンタルサーバーの会員名)
ドメイン
WEB公開フォルダ (ドメインの
作成したサイトのフォルダパス
サブフォルダ (サブフォルダを使用しない場合は指定不要）

【アカウント名】：
さくらのレンタルサーバーの会員名のことになります。
会員名の確認方法については下記をご覧ください。

https://help.sakura.ad.jp/purpose_beginner/2560/

【ドメイン & WEB公開フォルダ】
配置する「ドメイン」と対応する「WEB公開フォルダ」を指定します。
両方の情報はコントロールパネルの下記の部分より確認できます。
左メニューの「ドメイン/SSL」- 「ドメイン/SSL」を選択します。

ドメイン名とWEB公開フォルダーは対になっていますので配置したいものを選択して指定します。

【作成したサイトのフォルダパス】：
さきほど作成したサイトが置いてあるフォルダのパスになります。
フォルダパスが不明な場合は、サイトを作成したClaude Desktopのチャット画面にて「作成したサイトを保存したフォルダパスを教えて」と質問すると教えてくれます。

【サブフォルダ (任意)】：
コントロールの「ドメイン/SSL」画面で設定済みの「公開フォルダー」以下にサブフォルダを作成してサイトを配置する場合に任意で指定します。
フォルダを指定した場合にはURLにもフォルダ名がつきます。

【重要】フォルダを指定したときのURL

ドメイン名/サブフォルダ名

サブフォルダを指定することで１つのドメインに複数のサイトを配置することができるようになります。

例
ドメイン/サイトAフォルダ/サイトA.html
ドメイン/サイトBフォルダ/サイトB.html

作成したサイトをアップロード

必要な情報を渡すとClaudeがサイトをアップロードしてくれます。
サイトの修正が生じた後も「再度アップロードして」と伝えることで更新してくれます。
サイトの修正＆公開を手軽に繰り返すことができます。

アップロードしたサイトを確認する

アップロードしたサイトをブラウザで表示させて確認を行います。
転送時にClaudeが公開先のURLを教えてくれる場合もありますが、下記のお願いをすることで再度情報を教えてくれます。

公開先のURLを教えて

公開先のURLをブラウザで開くことで表示を確認することができます。

まとめ: AIで作成したサイトはさくらのレンタルサーバーで公開しよう！

AIでサイトを作成して、さくらのレンタルサーバーで公開する方法をご紹介しました。
AIでサイトを作成する技術はまだ進歩の途中ですが、シンプルやサイトやLPなどは手軽に作れる時代になりました。
今後の便利なAIツールが多数公開されていくと思います。
作成したサイトの公開はぜひさくらのレンタルサーバーをご利用ください。

下記では実践的なサイト作成のTipsをご紹介しています。
次のステップとしてご覧ください。

(TBD) 実践的なサイト作成Tipsの記事 ※作成予定