AIでサイトを作るなら、マージン・パディング・ギャップなど24個のWeb用語で場所と動きを言い分ける
「ここの余白を広げて」が思った場所に効かないのは、余白にも種類があるから。基本・余白・アニメーションの24語を言い分けると、AIへの伝わり方が変わる。
どんな問題を解決するか / いつ使うか
Claude CodeやCodexにサイトの修正を頼んでも、違う場所が直ったり、全体が崩れたりする。たいていは「どこの何を」を指す言葉があいまいなせい。ノンデザイナーがAIでサイトを作り、直しを頼むときの共通語として使う。
24の言葉（一言の説明つき）
基本（9）
- ヘッダー／フッター：ページの一番上と一番下の共通部分
- ファーストビュー：開いて最初に見える画面
- h1・h2・h3：大見出し・中見出し・小見出し
- サイトタイトル：検索結果とブラウザのタブに出る名前
- ディスクリプション：検索結果でタイトルの下に出る説明文
- OGP：SNSで共有したときに出る画像と文
- ファビコン：タブに出る小さいアイコン
- CTA：問い合わせや申し込みへ誘うボタン
- サンクスページ：送信後に出るお礼のページ
余白とサイズ調整（6）＋部品（2）
- マージン：枠の外側の余白（要素と要素の間）
- パディング：枠の内側の余白（枠と中身の間）
- ギャップ：横や縦に並べたものどうしの間
- 行間：文章の行と行の間
- レスポンシブ：スマホでもPCでも崩れない作り
- ブレイクポイント：スマホ用とPC用の見た目が切り替わる画面幅
- オーバーレイ：画像の上に重ねる色の膜（文字が読みやすくなる）
- コンポーネント：使い回す部品。1か所直すと全ページに反映される
アニメーション（7）
- ローディング／19. フェードイン／20. ホバー／21. スクロールアニメーション／22. パララックス（背景と手前が違う速さで動く）／23. スティッキー（スクロールしても画面に付いてくる）／24. ハンバーガーメニュー
頼み方の例
- 悪い例：「サービス紹介のところ、もっとゆったりさせて」
- 良い例：「サービス紹介のカード同士のギャップを24pxから40pxに。カードのパディングは今のまま」
- 「ファーストビューの写真に黒のオーバーレイ（不透明度40%）を重ねて、h1を読みやすくして」
- 「ヘッダーをスティッキーにし、768px以下のブレイクポイントでハンバーガーメニューに切り替えて」
注意点
- 言葉だけでなく、数値（px）と「変えない部分」も添えると、さらに狙った所だけ直る（AIにデザインを頼むときは前提を「数値」で渡す）。
- 動きの言葉をもっと増やしたいときは、動く見本つきの用語集を使う（動きの指示は、動く見本付きの用語集（motion-prompt）から選んで渡し、カメラワークは名前と秒数・速さで書く、スクロールアニメーションは「10の用語」で指示する）。
- 同じ投稿者の「先に決める7つ」と合わせると、作る前の基準と直すときの言葉がそろう（AIにサイトを組ませる前に、全ページ共通の基準を7つ決めておくと、頼むたびにデザインが変わらなくなる）。
出典
- 投稿者: @tatsu_studio
- 投稿: @tatsu_studio · 2026-10-17（スレッドの返信に24語の一覧）
- 収集日: 2026-10-17（JST）