Codexに短い文章でWebサイト制作を頼むと、どこまで作れるのでしょうか。
今回は、架空のコーヒー店「こもれび珈琲」の1ページサイトを題材にしました。最初から細かなデザイン仕様を渡したのではなく、「どんなサイトを作りたいか」「誰に見てほしいか」「どんな雰囲気にしたいか」を簡単に伝え、まず初稿を作っています。
そのため、最初に出てきたページは完成品ではありません。必要な情報は並んでいても、見た目は簡素でした。この記事で伝えたいのは、Codexなら短い指示だけで高品質なサイトが一発で完成する、という話ではありません。短い依頼から作った初稿を見て、気になる点を少しずつ伝えると、仕上がりがどう変わるかという実例です。
最初に伝えたのは、サイトの大まかな方向だけ
最初の依頼は、細かなプロンプト集のような長い文章ではありませんでした。内容を要約すると、次の程度です。
小さなコーヒー店の1ページサイトを作りたい。近所で落ち着ける店を探している人に見てほしい。店の特徴、メニュー、営業時間、場所が分かるようにしたい。落ち着いた雰囲気にしてほしい。
これは当時の会話を一字一句再現したものではなく、伝えた要点を短くまとめたものです。
このくらいの依頼でも、Codexはページの構成を考え、文章やコードを用意できます。ただし、写真の方向、文字の個性、情報の優先順位まで自分の好みに合うとは限りません。
短い依頼からできた初稿
最初のページには、店名、キャッチコピー、店舗の特徴、メニュー、営業時間、場所が入りました。サイトとして必要な部品はひと通りあります。
一方で、デザイン的にはすごく微妙です。切り絵のようなコーヒーカップ風のイラストが出力されてきたときには、驚きました。情報を確認するための叩き台としては使えますが、実際の店舗サイトとして見れば、店の空気感やコーヒーへのこだわりが十分に伝わりません。
初稿を見ると、次に伝えることが分かる
何もない状態で「理想のデザインを詳しく説明してください」と言われても、初心者には難しいものです。しかし、初稿が画面に出ると、「このイラストは違う」「もっと店内の雰囲気を見せたい」「文字が軽く見える」と具体的に感じられます。
最初の修正では、主に次のことを伝えました。
- イラスト中心ではなく、権利などをクリアしたフリー素材を使用
- 人物や人物風のイラストをメイン画像にしたくない
- 一部分だけでなく、サイト全体の見た目を改善したい
- コーヒー店らしい落ち着いた空気を出したい
ここでも、「このCSSをこの値にする」といったコードの指示はしていません。見た人として気になった点と、目指したい方向を伝えています。具体的な実装方法はCodexが考えました。
一度に全部を決めず、画面を見ながら修正した
写真を使う案へ変えた後も、画面を見ながら追加で調整しました。
- コーヒーを淹れている様子が伝わる写真に変える
- 途中まで作ったロゴ風の飾りは外す
- 店名や見出しの文字を、店の雰囲気に合わせる
- 「本日のこだわりコーヒー」を最初の画面で見せる
- コーヒー豆や麻袋など、こだわりが伝わる写真を加える
- スマートフォンでも読みやすくする
修正項目だけを見ると多く見えますが、最初から長い指示としてまとめて送ったものではありません。出てきた画面を見て、気になったところをその都度伝えた結果です。
修正後は、店の特徴が最初の画面から伝わるようになった
修正後は、人物のいないサイフォンコーヒーの写真を大きく使い、店名、短いコピー、本日の豆の情報を最初の画面にまとめました。初稿と掲載情報の大枠は同じでも、写真、文字、情報の順序を変えると印象は大きく変わります。
この変化は、最初の短い依頼が間違っていたという意味ではありません。最初の依頼は、考え始めるための材料として機能しました。初稿があるからこそ、自分が欲しいものと違う部分を言葉にできます。
初心者は専門用語を使わなくてもよい
Webデザインの用語を知らなくても、「写真が暗すぎる」「何の店か分かりにくい」「文字が軽く見える」「スマホで窮屈」といった感想は伝えられます。Codexへ頼むときは、次のような短い伝え方でも十分に修正の出発点になります。
最初の画面を見てもコーヒー店らしさが弱いです。イラストではなく、人物のいないコーヒーの写真を使ってください。店のこだわりが最初に伝わるように、全体の見た目も整えてください。
大切なのは、長い文章を書くことではなく、何が違うと感じたかを伝えることです。実装方法が分からなければ、「どこを変えるとよいか提案して」とCodexに相談できます。
短い依頼で決まりにくいこと
短い依頼では、次のような部分がCodexの判断に委ねられます。
- どんな写真を主役にするか
- 文字を明るく見せるか、落ち着いて見せるか
- どの情報を最初に見せるか
- ボタンやメニューをどの程度目立たせるか
- スマートフォンで何を残し、何を省くか
この判断が偶然好みに合う場合もありますが、毎回そうなるとは限りません。最初から完璧な依頼文を作ろうとするより、まず叩き台を作り、画面を見て修正する方が始めやすい人もいます。
今回の結果と、まだ完成していないこと
今回確認できたのは、短い依頼から1ページの初稿を作り、具体的な感想を少しずつ伝えることで、写真中心のデザインへ改善できたことです。
一方で、これは架空サイトのカンプです。実在する店舗情報への置き換え、写真の最終的な利用方法、複数端末での確認、問い合わせ機能、公開作業は含みません。見た目が整っていても、そのまま本番公開できる完成品ではありません。
第2回では、修正後のページをスマートフォンで見たときに見つかった問題と、専門用語を使わずに直していく流れを紹介します。
Codexを使ったWeb制作をサポートします
短い依頼から叩き台を作ることはできても、事業に合う見せ方を判断し、公開できる品質まで整えるには確認が必要です。アンドティーデザインでは、サイトの目的整理、初稿の評価、デザイン修正、PC・スマートフォン表示の確認までサポートします。
「AIで作ってみたが、このまま公開してよいか分からない」「うまく言葉にできない違和感を整理したい」という場合は、アンドティーデザインのお問い合わせフォームからご相談ください。
参考にした公式情報
公式情報の確認日: 2026年9月29日。記事内の制作結果は今回の検証環境で確認したもので、同じ結果を保証するものではありません。
