「ページの上にある、でっかい画像のところをかっこよくして」

……伝わらなくはないですが、AIに指示を出すたびに「あの部分」「あそこの四角いやつ」と説明するのは大変ですよね。実はWebサイトの画面パーツには、全部ちゃんと名前がついています。

名前を知っていれば、指示は一言で済みます。「ヒーローセクションをかっこよくして」——これだけでAIは正確に理解してくれるんです。

この記事は、画面パーツの名前を辞書のように引ける形でまとめました。頭から読んでもいいですし、「あの部品なんて言うんだっけ？」となったときに戻ってきてもOKです。

ページの骨組み

まずは、ほとんどのWebサイトに共通する「大きな区画」の名前からです。

ヘッダー（Header）／ナビゲーションバー（Navbar）

ページの最上部にある帯状のエリアのことです。ロゴやメニューリンクが並んでいる、あの部分ですね。

メニューリンクの並びの部分だけを指してナビゲーションバー（ナビバー）と呼ぶこともあります。ほぼ同じ意味で使われることも多いです。

AIへの指示例:

ヘッダーにロゴと「ホーム / 料金 / お問い合わせ」のナビゲーションを追加して。スクロールしても上部に固定されるようにして

ヒーローセクション（Hero Section）

ページを開いて最初に目に入る、大きな見せ場のエリアです。キャッチコピー・大きな画像・ボタンの組み合わせが定番ですね。

サイトの第一印象はほぼここで決まるので、「ヒーローを直して」という指示はかなり使用頻度が高いです。

AIへの指示例:

ヒーローセクションを作って。キャッチコピー、サブテキスト、CTAボタンを縦に並べて、背景にはグラデーションを敷いて

フッター（Footer）

ページの最下部にあるエリアです。コピーライト表記（© 2026 〇〇）、SNSリンク、利用規約へのリンクなどを置くのが定番です。

AIへの指示例:

フッターを追加して。コピーライトとX・GitHubへのリンクを入れて

サイドバー（Sidebar）

画面の左右どちらかに縦に配置されるエリアです。目次やメニュー、フィルタなどを置きます。管理画面やドキュメントサイトでよく見かけますね。

AIへの指示例:

左側にサイドバーを追加して、記事の目次を表示して。モバイルでは非表示にして

情報を見せる部品

コンテンツを整理して見せるためのパーツたちです。

カード（Card）

画像・タイトル・説明文をひとまとまりにした四角い箱です。角丸と影がついていることが多いですね。商品一覧、記事一覧、料金プラン……あらゆる「一覧もの」はだいたいカードでできています。

AIへの指示例:

実績セクションに3枚のカードを横並びで置いて。各カードはサムネイル画像・タイトル・説明文の構成で、ホバーでふわっと浮くようにして

バッジ（Badge）

「NEW」「人気」「無料」のような、小さなラベルのことです。カードのすみやメニュー項目の横にちょこんと付いている、あれです。

AIへの指示例:

料金プランのカードに「おすすめ」バッジを付けて。目立つ色で右上に配置して

カルーセル（Carousel）

複数の画像やカードを、横にスライドして切り替えられる部品です。スライダーとも呼ばれます。回転木馬（カルーセル）のようにくるくる回ることが名前の由来です。

AIへの指示例:

お客様の声セクションをカルーセルにして。3秒ごとに自動で次のスライドに切り替わって、下に現在位置のドットを表示して

タブ（Tab）

「月額／年額」のように、クリックで表示内容を切り替えるボタンの並びです。同じ場所で複数の情報を切り替えて見せたいときに使います。

AIへの指示例:

料金セクションに「月額 / 年額」のタブを付けて、切り替えると料金表示が変わるようにして

アコーディオン（Accordion）

クリックすると開閉する、折りたたみ式の部品です。よくある質問（FAQ）でおなじみですね。楽器のアコーディオンのように伸び縮みすることが名前の由来です。

AIへの指示例:

FAQセクションをアコーディオンで作って。質問をクリックすると答えがスルッと開くようにして

操作する部品

ユーザーに行動してもらうためのパーツたちです。

CTAボタン（Call To Action）

「無料で始める」「今すぐ登録」のような、行動を促すボタンのことです。CTAは「Call To Action＝行動喚起」の略。ページの中で一番押してほしいボタンなので、一番目立たせるのが鉄則です。

AIへの指示例:

ヒーローセクションのCTAボタンをもっと目立たせて。サイズを大きく、色はアクセントカラーにして

ドロップダウン（Dropdown）

クリックすると下に選択肢のリストが開く部品です。メニューにも、フォームの選択肢（都道府県を選ぶやつ）にも使われます。

AIへの指示例:

ヘッダーの「サービス」メニューをドロップダウンにして、ホバーでサブメニューが開くようにして

ハンバーガーメニュー（Hamburger Menu）

スマホ表示のときに出てくる「三」みたいな三本線のボタンです。タップするとメニューが開きます。三本線がハンバーガーに見えることが名前の由来です。

AIへの指示例:

モバイル表示のときはナビゲーションをハンバーガーメニューにして、タップで右からメニューがスライドインするようにして

プレースホルダー（Placeholder）

入力欄にうっすら表示されているヒントの文字です。「例: yamada@example.com」のような、入力し始めると消えるあの文字ですね。

AIへの指示例:

お問い合わせフォームの各入力欄にプレースホルダーを設定して。メール欄は「例: yamada@example.com」で

重ねて表示される部品

ページの上にふわっと現れる系のパーツたちです。

モーダル（Modal）

画面の中央にポンと重なって表示されるウィンドウです。背景が暗くなって、閉じるまで他の操作ができなくなるのが特徴。確認ダイアログや画像の拡大表示などに使います。

AIへの指示例:

「詳細を見る」ボタンを押したらモーダルで詳細情報を表示して。背景クリックか×ボタンで閉じられるようにして

トースト（Toast）

画面のすみに数秒だけ現れて、自動で消える小さな通知です。「保存しました」「コピーしました」のような、操作の結果をさりげなく伝えるのに使います。トースターからパンが飛び出すイメージが名前の由来です。

AIへの指示例:

フォーム送信が成功したら「送信しました」のトーストを右下に3秒表示して

ツールチップ（Tooltip）

アイコンやボタンにマウスを乗せると出てくる、小さな説明の吹き出しです。「？」アイコンにホバーすると補足説明が出る、あれですね。

AIへの指示例:

設定項目の横に「？」アイコンを置いて、ホバーでツールチップの説明が出るようにして

覚えた用語を実戦投入してみよう

用語は実際に指示に使ってみるのが一番の覚え方です。AIツールにこんな指示を出して、部品の名前が通じる気持ちよさを体験してみてください。

自己紹介の1ページサイトを作ってください。構成は以下の通りです。

- ヘッダー: ロゴ（テキストでOK）とナビゲーション（About / Works / Contact）
- ヒーローセクション: キャッチコピーとCTAボタン
- Worksセクション: 作品カードを3枚並べて、それぞれに「NEW」バッジ
- FAQセクション: アコーディオンで質問3つ
- フッター: コピーライトとSNSリンク
- カードをクリックしたらモーダルで詳細表示
- モバイルではナビゲーションをハンバーガーメニューにする

関連記事

パーツの名前を覚えたら、次は「配置とデザインの質」です。こちらの記事もどうぞ。

{{article-ref:e574cdb3-eca2-4045-8447-1b2ca25febbc}}

{{article-ref:d98257a1-3f52-4579-a98b-e2fcea98d319}}