AIへの指示に使えるスマートフォンUI部位名称ガイド
「ヘッダーにハンバーガーアイコンを追加して」「ボトムナビにホームボタンを置いて」——スマートフォン向けのUI部位名称を知っておくと、AIへの指示が格段に正確になります。
インタラクティブ・ワイヤーフレーム図（スマートフォン）
各エリアをクリックすると詳細情報が表示されます
① ヘッダー
② メインコンテンツ
🏠
🔍
👤
③ ボトムナビ
各エリアをクリックして詳細を確認
← 左の図のエリアをクリックすると
詳細情報が表示されます
補足：スマートフォン特有の部位名称
スマートフォンUIに特有のパーツ名称です。AIへの指示でよく使います。
ハンバーガーメニュー（Hamburger Menu）
ヘッダー内の三本線アイコン（☰）。タップでドロワーを開く
「ヘッダー右端にハンバーガーアイコンを追加してドロワーを開くようにして」→ ハンバーガーメニューのデモを見るFAB（フローティングアクションボタン）
画面右下などに浮かぶ主要アクションボタン
「画面右下にFABボタンを追加して投稿フォームを開くようにして」プルトゥリフレッシュ（Pull to Refresh）
コンテンツを下にスワイプして更新するジェスチャー
「下スワイプでコンテンツを再読み込みするプルリフレッシュを追加して」| 部位名 | 説明 | AIへの指示例 | デモ |
|---|---|---|---|
| ハンバーガーメニュー（Hamburger Menu） | ヘッダー内の三本線アイコン（☰）。タップでドロワーを開く | 「ヘッダー右端にハンバーガーアイコンを追加してドロワーを開くようにして」 | → ハンバーガーメニューのデモを見る |
| FAB（フローティングアクションボタン） | 画面右下などに浮かぶ主要アクションボタン | 「画面右下にFABボタンを追加して投稿フォームを開くようにして」 | — |
| プルトゥリフレッシュ（Pull to Refresh） | コンテンツを下にスワイプして更新するジェスチャー | 「下スワイプでコンテンツを再読み込みするプルリフレッシュを追加して」 | — |
| スナックバー（Snackbar） | 画面下部に一時的に表示される軽量な通知 | 「操作完了後に画面下にスナックバーで結果メッセージを表示して」 | → 通知・トーストのデモを見る |
まとめ：スマートフォンUI部位名称
ヘッダー
ハンバーガーメニュー
ドロワー
メインコンテンツ
ボトムナビゲーション
FAB
プルトゥリフレッシュ
スナックバー