AIでサイトを作るなら、まず覚えたいWeb用語。指示に使える23語の一覧

AIにサイトを頼むとき、「上の方の、あの3本線のやつ」と説明していませんか。

言葉を知っているだけで、AIへの指示は一言で済みます。この記事では、リールで紹介した6つの用語に、サイト作りでよく使う17の用語を足して、23個をまとめました。それぞれ「どこにある部品か」「どんな部品か」と、そのまま使える指示の例を付けています。

この記事の内容

• 言葉を知っているだけで、AIへの指示は一言で済む

• リールで紹介した6つの用語

• 組み合わせると、こう伝わる

• ページの部品（7〜16）

• 見た目・動き・画面の外（17〜23）

• 名前が分からないときの聞き方

• 頼む前に気をつけること

• おわりに

言葉を知っているだけで、AIへの指示は一言で済む

「上の方の、あの3本線のやつを押したら、横からメニューが出るようにして」。これでも伝わることはありますが、AIが別の場所を直してしまうこともあります。

部品の名前を知っていれば、「ハンバーガーメニューを押したら、ドロワーで開くようにして」の一言で済みます。どこを、どう直すかがはっきりするので、直してほしいところだけが直ります。

デザイナーがお客様とやり取りするときにも、同じ言葉が使えます。覚えておいて損はありません。

ここで紹介する用語は、どのAIに頼むときも同じように使えます。

• ChatGPTやClaudeのチャットで、サイトのHTMLを作ってもらうとき

• Claude Codeで、手元のファイルを直接直してもらうとき

• STUDIOやWordPressで、どう作ればいいかを聞くとき

指示の例は、どれもそのまま貼って使えます。「〇〇」のところは、自分の内容に置き換えてください。「このファイル」「このロゴ」とある例は、画像を一緒に添付してください。チャットのAIは、書き換えたHTMLを返してくれるので、それを自分のファイルに反映します。Claude Codeなら、手元のファイルにそのまま反映してくれます。

リールで紹介した6つの用語

まずは、リールで紹介した6つです。スマホでサイトを開いたときに、ほぼ必ず出てくる部品です。

1. ファーストビュー

場所：ページを開いて、スクロールせずに最初に見える範囲

どんな部品：サイトの第一印象が決まるところ。メインの写真や見出し、ボタンが入ることが多い

指示の例：「ファーストビューに、サービス名と予約ボタンが入るようにして」

2. ハンバーガーメニュー

場所：スマホの画面の右上（左上のこともある）

どんな部品：3本線のアイコン。押すとメニューが開く。重なった線がハンバーガーに見えることから、この名前で呼ばれます

指示の例：「スマホのときは、メニューをハンバーガーメニューにまとめて」

3. CTA

場所：ファーストビュー、ページの途中、ページの最後など。読んだ人が「やってみよう」と思うところ

どんな部品：押してほしいボタン。予約、購入、LINE登録など。「Call To Action（行動の呼びかけ）」の頭文字です

指示の例：「CTAのボタンを大きくして、文言を『無料で相談する』に変えて」

4. 固定ヘッダー

場所：画面の一番上

どんな部品：ロゴやメニューが入った上の帯を「ヘッダー」と呼びます。スクロールしても上に残り続けるものが「固定ヘッダー」です

指示の例：「ヘッダーを固定ヘッダーにして、スクロールしても上に残るようにして」

5. アコーディオン

場所：よくある質問の欄など、ページの中ほどから下

どんな部品：押すと開いて、もう一度押すと閉じる仕組み。長い説明を、必要な人だけが読めるようにたためます

指示の例：「よくある質問を、質問だけ見えるアコーディオンにして。押したら答えが開くように」

6. モーダル

場所：画面の上に重なって出てくる

どんな部品：ボタンを押したときなどに、今のページの上に重なって開く窓。後ろのページは少し暗くなることが多い

指示の例：「『料金を見る』を押したら、料金表がモーダルで開くようにして」

組み合わせると、こう伝わる

用語を組み合わせると、長い説明がいらなくなります。リールで紹介した指示がこれです。

「ファーストビューのCTAを大きくして、よくある質問はアコーディオンにして」

どこの、何を。この2つが用語で言えると、あとは「どうするか」を普通の言葉で足すだけで、AIは迷わずにそこだけを直してくれます。

ページの部品（7〜16）

ここからは、リールで紹介しきれなかった用語です。まずは、ページの上から順に、部品の名前をまとめました。7〜9はページの上の方、10〜15はページの真ん中、16はページの一番下にある部品です。

7. ヒーロー（ヒーローセクション）

場所：ファーストビューの中

どんな部品：画面いっぱいに大きく置く、メインの写真と見出しのまとまり。ファーストビューは「見える範囲」の呼び名、ヒーローは「そこに置く大きな写真と見出しの部品」の呼び名です

指示の例：「ヒーローの写真を画面幅いっぱいにして、見出しを写真の上に重ねて」

8. ドロワー（ドロワーメニュー）

場所：ハンバーガーメニューを押したときに、画面の横から出てくる

どんな部品：引き出し（drawer）のように、横からすっと出てくるメニュー

指示の例：「ハンバーガーメニューを押したら、右からドロワーで出てくるようにして」

