概要

AIへの指示に「状態」の語彙を加えることで、ローディング・エラー・空の画面まで含めた完成度の高いUIを一発で実装できるようになります。

• スピナー・スケルトン・プログレスバーの使い分けを知る
• 成功・エラー・警告・情報の4種類のフィードバック表現を習得する
• エンプティステートとインタラクション状態の設計語彙を押さえる

なぜ「状態」の語彙がないとAIへの指示が詰まるのか

画面の「状態」を表す語彙を知らないと、AIへの指示は「なんかグルグルするやつ」で止まってしまいます。状態系の用語はUIの品質を決定づける重要な語彙です。

記事1でUIの「部品の名前」を学びました。しかし実際のアプリ開発では、部品の名前だけでは足りないシーンがあります。それが「状態」の表現です。

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

指示のタイプ	例文	問題点
状態語彙なし	「データ読み込み中になんかグルグルするやつを出して」	スピナーかスケルトンか判断できない。UXの意図が伝わらない
状態語彙あり	「データ取得中はスケルトンスクリーンを表示して、完了後にコンテンツをフェードインさせて」	ローディングの見せ方・アニメーションまで一発で伝わる

状態系の用語を知ることで、「動いているとき」「失敗したとき」「何もないとき」 という3つの重要な画面状態を正確に指示できるようになります。

ローディング状態：処理中を伝える部品

「読み込み中」を伝える部品は1種類ではありません。使い分けを知ることで、ユーザーに与えるストレスを最小化する指示ができるようになります。

ローディング系の部品は大きく3種類に整理できます。

スピナー（Spinner）

円形のアニメーションで「処理中」を伝える最もシンプルなローディング表現です。

処理時間が短い（1〜3秒程度）場合や、コンテンツの形が事前にわからない場合に使います。

種類	説明	使いどころ
サークルスピナー	円が回転するアニメーション	ボタン押下後・フォーム送信中
ドットスピナー	点が順番に点滅するアニメーション	チャット返信待ち・小さなエリア
オーバーレイスピナー	画面全体を覆いながら表示	ページ全体の読み込み中

AIへの指示例：「送信ボタンを押したらボタン内にスピナーを表示して、処理中はボタンをdisabled状態にして」

スケルトンスクリーン（Skeleton Screen）

コンテンツが読み込まれる前に、グレーのブロックでレイアウトの骨格を先に表示する手法です。

スピナーと比べてユーザーが「何かが来る」と予測できるため、体感的な待ち時間が短く感じられます。SNS・ニュースアプリ・ECサイトで広く使われています。

種類	説明	使いどころ
テキストスケルトン	テキスト行をグレーのバーで表現	記事・コメント一覧
カードスケルトン	カード全体をグレーブロックで表現	商品一覧・SNSフィード
サークルスケルトン	アバター画像をグレーの丸で表現	ユーザー一覧・プロフィール

AIへの指示例：「記事一覧の読み込み中はカードスケルトンを3枚表示して、データ取得完了後にフェードインで切り替えて」

プログレスバー（Progress Bar）

処理の進捗を数値・割合で視覚的に伝えるバー状の部品です。「あとどのくらいか」が伝わるのが最大の特徴です。

種類	説明	使いどころ
ラインプログレス	横線が左から右へ伸びる	ファイルアップロード・インストール
サークルプログレス	円が埋まっていく	ダッシュボードの達成率・スコア表示
ステッパー	ステップ数と現在位置を表示	多段階フォーム・ウィザード形式
インジケーター	進捗が不明な場合に往復アニメーション	APIレスポンス待ちなど完了時刻不明の処理

3種類の使い分けまとめ

フィードバック状態：結果を伝える部品

ユーザーの操作に対して「成功・失敗・警告・情報」を正確に伝えることが、使いやすいUIの条件です。フィードバックの種類と表現を知ることで、AIへの指示に意図が乗るようになります。

フィードバック状態は4種類に整理できます。

4種類のフィードバックと色の対応

フィードバックの種類は色と対応しています。この組み合わせはデザインシステム全体で統一するのが基本です。

種類	意味	一般的な色	使いどころ
Success（成功）	操作が正常に完了した	緑系	保存完了・送信成功・支払い完了
Error（エラー）	操作が失敗した・問題がある	赤系	バリデーションエラー・通信失敗
Warning（警告）	注意が必要だが続行できる	黄・オレンジ系	残り容量わずか・期限切れ間近
Info（情報）	中立的なお知らせ	青系	メンテナンス告知・新機能案内

インラインエラー（Inline Error）

入力欄のすぐ下にエラーメッセージを表示する形式です。フォームのバリデーションで最もよく使われます。

AIへの指示例：「メールアドレスフィールドのバリデーションエラーはインラインエラーで、フィールド直下に赤字で表示して」

エラーページ（Error Page）

ページ全体が表示できない場合に専用ページを表示します。HTTPステータスコードと対応しています。

種類	ステータス	使いどころ
404ページ	404 Not Found	ページが存在しない
500ページ	500 Internal Server Error	サーバーエラー
403ページ	403 Forbidden	アクセス権限なし
オフラインページ	—	ネットワーク未接続時

バナー・アラート（Banner / Alert）

ページ上部やコンテンツ内に固定表示される通知です。Success・Error・Warning・Infoの4種類すべてに対応します。

用語	表示位置	消え方	使いどころ
アラートバナー	コンテンツ内に埋め込み	手動で閉じる or 常時表示	フォームエラーの一覧・重要なお知らせ
システムバナー	ページ最上部に固定	手動で閉じる	メンテナンス告知・全体的な警告

