概要

AIコーディングで完成イメージを正確に伝えるには、「UIコンポーネントの名前」を知っているかどうかが決定的な差になります。

• 部品の正式名称を使うことで、AIへの指示が一発で伝わる
• 「なんかメニューっぽいやつ」ではなく「ハンバーガーメニュー」と言えるだけで出力精度が変わる
• この記事では画面を構成する部品を5つのカテゴリに整理して解説します

なぜ部品の名前を知るとAIへの指示が変わるのか

AIコーディングで完成イメージを正確に伝えるには、「部品の名前」を知っているかどうかが決定的な差になります。

AIツールへの指示は、言葉がすべてです。「なんかメニューっぽいやつ」と「ハンバーガーメニューを実装して」では、AIが返すコードの精度がまったく変わります。

以下の2つの指示を比べてみましょう。

用語を知っていると、AIとの「共通言語」が生まれます。その結果、指示文が短くなり、出力の品質が上がり、修正回数が減ります。

この記事では、Webアプリ・サービスを構成するUIコンポーネント（画面の部品） の名前を体系的に整理します。デザイナーとの会話でも、AIへの指示でも、そのまま使える語彙として身につけてください。

ページ構造系：画面の骨格を作る部品

ページ構造系の部品は、すべてのWebページに共通する「骨格」です。まずここの名前を押さえると、AIへの指示の土台が固まります。

Webページは、決まったエリアの積み重ねで構成されています。以下の図が基本構造です。

ヘッダー（Header）

ページ最上部の横長エリア。ロゴとナビゲーションを置く「顔」の部分です。 ほぼすべてのページで共通表示されます。AIへの指示では「ヘッダーに〇〇を配置して」と使います。スクロールしても画面上部に固定されるものは特に**スティッキーヘッダー（追従ヘッダー）**と呼びます。

ヒーローエリア / MV / FV

ページを開いた瞬間に目に入る最重要エリア。第一印象と訴求内容を決めます。

3つの呼び方が混在するので整理しておきましょう。

AIへの指示例：「ヒーローエリアに全画面背景画像とキャッチコピーを配置して」

コンテンツエリア（Content Area）

ヘッダーとフッターの間に挟まれた、ページの主役エリアです。ページの目的によって中身が大きく変わります。

コンテンツエリアは「何を見せるページか」によって構成が異なります。AIへの指示では「コンテンツエリアに〇〇を配置して」と使います。

コンテナ（Container）

コンテンツが横に広がりすぎないよう、幅に上限を設ける枠のことです。画面が広いディスプレイでもコンテンツが中央に収まるように制御します。

AIへの指示例：「コンテナ幅を1200pxに設定して、左右に均等なパディングを入れて」

パディング・マージン

カラムレイアウト

コンテンツエリアを縦に分割して並べる構造です。分割数によって呼び方が変わります。

パンくずリスト（Breadcrumb）

ユーザーが「今どこにいるか」を示すナビゲーション。階層構造が深いサイトで必須です。

トップ > カテゴリー > 記事タイトル

SEOにも有効で、Googleの検索結果にそのまま表示されることがあります。AIへの指示では「パンくずリストをヘッダー下に設置して」と使います。

サイドバー（Sidebar）

コンテンツエリアの左右に配置される補助メニュー。ブログや記事一覧でよく使われます。

ECサイトではフィルター機能をサイドバーに置くケースが多いです。

フッター（Footer）

ページ最下部の横長エリア。補助リンク・会社情報・コピーライトを置きます。

ユーザーがページを最後まで読んだあとに目に入るエリアなので、問い合わせCTAや関連ページへの導線を置く場所としても機能します。

ナビゲーション系：ユーザーを迷わせない部品

ナビゲーション系の部品は「ユーザーが今どこにいて、どこへ行けるか」を伝える役割を持ちます。種類と使い分けを知ることで、AIへの指示が格段に具体的になります。

ナビゲーション系の部品は大きく以下の4種類に整理できます。