9. パンくずリスト

場所：ヘッダーのすぐ下あたり

どんな部品：「ホーム ＞ サービス ＞ 料金」のように、今どのページにいるかを示す道しるべ

指示の例：「下層ページのヘッダーの下に、パンくずリストを入れて」

10. セクション

場所：ページ全体

どんな部品：ページを縦に区切った、1つ1つのまとまり。「サービス紹介」「お客様の声」「料金」など

指示の例：「お客様の声のセクションを、料金のセクションの前に移して」

11. カード

場所：サービス一覧や実績紹介など

どんな部品：写真、見出し、短い文を、1枚の箱にまとめた部品

指示の例：「サービス紹介を、写真と見出しと2行の説明が入ったカードにして」

12. グリッド

場所：カードや写真が並ぶところ

どんな部品：縦と横にそろえて並べる配置のこと。「3列のグリッド」のように使います

指示の例：「実績のカードを、パソコンでは3列、スマホでは1列のグリッドにして」

13. カルーセル（スライダー）

場所：実績やお客様の声など

どんな部品：横にスライドして、中身が切り替わる部品

指示の例：「お客様の声を、横にスワイプして見られるカルーセルにして」

14. タブ

場所：料金プランや、メニューの切り替えなど

どんな部品：見出しを押すと、下の中身が切り替わる部品

指示の例：「料金を『個人向け』『法人向け』のタブで切り替えられるようにして」

15. フォーム

場所：お問い合わせや予約のページ

どんな部品：名前やメールアドレスの入力欄と、送信ボタンのまとまり

指示の例：「お問い合わせフォームに、名前、メールアドレス、相談内容の3つの入力欄を作って」

16. フッター

場所：ページの一番下

どんな部品：会社名や住所、プライバシーポリシーへのリンク、コピーライトなどが入る帯

指示の例：「フッターに、会社名とプライバシーポリシーへのリンクを入れて」

見た目・動き・画面の外（17〜23）

17〜21は見た目や動きの呼び名、22・23はページの外（SNSやブラウザのタブ）に出るものです。

17. マージン

場所：部品と部品の間

どんな部品：部品の外側の余白

指示の例：「セクションとセクションの間のマージンを、もう少し広げて」

18. パディング

場所：ボタンや箱の中

どんな部品：部品の内側の余白。ボタンの文字と枠の間など

指示の例：「CTAのボタンのパディングを広げて、押しやすくして」

19. レスポンシブ

場所：ページ全体

どんな部品：画面の幅に合わせて、レイアウトが変わる作りのこと。パソコンでは横並び、スマホでは縦積み、など

指示の例：「スマホで見ても崩れないように、レスポンシブにして」

20. ホバー

場所：ボタンやリンク

どんな部品：パソコンで、マウスを乗せたときの見た目の変化。スマホでは、タップしたときに一瞬出たり残ったりすることがあるので、ホバーだけに大事な情報を入れないのが基本です

指示の例：「ボタンにホバーしたとき、色が少し濃くなるようにして」

21. スクロールアニメーション

場所：ページ全体

どんな部品：スクロールして画面に入ったときに、ふわっと出てくるような動きの演出

指示の例：「見出しが画面に入ったら、下から少し浮き上がって表示されるようにして」

22. OGP

場所：LINEやSNSでURLをシェアしたとき

どんな部品：シェアしたときに出る画像、タイトル、説明文の設定

指示の例：「OGPを設定して。画像はこのファイル、タイトルはサイト名にして」

23. ファビコン

場所：ブラウザのタブ

どんな部品：タブの左に出る、小さなアイコン

指示の例：「このロゴから、ファビコンを作って設定して」

名前が分からないときの聞き方

用語を全部覚えていなくても大丈夫です。分からないときは、AIに聞けば教えてくれます。

ChatGPTもClaudeも、画像を貼って質問できます。参考にしたいサイトのスクショを貼って、こう聞いてみてください。

「この画像の、赤で囲んだ部品は何と呼ぶ？AIに指示するときの言い方も教えて」

名前が分かれば、次からはその言葉で頼めます。聞いた用語を自分用の一覧に足していくと、それがそのまま指示の辞書になります。

頼む前に気をつけること

• 同じ部品でも、呼び方が何通りかあるものがあります（カルーセルとスライダー、など）。伝わっていないと感じたら、別の呼び方でも言ってみてください

• お客様のサイトのURLや、公開前の情報を貼るときは、会話を学習に使わせない設定にしてから使ってください。ChatGPTもClaudeも、設定画面のデータやプライバシーの項目でオフにできます。そのうえで、お客様の情報は事前に了承を取ってから貼ってください

• AIが直したあとは、パソコンとスマホの両方で、実際に開いて確かめてください

• 参考サイトのスクショを使うのは、部品の名前を知るためだけにします。デザインをそのまま真似るのはNGです

おわりに

用語を知っているだけで、AIへの指示は一言で済みます。まずはこの記事の中から、今作っているサイトで使う用語を3つだけ選んで、次の指示で使ってみてください。

👇kumo_design 公式LINE

AI活用診断配布中！

Instagram @_kumo_design

デザイナーのAI活用術発信中！