サイト作成スキルについて

サイト作成スキルはベータ版です。ご利用の環境（AIエージェントやモデルの組み合わせなど）によっては、うまく動かない可能性があります。

この記事の手順は、Claude Codeで確認したものです。 Codexで動作させる場合は、「Codexで利用する場合」の節の内容を、あらかじめご確認ください。

sakura-industry-site-builder は、さくらインターネットのユーザー（士業・医療・整体エステ・飲食宿泊・建設などの個人事業主・小規模事業者）向けに、業種特化のWebサイトをAIエージェントで開設するためのスキルです。Claude CodeとCodexに対応しています。Vite・React・Tailwind CSSを使った構成で、さくらのレンタルサーバーへのアップロードを前提にしています。

このスキルを使うと、サイトはどのような流れで開設できるのか。ここでは、Claude Codeを使った例として、架空のコンサル・士業系事務所「星野コンサルティング事務所」を例に、デザイン確認から実装・動作確認までの流れをご紹介します。具体的な手順に入る前に、あらかじめ知っておくと安心な2点に触れておきます。

なお、サイト作成スキルは現在、ベータ版として提供しています。AIエージェントやモデルの種類・バージョンは今後も増えていき、その組み合わせや利用環境もさまざまなため、すべての組み合わせを検証しきれていません。お使いの環境によっては、手順が一部省略されたり、提案や案内の表現がこの記事と異なったりすることがあります。ベータ版のため、意図しない動作をする可能性があります。作成された内容は、公開する前に必ずブラウザで確認してください。

準備しておくと進めやすいもの（必須ではありません）

サイトを開設する前に、次のようなものを用意しておくと話がスムーズに進みます。手元になくても、仮の内容のまま進めることができるので、必須ではありません。

• ロゴ・写真素材：お持ちでなければ、フリー素材や仮の画像で進められます
• 事業内容がひとことで伝わる説明：「何を」「誰に」提供しているか程度で十分です
• 強み・料金・営業時間などの情報：要件をまとめて伝える「要件入力モード」で進める場合にまとめて伝えます。「おまかせモード」で進める場合は不要です

このスキルでできること・できないこと

依頼する前に、対応してもらえる範囲を知っておくと安心です。

できること

• 業種に合ったデザイン・構成での土台作成
• お問い合わせ・予約フォームの実装（公開後、実際にメールが届くところまで）
• プライバシーポリシーページの作成
• さくらのレンタルサーバーへの公開
• 公開後の内容修正・デザイン変更の相談

ご自身で対応する部分

• 実際の文章・写真への最終的な差し替え
• 特定商取引法表記など法令面の最終確認
• メール送信設定（さくらインターネットのコントロールパネルでの操作。詳しくはStep 4・7で扱います）
• さくらのレンタルサーバー以外での公開

それでは、実際の流れを順に見ていきます。

Codexで利用する場合

サイト作成スキルは、Codexでも利用できます。この記事の手順は、Claude Codeで進めた例です。Codexでも、ヒアリング、配色とヒーローの選択、たたき台の確認、本実装、ビルドまで、同じ流れで進みます。Codexで使うときに違う点は、次のとおりです。

• スキルの読み込み方：Codexでは、URLをそのまま渡すのではなく、zipファイルをパソコンにダウンロードして展開し、そのフォルダの場所を伝える方法をおすすめします。zipファイルは、次の「サイト作成スキルを読み込む」の節のものと同じです
• 画面の確認はご自身で行います：Codexは、ブラウザを操作できないことがあります。ガイド、配色やヒーローの比較ページ、たたき台は、示されたファイルの場所や、URLを、ご自身のブラウザで開いて確認してください。完成したサイトも、PC幅と、ブラウザの幅を約375pxに狭めたスマホ幅の両方で、文字や画像のラベルが重なっていないか、読めるか、横スクロールが出ないかを、ご自身で確認します
• 許可を求められることがあります：本実装に入る前に、追加するパッケージの一覧が示され、「依存関係の追加を承認します」のように返信するよう、求められる場合があります。内容を確認して返信します
• ネットワークの制限：Codexの実行環境で、インターネットへのアクセスが制限されていると、パッケージのインストールができないことがあります。その場合は、Codexの設定で、アクセスを許可してから、もう一度進めてください
• 完了報告：画面を見られないCodexは、完了を「制約付き完成（ビルド合格・目視未確認）」として報告し、画面の確認をお願いしてきます。確認して、気になる箇所があれば、その画面のスクリーンショットを貼って、直してもらいます

