AIへの指示に使えるUI部位名称ガイド

「ヘッダーの右端に追加して」「サイドバーに一覧を出して」——AIへ的確に指示するには、UI部位の正式名称を知っておくと便利です。このページでは、よく使うWebページの部位をワイヤーフレーム図で視覚的に解説します。

インタラクティブ・ワイヤーフレーム図

各エリアをクリックすると詳細情報が表示されます

① ヘッダー

② パンくずリスト

③ メインコンテンツ

④ サイドバー

⑤ フッター

← 左の図のエリアをクリックすると
詳細情報が表示されます

ヘッダー内にはさらに細かい部位があります。名称を知っておくとAIへの指示が格段に正確になります。

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

ヘッダー内のページ間リンク群

「グローバルナビにお問い合わせリンクを追加して」

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

ページトップの大きなビジュアルエリア

「ヒーローにキャッチコピーとCTAボタンを配置して」

CTAボタン（Call To Action）

行動を促すメインボタン

「ヘッダー右端にCTAボタンを設置して」

バッジ（Badge）

数値や状態を示す小さなラベル

「通知アイコンに未読バッジを表示して」→ バッジ・タグのデモを見る

部位名	説明	AIへの指示例	デモ
グローバルナビゲーション（Global Navigation / GNav）	ヘッダー内のページ間リンク群	`「グローバルナビにお問い合わせリンクを追加して」`	—
ヒーローセクション（Hero Section）	ページトップの大きなビジュアルエリア	`「ヒーローにキャッチコピーとCTAボタンを配置して」`	—
CTAボタン（Call To Action）	行動を促すメインボタン	`「ヘッダー右端にCTAボタンを設置して」`	—
バッジ（Badge）	数値や状態を示す小さなラベル	`「通知アイコンに未読バッジを表示して」`	→ バッジ・タグのデモを見る

ヘッダー

パンくずリスト

メインコンテンツ

サイドバー

フッター

グローバルナビゲーション

ヒーローセクション

CTAボタン

バッジ