@mickey最終更新 2026年5月25日投稿 2026年5月18日
AIへの指示に「状態」の語彙を加えることで、ローディング・エラー・空の画面まで含めた完成度の高いUIを一発で実装できるようになります。
画面の「状態」を表す語彙を知らないと、AIへの指示は「なんかグルグルするやつ」で止まってしまいます。状態系の用語はUIの品質を決定づける重要な語彙です。
記事1でUIの「部品の名前」を学びました。しかし実際のアプリ開発では、部品の名前だけでは足りないシーンがあります。それが「状態」の表現です。
以下の2つの指示を比べてみましょう。
| 指示のタイプ | 例文 | 問題点 |
|---|---|---|
| 状態語彙なし | 「データ読み込み中になんかグルグルするやつを出して」 | スピナーかスケルトンか判断できない。UXの意図が伝わらない |
| 状態語彙あり | 「データ取得中はスケルトンスクリーンを表示して、完了後にコンテンツをフェードインさせて」 | ローディングの見せ方・アニメーションまで一発で伝わる |
状態系の用語を知ることで、「動いているとき」「失敗したとき」「何もないとき」 という3つの重要な画面状態を正確に指示できるようになります。
「読み込み中」を伝える部品は1種類ではありません。使い分けを知ることで、ユーザーに与えるストレスを最小化する指示ができるようになります。
ローディング系の部品は大きく3種類に整理できます。
円形のアニメーションで「処理中」を伝える最もシンプルなローディング表現です。
処理時間が短い(1〜3秒程度)場合や、コンテンツの形が事前にわからない場合に使います。
| 種類 | 説明 | 使いどころ |
|---|---|---|
| サークルスピナー | 円が回転するアニメーション | ボタン押下後・フォーム送信中 |
| ドットスピナー | 点が順番に点滅するアニメーション | チャット返信待ち・小さなエリア |
| オーバーレイスピナー | 画面全体を覆いながら表示 | ページ全体の読み込み中 |
AIへの指示例:「送信ボタンを押したらボタン内にスピナーを表示して、処理中はボタンをdisabled状態にして」
コンテンツが読み込まれる前に、グレーのブロックでレイアウトの骨格を先に表示する手法です。
スピナーと比べてユーザーが「何かが来る」と予測できるため、体感的な待ち時間が短く感じられます。SNS・ニュースアプリ・ECサイトで広く使われています。
| 種類 | 説明 | 使いどころ |
|---|---|---|
| テキストスケルトン | テキスト行をグレーのバーで表現 | 記事・コメント一覧 |
| カードスケルトン | カード全体をグレーブロックで表現 | 商品一覧・SNSフィード |
| サークルスケルトン | アバター画像をグレーの丸で表現 | ユーザー一覧・プロフィール |
AIへの指示例:「記事一覧の読み込み中はカードスケルトンを3枚表示して、データ取得完了後にフェードインで切り替えて」
処理の進捗を数値・割合で視覚的に伝えるバー状の部品です。「あとどのくらいか」が伝わるのが最大の特徴です。
| 種類 | 説明 | 使いどころ |
|---|---|---|
| ラインプログレス | 横線が左から右へ伸びる | ファイルアップロード・インストール |
| サークルプログレス | 円が埋まっていく | ダッシュボードの達成率・スコア表示 |
| ステッパー | ステップ数と現在位置を表示 | 多段階フォーム・ウィザード形式 |
| インジケーター | 進捗が不明な場合に往復アニメーション | APIレスポンス待ちなど完了時刻不明の処理 |
ユーザーの操作に対して「成功・失敗・警告・情報」を正確に伝えることが、使いやすいUIの条件です。フィードバックの種類と表現を知ることで、AIへの指示に意図が乗るようになります。
フィードバック状態は4種類に整理できます。
フィードバックの種類は色と対応しています。この組み合わせはデザインシステム全体で統一するのが基本です。
| 種類 | 意味 | 一般的な色 | 使いどころ |
|---|---|---|---|
| Success(成功) | 操作が正常に完了した | 緑系 | 保存完了・送信成功・支払い完了 |
| Error(エラー) | 操作が失敗した・問題がある | 赤系 | バリデーションエラー・通信失敗 |
| Warning(警告) | 注意が必要だが続行できる | 黄・オレンジ系 | 残り容量わずか・期限切れ間近 |
| Info(情報) | 中立的なお知らせ | 青系 | メンテナンス告知・新機能案内 |
入力欄のすぐ下にエラーメッセージを表示する形式です。フォームのバリデーションで最もよく使われます。
AIへの指示例:「メールアドレスフィールドのバリデーションエラーはインラインエラーで、フィールド直下に赤字で表示して」
ページ全体が表示できない場合に専用ページを表示します。HTTPステータスコードと対応しています。
| 種類 | ステータス | 使いどころ |
|---|---|---|
| 404ページ | 404 Not Found | ページが存在しない |
| 500ページ | 500 Internal Server Error | サーバーエラー |
| 403ページ | 403 Forbidden | アクセス権限なし |
| オフラインページ | — | ネットワーク未接続時 |
ページ上部やコンテンツ内に固定表示される通知です。Success・Error・Warning・Infoの4種類すべてに対応します。
| 用語 | 表示位置 | 消え方 | 使いどころ |
|---|---|---|---|
| アラートバナー | コンテンツ内に埋め込み | 手動で閉じる or 常時表示 | フォームエラーの一覧・重要なお知らせ |
| システムバナー | ページ最上部に固定 | 手動で閉じる | メンテナンス告知・全体的な警告 |
AIへの指示例:「フォーム送信後にエラーがある場合、フォーム上部にエラー件数を表示するアラートバナー(赤・Errorタイプ)を表示して」
「何もない画面」はそのまま放置するとユーザーが迷子になります。エンプティステートの設計語彙を知ることで、AIへの指示に「空の状態のUX」まで含められるようになります。
エンプティステート(Empty State)とは、表示すべきコンテンツが存在しない状態の画面設計のことです。多くのエンジニアが見落としがちですが、ユーザー体験を大きく左右する重要な状態です。
良いエンプティステートは「何もない理由」「次にすべきこと」「行動のトリガー」の3点セットで構成されます。
| 要素 | 内容 | 例 |
|---|---|---|
| イラスト・アイコン | 状況を視覚的に伝える | 虫眼鏡・空の箱・雲のアイコン |
| メッセージ | 「なぜ空か」を伝える短いテキスト | 「タスクがまだありません」 |
| CTA(行動促進) | 次のアクションへ誘導するボタン | 「最初のタスクを追加する」 |
AIへの指示例:「タスク一覧が空の場合はエンプティステートを表示して。イラスト・『タスクがまだありません』のメッセージ・追加ボタンの3点セットで構成して」
エンプティステートはなぜ空なのかによって、設計方針が変わります。
ユーザーがアプリを使い始めたばかりで、まだデータがない状態です。ネガティブな印象を与えず、次のアクションへ自然に誘導することが重要です。
| ポイント | 内容 |
|---|---|
| トーン | ポジティブ・歓迎ムード |
| メッセージ例 | 「ようこそ!最初のプロジェクトを作成しましょう」 |
| CTA | 主要アクションへの明確なボタン |
ユーザーが検索・フィルタリングした結果、該当するコンテンツがなかった状態です。「検索自体は正常に動いている」ことを伝えることが重要です。
| ポイント | 内容 |
|---|---|
| トーン | 中立・サポート寄り |
| メッセージ例 | 「『〇〇』に一致する結果が見つかりませんでした」 |
| CTA | 検索条件をリセットするボタン・別のキーワードを提案 |
AIへの指示例:「検索結果が0件の場合はゼロ件エンプティステートを表示して。検索キーワードを動的に表示して、『条件をリセット』ボタンを設置して」
通信エラーなどでコンテンツの取得に失敗した状態です。エンプティステートとエラー状態の中間に位置します。
| ポイント | 内容 |
|---|---|
| トーン | 謝罪・サポート寄り |
| メッセージ例 | 「データの読み込みに失敗しました」 |
| CTA | 「再試行する」ボタンを必ず設置 |
| エラーの種類 | 原因 | 再試行の効果 |
|---|---|---|
| ネットワークエラー | 接続切断・タイムアウト | ✅ 有効 |
| サーバーエラー(5xx) | 過負荷・一時障害 | ✅ 場合により有効 |
| クライアントエラー(4xx) | 権限なし・リソース不在 | ❌ 無効 |
| 実装バグ | コードのミス・設定誤り | ❌ 無効 |
UIの部品はユーザーの操作に応じて見た目が変化します。この「状態」を名前で指示できると、AIが正確なCSSとインタラクションを実装してくれます。
ボタンやフォームなどのUI部品は、常に同じ見た目ではありません。ユーザーの操作・文脈に応じて6つの状態を持ちます。
この6状態はCSSの疑似クラスと1対1で対応しています。状態名を知ることで、AIへの指示がそのままCSSの実装指示になります。
| 状態名 | CSSの疑似クラス | 見た目の変化例 | 使いどころ |
|---|---|---|---|
| Default | (なし) | 通常の見た目 | 何も操作していない初期状態 |
| Hover | :hover | 背景色が少し暗くなる・下線が出る | カーソルが要素の上に乗った瞬間 |
| Active | :active | さらに暗くなる・少し沈む | クリック・タップしている瞬間 |
| Focused | :focus | 枠線(フォーカスリング)が表示される | キーボードのTabキーで選択中 |
| Disabled | :disabled | グレーアウト・カーソルが禁止マーク | 操作できない条件のとき |
| Loading | (クラスで制御) | スピナーが表示・テキストが変わる | 処理実行中・非同期処理待ち |
この3状態はボタンの「押した感」を作る基本セットです。
AIへの指示例:「プライマリボタンのHover状態は背景色を10%暗くして、Active状態はさらに10%暗くしてscale(0.98)で少し沈む効果をつけて」
キーボード操作でTabキーを使って要素を選択したときに表示される状態です。アクセシビリティの観点で非常に重要です。
| 実装パターン | 説明 |
|---|---|
:focus | マウス・キーボード両方でフォーカスリングを表示 |
:focus-visible | キーボード操作時のみフォーカスリングを表示(推奨) |
条件が揃っていないためユーザーが操作できない状態です。「なぜ操作できないか」を伝える設計が重要です。
| ポイント | 内容 |
|---|---|
| 見た目 | グレーアウト・透明度を下げる(opacity: 0.4〜0.6) |
| カーソル | cursor: not-allowedで禁止マークを表示 |
| 補足説明 | ツールチップで「なぜDisabledか」を伝える |
AIへの指示例:「必須項目が未入力の間は送信ボタンをDisabled状態にして、ホバー時にツールチップで『全ての必須項目を入力してください』と表示して」
ボタンを押した後、処理が完了するまでの間の状態です。二重送信防止とフィードバックの両方を担います。
AIへの指示例:「送信ボタンを押したらLoading状態に切り替えて、ボタン内にスピナーと『送信中...』テキストを表示して、処理完了まではdisabledにして二重送信を防止して」
読み終えたら完了にしましょう
完了ボタンを押すと、モジュール「AIコーディングのためのデザイン用語」の進捗として記録されます。読んだ内容を振り返るときにも役立ちます。