ヘッダー
Header
ページ上部でロゴ、主要導線、現在地をまとめる構造領域です。
AI指示「ヘッダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
AMPL for Builders
AIに「それ、なんて言えばいいの?」をなくす。パーツ名、レイアウト、文字、操作、開発の基礎を、見た目と指示文から引けます。
名前を知ると、AIへの修正指示が短く正確になります。
Header
ページ上部でロゴ、主要導線、現在地をまとめる構造領域です。
AI指示「ヘッダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Footer
ページ末尾で補助リンク、運営情報、問い合わせ先をまとめる領域です。
AI指示「フッター」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Sidebar
本文の横で目次、絞り込み、関連情報を補助する縦長の領域です。
AI指示「サイドバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Section
一つの話題や目的を持つ内容を、見出しと余白で区切ったまとまりです。
AI指示「セクション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Hero Section
最初の画面で価値、対象者、次の行動を短く伝える主要領域です。
AI指示「ヒーローセクション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Container
読みやすい最大幅と左右余白を保つ、レイアウトの基準となる箱です。
AI指示「コンテナ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Call to Action
申し込みや開始など、利用者に次の行動を具体的に促す要素です。
AI指示「CTA」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Navigation Bar
主要ページへのリンクを一定の位置と順序で並べる移動用の領域です。
AI指示「ナビゲーションバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Hamburger Menu
限られた画面幅で、三本線のボタンから主要メニューを開く方式です。
AI指示「ハンバーガーメニュー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Breadcrumb
ホームから現在地までの階層を示し、上位へ戻れるようにする導線です。
AI指示「パンくずリスト」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Pagination
長い一覧を複数ページへ分け、前後や番号で移動できるようにします。
AI指示「ページネーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Tabs
同じ領域の中で、関連する複数の内容をラベルで切り替える仕組みです。
AI指示「タブ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Anchor Link
同一ページ内の見出しやセクションへ直接移動するためのリンクです。
AI指示「アンカーリンク」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Button
保存や送信などの操作を実行し、その結果を利用者へ返すUI部品です。
AI指示「ボタン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Card
画像、見出し、説明、操作を一つの情報単位としてまとめるUI部品です。
AI指示「カード」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Modal / Dialog
現在の画面を保ったまま、確認や短い入力へ注意を集中させる領域です。
AI指示「モーダル」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Dropdown
操作を起点に候補や追加メニューを一時的に展開するUI部品です。
AI指示「ドロップダウン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Accordion
見出しを操作して詳細内容を開閉し、長い情報を整理する部品です。
AI指示「アコーディオン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Tooltip
アイコンや短いラベルの意味を、操作時に補足する小さな説明です。
AI指示「ツールチップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Toast / Snackbar
保存完了などの一時的な結果を、作業を妨げず画面上へ伝えます。
AI指示「トースト通知」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Badge
状態、件数、新着などの短い補助情報を小さな形で示す部品です。
AI指示「バッジ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Avatar
人物や組織を写真、イニシャル、図柄で識別する小さな表示です。
AI指示「アバター」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Tag / Chip
分類や属性を短いラベルとして表示し、絞り込みにも利用する部品です。
AI指示「タグ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Progress Bar
完了までの進み具合や処理状況を横方向の量として示します。
AI指示「プログレスバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Spinner / Loading
短い待ち時間に処理中であることを示し、重複操作を防ぐ表示です。
AI指示「スピナー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Carousel / Slider
複数の画像やカードを同じ領域で前後に切り替える表示方式です。
AI指示「カルーセル」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Divider / Separator
異なる内容の境界を、細い線や余白によって控えめに示します。
AI指示「ディバイダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Skeleton Screen
読み込み前に完成後の配置を薄い形で示し、待ち時間を予測可能にします。
AI指示「スケルトン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Input / Text Field
名前や検索語など、一行の文字列を受け取るための入力部品です。
AI指示「テキスト入力欄」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Textarea
問い合わせ本文など、複数行の文章を入力するための領域です。
AI指示「テキストエリア」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Checkbox
独立した複数の選択肢を、それぞれ選択または解除する部品です。
AI指示「チェックボックス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Radio Button
互いに排他的な候補の中から、一つだけ選択するための部品です。
AI指示「ラジオボタン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Select
多くの候補を折りたたみ、一つの値を選択させるフォーム部品です。
AI指示「セレクトボックス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Toggle Switch
設定をその場でオンまたはオフへ切り替える二値の操作部品です。
AI指示「トグルスイッチ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Label
入力欄が何を求めているかを、常に読める文字で示す説明です。
AI指示「ラベル」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Placeholder
入力前に例を示す補助文であり、ラベルの代用にはしません。
AI指示「プレースホルダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Validation
入力内容の不足や形式を確認し、修正方法と一緒に伝える仕組みです。
地図の読み方・安全線・つくる線
AI指示「バリデーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Hover
ポインターが要素上にある状態へ、控えめな視覚フィードバックを返します。
AI指示「ホバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Click / Tap
マウスや指で対象を選び、定義された操作を実行する基本入力です。
AI指示「クリック/タップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Scroll
表示領域を移動し、画面外に続く内容へアクセスする基本操作です。
AI指示「スクロール」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Transition
色や位置など二つの状態の変化を、短時間で連続的に見せます。
AI指示「トランジション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Animation
状態変化や因果関係を理解しやすくするために要素を時間的に動かします。
AI指示「アニメーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Focus
キーボード操作の対象がどこにあるかを明確な輪郭で示す状態です。
AI指示「フォーカス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Drag and Drop
対象をつかんで移動し、別の位置や領域へ配置する直接操作です。
AI指示「ドラッグ&ドロップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Swipe
タッチ画面で指を滑らせ、移動や切り替えを指示するジェスチャーです。
AI指示「スワイプ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Flexbox
一方向に並ぶ要素の整列、間隔、伸縮を柔軟に制御するCSS方式です。
AI指示「フレックスボックス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
CSS Grid
行と列の二方向を使い、複数要素を規則的に配置するCSS方式です。
AI指示「グリッド」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Responsive Design
端末や画面幅に応じて内容の幅、順序、密度を調整する設計です。
AI指示「レスポンシブ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Breakpoint
内容に応じてレイアウトを切り替える画面幅の境界条件です。
AI指示「ブレークポイント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Margin
要素の境界より外側に取り、周囲との距離を作る余白です。
AI指示「マージン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Padding
要素の境界と内容の間に取り、読みやすさを作る内側の余白です。
AI指示「パディング」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Gap
FlexboxやGridの子要素同士へ一貫した間隔を設定する値です。
AI指示「ギャップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
z-index
同じ重なり文脈にある要素の前後関係を指定するCSSの値です。
AI指示「重なり順」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Font Family
内容の声と読みやすさに合う書体の種類と代替候補を指定します。
AI指示「フォント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Font Size
情報の役割と優先順位に合わせて文字の大きさを設定します。
AI指示「フォントサイズ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Font Weight
文字の線の太さを変え、見出しや重要語の差を作ります。
AI指示「太さ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Line Height
複数行の文章が追いやすくなるよう、行の基準線間の距離を設定します。
AI指示「行間」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Letter Spacing
文字サイズや用途に合わせ、文字同士の間隔を微調整します。
AI指示「文字間」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Text Align
文章やラベルを左、中央、右などの基準線へ揃える指定です。
AI指示「テキスト揃え」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Heading
内容の階層をh1からh6で示し、読む順序とページ構造を作ります。
AI指示「見出し」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Text Truncation
限られた領域で長い文字列を省略し、全文への導線を別に用意します。
AI指示「テキスト省略」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Background Color
内容のまとまりや状態を区別するため、面の基調色を指定します。
AI指示「背景色」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Gradient
複数の色を連続的に変化させる背景や塗りの表現です。
AI指示「グラデーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Box Shadow
浮いている機能層を示す場合に限り、奥行きを補助する装飾です。
AI指示「シャドウ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Border
要素の境界や選択状態を、太さと色を抑えた線で示します。
AI指示「ボーダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Border Radius
要素の角の丸みを指定し、部品の性格やまとまりを表現します。
AI指示「角丸」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Opacity
要素全体の見え方を0から1の範囲で調整する値です。
AI指示「透明度」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Backdrop Blur
半透明の面の背後だけをぼかし、機能層を分離する効果です。
AI指示「背景ぼかし」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Image
内容を補足する静止画で、寸法、代替文、読み込み方法まで設計します。
AI指示「画像」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Video
時間変化を含む情報で、字幕、再生操作、音の扱いまで考慮します。
AI指示「動画」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Icon
操作や概念を小さな図形で示し、必要に応じて文字ラベルを添えます。
AI指示「アイコン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Favicon
ブラウザのタブやブックマークでサイトを識別する小さな画像です。
AI指示「ファビコン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Open Graph Image
SNSやメッセージでURLを共有した際に表示される代表画像です。
AI指示「OGP画像」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Object Fit
画像や動画を指定枠へ収める際の切り抜き方と比率を制御します。
AI指示「画像の表示方法」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Component
見た目、状態、振る舞いをまとめ、再利用できる単位にしたUI部品です。
AI指示「コンポーネント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Application Programming Interface
別のサービスや機能と、決められた形式でデータを交換する接点です。
AI指示「API」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Deploy
作ったアプリを実行環境へ配置し、利用できる状態へ反映する工程です。
AI指示「デプロイ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Node Package Manager
JavaScriptの外部パッケージと依存関係を管理する仕組みです。
AI指示「npm/パッケージ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Document Object Model
HTMLをブラウザが要素の木構造として扱うための表現です。
AI指示「DOM」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Event
クリックや入力などの発生を検知し、処理へ渡すブラウザの仕組みです。
AI指示「イベント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
CSS Custom Properties
色や余白などの値へ名前を付け、複数箇所で共有する仕組みです。
AI指示「CSS変数」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
CSS Class
複数のHTML要素へ同じスタイルや役割を適用するための名前です。
AI指示「クラス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Dark Mode
暗い背景を基調に、明度とコントラストを再設計した表示テーマです。
AI指示「ダークモード」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Accessibility
能力や環境にかかわらず、情報と操作へ到達できるようにする設計です。
地図の読み方・安全線・つくる線
AI指示「アクセシビリティ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Database
アプリが扱う情報を一定の構造で保存し、必要な条件で読み書きする仕組みです。
地図の読み方・安全線・つくる線
AI指示「データベース」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Structured Query Language
主にリレーショナルデータベースへ、取得や更新の条件を伝える問い合わせ言語です。
AI指示「SQL」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Not Only SQL
表の関係に限定せず、文書やキーと値などの形でデータを保存する方式の総称です。
AI指示「NoSQL」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Git
ファイルの変更履歴を手元で記録し、比較、分岐、復元を行うバージョン管理システムです。
地図の読み方・安全線・つくる線
AI指示「Git」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
GitHub
Gitリポジトリを共有し、レビューや課題管理、自動検証を行うオンラインサービスです。
AI指示「GitHub」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Repository
コード、設定、履歴を一つの開発単位として保存し、追跡する場所です。
AI指示「リポジトリ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Commit
意味のまとまりごとに変更内容と説明をGitの履歴へ記録する操作です。
AI指示「コミット」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Branch
既存の履歴から作業を分岐し、本線へ影響させずに変更を進める仕組みです。
AI指示「ブランチ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Merge
分かれて進んだブランチの変更履歴を一つの履歴へ統合する操作です。
AI指示「マージ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
API Endpoint
APIが特定のデータや操作を受け付ける、URLとHTTPメソッドの組み合わせです。
AI指示「エンドポイント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Hypertext Transfer Protocol
ブラウザやアプリとサーバーが、要求と応答を交換するための通信規約です。
AI指示「HTTP」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Authentication
ログイン情報などを使い、アクセスしている人が誰かを確認する仕組みです。
地図の読み方・安全線・つくる線
AI指示「認証」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Authorization
確認済みの利用者に、どのデータや操作を許可するかを判定する仕組みです。
AI指示「認可」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Session
認証後の利用者状態を複数のリクエストにまたがって安全に維持する仕組みです。
AI指示「セッション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Environment Variable
実行環境ごとに変わる設定値を、ソースコードの外から渡す仕組みです。
地図の読み方・安全線・つくる線
AI指示「環境変数」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Secrets
APIキーやパスワードなど、漏れると不正利用につながるため公開しない値です。
地図の読み方・安全線・つくる線
AI指示「秘密情報」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Deployment
検証済みのアプリを実行環境へ反映し、利用可能な版として公開する工程です。
地図の読み方・安全線・つくる線
AI指示「デプロイメント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Rollback
公開後の問題に備え、アプリや設定を安全だった以前の版へ戻す操作です。
地図の読み方・安全線・つくる線
AI指示「ロールバック」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Analytics
利用状況を計測し、仮説や改善判断につながる傾向を読み取る活動です。
地図の読み方・安全線・つくる線
AI指示「アクセス解析」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Monitoring
稼働状況、エラー、性能を継続的に観測し、問題を早く発見する仕組みです。
地図の読み方・安全線・つくる線
AI指示「監視」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Vibe Coding
自然言語でAIに実装を依頼し、人間が結果を確認しながらソフトウェアを作る開発アプローチです。
AI指示「Vibe Coding」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Human Judgment
文脈、根拠、影響を人間が評価し、AIへ委ねず最終的な選択と責任を引き受けることです。
AI指示「人間の判断」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Dummy Data
実在する人や機密情報を表さず、開発やテストのために人工的に用意したデータです。
AI指示「ダミーデータ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。
Stop Criteria
異常や許容できない危険を検知したとき、作業や公開を止めるために事前に定める条件です。
AI指示「停止基準」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。