Codexに読み込ませるときは、次のように伝えます。

（展開したフォルダの場所）のSKILL.mdを読み込んで、手順どおりに進めて

そのあとは、Step 1と同じように、作りたいサイトの内容を伝えます。

利用にあたっては、Codexの場合は、推論レベルを「中」以上に設定してください。

サイト作成スキルを読み込む

最初に、サイト作成スキルをClaude Codeに読み込ませます。スキルは、次のzipファイルで配布しています。

Claude Codeに次のように伝えると、ダウンロードから読み込みまでをAIエージェントが行います。

次のURLからzipファイルをダウンロードし、~/.claude/skills/sakura-industry-site-builder/ に
前のファイルが残っていたら削除して置き換えて、スキルとして読み込んで：
https://rs-vps.sakuraweb.com/ai-skills/releases/sakura-industry-site-builder_latest.zip

~/.claude/skills/は、Claude Codeがスキルとして自動的に認識する専用の場所です。ここに置いておくと、次回以降は、URLを伝え直さずに、スキルを使うことができます。

Step 1. スキルを起動する

サイトを開設したいときは、Claude Codeに次のように話しかけるだけでスキルが起動します。入力するプロンプトの例はこちらです。

小規模なコンサル・士業系事務所のコーポレートサイトを作りたい。事業者名は「星野コンサルティング事務所」、経営コンサルティング(中小企業向けの経営改善・資金調達相談)がメインで、税務・労務の相談にも対応。所在地は東京都。代表者は星野健一。要件入力モードで進めてほしい。

スキルが起動すると、まずお使いの環境の確認と、スキルからの前提説明が表示されます。実際に表示される文面はこちらです。

このスキルは さくらのレンタルサーバーに最適化して作られています（技術スタック・アップロード手順・フォームのサーバーサイド実装方針が、さくらのレンタルサーバーの仕様を前提にしています）。他のレンタルサーバーやホスティング環境では、正しく動作しない可能性があります。

このスキルでは、デザイン・レイアウト・フォームなど共通機能を備えた土台となるサイトを作成します。実際の文章・写真への差し替えやカスタマイズ、法令面の最終確認など、公開までにご自身で仕上げていただく部分が存在します。あらかじめご了承ください。

Node.jsのバージョンが一定以上（20.19以上、または22.12以上）であることも、このタイミングで自動的に確認されます。

Step 2. 配色とヒーローパターンを別々に選ぶ

このスキルは、いきなり本実装のコードを書き始めません。まず配色案を、レイアウトを含まない配色比較ページとして用意し、ブラウザ上で実際に見比べながら選ぶことができます。比較ページには、業種に合わせたおすすめの3案に加えて、「その他のパターンから選ぶ」（配色リファレンス全体から名前やIDで指定する）と「オーダーメイドで指定する」（色やブランドカラーを直接伝える）が並びます。

ここで示される配色案・ヒーローパターンは、あくまで出発点としての提案です。気に入るものがなければ、「もっと緑がかった色にしたい」「写真を大きく見せるレイアウトがいい」、あるいは「無地背景のパターンを、写真を背景に加えた形に直したい」のように伝えることで、示されたパターン以外への調整もできます。 このスキルは完成品をそのまま渡すのではなく、土台を一緒に作っていくスタンスで進みます。

今回の例では、士業・コンサル向けの「誠実コーポレート」（深いネイビー＋真鍮のアクセント）を選びました。続けて、配色を使わないワイヤーフレーム調で、ヒーローセクションのレイアウトだけを7パターンから選ぶことができます。実際の写真を用意できる場合は、写真を大きく使うパターンがおすすめとして案内されます。

