デザイン性の高いホームページを作るなら

ホームページは、AI にひとこと頼むだけでも形になります。ただ、見た目を自分の考えに近づけたいときに、何をどこまで書けばよいかは分かりにくいところです。この記事では、架空の器の工房のホームページを、ひとことだけの依頼と、デザインの方針まで書いた依頼の 2 通りで YOBITSUGI AI に頼み、できたページを並べて比べました(2026 年 10 月時点)。どちらも約 7 分でページができ、直しを 1 回頼んだ分を合わせて、かかった費用は約 510 クレジットです。

向いている AI・道具

YOBITSUGI AI では、Claude(メインのエージェント)がページを書き、写真は画像生成 AI に頼みます。今回の作業で実際に使われたものは次のとおりです。

Anthropic は開発者向けのドキュメントで、指示が無いと Claude の作る画面はありがちな見た目に寄りやすいと説明し、書体・色・動き・背景を具体的に指示することを勧めています。この記事の「方針まで書いた依頼」は、この考え方を、ふだんの日本語の依頼文にしたものです。

GPT-Image-2.5 は、画像を参考として渡して新しい画像を作れます(OpenAI のドキュメント)。方針まで書いた依頼では、1 点めの器の写真を手本にして残りの 3 点を作ったと、Claude が報告しています。

頼み方の例

同じ題材(架空の器の工房「灰白窯」)で、2 通りの依頼文を別々の会話で送りました。どちらも一字も変えずに載せます。

ひとことだけの依頼

架空の器の工房「灰白窯(はいじろがま)」のホームページを 1 ページで作ってください。デザイン性の高いページにしてください。

写真は AI で作り、人物と文字は入れないでください。住所や電話番号などはすべて架空のものにしてください。
できたら、PC の幅とスマホの幅の画面を撮って見せてください。

デザインの方針まで書いた依頼

架空の器の工房「灰白窯(はいじろがま)」のホームページを 1 ページで作ってください。デザインの方針は次のとおりです。

【誰に何を伝えるか】

• 読む人: ふだん使いの器を探している 30〜50 代の人。スマホで見る人が多い
• 伝えたいこと: 灰色がかった白の釉薬(ゆうやく)の、静かな器を作っている工房であること。見たあとに、工房の見学を予約してほしい
• 載せる内容: 工房の紹介、器 4 点(名前・ひとこと・値段)、作る工程(3 段階)、見学の案内と予約のボタン、所在地と問い合わせ先

【文字と余白】

• 見出しは明朝体で大きく(PC で 56px 以上・スマホで 32px 以上)、本文はゴシック体で 16px・行間は 1.9 くらい
• 文字の大きさは 4 種類までにして、大きさの差をはっきり付ける
• 区切りごとの上下の余白を広く(PC で 120px 以上)。1 行は全角 35 文字くらいまで

【色】

• 色は 3 色まで: 地は少し灰色がかった白、文字は墨色、差し色は 1 色だけ(くすんだ藍色)を、ボタンと細い線にだけ使う
• グラデーション・影・角の丸いカードは使わない

【写真】

• 写真は AI で作る。自然光・無地の背景・器が主役・彩度は低め。どの写真も同じ光と色合いにそろえる
• いちばん上は、画面いっぱいの写真 1 枚と短い言葉だけにする
• 器の 4 点は、同じ角度・同じ背景で撮ったようにそろえる
• 人物と文字は入れない

【動き】

• スクロールしたときに、写真と文字がゆっくり浮かび上がる程度にとどめる(0.6 秒くらい)
• 動きを減らす設定にしている人には、動かさない

【雰囲気】

• 美術館の図録や、器のギャラリーの案内状のような、静かで余白の多い紙面
• にぎやかな飾り・アイコン・絵文字は使わない

住所や電話番号などはすべて架空のものにしてください。
できたら、PC の幅とスマホの幅の画面を撮って見せてください。

方針を書くときのポイントは 3 つです。

• 誰に何を伝え、見たあとに何をしてほしいかを先に書く: 載せる内容と、ボタンを置く場所がこれで決まります。
• 文字・余白・色は数で書く: 「大きく」「広く」ではなく「56px 以上」「120px 以上」「3 色まで」と書くと、できたページを数で確かめられます。1 行の長さと行間は、W3C の WCAG 2.2 の達成基準 1.4.8(レベル AAA)を目安にしました。この基準は、文章の幅を 80 文字(日本語などは 40 文字)以内に、行間を 1.5 倍以上にできることを挙げています。
• 写真はそろえ方を、雰囲気は物にたとえて書く: 「同じ角度・同じ背景で」「美術館の図録のような」のように書きます。使わないもの(グラデーション・影・絵文字など)も書いておきます。

