Codexでデザインがうまくいかないとき、最初に足りないのはCSSではありません。
判断基準です。
「おしゃれにして」
「見やすくして」
「いい感じにして」
この言い方だと、Codexはよくあるテンプレートに寄りやすいです。
先にやることは3つです。
- 良いデザインを見る
- 何が良いのかを言葉にする
- Codexに判断基準として渡す
この記事では、CodexでWebデザインに迷ったときに見る参考サイトと、見たあとにAIへどう話しかけるかを整理します。
センスは見たものから育つ
デザインのセンスは、何もないところから急に出てくるものではありません。
多くの場合、これまで見てきたもの、触ってきたもの、良いと感じたものの蓄積から育ちます。
良いサイトをたくさん見ている人は、余白、文字サイズ、写真の置き方、ボタンの距離感を感覚で知っています。
逆に、あまり見ていない状態でCodexに頼むと、自分でも正解がわからないまま「なんか違う」と感じます。
これはAIが悪いというより、人間側にまだ判断基準がない状態です。
だから、最初にやるべきことはデザインツールを触ることでも、CSSを書くことでもありません。
まず良いサイトを見ることです。
参考サイトを見る目的は真似ではない
参考サイトを見る目的は、丸ごと真似することではありません。
大事なのは、良いと思った理由を分解することです。
たとえば、あるサイトを見て「上品だな」と感じたとします。
そのまま「上品にして」とCodexに言っても、かなりズレます。
もう少し分解します。
- 背景が真っ白ではなく、少し温かい
- 文字が詰まっていない
- 写真が大きい
- ボタンが少ない
- 色数が少ない
- 見出しが短い
ここまで言葉にすると、Codexはかなり動きやすくなります。
参考サイトを見る目的は、AIに渡せる言葉を増やすことです。
Codexでデザインに迷ったら見る参考サイト3選
CodexでWebサイトを作るときは、まず次の3つを見ると整理しやすいです。
目的は「きれいなサイトを探す」ことではありません。
何を取り入れて、何を取り入れないかを決めることです。
Awwwardsは世界観と余白を見る
Awwwards は、完成度の高いWebサイトを探せるデザインギャラリーです。
ファーストビュー、余白、写真や動画の使い方、文字の置き方を見るのに向いています。
見るときは、単に「かっこいい」で終わらせません。
- 画面のどこに文字があるか
- 余白はどれくらい広いか
- 写真や動画はどれくらい大きいか
- CTAは目立つか、控えめか
- スクロールしたくなる理由は何か
Awwwardsは、サイト全体の第一印象を考えるときに使いやすいです。
ただし、そのまま日本語サイトに持ち込むと読みにくくなることもあります。
派手な動きや読みにくい英語表現は、無理に真似しなくていいです。
Codexへの変換例
Awwwardsで見たような、余白を広く使ったファーストビューにしてください。
写真を主役にして、見出しは短く、CTAは1つだけ目立たせてください。
ただし、派手なアニメーションや読みにくい表現は不要です。
日本語サイトとして読みやすい文字サイズと行間を優先してください。Godlyは今っぽいWeb表現を見る
Godly は、現代的なWeb表現を探しやすいギャラリーです。
AIサービス、プロダクトサイト、ポートフォリオなどの見せ方を考えるときに参考になります。
Codexに普通に頼むと、カードが並ぶだけの画面になりがちです。
Godlyを見ると、次のような点を観察しやすいです。
- 背景の使い方
- カードの立体感
- グラデーションの抑え方
- 余白と情報量のバランス
- スクロールしたくなる構成
ただし、海外SaaS風に寄せすぎると、日本語では読みにくくなることがあります。
雰囲気だけを真似するより、自分のサイトに使える部分だけ抜き出すほうがいいです。
Codexへの変換例
Godlyに掲載されているような、現代的で洗練された印象にしてください。
ただし、海外SaaS風に寄せすぎないでください。
日本語で読みやすい余白、文字サイズ、行間を優先してください。
カードは増やしすぎず、1セクション1メッセージで整理してください。LandbookはLP構成と導線を見る
Landbook は、LPやサービスサイトの構成を考えるときに便利です。
AwwwardsやGodlyが世界観の参考だとすると、Landbookはもっと実務寄りです。
たとえば、次のような順番を見やすいです。
- ファーストビュー
- サービス紹介
- 料金表
- 導入事例
- お客様の声
- FAQ
- CTA
CodexにLPを作らせるときは、Landbookで近い構成を見てから指示すると失敗が減ります。
Codexへの変換例
LandbookのLP事例を参考に、サービス紹介ページとして自然に読める構成にしてください。
順番は、
1. 誰向けのサービスか
2. どんな悩みを解決するか
3. 具体的な特徴
4. 料金または利用イメージ
5. 安心材料
6. CTA
にしてください。
見た目だけではなく、問い合わせや予約につながる導線を重視してください。見るときは7つだけ確認する
参考サイトを見るときは、全部を見ようとしなくていいです。
まずはこの7つだけ見ます。
| 見る場所 | Codexに伝えるための観察 |
|---|---|
| 余白 | 広いか、詰まっているか。セクション間はどれくらい空いているか。 |
| 写真 | 写真が主役か、補助か。画面幅いっぱいか、カード内か。 |
| 文字 | 見出しは短いか。本文は読みやすい大きさか。 |
| 色数 | 何色くらい使っているか。強い色はどこだけに使うか。 |
| CTA | ボタンはどこにあるか。1画面に何個あるか。 |
| 順番 | 不安を消してからCTAに進む構成か。 |
| 情報量 | 1画面に詰め込みすぎていないか。 |
感覚をCodexへの指示に変える
「きれい」「おしゃれ」「高級感がある」は、そのままだと弱いです。
Codexに渡すときは、もう一段だけ具体化します。
| 感じたこと | Codexに伝える言葉 |
|---|---|
| おしゃれ | 色数を抑え、余白を広く取り、見出しを短くしてください。 |
| 高級感がある | 背景は生成りや白を基調にし、影は薄く、装飾を減らしてください。 |
| 見やすい | 文字サイズ、行間、余白、セクション間隔をスマホ優先で調整してください。 |
| 今っぽい | カードUI、柔らかい角丸、控えめな影、自然な余白で構成してください。 |
| 信頼できる | 実績、利用手順、FAQ、安心材料をCTA前に配置してください。 |
| 楽しそう | 写真を大きく使い、体験シーンが伝わる構成にしてください。 |
| 予約したくなる | ファーストビュー、料金、安心材料、CTAの順番を整理してください。 |
Codexには整理してから実装してもらう
デザインを頼むときは、いきなり「作ってください」と言わないほうがいいです。
先に、目的と判断基準を整理してもらいます。
このページのデザインを改善してください。
ただし、すぐにコードを書かないでください。
まず以下を整理してください。
1. このページの目的
2. 想定ユーザー
3. ユーザーが不安に感じること
4. 現在のデザイン上の問題
5. 参考サイトから取り入れる要素
6. 取り入れない要素
7. 改善方針
参考にしたい方向性：
- 余白は広く
- 写真を大きく
- 色数は少なく
- 見出しは短く
- CTAは1画面に1つ
- スマホで読みやすく
- 装飾よりも導線を優先
そのうえで、改善案を出してから実装してください。
最後に、変更した理由を
「ユーザー心理」
「デザイン上の効果」
「CVにつながる理由」
に分けて説明してください。この順番にすると、Codexの作業が「見た目の装飾」ではなく「目的に合う改善」になりやすいです。
毎回のズレはDESIGN.mdで減らす
参考サイトを見て、Codexへの指示が少しずつ言葉になってきたら、DESIGN.md にまとめるのがおすすめです。
DESIGN.md は、プロジェクト内に置くデザイン方針のメモです。
書くことはシンプルでいいです。
- 色
- 余白
- 文字サイズ
- ボタン
- カード
- 写真の使い方
- 避けたい表現
Codexに毎回「この DESIGN.md を読んでから実装してください」と伝えるだけで、ズレが減ります。
AIにデザインを任せるほど、人間側の判断基準をファイルにしておくことが大事になります。
AI時代のデザイン力は見る力と言語化する力
Codexを使えば、コードを書くスピードはかなり上がります。
でも、デザインの方向性まで自動で決まるわけではありません。
AIに「いい感じにして」と頼んでも、こちらが何を良いと感じるのかを伝えなければ、思った通りにはなりません。
だから、まず良いサイトを見る。
良いと感じた理由を分解する。
最後に、それをCodexへの指示に変える。
この流れができると、Codexはただのコード生成ツールではなく、自分のデザイン判断を実装してくれる相手になります。
センスは、見たものの蓄積から育ちます。
AI時代のセンスは、見たものをどれだけ言葉にできるかで決まります。