配色とレイアウトが決まると、実際に組み合わせたミニヒーローが1つ作られ、最終確認できます。ミニヒーローの時点で、屋号がキャッチコピーと並ぶ大きさで見出しに入ります。

Step 3. たたき台（モックアップ）で内容を確認する

デザインの方向性が決まると、プログラム生成やビルドを必要としない「たたき台」が作られます。対応業務・料金目安・代表プロフィール・ご依頼の流れ・実績事例・よくある質問・お問い合わせフォームまで、全セクションの構成と文言をこの時点で確認することができます。ここで内容に納得してから、初めて本実装（実際に動くコード）に進む、という順序がこのスキルの特徴です。

修正したい点があれば、この段階で伝えて直します。この内容で進めてよければ「全体モックOK」または「本実装OK」と返信すると、本実装に進みます。この返信を受け取るまで、スキルは本実装を始めません。

Step 4. 本実装（Vite + React + Tailwind）

たたき台にOKを出すと、Vite・React・Tailwind CSSを使った実装に進みます。必要なパッケージの選定やインストールも含めて、ここから先はスキルに任せることができます。

料金タブの切り替え、FAQのアコーディオン、スクロール連動のフェードイン演出まで、実際に動く機能として実装されます。プライバシーポリシーページも、事業者情報を反映した内容で用意されます。

お問い合わせフォームと、メール設定の準備

この本実装で、お問い合わせフォームの見た目と入力チェック（必須項目・メール形式・文字数など）が作られます。ただし、この時点ではフォームからのメールはまだ実際には送られません。実際にメールが届く状態にする設定は、サイトを公開したあとに行います（Step 7）。

公開後の設定をスムーズに進めるため、さくらインターネットのコントロールパネルでできる準備（メールボックスの作成とDKIM設定）は、この段階で先に済ませておくことができます。手順どおりに進めれば設定できる内容なので、順番に見ていきます。

1. 送信専用のメールアドレスを新しく作る

コントロールパネルで「メール」→「メールアドレス」→「新規追加」の順に進みます。

新規追加の画面では、次の2つを入力します。

• ユーザー名：メールアドレスの左側部分を決めます（例：contact）
• パスワード：あとで使うので控えておきます

入力できたら「作成する」をクリックして完了です。

ここで1つ注意点があります。メールアドレスは、必ず「初期ドメイン」（契約時に発行された「〇〇.sakura.ne.jp」の方）に作成してください。 独自ドメイン（会社名.comなど）側に作ってしまうと、送信の際に接続エラーになります。初期ドメインは、コントロールパネル右上に表示されている文字列で確認できます。

2. 同じ初期ドメインでDKIMを設定する（迷惑メール対策）

続けて、コントロールパネルで「メール」→「メールドメイン」の順に進みます。

初期ドメインの行の「設定」から「DKIM/ARC設定」を選びます。

表示された画面で「設定する」をクリックします（最初から入力されている内容のままで問題ありません）。

設定してから反映まで、数分ほどかかることがあります。DKIMは、送ったメールが迷惑メールと誤判定されにくくするための設定です。設定しなくてもメール送信自体はできますが、より確実に届けるために設定しておくことをおすすめします。

3. 用意した情報を伝える

この2つが準備できたら、次の3点を伝えます。

• 作成したメールアドレス
• DKIMを設定できたかどうか
• お問い合わせを受け取りたいメールアドレス（特になければ、作成したメールアドレスと同じでよい）

メールボックスのパスワードは、チャットに書かないでください。 パスワードは、公開後に案内される専用ページで、ご自身がサーバー上に直接入力します（Step 7 で扱います）。

セキュリティ機能も実装しています

フォームには、事業者側で特別な設定をしなくても機能する、迷惑投稿・不正利用対策が標準で組み込まれます。