AIへの指示例：「フォーム送信後にエラーがある場合、フォーム上部にエラー件数を表示するアラートバナー（赤・Errorタイプ）を表示して」

フィードバックの表示形式まとめ

エンプティステート：何もない画面を設計する

「何もない画面」はそのまま放置するとユーザーが迷子になります。エンプティステートの設計語彙を知ることで、AIへの指示に「空の状態のUX」まで含められるようになります。

エンプティステート（Empty State）とは、表示すべきコンテンツが存在しない状態の画面設計のことです。多くのエンジニアが見落としがちですが、ユーザー体験を大きく左右する重要な状態です。

エンプティステートの3要素

良いエンプティステートは「何もない理由」「次にすべきこと」「行動のトリガー」の3点セットで構成されます。

要素	内容	例
イラスト・アイコン	状況を視覚的に伝える	虫眼鏡・空の箱・雲のアイコン
メッセージ	「なぜ空か」を伝える短いテキスト	「タスクがまだありません」
CTA（行動促進）	次のアクションへ誘導するボタン	「最初のタスクを追加する」

AIへの指示例：「タスク一覧が空の場合はエンプティステートを表示して。イラスト・『タスクがまだありません』のメッセージ・追加ボタンの3点セットで構成して」

シーン別エンプティステートの設計

エンプティステートはなぜ空なのかによって、設計方針が変わります。

初回利用時（オンボーディング型）

ユーザーがアプリを使い始めたばかりで、まだデータがない状態です。ネガティブな印象を与えず、次のアクションへ自然に誘導することが重要です。

ポイント	内容
トーン	ポジティブ・歓迎ムード
メッセージ例	「ようこそ！最初のプロジェクトを作成しましょう」
CTA	主要アクションへの明確なボタン

検索・フィルター結果が0件（ゼロ件結果型）

ユーザーが検索・フィルタリングした結果、該当するコンテンツがなかった状態です。「検索自体は正常に動いている」ことを伝えることが重要です。

ポイント	内容
トーン	中立・サポート寄り
メッセージ例	「『〇〇』に一致する結果が見つかりませんでした」
CTA	検索条件をリセットするボタン・別のキーワードを提案

AIへの指示例：「検索結果が0件の場合はゼロ件エンプティステートを表示して。検索キーワードを動的に表示して、『条件をリセット』ボタンを設置して」

エラー後（再試行型）

通信エラーなどでコンテンツの取得に失敗した状態です。エンプティステートとエラー状態の中間に位置します。

ポイント	内容
トーン	謝罪・サポート寄り
メッセージ例	「データの読み込みに失敗しました」
CTA	「再試行する」ボタンを必ず設置

エラーの種類	原因	再試行の効果
ネットワークエラー	接続切断・タイムアウト	✅ 有効
サーバーエラー（5xx）	過負荷・一時障害	✅ 場合により有効
クライアントエラー（4xx）	権限なし・リソース不在	❌ 無効
実装バグ	コードのミス・設定誤り	❌ 無効

エンプティステートのシーン別まとめ

インタラクション状態：部品が持つ状態変化

UIの部品はユーザーの操作に応じて見た目が変化します。この「状態」を名前で指示できると、AIが正確なCSSとインタラクションを実装してくれます。

ボタンやフォームなどのUI部品は、常に同じ見た目ではありません。ユーザーの操作・文脈に応じて6つの状態を持ちます。

6つのインタラクション状態

この6状態はCSSの疑似クラスと1対1で対応しています。状態名を知ることで、AIへの指示がそのままCSSの実装指示になります。

状態名	CSSの疑似クラス	見た目の変化例	使いどころ
Default	（なし）	通常の見た目	何も操作していない初期状態
Hover	:hover	背景色が少し暗くなる・下線が出る	カーソルが要素の上に乗った瞬間
Active	:active	さらに暗くなる・少し沈む	クリック・タップしている瞬間
Focused	:focus	枠線（フォーカスリング）が表示される	キーボードのTabキーで選択中
Disabled	:disabled	グレーアウト・カーソルが禁止マーク	操作できない条件のとき
Loading	（クラスで制御）	スピナーが表示・テキストが変わる	処理実行中・非同期処理待ち

Default・Hover・Active

この3状態はボタンの「押した感」を作る基本セットです。

AIへの指示例：「プライマリボタンのHover状態は背景色を10%暗くして、Active状態はさらに10%暗くしてscale(0.98)で少し沈む効果をつけて」

Focused（フォーカス状態）

キーボード操作でTabキーを使って要素を選択したときに表示される状態です。アクセシビリティの観点で非常に重要です。

実装パターン	説明
:focus	マウス・キーボード両方でフォーカスリングを表示
:focus-visible	キーボード操作時のみフォーカスリングを表示（推奨）

Disabled（無効状態）

条件が揃っていないためユーザーが操作できない状態です。「なぜ操作できないか」を伝える設計が重要です。

ポイント	内容
見た目	グレーアウト・透明度を下げる（opacity: 0.4〜0.6）
カーソル	cursor: not-allowedで禁止マークを表示
補足説明	ツールチップで「なぜDisabledか」を伝える

AIへの指示例：「必須項目が未入力の間は送信ボタンをDisabled状態にして、ホバー時にツールチップで『全ての必須項目を入力してください』と表示して」

Loading（ローディング状態）

ボタンを押した後、処理が完了するまでの間の状態です。二重送信防止とフィードバックの両方を担います。

AIへの指示例：「送信ボタンを押したらLoading状態に切り替えて、ボタン内にスピナーと『送信中...』テキストを表示して、処理完了まではdisabledにして二重送信を防止して」

6状態の全体フロー