グローバルナビゲーション（Global Navigation）

サイト全体のページ構造を示すメインメニューです。ほぼすべてのページのヘッダーに共通表示されます。

AIへの指示例：「ヘッダーにグローバルナビを設置して、『サービス』項目にドロップダウンメニューを実装して」

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

三本線のアイコンをタップすると展開するメニューです。主にスマートフォン向けのナビゲーションとして使われます。

タブ（Tab）

同じ階層にある複数のコンテンツを切り替えて表示するUI部品です。ページ遷移なしに情報を整理できます。

AIへの指示例：「料金ページに月払い・年払いを切り替えるタブUIを実装して」

パンくずリストとグローバルナビの関係

入力・操作系：ユーザーが触る部品

入力・操作系の部品は、ユーザーがアプリに「意思を伝える」ための部品です。種類と使い分けを知ることで、フォームやUIの指示が一発で伝わるようになります。

入力・操作系は大きく3グループに整理できます。

ボタン系

ボタンはユーザーの「行動のトリガー」です。役割によって種類を使い分けることで、UIの優先順位が明確になります。

テキスト入力系

ユーザーが文字を入力するための部品です。用途によって使い分けが決まります。

AIへの指示例：「お問い合わせフォームにテキストフィールドを3つ（名前・メール・件名）とテキストエリアを1つ（本文）配置して」

選択系

ユーザーに「選ばせる」ための部品です。選択肢の数・選択数・操作感によって使い分けます。

オーバーレイ・通知系：画面の上に乗る部品

オーバーレイ・通知系の部品は、画面の上に重なって表示される部品です。似た名前が多く混同されやすいですが、「ユーザーの操作を止めるか否か」で使い分けが決まります。

まず全体像を整理します。

モーダル・ダイアログ（Modal / Dialog）

画面全体を覆い、ユーザーの操作を一時停止させるオーバーレイです。重要な確認・入力に使います。

AIへの指示例：「削除ボタンを押したら確認ダイアログを表示して、『キャンセル』と『削除する』の2つのボタンを置いて」

ドロワー・ボトムシート（Drawer / Bottom Sheet）

画面の端からスライドインするパネルです。操作を止めずにサブコンテンツを表示できます。

ポップオーバー・ツールチップ（Popover / Tooltip）

特定の要素に紐づいて小さな情報を表示する部品です。ユーザーの操作を止めません。

トースト・スナックバー・バナー通知

ユーザーの操作を止めずに、一時的にフィードバックを伝える通知部品です。

コンテンツ表示系：情報を見せる部品

コンテンツ表示系の部品は、情報をどう「見せるか」を決める部品です。選び方ひとつでユーザーの理解しやすさが大きく変わります。

カード（Card）

情報をひとまとまりにして表示する「箱」です。画像・タイトル・テキスト・ボタンをセットにして並べるときに使います。

AIへの指示例：「商品一覧をメディアカードのグリッドで表示して、カードにはホバー時にエレベーションを強くするアニメーションをつけて」

リスト（List）

情報を縦に並べて表示する最もシンプルな部品です。カードより情報密度が高く、スキャンしやすいのが特徴です。

グリッド・メイソンリー（Grid / Masonry）

複数のカードや画像を整列させてタイル状に並べるレイアウトです。

種類	説明	サンプル画像
グリッドレイアウト	縦横均等に整列
メイソンリーレイアウト	高さが不揃いなカードを詰めて配置

カルーセル（Carousel）

複数のコンテンツを横にスライドして切り替える部品です。限られたスペースに多くの情報を収められます。

アコーディオン（Accordion）

クリックで内容を展開・折りたたみできる部品です。長いコンテンツをコンパクトに収めたいときに使います。

AIへの指示例：「FAQセクションをアコーディオンで実装して、1つ開いたら他は自動で閉じるシングル展開にして」

テーブル（Table）

行と列で構造化されたデータを表示する部品です。比較・一覧・集計に最適です。