Claude Codeの「サイト作成スキル」でサイトを開設する流れ：デザイン確認から動作確認まで

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

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

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

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

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

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

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

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

できること

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

ご自身で対応する部分

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

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

Step 1. スキルを起動する

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

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

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

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

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

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

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

このスキルは、いきなり本実装のコードを書き始めません。まず配色案を3パターン、レイアウトを含まない配色比較ページとして用意し、ブラウザ上で実際に見比べながら選ぶことができます。

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

配色案の比較ページ。案A(誠実コーポレート)、案B(モダン・ミニマル)、案C(高級・上質)の3案をカードで並べて比較する

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

ヒーローパターンの構造比較ページ。7パターンのワイヤーフレームを並べ、4番目の中央揃えミニマル型に「おすすめ」バッジが付いている

配色とレイアウトが決まると、実際に組み合わせたミニヒーローが1つ作られ、最終確認できます。

配色案A×ヒーローパターン4を組み合わせたミニヒーローの確認画面

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

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

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

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

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

お問い合わせフォームを、実際にメールが届く状態にする

お問い合わせフォームは、見た目を作るだけで終わりません。実際にメールが届く状態まで仕上げます。そのために、さくらインターネットのコントロールパネルで次の2つを用意します。手順どおりに進めれば設定できる内容なので、順番に見ていきます。

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

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

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

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

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

新規ユーザー作成画面のユーザー名・パスワード入力欄と「作成する」ボタン

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

コントロールパネル右上に表示される初期ドメインの位置

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

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

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

初期ドメイン行の「設定」ボタンから「DKIM/ARC設定」を選択する操作

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

DKIM/ARC設定画面の入力項目と「設定する」ボタン

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

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

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

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

残りの設定と送信テストは、スキルに任せることができます。

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

設定が終わったら、実際にフォームから送信して確認します。届いたメールは、コントロールパネルの「メール」→「メールアドレス」から、初期ドメインの「ウェブメール」で確認できます。

メールアドレス一覧の該当アドレス行にある「ウェブメール」ボタンの位置

フォームから送ったメールが受信箱に届いていれば、設定は成功です。

ウェブメールの受信箱にフォームからのお問い合わせメールが届いている画面

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

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

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

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

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

お問い合わせフォーム。メールアドレス欄に「invalid-email」と入力され、赤枠と「メールアドレスの形式が正しくありません」というエラーメッセージが表示されている

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

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

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

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

実装したサイトのファーストビュー。左にキャッチコピーとCTA、右に仮素材のプレースホルダー画像

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

対応業務セクション。6つのサービスカードがグリッドで並び、資金調達支援カードに「注力分野」バッジが付いている

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

料金目安セクション。「経営改善」タブが選択され、初回相談の詳細がアコーディオンで開いている

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

モバイル幅(375px)で表示したサイト。ハンバーガーメニューとファーストビューが縦に収まっている

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

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

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

写真が必要な箇所は、ここまで見てきたとおり「仮素材」の状態で作られています。用意の仕方には、主に次の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ツールで実際に画像を作ったら、その画像をAIエージェントに渡します。渡し方は主に2通りです。

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

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

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

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

実写真を当てはめた後のファーストビュー。仮素材だった右側の画像が、実際の面談風景の写真に置き換わっている

実写真を当てはめた後の実績・事例セクション。1件目のカードだけ実際の写真になっており、残り2件はまだ仮素材のまま

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

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

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

まとめ

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