• 人の目には見えない仕組み（ハニーポット）と、同じ場所からの連続送信を一定時間ブロックする仕組みによる迷惑投稿対策（外部サービスは使用しません）
• 送信元をあらかじめ作成したメールアドレスに固定する、なりすまし送信の防止
• 入力内容が悪用されないようにする安全な処理と、文字数の上限設定
• 入力内容をその場でチェックするリアルタイムバリデーション。たとえばメールアドレスの形式が正しくない場合、赤枠とエラーメッセージがすぐに表示されます

Step 5. 実際に動かして確認する

コードができて終わりではありません。ローカルサーバーを起動し、ブラウザで実際に動かしながら確認するところまでが一連の流れです。

まずファーストビュー。ヒーロー画像には仮素材（ハッチング柄のプレースホルダー）が入った状態で表示されます。

対応業務セクションでは、スクロール連動のフェードイン演出が実際に動作し、注力分野には真鍮色のバッジが付きます。

料金目安のタブは、実際にクリックして切り替えることができます。下の例は「経営改善」に切り替え、アコーディオンも開いた状態です（見た目だけの静止画ではなく、実際にクリックして状態が変わることを確認しています）。

375px幅（スマートフォン相当）でも横スクロールなしで表示できることも確認済みです。

最後に、本番向けのビルドもエラーなく完了することを確認します。

Step 6. 画像を当てはめ、納得いくまで調整して仕上げる

仮素材が入った状態のサイトを、実際に公開できる形に仕上げていく最後のステップです。仕上げというと画像の差し替えを思い浮かべがちですが、それだけではありません。実際に動かして気になった文言やレイアウトを伝えながら、納得いくまで直していく作業も含まれます。まずは、写真の当てはめ方から見ていきます。

写真が必要な箇所は、ここまで見てきたとおり「仮素材」の状態で作られています。用意の仕方には、主に次の3つの選択肢があります。

1. 手元の写真やロゴを使う：すでにお持ちの写真・ロゴがあれば、そのまま使うことができます。
2. フリー素材を探して当てはめる：商用利用可・改変可能なフリー素材サイトから、雰囲気に合う写真を探して差し替えます。
3. 画像生成AIで用意する：ちょうどよい写真が手元になく、フリー素材でも雰囲気に合うものが見つからない場合の選択肢です。

多くの方が該当しそうな、3の「画像生成AIで用意する」場合について、もう少し詳しくご紹介します。

画像生成AI向けのプロンプトを作ってもらう

「必要な画像を生成するプロンプトを出力して」と伝えると、画像生成AIにそのまま貼り付けられるプロンプト文が用意されます。たとえばヒーロー画像（面談風景・オフィス外観イメージ）であれば、次のようなプロンプトが用意されます。

A warm, professional photo of a Japanese small business management
consultant meeting with a client in a modern, minimal office.
Soft natural window light, navy and warm neutral tones, tidy desk
with documents and a laptop, both people mid-conversation and
smiling naturally, shallow depth of field, editorial photography
style, no visible text or logos, 4:3 aspect ratio.

日本語での狙い：ネイビー基調の落ち着いたオフィスで、経営コンサルタントが中小企業の経営者と自然に対話している様子。誇張のない、信頼感のある雰囲気を狙っています。

用意した画像を渡す

画像を用意できたら、その画像をAIエージェントに渡します。渡し方は主に2通りです。

• 保存先のファイル・フォルダのパスを伝える：「このフォルダに入れた画像を使って」のように場所を伝えます。
• チャットに画像を直接添付する：そのまま添付して「この画像をヒーロー画像として使って」のように伝えます。

渡した画像を仮素材の代わりに配置すれば、スクリーンショットのハッチング柄の枠が実写真に置き換わります。

実際に画像を当てはめてみる

用意した画像を、ヒーロー・代表プロフィール・実績事例の一部に当てはめると、次のようになります。

実績・事例は3件のうち1件だけ差し替えています。すべての画像を一度に揃える必要はなく、用意できたところから順に差し替えていくことができます。

気になったところは、その都度伝えて直す