実際にやってみた

1. 2 通りの依頼を送る

YOBITSUGI AI のアプリで会話を 2 つ作り、それぞれの依頼文を送りました。どちらの会話でも、Claude はまず写真を作り、人物や文字が入っていないかを見てからページを書き、PC とスマホの幅で画面を撮って見直しています。ページができるまでの時間は、どちらも約 7 分でした。

2. ひとことの依頼でできたページ

縦書きの題字、大きさを変えて互い違いに並べた器の写真、黒い背景に窯の炎の写真を置いた区切りなど、手の込んだページができました。「お知らせ」4 件や、線で描いた案内図、釉薬の色見本も入っています。何を載せるか、どんな雰囲気にするかは、すべて Claude が決めました。

スマホの幅では、最初の画面の写真が上から 6 割ほどで終わり、その下は英字 2 行だけの空きになっていました。このときの Claude の報告は「崩れはありません」でした。

3. 方針まで書いた依頼でできたページ

最初の画面は、依頼のとおり、写真 1 枚と短い言葉だけです。Claude の報告には、方針の項目ごとに、どう作ったかが数で書かれていました。

• 文字: 見出しは明朝体で、PC 64px・スマホ 34px です。本文はゴシック体 16px・行間 1.9 で、1 行は全角 35 文字までにしました。文字の大きさは 64・22・16・13px の 4 種類だけです。
• 色: 地の灰白(#ECEAE5)・墨色(#2A2927)・くすんだ藍色(#3E5466)の 3 色だけです。藍色はボタンと細い線にしか使っていません。グラデーション・影・角の丸いカード・アイコン・絵文字は使っていません。
• 余白: 区切りごとの上下は PC で 160px、スマホで 96px です。

できたページの CSS を開いて確かめると、色の指定は 3 色、文字の大きさは 4 種類、区切りの余白は 160px で、報告のとおりでした。

4. 並べて比べる

できた 2 つのページを同じブラウザ(Chrome)で開き、表示されている文字の大きさや色を数えました。

「動きを減らす設定」は、必須でない動きを減らすよう OS で設定している人に合わせるための、CSS の機能(prefers-reduced-motion)です。ひとことの依頼のページにも入っていました。

比べて分かったことは 3 つです。

• ひとことの依頼でも、手の込んだページはできる: ただし、色の数・文字の大きさ・写真の雰囲気は Claude が決めます。今回は、本文の文字が 13〜15px と小さめで、写真の光や背景は 1 枚ごとに違いました。
• 方針に書いたことは、そのまま守られる: 色は 3 色、文字の大きさは 4 種類、器の写真は同じ角度と背景、予約のボタンは見学の案内のすぐ下、という形になりました。
• 方針に書かなかった所は、Claude の判断になる: スマホの最初の画面で器が端で切れる、スマホで器を 2 列に並べる、といった所は依頼文に書いておらず、次の直しが必要でした。

どちらが合うかは、ページの目的によって変わります。見た目の方向から任せたいときはひとことの依頼で始め、伝えたい印象が決まっているときは方針を書く、という使い分けになります。

5. 画面を見て直しを頼む

方針まで書いた依頼のページを見て、同じ会話で 4 点の直しを頼みました。

ありがとうございます。画面を見て、4 点直してください。

1. いちばん上の言葉「灰の白に、日々の静けさを。」をもっと大きくしてください(PC で 96px くらい・スマホで 44px くらい)。ほかの見出しの大きさはそのままにしてください
2. スマホのいちばん上で、器が画面の右端で切れています。器の全体が見えるように、写真の位置か大きさを直してください
3. スマホの器 4 点は、説明の文が 1 行 8 文字ほどで折り返していて読みにくいです。スマホでは 1 列にして、写真を大きく見せてください
4. 住所の県名が実在のもの(長野県)で、電話番号も実在しそうな番号です。県名は実在しない名前に、電話番号は 000-0000-0000 に、郵便番号は 000-0000 にしてください。本文の「信州」も外してください

直したら、PC とスマホの画面をもう一度撮って見せてください。

約 2 分で、4 点とも直ったページが届きました。

スマホの最初の画面について、Claude は「横長の写真を縦の画面に合わせて切っているため、器がどうしても大きく写り端が切れてしまいます」と原因を説明し、スマホ用の縦長の写真を 1 枚作って差し替えました。言葉を 96px にすると、PC の幅では文末の「。」が器の縁にかかったため、言葉の位置を少し上げた、とも報告しています。

報告の最後には、いちばん上の言葉だけを大きくしたので、文字の大きさが 5 種類になり、最初の方針から 1 つ増えたことが書かれていました。

うまくいかないとき

今回、実際に起きたことから書きます。

• 2 つの会話の保存先が重なった: 2 つの会話を同時に進めたところ、どちらも同じ名前のフォルダに保存し、片方の index.html がもう片方に上書きされました。上書きされた側の Claude が気づいて、別のフォルダに保存し直しています。同じ題材を複数の会話で試すときは、「〇〇というフォルダに保存してください」と、会話ごとに違う名前を依頼文に書きます。
• 架空の情報に、実在の地名が混じった: 「すべて架空のものに」と書いていても、方針まで書いた依頼のページでは、住所に実在の県名が入り、電話番号も実在しそうな番号でした。「県名は実在しない名前に、電話番号は 000-0000-0000 に」と、形まで書くと直りました。
• スマホの最初の画面で、写真が切れたり空きができたりする: PC 用の横長の写真を縦の画面に使うと、主役が端で切れることがあります。今回は、スマホ用の縦長の写真を作り足してもらって直しました。「崩れはありません」と報告されていても、画面の画像は自分の目でも確かめます。
• 直しが、最初の方針と合わなくなる: 見出しを 1 つだけ大きくすると、文字の大きさの種類が増えました。直しを頼むときに、最初の方針のどれを優先するかも書いておくと、行き違いが減ります。
• 見る端末によって書体が変わる: できたページは 2 つとも、端末に入っている明朝体とゴシック体を使う指定で、Web フォントは読み込んでいませんでした。公開の前に、手元のスマホと PC でも開いて確かめます。

YOBITSUGI AI でできること・できないこと

今回試した範囲で分かったことです。

• できたこと: 写真つきの 1 ページのホームページを作る・方針に書いた数のとおりに文字や余白や色を決める・PC とスマホの幅で画面を撮って見直す・スマホ用の写真を作り足す・画面を見て頼んだ直しに応じる。
• 人が決めること: できたページが、自分のお店や会社に合っているかどうかの判断です。
• 試していないこと: インターネットへの公開、複数のページがあるサイト、予約フォームのようにサーバー側の仕組みが要る機能は、この記事では試していません。今回の「見学を予約する」ボタンは、メールの作成画面を開く形でした。公開までの流れは Web サイトを作るなら で紹介しています。

料金の目安

YOBITSUGI AI は月額の費用がなく、使った分だけクレジットが減る仕組みです。モデルごとの金額は 料金とシミュレーション で確認できます。

今回は、ひとことの依頼の会話が約 181 クレジット、方針まで書いた依頼の会話が約 330 クレジット(うち直しの依頼が約 76 クレジット)で、合わせて約 510 クレジットでした(2026 年 10 月時点)。Claude の報告では、方針まで書いた依頼の写真 8 枚の生成が約 56 クレジット、直しで作り足した縦長の写真 1 枚が約 9.5 クレジットです。残りは、ページを書く・確かめる・直すためのやり取りと、ワークスペースの稼働の分です。

関連する記事

• Web サイトを作るなら
• 商品写真を作るなら
• 画像生成 AI の比較
• Claude Code に絵のセンスはない？ 画像の AI と描き比べて解説(ハック！でAI)
• 画面の画像を渡して Claude Code に直してもらう(ハック！でAI)

出典

• Prompting best practices(Anthropic・2026-10-14 確認)
• Image generation | OpenAI API(OpenAI・2026-10-14 確認)
• Web Content Accessibility Guidelines (WCAG) 2.2(W3C・2026-10-14 確認)
• Media Queries Level 5(W3C・2026-10-14 確認)
• 料金とシミュレーション | YOBITSUGI AI(呼継AI)(株式会社Game・2026-10-14 確認)