AIに頼むなら知っておきたい用語23語【Webサイト制作編】
note.comでも読む
「もっと空けて」「真ん中にして」「ふわっと出てくる感じで」——何度言っても思った通りにならない。そんな経験、ありませんか。AIに頼めばサクッとできるはずなのに、修正のたびに「どこを・どれだけ変えますか？」と確認が入って、気づけば自分でやるより時間がかかっている気がする、という声をよく聞きます。
HTMLは1文字も書かなくていいと聞いてAIでサイト作りを始めたのに、何度指示を出しても微妙にズレたまま。途中で諦めかけている人も、実は少なくありません。
通じなかった理由は、あなたの伝え方が悪いのではありません。言葉が無かっただけです。
「おしゃれな感じで」が通じなかった、あの話の続き
以前の記事「『おしゃれな感じで』をやめたら2本目も揃った。でも3本目で破綻した話」で、曖昧な言葉をやめることの大切さを書きました。
https://note.com/shinemon33/n/n091cfb6705fa
色の言語化の記事や、動きの指定語彙集の記事も同じ話です（記事末尾の「あわせて読みたい」に置いておきます）。
それらの記事に共通していた問題は、「何を直したいか分かっていても、その場所と量を指す言葉を持っていなかった」こと。色に名前をつけたら伝わった。動きに数字をつけたら伝わった。今回は余白・大きさ・配置・動き・構造、この5つの軸で言葉の地図を渡します。
この記事はWebサイト制作編のシリーズ第1弾です。次回はフォント・色のWebデザイン編、その後スマホ対応編と続く予定です。
「言葉が無い」とAIはどう迷うのか
少し立場を変えて考えてみてください。あなたがAI側だったとします。「カードがごちゃごちゃして見えるのできれいにして」と頼まれたとき、直す場所は①カード同士の間隔、②カードの内側の余白、③カードの並べ方の3箇所以上あります。どれから手をつければいいか、正直なところ当てに行くしかありません。
この記事で選んだ23語は、「この語が無いと、直す場所が2択以上に割れる」語だけです。逆に、ボタン・見出し・画像のように文脈で分かる語は入れていません。言葉が1つ加わるだけで、AIが迷う場所が消えます。CSSのプロパティ名の暗記は不要です。日常語で意味を理解して、頼むときに使えれば十分です。
【余白・距離】いちばん頼まれて、いちばん割れる3語
余白の指示は件数が多い分、ズレも多いグループです。「空けて」という一言が3通り以上に読めてしまうのが原因です。
マージン — 要素の外側の余白 頼み方｜「もっと空けて」→「カードのマージンを上下40pxに」 AIが迷う理由｜外側か内側か、上下か左右か。「空けて」だと3通りに読めて、どれかを当てにいきます。
パディング — 要素の内側の余白（枠と中身の間） 頼み方｜「ボタンが窮屈」→「ボタンのパディングを左右24pxに」 AIが迷う理由｜マージンを広げても内側の窮屈さは直りません。どちらを広げるか決まらないと、両方試すことになります。
ギャップ — 並んだ要素同士の間隔 頼み方｜「カードの間を空けて」→「カードのギャップを24pxに」 AIが迷う理由｜マージンで代用しようとすると端だけ余ってしまいます。ギャップという語があると、均等に空ける指示が一発で通ります。
【大きさ・単位】数字の意味が通じない5語
「少し大きく」「画面いっぱいに」「半分くらい」——どれも数字が無いので、AIが2pxにするか20pxにするか決められません。
ピクセル（px） — 画面上の絶対サイズ 頼み方｜「少し大きく」→「見出しを28pxに」 AIが迷う理由｜「少し」は2pxか10pxか人によって全然違います。数字を言えば一発です。
パーセント（%） — 親要素に対する割合 頼み方｜「半分くらいの幅」→「幅を50%に」 AIが迷う理由｜pxで固定幅にすると、画面サイズが変わったときに崩れます。「割合で」という一言が崩れを防ぎます。
ビューポート（vw／vh） — 画面の幅・高さを基準にしたサイズ 頼み方｜「画面いっぱいに」→「高さを100vhに」 AIが迷う理由｜「いっぱい」が親要素いっぱいなのか、ブラウザ画面いっぱいなのかで実装が変わります。
最大幅（max-width） — これ以上は広がらない上限 頼み方｜「PCで間延びする」→「本文の最大幅を720pxに」 AIが迷う理由｜幅を固定するとスマホで切れてしまいます。「最大幅」と言うことで広い画面だけ制限できます。
アスペクト比 — 縦横の比率 頼み方｜「サムネの形を揃えて」→「アスペクト比16:9で統一」 AIが迷う理由｜「揃えて」だけだと、高さを固定すればいいのか幅を固定すればいいのか決められません。
【配置】「真ん中」は3種類ある6語
「真ん中に」という言葉は、文字の中央なのか要素全体の中央なのかで実装が全く変わります。配置の語彙があると、この混乱が消えます。
中央揃え（テキスト） — 文字を左右中央に揃える 頼み方｜「真ん中に」→「見出しのテキストを中央揃え」 AIが迷う理由｜要素ごと中央に配置するのか、文字だけ中央に揃えるのかで処理が変わります。
横並び（flex） — 要素を横に並べる 頼み方｜「横に並べて」→「3枚を横並び、幅は均等」 AIが迷う理由｜折り返すのか、均等に並べるのか、詰めて並べるのか。「横に」だけでは決まりません。
カラム — 縦の区切り＝列。「2カラム」は2列 頼み方｜「左右に分けて」→「PCは2カラム、スマホは1カラム」 AIが迷う理由｜「分けて」が上下なのか左右なのか。列数が無いと組めません。
グリッド — 行と列の両方で整然と並べる 頼み方｜「並べて」→「2カラムのグリッド、スマホは1カラム」 AIが迷う理由｜横並びとグリッドは似ていますが、複数行にわたる整列が必要なときはグリッドを指定するとズレません。
固定（sticky／fixed） — スクロールしても画面に残る。「常に固定」と「途中から貼り付く」の2種類がある 頼み方｜「ヘッダーを残して」→「ヘッダーを常に上に固定」「見出しはスクロールで上に着いたら貼り付く」 AIが迷う理由｜最初から固定なのか、途中から貼り付くのかで作り方が別物です。「残して」だけではどちらか決められません。
重ね順（z-index） — 前後どちらに表示するか 頼み方｜「メニューが隠れる」→「メニューの重ね順を最前面に」 AIが迷う理由｜位置がずれているのか、前後関係の問題なのかを切り分けられないと、見当違いの場所を直してしまいます。
【動き】「ふわっと」が一番困る6語
動きの指示は感覚語が多すぎて、AIにとって一番解釈が割れるグループです。時間・緩急・方向のどれの話かを分けて指定するだけで、出力が一気に近づきます。
デュレーション — 動きにかける時間 頼み方｜「ゆっくり出して」→「デュレーション0.6秒で」 AIが迷う理由｜「ゆっくり」が0.3秒なのか2秒なのかは人によって全然違います。
ディレイ — 動き始めるまでの待ち時間 頼み方｜「順番に出して」→「1枚ごとにディレイ0.1秒ずらす」 AIが迷う理由｜同時に出るのか、ずれて出るのかで実装が変わります。
イージング — 動きの緩急（加速・減速のパターン） 頼み方｜「ふわっと」→「イージングはease-out」 AIが迷う理由｜「ふわっと」に含まれる時間・緩急・方向のうち、緩急だけを指す語です。語が無いと3つをまとめて当てにいきます。
トランジション — 状態の変化をなめらかにつなぐ 頼み方｜「色がパッと変わるのを直して」→「トランジション0.2秒」 AIが迷う理由｜アニメーションと混同されて、意図しない動きが加わることがあります。
ホバー — マウスを乗せた状態 頼み方｜「押せる感じに」→「ホバーで少し浮かせる」 AIが迷う理由｜クリックしたときの変化なのか、乗せたときの変化なのかで指定場所が変わります。
フェードイン — 透明な状態から表示される 頼み方｜「出てくるように」→「スクロールでフェードイン」 AIが迷う理由｜スライドか拡大かフェードか、「出てくる」だけでは決まりません。
【構造】この3語があると「この辺」が消える
構造の語彙は難しくありません。ただ、これが無いと「この辺を直して」という指示になってしまい、AIが範囲を確認しに来ます。
セクション — ページの1ブロック（料金・実績・お問い合わせなど） 頼み方｜「この辺を直して」→「料金のセクションを直して」 AIが迷う理由｜「この辺」の範囲が決まらないと、どこからどこまでを直すか確認が入ります。
ファーストビュー — 開いた瞬間に見える最上部（英語圏ではヒーローと呼ぶことが多い） 頼み方｜「トップの画像のとこ」→「ファーストビューの見出しを大きく」 AIが迷う理由｜「最初の画面」がページの一番上なのか、今見えている画面内のことなのか、解釈が分かれます。
カード — 枠で囲んだ1単位（サービス紹介・スタッフ紹介など） 頼み方｜「あの四角」→「カードの影を消して」 AIが迷う理由｜呼び名が無いと、どの要素を指しているか特定できません。
そのまま貼れる：実戦の頼み方4パターン
実際にAIへ貼る指示文として使えるパターンを4本用意しました。「ふつうの頼み方」と「用語ありの頼み方」で何が変わるかも添えています。
パターン1｜カードの並びを直したい（余白＋配置）
ふつうの頼み方：
カードがごちゃごちゃして見えるので、きれいに並べてください。用語ありの頼み方：
カードをPCは3カラム、スマホは1カラムの横並びにして。
カード同士のギャップは24px、カードの内側のパディングは20px。AI側で変わること｜「ごちゃごちゃ」だと列数・間隔・内側余白の3箇所のどれを直すか当てにいきます。用語ありだと迷う場所が無くなるので、1回で意図どおりに出やすくなります。
パターン2｜動きをつけたい（動きグループ）
ふつうの頼み方：
スクロールしたらふわっと出てくるようにしてください。用語ありの頼み方：
各セクションをスクロールでフェードインさせて。
デュレーション0.6秒、イージングはease-out、
カードは1枚ごとにディレイ0.1秒ずらす。AI側で変わること｜「ふわっと」は時間・緩急・方向のどれとも取れます。数字と語があれば、勝手に決める部分が無くなります。
パターン3｜最初の画面を整えたい（大きさ＋構造）
ふつうの頼み方：
トップの画像のところをもっとドーンとさせてください。用語ありの頼み方：
ファーストビューの高さを100vhにして、見出しは40px、
ボタンとの間はマージン32px。
本文の最大幅は720pxで中央に置いて。AI側で変わること｜「ドーン」は高さなのか文字サイズなのか画像なのか判断できません。ファーストビュー・vh・最大幅が入ると、どこをどれだけ変えるかがそのまま指示になります。
パターン4｜ボタンの手触りを直したい（余白＋動き）
ふつうの頼み方：
ボタンを押せる感じにしてください。用語ありの頼み方：
ボタンのパディングを上下12px・左右24pxにして、角丸8px。
ホバーで少し浮かせて（影を強く）、トランジションは0.2秒。AI側で変わること｜「押せる感じ」は形・影・動きの合わせ技です。語が揃うと4箇所を一度に指定できます。なお、角丸・影は今回の23語には含めていません。次回のWebデザイン編で扱います。
参考サイトを再現しようとして何度も失敗し続けた方が、画面幅・要素の数・文字数を先に数字で指定するようにしたら崩れなくなった、という体験談があります。用語と数字はセットで機能します。
「用語を覚えるくらいなら、CSSを勉強した方が早い？」
用語を覚えるくらいなら、HTMLやCSSを一から勉強したほうが早いのでは？ 結局「知識が無いと難しい」という話に戻るだけでは、という疑問もよく見かけます。
逆です。CSSを勉強しなくていいように、この23語があります。
CSSを学ぶのは「自分でコードを書くため」です。プロパティの書き方、単位の付け方、崩れたときの直し方まで、覚えることは数百あります。
一方、AIに頼むために必要なのは「どこを・どれだけ」を指す言葉だけです。書き方はAIが知っています。あなたが持つのは、指す言葉のほうです。
車の運転にエンジンの構造は要りません。「右折」「車線変更」「駐車」と言えれば車は動きます。この23語は、AIとのやり取りのための「運転用語」です。
CSSの本は、AIに読ませておけばいい。あなたが読むのは、この23語だけで足ります。
まとめ｜全部覚えなくていい。3グループで8割通る
23語を一度に使いこなそうとしなくて大丈夫です。
実際のところ、余白（マージン・パディング・ギャップ）、大きさ（px・%・vh）、動き（デュレーション・イージング・フェードイン） この3グループを頭に入れておくだけで、頼み方の精度は大きく変わります。残りは必要になったときに戻ってきてください。
次回はWebデザイン編として、フォント（行間・字間・ウェイト）と色の言語化を扱います。スマホ対応（レスポンシブ・ブレイクポイント）はさらにその後の予定です。
また、今回の23語は、HyperFrames（HTMLとCSSで動画を作る道具）にもそのまま通じます。デュレーション・イージング・マージンは、YouTubeで公開している「HyperFrames基礎講座」の中で私がAIに出している指示の言葉そのものです。言葉の地図は一度作れば、Webサイトでも動画でも使い回せます。
まず、いま困っている画面を1つ選んで、上の実戦例を1本そのまま貼ってみてください。頼んでみて通じなかった語があれば、コメントで教えてください。次の編で拾います。フォローしておくと、Webデザイン編が届きます。