画像を当てはめたあとも、実際に見てみると気になる点が出てきます。「もう少し明るい雰囲気の写真にしたい」「この文言はもっと簡潔にしたい」のように、思ったことをそのまま伝えれば、その場で調整されます。仮素材の差し替えも文言の調整も、この対話を繰り返しながら、納得いく状態に近づけていく作業です。

Step 7. 公開して、フォームを有効にする

さくらのレンタルサーバーへ公開する

サイトが仕上がったら、さくらのレンタルサーバーへアップロードして公開することができます。ドメインの設定、SSH公開鍵の登録、サーバーへのファイル転送といった一連の作業は、「レンタルサーバーSkills（アップロードスキル）」を使うことでAIエージェントに任せることができます。詳しい手順は下記の記事で扱っています。

AIでサイトを作ってさくらのレンタルサーバーで公開する ― Claude Code × アップロードスキルさくらのホームページ教室

フォームを、実際にメールが届く状態にする

サイトが公開できたら、Step 4 で準備したメール設定を仕上げます。AIエージェントから「メール設定専用ページ」（例：https://（あなたのサイト）/setup-xxxxxxxx.php）のリンクが送られてきます。このページは、この設定のためだけに1回だけ使う、一時的な画面です。このリンクは他の人に共有しないでください。

ページを開いたら、次を入力して「設定してテスト送信」を押します。

• フォーム送信用メールアドレス（Step 4 の「1.」で作成したアドレス）
• そのパスワード（ここで初めて入力します。チャットではなく、この専用ページに入力します）

お問い合わせの届け先を、送信用のアドレスとは別にしたい場合は、このページの案内に沿って届け先も指定します（Step 4 の③と同じ内容です。同じでよければ何もしなくてかまいません）。

入力したパスワードは、ご自身のサーバー内の設定ファイルにだけ保存されます。チャットにも、AIエージェントにも、サイトの公開ファイルにも残りません。

「設定してテスト送信」を押すと、その場で確認用のテストメールが1通届きます。ここまで進めば設定は完了です。このテストメール（1通）と、次の「送信テスト」で確認する実際のフォームからのメール（2通）は別のものです。取り違えないようご注意ください。

設定が完了すると、このページは自動的に無効になります。もう一度開いても「設定は完了しています」と表示されるか、ページが表示されなくなります。リンクには数日の有効期限があり、期限切れになった場合や入力をやり直したい場合は、AIエージェントにリンクの再発行を頼みます。

送信テストで、実際に届いたか確認する

最後に、実際のお問い合わせフォームから送信して確認します。フォームが送信されると、事業者への通知メールと、**お問い合わせした人への自動返信（受付完了のお知らせ）**の2通が送られます。届いたメールは、コントロールパネルの「メール」→「メールアドレス」から、初期ドメインの「ウェブメール」で確認できます。

2通とも届いていれば、設定は成功です。

もし届いていない場合は、次を確認します。

• 「迷惑メール」フォルダに入っていないか（届いているのに振り分けられているだけのことがあります）
• DKIM設定の直後は、反映まで数分〜数時間かかることがあるため、時間をおいて再度試す
• 専用ページで入力したメールアドレス・パスワードに入力間違い（全角・半角、余分な空白など）がないか

メールの到達性は100%保証されるものではありません。Gmail等には問題なく届くことがほとんどですが、会社の「.co.jp」ドメイン等では迷惑メールフォルダに振り分けられることがあります。

サイト作成スキルの実例

業種ごとに、どのような配色・デザインで仕上がるのかは、次の記事で、5つの実例をご紹介しています。

「サイト作成スキル」で作った5つのサイト実例さくらのホームページ教室

まとめ

このスキルを使うことで、配色・レイアウトの検討からたたき台での内容確認、実装、動作確認まで、サイト開設の一連の流れを進めることができます。仕上げの段階では、写真を手元の画像・フリー素材・画像生成AIのいずれかで用意して差し替え、気になる部分は納得いくまで対話しながら調整します。公開はアップロードスキルに任せ、公開後にフォームのメール設定を仕上げれば、サイトを実際に運用できる状態になります。