こんにちは。
前回は、AIにサイトの見た目を伝えるときは、名前のあるデザインスタイルを使うと方向性が揃いやすい という話を書きました。
ただ、そこで終わりではありません。
AIにデザインをうまく伝えるコツは、センスではなく項目を分解して整理することです。
今回は、サイトの見た目をより高品質に作らせるための「5項目プロンプト」の型を解説していきます。
デザインスタイルを知っていても、それだけではまだブレる
Material Designで作って と伝えるだけでも、何もしないよりは圧倒的にデザインの方向性が揃います。
ですが、それでもまだ曖昧さは残ります。
- 余白をどのくらい取るのか。
- 情報量は多めなのか少なめなのか。
- 固い印象にしたいのか、やさしい印象にしたいのか。
ここまでは決まりません。
つまり、デザインスタイル名の指示は骨格にはなりますが、それだけで思った通りの完成形までは決まらないんですね。
だから必要なのが分解です。見た目をいくつかの判断軸に分けて渡す。これをやればAIの出力はかなり高品質になります。
まずはこの5項目に分けて書けば十分です
僕が今いちばん使いやすいと思っているのは、次の5項目です。
1. ベース思想
ここには、全体の骨格になるデザインスタイルを書きます。Material Design、Fluent Design、Apple HIG系のミニマルデザイン のようなものですね。
ここがないとAIはどの方向に整えればいいのか判断しづらくなります。
デザインイメージはこちら。
2. トーン
ここには、どんな印象を出したいかを書きます。信頼感、高級感、親しみやすさ、落ち着き、誠実さ。そういった言葉です。
同じ Material Design でも、トーンが変わればかなり別物になります。
3. レイアウト傾向
ここには、情報の並べ方の好みを書きます。余白重視、カード中心、一覧性重視、見出しを大きく、などです。
デザインが微妙になる原因のかなりの部分は、色ではなく情報の並び方だったりします。
4. 質感
ここには、表面の見え方を書きます。フラット、薄い影、ガラス調、柔らかい角丸、控えめな立体感、みたいな話です。
ベース思想と質感を分けて書くと表現の幅が増えます。 Swiss Design を骨格にしつつ質感はフラット寄りにする、というように整理できるからです。
5. 禁止事項
ここには、やってほしくないことを書きます。装飾過多にしない、ポップにしすぎない、色を増やしすぎない、影を強くしすぎない、みたいな感じです。
AIは基本的に足し算が得意です。だからこそ、引き算の条件を書いた方がブレにくくなります。とはいえ一発目からは思いつきにくいので試行錯誤過程で試してみてください。
そのまま使える基本テンプレート
まずはこの5行だけで十分です。難しく考えなくて大丈夫です。
1ベース思想:
2トーン:
3レイアウト傾向:
4質感:
5禁止事項:本当にこれだけです。まずは空欄でもいいので並べてみる。そのあと埋める。もちろん追加で色指定やフォント指定は自由にしてください。
用途別の完成プロンプト3例
完成形も3つだけ置いておきます。皆さんはここから近いものをコピーして、少しずつ変えていけば十分です。
信頼感のある企業サイト
1ベース思想: Swiss Design
2トーン: 信頼感、落ち着き、誠実さ
3レイアウト傾向: 白背景、整列感重視、余白は広め、情報は整理して見せる
4質感: フラット寄り、影はかなり弱め
5禁止事項: 派手な色を使いすぎない、ポップにしすぎない、過度な装飾を入れない会社案内、採用ページ、B2Bのサービスサイトなどは、まずこの型から始めてみてください。
すっきりしたサービス紹介ページ
1ベース思想: Material Design
2トーン: 清潔感、わかりやすさ、少し上品
3レイアウト傾向: カードUI、余白広め、CTAを目立たせる
4質感: 控えめな立体感、薄い影、整ったコンポーネント
5禁止事項: 情報を詰め込みすぎない、色数を増やしすぎない、アニメーションを派手にしない機能紹介、サービスLP、SaaSのトップページなどは、この型がかなり扱いやすいです。
親しみやすい個人サービス
1ベース思想: Scandinavian Design
2トーン: やさしい、温かい、親しみやすい
3レイアウト傾向: 詰め込みすぎない、文章が読みやすい、余白は広め
4質感: 柔らかい配色、角丸はやや大きめ、影は控えめ
5禁止事項: 子どもっぽくしすぎない、文字を薄くしすぎない、淡くしすぎてぼやけさせない個人事業、小さなサービス、ライフスタイル系のサイトではかなり使いやすい型です。
精度を上げる4つのコツ
- ベース思想は1つ。 混ぜるとAIの解釈があやふやになります。
- 骨格と質感を分けて書く。 「何系のデザインか」と「どういう表面にするか」を分けるとバリエーションも増えるし思った通りのデザインになりやすいです。
- 禁止事項を書く。 これを入れるとやりすぎをかなり防げます。
- 一発で完成を狙わない。 まず方向性を決めて、そのあと余白や色や装飾を直す方がうまくいきます。
ダメなプロンプトをどう直すか
たとえば、こういう頼み方はよくあります。
1高級感ある感じで、いい感じにしてください。これだと、高級感の意味も、何をどう整えるかも、全部AI任せです。
これを5項目に分けると、こうなります。
1ベース思想: Apple Human Interface Guidelines系のミニマルデザイン
2トーン: 上品、静か、高級感
3レイアウト傾向: 要素数は少なめ、余白を広く取る、見出しは大きめ
4質感: フラット寄り、影はごく弱く、細部はクリーンに
5禁止事項: ゴールドを多用しない、飾りを増やしすぎない、安っぽいグラデーションを使わない同じ「高級感」でも、ここまで分解するとかなり伝わりやすくなります。
迷ったらこの順番で考えれば書けます
- 何系のデザインにしたいかを決める
- どんな印象を出したいかを決める
- 余白やカードなど、情報の並べ方を決める
- 最後にやってほしくないことを書く。思いつかなければスルーして良い
この順番で考えるとかなり書きやすいです。最初から完璧なプロンプトを作ろうとしないこと。これも大事です。
まとめ
というわけで、AIにサイトの見た目をうまく伝えたいならデザインスタイル名だけで終わらせず5項目に分けて書くのがおすすめです。
ベース思想、トーン、レイアウト傾向、質感、禁止事項。この5つを書くだけで出力の安定感はかなり変わります。
まずは難しく考えず、今日紹介したテンプレートを1回埋めてみてください。それだけでも おしゃれにして と丸投げするより随分良くなるはずです。
関連記事