ロリポップ！レンタルサーバーの「AIエージェント Skills」を使うと、Claude Code、Cursor、Gemini CLIなどのAIコーディングエージェントにURLを送り「公開して」と伝えるだけで、AIがサイト作成からロリポップへのアップロードまでを全自動で完了します。
専門的に見える機能ですが、最初の設定ポイントさえ押さえれば、初心者の方でも試しやすいのが魅力です。この記事では、初めて「AIエージェント Skills」を使ってみた手順をもとに、準備するもの、設定の流れ、実際に公開するまでの操作をやさしくまとめました。
＼「AIエージェント Skills」は、次のような方におすすめです／
- サイト制作の時間がとれない
- 制作プロセスを効率化したい
- 予算をなるべく抑えたい
この機会にぜひご活用ください。
設定の流れ
全体の流れはシンプルで、次の3ステップで進みます。
- ロリポップ！レンタルサーバーに申し込む
- 使用するAIエージェントを準備する
- AIエージェントに指示を伝えて公開する
人が行うのは主に最初の準備と必要情報の入力で、実際のファイル作成やアップロード作業はAIエージェント側が進めてくれます。
FTPソフトを立ち上げて手動アップロードする従来の流れと比べると、公開までのハードルはかなり低く感じます。
「ロリポップ！レンタルサーバー」に申し込む
「AIエージェント Skills」を使うには、「ロリポップ！」のSSH機能が使えるプラン（スタンダード／ハイスピード／エンタープライズ）が必要です。SSHが使えるプランは、利用料金のページで確認いただけます。
なお、すでにスタンダードプラン以上のご契約をお持ちの方は、既存のアカウントでもご利用いただけます。
AIエージェントを準備する
ここでは使用するAIエージェントを準備します。利用できるのは、Claude Code、Cursor、Gemini CLI などのPC上でターミナルコマンドを実行できるAIコーディングエージェントです。Web版AIチャットやスマホアプリは利用できません。
なお、AIエージェントを有料で契約する必要があれば、この段階で完了しておきましょう。
本記事では、次の環境で使用した過程を解説します。
- AIエージェント：Claude code（デスクトップ版）
- PC：Mac
プライバシーの観点から、AIエージェントに入力したコードや会話を学習させない設定なども、合わせて確認しておきましょう。
AIエージェントに指示を伝える
実際に、準備したAIエージェントに指示を伝えていきましょう。
1. AIエージェントを開く
ここでは「Claude code」（デスクトップ版）を開きます。
上部の選択肢から「コード」を選択します。
2. フォルダーを選択する
セッションを開始するフォルダーを選択します。
ここで指定したフォルダーに、Claude codeが作成したサイトを構成するファイルが格納されます。
ここでは「skills」という名称のフォルダーを作成しました。
フォルダーを指定すると、Cloude codeに指示を伝えるマークが選択できるようになります。
3. 「AIエージェント Skills」で案内しているテキストをコピーして伝えます
画像の黒背景の部分のテキストをコピーして、Cloude codeに伝えます。
コピーした内容を、Claude codeの入力欄にペーストします。
Claude codeは、指定したディレクトリ内のファイルの読み取り、書き込み、実行を行う可能性があるため、行う作業に対して「一度だけ許可するか」「常に許可するか」「拒否するか」をたびたび聞かれます。常に許可するのが不安な場合には「一度だけ許可」にしておくと良いでしょう。
なお、「Fetch」とは読み込むことを意味します。他に「Run（走らせる、動かす）」「Write（書き込み）」などを聞かれます。
4. 「ロリポップ！」の契約状況を伝える
これ以降は、聞かれたことに答えていくだけです。AIエージェントと会話するように、入力欄で回答を伝えます。
「ロリポップ！」の契約が済んでいない場合には、この段階の手続きでも間に合います。
5. 「ロリポップ！」のSSH設定を行う
「ロリポップ！」のユーザー専用ページ（管理画面）から「サーバーの管理・設定」＞「SSH」をクリックしてログインします。
次の画像のページが表示されたら「SSHを有効にする」をクリックします。
SSHの情報が表示されたら、完了です。
6. SSH情報を伝える
Claud codeからSSHの情報を聞かれるため、順番に答えていきます。
＜SSHサーバーのホスト名＞
「ロリポップ！」のユーザー専用ページ（管理画面）から「サーバーの管理・設定」＞「SSH」に表示される「サーバー」の情報を回答します。
＜SSHアカウント＞
「ロリポップ！」のユーザー専用ページ（管理画面）から「サーバーの管理・設定」＞「SSH」に表示される「アカウント」の情報を回答します。
＜SSHパスワード＞
「ロリポップ！」のユーザー専用ページ（管理画面）から「サーバーの管理・設定」＞「SSH」に表示される「パスワード」の情報を回答します。
Claude code上で「セットアップ完了です」と表示されたら、SSH接続は成功です。
6. 作りたいサイトの概要を伝える
続いてClaude codeから、「デプロイしたいWebサイトやアプリがあれば、お気軽にどうぞ！」と聞かれるため、次の画像を参考に作成したいサイトの概要を入力します。
後からAIエージェントに更新・編集も指示できるため、まずはシンプルなサイトの公開を試してみてください。
7. デプロイ先のフォルダを指定する
Claude codeでLPの作成が完了すると、デプロイ先のフォルダ名を聞かれます。
デプロイとは、ファイルをサーバー上に配置し、ブラウザで閲覧できる状態にすることを言います。
ここで指定したフォルダ名が公開されるURLになります。
フォルダを作成せずドメイン直下にすることも可能ですが、ここでは「lp」というフォルダを指定しました。
「デプロイ完了です」と表示されると、作成したサイトが閲覧できるようになっています。
公開されたサイトを確認してみよう
今回の手順で、実際に公開したサイトをご覧ください。
https://skills-test.main.jp/lp/
Claude codeに伝えた指示は「小学校入学を控えた子どもをお持ちの保護者向けに、学校の説明と入学に必要な持ち物を案内するLPを作って」のみですが、次の画像のように細かい表現が盛り込まれたサイトに仕上がりました。
「ロリポップ！FTP」を確認してみよう
通常、サイト作成の過程ではFTPでHTMLや画像ファイルをアップロードしますが、今回FTPは立ち上げていません。「ロリポップ！」のユーザー専用ページ（管理画面）にログインしたのも、SSHの設定と情報を確認したのみです。
AIエージェントに指示を伝えただけで公開されたサイトは、FTP上でどのようになっているのか確認してみましょう。
こちらはデプロイ前の「ロリポップ！FTP」の状態です。
デプロイ後、次のように表示が変わりました。
サイトを修正してみよう
今回公開されたサイトの下部にあった「学校へ電話する」ボタンを、AIエージェントを通して削除してみます。
Claude codeに以下の指示を伝えます。
次のように聞かれるため、内容を確認して許可します。
ひとこと伝えるのみで、公開されているサイトに反映されました。
https://skills-test.main.jp/lp/
このような微調整にとどまらず、大幅なリニューアルも可能です。
人の目で確認しておきたい3つのポイント
AIエージェントを使用してのサイト公開において、元に戻せる状態を作っておくこと、表示の重さにつながる画像の状態を見ておくこと、公開後の分析に必要なツール設定を済ませることといった、いくつかのポイントを押さえておくと安心です。
今回は、次の3つについて解説します。
- バックアップをとっておく
- 画像サイズを確認する
- ツール（Google analytics、Google Search Console）の設定
バックアップをとっておく
AIエージェントに指示を伝えてデプロイを許可すると、同じ名称のHTMLファイルや関連ファイルが上書きされることがあります。「前の状態に戻したい」「一部だけ差し替え前に戻したい」と思った時に備えて、公開前のバックアップを残しておくと安心です。
ロリポップでは、過去7回分のバックアップデータをダウンロードできる「7世代バックアップ」が用意されており、全プランで利用できます。また、ハイスピードプランとエンタープライズプランでは「自動バックアップ」に対応しています。
初めて試す段階では、いきなり本番の重要ページを更新するよりも、別フォルダにテスト用ページを作るか、事前にバックアップを確保してから進めると安心です。特に既存サイトを修正する場合は、「公開前の状態を戻せるか」を先に確認しておくと、心理的なハードルも下がります。
画像サイズを確認する
AIエージェントが画像を生成したり、こちらが用意した画像を配置したりすると、見た目は問題なくてもファイルサイズが大きいまま公開されることがあります。画像が重いと、ページの表示が遅くなり、スマートフォンでの閲覧にも影響しやすくなります。サイトの公開後は、使われている画像を一度チェックしておくと安心です。
確認したいポイントは、画像の表示サイズが不自然に大きすぎないか、必要以上に高解像度の画像を使っていないか、スマホ表示で崩れていないかといった点です。AIが自動で配置した画像は、文章やレイアウトには合っていても、容量や縦横比まで最適とは限りません。公開したURLを実際にスマホとPCの両方で開き、読み込みの重さや見切れがないかを見ておくと、公開後のトラブルを防ぎやすくなります。
ツールの設定
サイトを公開したあとにアクセス状況や検索流入を確認していく場合は、「Google Analytics」や「Google Search Console」の設定も早めに済ませておくと安心です。
公開直後に設定を済ませておくことで、データが早く蓄積されるようになり分析にも役立ちます。
旧型のGoogleアナリティクスは「ユニバーサルアナリティクス（UA）」と呼ばれ、2023年7月をもってデータ取得が終了しました。現在提供されている新型のGoogleアナリティクスは「Googleアナリティクス4 プロパティ（GA4）」と[…]
ブログを運営していく上で欠かせないことは、日々記事を更新するだけではありません。公開した記事をさらに良いものにするために改善を行うこと、そして改善点を具体的に知るためにブログの分析を行うことも欠かせないのです。分析を行うためのツー[…]
初めて「AIエージェントSkills」を使用して、サイト公開にかかった時間は？
今回は本記事に掲載するキャプチャを撮りながら進めたり、Claude codeから聞かれる英文を翻訳しながらの操作になりましたが、サイト公開までにかかった時間はおよそ20分でした。
時間がかかったのは、サイト制作そのものよりも最初の環境の準備と情報の確認の部分です。一方で、準備が終わった後はかなりスムーズでした。
作りたいサイトの概要を伝えた後は、AIエージェントがファイル作成とアップロードを進めてくれたため、従来のようにHTMLや画像ファイルを自分でFTPアップロードする手間はありませんでした。
さらに一度セットアップが済めば、次回以降は最初の準備にかかる時間を短縮できます。
「新しいページを作る」「文言を修正する」といった更新作業を、より短時間で進められるでしょう。
まずはシンプルなLPや簡単な案内ページで試して、使い方のコツをつかんでいただけたら嬉しいです。この機会に、ぜひご活用ください。
ChatGPTやClaudeなどの生成AIサービスは、学習データや回答生成のためにWebサイトを巡回するクローラーを稼働させています。このAIクローラーへの対応は、サイト運営者によって受け入れるか拒否したいか意見が分かれるところです。[…]
