このスキルの具体的な使い方を先に知りたい方は、下記のページを参照ください。
目次
はじめに
サイト作成スキルはベータ版です。ご利用の環境（AIエージェントやモデルの組み合わせなど）によっては、うまく動かない可能性があります。
「サイト作成スキル」は、業種に合わせたデザインでWebサイトの土台を作ることができるスキルです。ヒアリング内容をもとに配色やページ構成の案を複数提示し、確認しながら仕上げていく流れになっています。Claude CodeとCodexの両方で動作を確認しています。
利用にあたっては、上位モデル・思考レベル（Codexの場合は推論レベル）を「中」以上に設定してお使いください。下位モデルや低い思考・推論レベルでは、手順の一部が省略されるなど正しく動作しない場合があります。執筆時点（2026年9月）では、Claude CodeがSonnet 5（思考レベル「中」）以上、CodexがGPT-5.6 Terra（推論レベル「中」）以上での動作を確認しています。
なお、サイト作成スキルは現在、ベータ版として提供しています。AIエージェントやモデルの種類・バージョンは今後も増えていき、その組み合わせや利用環境もさまざまなため、すべての組み合わせを検証しきれていません。お使いの環境によっては、手順が一部省略されたり、提案内容がこの記事の事例と異なったりすることがあります。ベータ版のため、意図しない動作をする可能性があります。作成された内容は、公開する前に必ずブラウザで確認してください。
ここでは、具体的にどのような幅でサイトができあがるのかを知っていただくために、実際にこのスキルで生成した5つの事例をご紹介します。いずれも架空の事業者を題材にしたデモサイトで、下記のリンクから実際の画面をご覧いただくことができます。
1. 桜谷行政書士事務所（行政書士事務所）
地域密着・若手行政書士という設定の事例です。あたたかみのあるネイビーを基調とし、少量のアンバー（琥珀色）を「注力分野」のバッジなど小さな面積だけに添えています。ヒーロー部分は、事務所の外観・代表者・相談風景・事務所内観の4枚の写真を組み合わせたグリッド状のレイアウトを採用し、堅い印象になりがちな士業サイトに親しみやすさを持たせています。
2. さくら安心クリニック（内科クリニック）
内科クリニックを想定した事例です。配色は「清潔・安心・話しやすい」という方向性に合わせた水色系のトーンを採用し、ヒーロー部分（ページ冒頭の見出し領域）には外観写真を全面に敷いてスクロールに合わせて動く演出を組み合わせています。Web予約ボタンをファーストビューの中心に配置し、年間診療実績や開院からの年数といった安心材料になる数字を見出し直下に並べる構成になっています。
3. さくら整体院（整体院）
肩こり・腰痛専門の整体院という設定です。同じ「医療・福祉に近い業種」でも、さくら安心クリニックとは配色・構成の両方を変えています。白地にビビッドなグリーンを効かせた配色とし、ヒーロー部分は写真とテキストを左右に分割するレイアウトを選んでいます。専門性とおしゃれさを両立させたい、という方向性に合わせた組み合わせです。
4. 桜庭工務店（工務店）
新築・リフォーム・外装塗装を手がける工務店の事例です。信頼感を意識したネイビーを基調とした配色に、施工事例の写真を背景全面に敷いたヒーロー部分を組み合わせています。ファーストビューには「無料お見積り依頼」と「施工事例を見る」という2つの導線を並べ、対応工事の一覧をその直下に続ける構成です。
5. パンケーキショップ SAKURA 原宿（飲食店）
10〜20代の女性をターゲットにしたパンケーキ専門店の事例です。ここまでの4例とは方向性を変え、ストロベリーとレモネードを思わせるピンク×イエローのポップな配色を採用しています。ヒーロー部分は写真をカード状に浮かせて配置するレイアウトを選び、背景にはやわらかくにじむ円形のアニメーションを添えて、かわいらしい世界観を表現しています。
業種ごとに配色・構成を変えられます
5つの事例からも分かるとおり、このスキルは業種ごとに用意されたテンプレートをそのまま流用するのではなく、事業の雰囲気に合わせて配色やヒーロー部分のレイアウトを個別に選ぶことができます。今回ご紹介した5業種のほかにも、美容・エステ、宿泊業など幅広い業種に対応しています。
サイト作成を依頼する際のTips
実例をご覧になったところで、実際に依頼する際に知っておくと役立つポイントをいくつかご紹介します。
1. お手持ちの写真がなくても、画像生成AIと組み合わせることができます
ロゴや写真を用意していなくても、著作権フリー素材や仮の画像でひとまず進めることができます。さらに、外観・スタッフ写真・雰囲気を演出したい場面など、用途に応じた画像生成AI（ChatGPTなど）向けのプロンプト文を作成してもらうこともできます。生成した画像を渡せば、サイトの適切な箇所に組み込んでもらうことができ、手軽にサイトの見た目をより充実させることができます。
2. このスキルが作るのはあくまで「土台」です
提示される配色やページ構成の案は、そのまま完成形になるわけではなく、出発点という位置づけです。「配色をもう少し〇〇系にしたい」「この要素はいらない」といった要望を伝えることで、事業の内容や好みに合わせて自由にカスタマイズしていくことができます。
3. 修正は何度でも依頼することができます
気になる点があれば、完成イメージ（たたき台）の確認時はもちろん、本番の作り込みが終わった後や、実際に公開した後でも、遠慮なく修正を依頼することができます。
4. 依頼の進め方は2通りから選ぶことができます
強み・料金・営業時間などの情報を先にまとめて伝える「要件入力モード」と、業種に合った内容をおまかせで一気に作成する「おまかせモード」の、どちらかを選ぶことができます。情報を整理する時間が取れない場合や、まずは形にしてから相談したい場合は、おまかせモードから始めることができます。
サイト作成スキルについて
ここでご紹介したサイトは、サイト作成スキルを使って、AIエージェントとのやり取りで作ったものです。スキルの使い方は、次の記事で、デザインの確認から動作の確認までの流れに沿ってご紹介しています。
