見た目の指示
雰囲気は、部品に分けて伝える
前の回で、曖昧な言葉を数値に置き換えました。とはいえ、頭の中にあるのはたいてい「こういう雰囲気」という全体の絵で、数値ではありません。この回では、その雰囲気を伝わる形にほどく方法を練習します。
コツは1つです。雰囲気を、部品ごとの指定に分ける。見た目は、だいたい次の4つで決まります。
- 背景の色
- 文字の色
- 余白の広さ
- 角の丸み
「落ち着いた雰囲気」も「かわいい感じ」も、この4つの値の組み合わせに落ちます。落としてしまえば、AI は迷いません。
参考を先に示す
もう1つ強いのが、参考を示すやり方です。ゼロから想像させるより、近いものを1つ挙げて「そこに寄せて」と頼むほうが速く着きます。
プレーンテキスト
悪い例
おこづかい帳をかわいくしてプレーンテキスト
良い例
家計簿アプリの明細画面のような、白い紙の上にカードが乗った見た目にしてください。
画面全体の背景は薄いグレー #f3f4f6、中身を入れる箱は白 #ffffff、
箱の内側の余白は24px、角は12px 丸めてください。良い例では、まず「白い紙の上のカード」という参考を出し、そのあと4つの部品を数値で埋めています。参考だけでも、数値だけでも足りません。参考は方向を決め、数値はブレを止めます。
見た目の言葉を少しだけ覚える
AI に伝わりやすい言葉が、いくつかあります。意味だけ知っておけば十分です。
- 背景色 画面や箱の後ろの色。CSS では background-color と呼ばれます。CSS は見た目を決める書き方のことです
- 余白 中身と枠の間のすき間。内側の余白を padding、外側の余白を margin と呼びます
- 角丸 四角の角を丸めること。border-radius と呼びます。数値が大きいほど丸くなります
これらの言葉を使う必要はありません。「箱の内側に24pxのすき間」と日本語で書いても通じます。ただ、名前を知っていると、返ってきた説明が読めるようになります。
この回でやること
おこづかい帳の中身を、白いカードの形にまとめます。背景色と角丸を数値で指定して、雰囲気を再現できるかを試します。
完成条件
- 雰囲気を、背景色・余白・角丸の3つに分けて頼みます
- カードの背景は #ffffff、角丸は12px、内側の余白は24pxです
- 見出しはカードの中に入れます