AIに頼むなら知っておきたい用語20語【Webデザイン編｜文字・色・質感】
note.comでも読む
「本文がちょっと読みにくい」「ボタンが目立たない」「もう少し上品に」——そう伝えて直してもらったのに、戻ってきた画面を見て「そこじゃないんだけど…」とつぶやいたことはありませんか。
間違ってはいない。でも、なんか違う。
「上品に」「目立たせて」と頼んでも思った仕上がりにならず、何度も直してもらっているうちに時間だけが溶けていく、という初心者の声もあります。
その原因の多くは、AIの性能ではありません。頼む言葉が1つに絞れていないから、AIが何通りもの方向に迷ってしまうのです。
骨組みの次は「見た目」の言葉
この記事は、前回の「AIに頼むなら知っておきたい用語23語【Webサイト制作編】」の続編です。
https://note.com/shinemon33/n/na000d66f9c7e
前回は、余白・大きさ・配置・動き・構造という「骨組み」の言葉を23語まとめました。骨組みが決まったら、次にぶつかるのは見た目です。今回は文字・色・質感の言葉を20語、同じ形でまとめます。前回を読んでいなくても、この記事だけで使えるように書いています。
「上品に」という一言を、AIの側から見てみてください。書体を変えるのか、色を落ち着かせるのか、余白を広げるのか、字間を空けるのか、角を丸めるのか。何通りにも読めるので、AIはそのどれかを当てにいくしかありません。 そして当てた答えが、あなたの頭の中と違う。
今回の20語も、前回と同じ基準で選びました。「この語が無いと、直す場所が2択以上に割れる」語だけです。逆に言えば、この語を使えば「どこを・どれだけ」を1つに絞りやすくなります。
なお、「何色にするか」の伝え方（色相・明度・彩度・例え）は、以前の記事「『いい感じの色で』がAIに伝わらない理由と、すぐ使える色の言語化術」で扱っています（記事末尾の「あわせて読みたい」に置いておきます）。今回の色のパートは「どこの色か・どう重ねるか」に絞ります。
【文字・フォント】「読みにくい」が一番割れる10語
「読みにくい」は、デザインの直しで一番よく出る言葉です。そして、AIにとって一番割れる言葉でもあります。行間なのか、字間なのか、文字の大きさなのか、色なのか、1行の長さなのか。原因が5通り以上あるからです。次の10語で「どこが読みにくいのか」を1か所ずつ指せるようになります。
行間 — 行と行の間の広さ 頼み方｜「読みにくい」→「本文の行間を1.8に」 AIが迷う理由｜「読みにくい」と言われると、行間・字間・文字サイズ・文字色・1行の長さのどれを直すか、5通りあります。
字間（トラッキング） — 文字と文字の間を、全体に均等に広げる・詰める 頼み方｜「詰まって見える」→「見出しの字間を0.05em広げる」（emは「文字1個分の大きさ」を1とした単位。0.05emは文字1個分の5%） AIが迷う理由｜「詰まって見える」と言われると、横（字間）なのか縦（行間）なのか、2通りあります。
カーニング — 特定の文字の組み合わせの間だけを、個別に詰める 頼み方｜「カタカナの間がスカスカ」→「見出しをカーニングで詰める。とくに『ッ』『ャ』と【】のまわり」 AIが迷う理由｜「字間を詰めて」と言われると、全体を均等に詰めるのか、文字の組ごとに詰めるのか、2通りあります。
字間とカーニングは、「字間には2種類ある」とセットで覚えておくと便利です。
何も設定しないと、文字は「ベタ組み」という状態で並びます。日本語は1文字ずつ同じ幅の箱に入っているので、小さい「ッ」「ャ」や、【】・句読点のまわりに隙間が空きます。「なんかスカスカに見える」の正体は、これです。
私もバナーや見出しを作るときは、表示されたままでは出しません。詰める所を1か所ずつ詰めてから出しています。バナーや見出しは、詰めることが多い場所です。だからこそ、AIに「字間を詰めて」とだけ言うと、全体を詰めるのか、気になる所だけ詰めるのかで割れてしまいます。プロのやり方に近いのは、カーニングのほうです。
Webでは、日本語の文字を形に合わせて自動で詰める「palt（パルト）」という機能がよく使われます。厳密にはカーニングとは別の機能ですが、「スカスカ」をまとめて解消したいときの頼み方として覚えておくと便利です。ただしpaltが効くのは、その機能を持っているフォントだけで、フォントや読み込み方によっては効かないこともあります。そのときは「この文字とこの文字の間だけ詰めて」と、場所を指して頼むと伝わりやすくなります。
ウェイト（太さ） — 文字の太さ 頼み方｜「目立たせて」→「見出しのウェイトを700に」（700は、多くのフォントで「太字」にあたる数値） AIが迷う理由｜「目立たせて」と言われると、大きさ・太さ・色・背景の帯のどれで目立たせるか、4通りあります。
ゴシック体／明朝体 — 書体の大きな分類（英語圏ではサンセリフ／セリフ） 頼み方｜「上品に」→「見出しを明朝体、本文はゴシック体に」 AIが迷う理由｜「上品に」と言われると、書体・色・余白・字間のどれを変えるか、4通りあります。
Webフォント — ネットから読み込んで使う書体（Google Fontsなど） 頼み方｜「やわらかい書体に」→「見出しはWebフォントのZen Maru Gothicで」 AIが迷う理由｜「やわらかい書体に」と言われると、端末に入っている書体から選ぶのか、ネットから読み込むのか、文字ごと画像にするのか、3通りあります。どれを選んだかで、スマホでの見え方が変わります。
アイコンフォント — 文字と同じように扱えるアイコン集（Material Symbolsなど） 頼み方｜「アイコンを入れて」→「アイコンフォントのMaterial Symbolsで」 AIが迷う理由｜「アイコンを入れて」と言われると、画像・SVG・絵文字・アイコンフォントの4通りあります。絵文字だと、端末によって見た目が変わります。
ジャンプ率 — 見出しと本文の、文字の大きさの差 頼み方｜「メリハリを」→「ジャンプ率を上げて、見出し40px・本文16px」 AIが迷う理由｜「メリハリを」と言われると、大きさの差・太さ・色・余白の4通りあります。
改行位置 — どこで行が折り返されるか 頼み方｜「変なところで切れる」→「見出しは文節で改行、1文字だけ次の行に落とさない」 AIが迷う理由｜「変なところで切れる」と言われると、幅を広げる・文字を小さくする・手で改行を入れる・文節で折り返す設定にする、の4通りあります。
1行の文字数 — 本文の1行に並ぶ文字の数 頼み方｜「長くて読みにくい」→「本文は1行35字前後に」 AIが迷う理由｜「長くて読みにくい」と言われると、文章を削るのか、1行を短くするのか、行間を広げるのか、3通りあります。
【色】「どこの色か」で割れる6語
色の指示が割れるのは、「何色か」だけが原因ではありません。どこの色を変えるのか、どう重ねるのかが決まっていないと、同じ「目立たせて」でも直す場所が何か所にも分かれます。
配色の役割（ベースカラー／メインカラー／アクセントカラー） — 3つで1語として覚えます。ベース＝背景など一番広い面の色、メイン＝そのサイトの顔になる色、アクセント＝ボタンなど「ここを見て」の色 頼み方｜「ボタンを目立たせて」→「アクセントカラーのオレンジはボタンだけに使う」 AIが迷う理由｜「ボタンを目立たせて」と言われると、ボタンの色を変える・周りの色を抑える・ボタンを大きくする、の3通りあります。色の役割が決まっていないと、どこに色を足すかも決められません。3色の割合は、以前の記事「配色で何時間も迷う人が知らない『3色の法則』」で書いています。
コントラスト — 文字と背景の明るさの差 頼み方｜「文字が読みにくい」→「本文と背景のコントラストを4.5:1以上に」（通常サイズの文字の目安。大きな見出しは3:1以上） AIが迷う理由｜「文字が読みにくい」と言われると、文字色を濃くする・背景を薄くする・文字を太くする・大きくする、の4通りあります。数字があると、どこまでやれば足りるかも決まります。
不透明度 — 透け具合 頼み方｜「薄くして」→「不透明度60%に」 AIが迷う理由｜「薄くして」と言われると、色を淡くする（下は透けない）・全体を透かす（下が透ける）・明るくする、の3通りあります。
オーバーレイ — 写真の上に色を1枚重ねること 頼み方｜「写真の上の文字が読めない」→「写真に黒40%のオーバーレイ」 AIが迷う理由｜「写真の上の文字が読めない」と言われると、文字色を変える・写真を暗くする・文字に影を付ける、の3通りあります。
グラデーション — 色がなめらかに移り変わる塗り 頼み方｜「背景をいい感じに」→「上から白→薄いオレンジの縦グラデーション」 AIが迷う理由｜「背景をいい感じに」と言われると、単色・グラデーション・写真・模様の4通りあります。グラデーションに決めても、向き・色の数・範囲がまだ決まりません。
カラーコード（HEX） — #から始まる色の番号 頼み方｜「さっきの緑っぽい色で」→「ボタンは #E8792B、見出しは #2F5D3A」 AIが迷う理由｜「緑っぽい色」と言われると、明るい緑・暗い緑・黄みの緑・青みの緑と、方向だけでも4通りあり、その中にまた何色もあります。番号なら1色に決まります。
【質感】前回の約束、角丸・影がここで揃う4語
前回の記事の実戦例で、「角丸・影は今回の23語には含めていません。次回のWebデザイン編で扱います」と書きました。ここで回収します。
角丸 — 角の丸み（箱の角） 頼み方｜「柔らかく」→「カードの角丸を12pxに」 AIが迷う理由｜「柔らかく」と言われると、角を丸める・色を淡くする・影をぼかす・書体を丸ゴシックにする、の4通りあります。
影（シャドウ） — 浮いて見える影。ずれ・ぼかし・濃さで決まる 頼み方｜「立体感を」→「影は下に4pxずらし、ぼかし16px、薄く」 AIが迷う理由｜「立体感を」と言われると、影・グラデーション・枠線の3通りあります。影に決めても、ずれ・ぼかし・濃さの組み合わせは何通りもあります。
ボーダー（枠線） — 要素のふちの線 頼み方｜「区切って」→「カードに1pxの薄いグレーのボーダー」 AIが迷う理由｜「区切って」と言われると、枠線・影・背景色・余白の4通りあります。
線の角（マイター結合／ラウンド結合） — 線が折れ曲がる角の形。マイター＝尖る（SVGなどでは、何も指定しないとこちら）、ラウンド＝丸い。ほかに、角を切り落とすベベル結合もあります 頼み方｜「袋文字の角がトゲトゲして痛い」→「文字の縁取りの線の角をラウンド結合に」 AIが迷う理由｜「角を丸くして」と言われると、箱の角（角丸）なのか、線の折れ目（線の角）なのか、2通りあります。
いちばん出会いやすいのは、バナーやサムネの**袋文字（文字の縁取り）**です。太い縁取りを付けると、「角」のような画数の多い文字は、折れ目の外側がトゲのように尖ります。これは文字の形ではなく、縁取りの線の角の問題です。線で描いたアイコンや図の角も同じで、こちらでしか直りません。
そのまま貼れる：実戦の頼み方4パターン
実際にAIへ貼る指示文として使えるパターンを4本用意しました。「ふつうの頼み方」と「用語ありの頼み方」で何が変わるかも添えています。
パターン1｜本文が読みにくい（文字＋色）
ふつうの頼み方：
本文が読みにくいので、読みやすくしてください。用語ありの頼み方：
本文の行間を1.8、1行35字前後にして。
文字色は、背景とのコントラストが4.5:1以上の濃いグレーに。AI側で変わること｜「読みにくい」は5通り以上に割れます。語がそろうと迷う場所が減るので、往復を減らしやすくなります。
パターン2｜写真の上の見出しが読めない（色＋文字）
ふつうの頼み方：
写真の上の文字が見えにくいです。用語ありの頼み方：
ファーストビューの写真に黒40%のオーバーレイをかけて。
見出しは白、ウェイト700に。AI側で変わること｜写真を変えるのか、文字を変えるのか、影を付けるのか。3通りの迷いが消えます。前回の「ファーストビュー」も一緒に使うと、場所まで1回で伝わります。
パターン3｜上品な雰囲気にしたい（文字＋色＋質感）
ふつうの頼み方：
もっと上品な感じにしてください。用語ありの頼み方：
見出しを明朝体にして、字間を0.1em広げて。
ベースカラーはオフホワイト、カードの角丸は4pxと小さめに。AI側で変わること｜「上品」は書体・色・形の合わせ技です。語で分けると、AIが解釈する幅を狭められます。なお0.1emは、文字1個分の10%です。
パターン4｜ボタンを押せる感じに・完成版（質感＋色）
前回のパターン4「ボタンを押せる感じに」では、パディング・ホバー・トランジションまでを使いました。今回の語で、見た目までそろいます。
ふつうの頼み方：
ボタンを押せる感じにしてください。用語ありの頼み方：
ボタンの背景はアクセントカラーのオレンジ、角丸8px。
影は下に2pxずらし、ぼかし6px、薄めに。
ホバーで影を少し強く、トランジションは0.2秒。AI側で変わること｜「押せる感じ」は、色・形・影・動きの合わせ技です。前回の語と今回の語がそろうと、ボタン1つを言葉だけで組み立てられます。
「スクショを貼れば、用語はいらない？」
「用語を覚えるより、参考サイトのスクショを貼ったほうが早いのでは？」という声があります。実際、画像を渡して大まかな方向性が伝わった事例は増えています。
これは本当です。画像は雰囲気を伝えるのが得意です。「このサイトみたいな感じ」は、言葉よりずっと早く伝わります。
ただ、スクショを渡してみたものの、文字の太さや余白の微妙なニュアンスまでは再現されず、「似ているけど違う」ものが出て修正の往復が続いた、という体験談もあります。
私も先日、実在するサイトを5件参考に渡して、AIにページを作らせてみました。出てきたのは、正直そこまで変わらない定番の形でした。そのとき分かったのは、参考を渡す価値は「説明できる言葉が残ること」のほうにある、ということです。
方向性は画像で伝わる。でも、太さ・字間・余白のような細部は、画像だけだと何通りにも割れる。 そこを指すのが、今回の20語です。
画像か言葉か、どちらかを選ぶ必要はありません。「このスクショの雰囲気で。見出しはウェイト700、本文の行間は1.8」のように、画像と用語を一緒に渡すのが、往復を減らしやすい頼み方です。
まとめ｜全部覚えなくていい。まず覚えたい3語
20語を一度に使いこなそうとしなくて大丈夫です。
最初に使ってほしいのは、**行間・コントラスト・配色の役割（ベース／メイン／アクセント）**の3語です。「読みにくい」「目立たない」「色がバラバラ」という、よく出る直しの多くは、この3語で指せます。残りは、必要になったときに戻ってきてください。
前回の23語と合わせれば、骨組みから見た目まで、言葉で頼めるようになります。修正の往復で溶けていた時間は、言葉1つずつ減らしていけます。
次回は、スマホ対応編（レスポンシブ・ブレイクポイント）の予定です。「スマホで見たら崩れた」を、言葉で直せるようにします。
また、今回のフォント・色の語は、HyperFrames（HTMLとCSSで動画を作る道具）にそのまま通じます。一度覚えた言葉は、Webサイトでも動画でも使い回せます。
まず、いま気になっている画面を1つ選んで、上のパターンを1本そのまま貼ってみてください。試してみて通じなかった語があれば、コメントで教えてください。スマホ対応編で拾います。フォローしておくと続きが届きます。