Web サイトを作るなら
公開 8 分で読めます
お店や会社の紹介に使う 1 ページの Web サイトは、載せたい内容と雰囲気を日本語で伝えるだけで、AI に作ってもらえます。この記事では、架空のパン屋のサイトを YOBITSUGI AI に実際に頼み、依頼文・できた画面・直しの頼み方をそのまま紹介します(2026 年 10 月時点)。最初の 1 回は 3 分 33 秒で、写真 5 枚つきのページができました。直しを 1 回頼んだ分を合わせて、かかった費用は約 225 クレジットです。
向いている AI・道具
YOBITSUGI AI では、頼んだ内容に合わせて、Claude(メインのエージェント)がページを書き、写真が要るところは画像生成 AI に頼みます。今回の作業で実際に使われたものは次のとおりです。
| 役割 | 使われた AI・道具 | 今回やったこと |
|---|---|---|
| ページを書く | Claude Opus 5.5(YOBITSUGI AI の既定のモデル) | HTML と CSS を書き、表示を自分で確かめて直した |
| 写真を作る | OpenAI の GPT-Image-2.5 Flare | パンの写真 4 枚と、お店の外観 1 枚を同時に作った |
| 画面を確かめる | ワークスペースの中のブラウザ | PC の幅(1440px)とスマホの幅(390px)で画面を撮った |
| 渡す | ファイル置き場と公開リンク | サイト一式を zip にまとめ、画面の画像と一緒に渡した |
写真をどの画像生成 AI で作るかを選びたいときは、依頼文にモデルの名前を書きます。画像生成 AI の違いは 画像生成 AI の比較 にまとめています。
頼み方の例
今回、最初に送った依頼文です。一字も変えずに載せます。
架空のパン屋「こむぎ日和」の Web サイトを 1 ページで作ってください。
- 載せる内容: お店の紹介、おすすめのパン 4 種類(名前・ひとこと・値段)、営業時間と定休日、住所とアクセス、問い合わせ先
- 雰囲気: あたたかく、落ち着いた感じ。色はクリーム色と茶色を中心に
- スマホでも見やすくしてください
- 写真は AI で作ってください(パンの写真 4 枚と、お店の外観 1 枚)。人物と文字は入れないでください
- HTML と CSS だけで作り、site というフォルダにまとめてください。できたら、PC の幅とスマホの幅の画面を撮って見せてください
店名・住所・電話番号はすべて架空のものにしてください。
ポイントは 3 つです。
- 載せる内容を箇条書きにする: 何を載せるかが決まっていれば、文章は AI が書きます。自分のお店で使うときは、本当の店名・住所・値段をここに書きます。
- 雰囲気は、色と言葉の両方で伝える: 「あたたかく」だけでなく「クリーム色と茶色」と色を書くと、仕上がりがぶれにくくなります。
- 「画面を撮って見せて」と頼む: AI が自分でページを開いて確かめるので、崩れたまま渡されることが減ります。
実際にやってみた
1. 頼む
YOBITSUGI AI のアプリで、上の依頼文を送りました。Claude はまず 5 枚の写真を同時に作り、できた写真に人物や文字が入っていないかを見てから、ページを書き始めました。
ページができると、Claude は PC の幅とスマホの幅で画面を撮り、自分で見直しました。このとき「メールアドレスが途中で折り返す」「クロワッサンの名前が 2 行に割れる」の 2 か所を見つけて、頼む前に直しています。
2. できたページ
3 分 33 秒で、次のものが届きました。
- サイト一式(
index.html・style.css・写真 5 枚)を zip にまとめたもの - PC の幅とスマホの幅で撮った、ページ全体の画面
頼んだとおり、電話番号は 0 だけの番号、メールアドレスは例に使うための .example で終わる形になっていて、ページの中にも「すべて架空のものです」と書き添えてありました。
3. 直しを頼む
できたページを見て、同じ会話で 3 点の直しを頼みました。
ありがとうございます。3 点、直してください。
- いちばん上の写真のすぐ下に「お知らせ」の欄を足してください(3 件。日付と短い文。内容は架空で)
- スマホでは、おすすめのパンを 2 列に並べてください
- 検索や SNS で共有されたときのために、ページの題・説明文・共有用の画像の設定を入れてください
直したら、もう一度 PC とスマホの画面を見せてください。最後に、このサイトをインターネットに公開するにはどうすればよいかも、短く教えてください。
2 分 3 秒で、3 点とも直ったページが届きました。
共有用の画像は、お店の外観の写真に店名を重ねた 1200×630 ピクセルの画像でした。
うまくいかないとき
今回、実際に気を付ける必要があった点から書きます。
- 共有用の画像の URL は仮のまま届く: 公開先がまだ決まっていないため、共有用の設定には仮の URL(
https://komugi-biyori.example/)が入っていました。Claude も報告の中で「公開先が決まったら、3 か所を本当の URL に置き換えてください」と書いています。公開先が決まっているなら、最初の依頼文に URL を書いておくと、この置き換えが要りません。 - 細かい折り返しは、画面を見て指示する: 名前や住所が中途半端な所で折り返すことがあります。今回は Claude が自分で見つけて直しましたが、気になる所が残ったら「〇〇が 2 行に割れているので、続けて表示してください」と、場所を言葉で伝えます。
- 写真に文字や人物が入る: 看板の文字は崩れやすいので、依頼文に「人物と文字は入れないでください」と書きます。今回の外観の写真は、看板が無地で仕上がりました。
- 内容が思ったものと違う: 「おすすめのパン」のような中身は、任せると AI が考えます。決まっているものは、名前・説明・値段を依頼文に書きます。
- 色や雰囲気が合わない: 「もう少し明るく」「見出しを太く」のように、直したい所を 1 つずつ頼みます。まとめて頼むときは、今回のように番号を付けると、どれを直したかの報告も番号で返ってきます。
YOBITSUGI AI でできること・できないこと
今回試した範囲で分かったことです。
- できたこと: 写真つきの 1 ページのサイトを作る・PC とスマホの幅で表示を確かめる・直しの依頼に応じる・共有用の画像と設定を入れる・一式を zip で渡す。
- 自分でやること: インターネットへの公開です。できたファイルは、どのサーバーにも置ける形(HTML・CSS・画像だけ)なので、受け取った
siteフォルダを公開先に上げます。 - 試していないこと: 問い合わせフォームの送信や予約のように、サーバー側の仕組みが要る機能は、この記事では試していません。
公開の方法として、Claude は静的なサイト(HTML・CSS・画像だけのサイト)向けの公開サービスを挙げました。各社の公式の説明では、GitHub Pages は GitHub のリポジトリに置いた HTML・CSS・JavaScript をそのまま Web サイトとして公開するサービス、Cloudflare Pages はできあがったファイルをドラッグ & ドロップなどで上げて公開できるサービス、Netlify Drop はフォルダをドラッグ & ドロップして公開できるサービスです。レンタルサーバーを契約しているなら、そこに置くこともできます。料金や条件は、それぞれの公式のページで確かめてください。
料金の目安
YOBITSUGI AI は月額の費用がなく、使った分だけクレジットが減る仕組みです。モデルごとの金額は 料金とシミュレーション で確認できます。
今回は、最初の依頼(ページ・写真 5 枚・画面の確認)が約 118 クレジット、直しの依頼(お知らせ・2 列・共有用の画像と設定)が約 107 クレジットで、合わせて約 225 クレジットでした(2026 年 10 月時点)。Claude の報告では、このうち写真 5 枚の生成が約 9.5 クレジットで、残りはページを書く・確かめる・直すためのやり取りと、ワークスペースの稼働の分です。
関連する記事
- 商品写真を作るなら
- 画像生成 AI の比較
- Web はレンタルサーバーで十分。足りなくなる 4 つの場面(ハック！でAI)
- 公開直後はなぜ狙われやすい？ SSL 証明書を発行した直後に潜む CT スキャンとは(ハック！でAI)
出典
- What is GitHub Pages?(GitHub・2026-10-14 確認)
- Direct Upload · Cloudflare Pages docs(Cloudflare・2026-10-14 確認)
- Create deploys | Netlify Docs(Netlify・2026-10-14 確認)
- The Open Graph protocol(共有用の画像と説明文の設定の仕様・2026-10-14 確認)
- 料金とシミュレーション | YOBITSUGI AI(呼継AI)(株式会社Game・2026-10-14 確認)
