フレームワーク活用ガイドひとことで言うと#
「ログイン」「検索」「エラー表示」など、UIで繰り返し登場する課題に対して、すでに実績のある定番の解決策をパターンとして体系化したもの。毎回ゼロから考えるのではなく、先人の知恵を活用して素早く良いUIを設計する。
押さえておきたい用語#
- ナビゲーションパターン
- タブバー、ハンバーガーメニュー、パンくずリストなど、サイト内の移動方法の定番パターン。
- スケルトンスクリーン
- 読み込み中にコンテンツの枠だけ先に表示するパターン。スピナーより体感速度が上がる。
- 空状態（Empty State）
- データが0件のときに表示する次のアクション誘導付きの画面。
- インラインバリデーション
- フォーム入力中にリアルタイムでエラーを表示するパターン。
UIパターンの全体像#
こんな悩みに効く#
- 毎回UIの設計をゼロから考えていて時間がかかる
- 「この場面でどんなUIが適切か」の引き出しが少ない
- 独自のUIを作ったが、ユーザーが使い方を理解してくれない
基本の使い方#
ユーザーがサイト内を移動する方法の定番パターン。
- タブバー: 主要セクション3〜5個を画面下部に常設（モバイルアプリの定番）
- ハンバーガーメニュー: スペースが限られるとき。ただし「隠れたメニューは使われにくい」ことに注意
- パンくずリスト: 深い階層構造での現在地表示
- サイドバー: デスクトップのダッシュボードや管理画面向け
- メガメニュー: カテゴリが多いECサイト向け
データ入力の負担を最小限にするパターン。
- 段階的開示: 一度に見せる入力項目を減らし、ステップごとに表示
- インラインバリデーション: 入力完了時にリアルタイムでエラーを表示
- オートコンプリート: 住所や検索キーワードを予測して候補を表示
- デフォルト値: よく選ばれる値をあらかじめ設定しておく
鉄則: 入力項目は1つ減らすだけでコンバージョンが上がる。
ユーザーの操作に対して「何が起きているか」を伝えるパターン。
- トースト通知: 操作完了を一時的に表示して自動で消える
- スケルトンスクリーン: 読み込み中にコンテンツの枠だけ先に表示
- 空状態（Empty State）: データがないときにイラスト＋次のアクション提案を表示
- エラー状態: 何が問題で、どうすれば解決するかを具体的に伝える
- 確認ダイアログ: 取り消し不可能な操作（削除等）の前にユーザーに確認
具体例#
検索: オートコンプリートで商品名を予測表示。「0件」の空状態に「おすすめ商品」を表示。
商品一覧: カードパターンで画像・価格・評価をコンパクト表示。スケルトンスクリーンで読み込み体験を改善。
購入フロー: ステッパー形式のチェックアウト（配送先→支払い→確認→完了）。住所はオートコンプリート（郵便番号から自動入力）。
結果: 購入CVRが2.8%から4.0%に改善（42%向上）。 定番パターンを使うことで、初めてのユーザーでも迷わず購入できた。
Before: データテーブルの読み込みに3秒。その間ローディングスピナーが表示され、ユーザーの28%が別タブに移動。保存操作後のフィードバックはページリロードのみ。
After:
- テーブル読み込み: スケルトンスクリーンで構造を即座に表示
- データ保存: トースト通知「変更を保存しました」を3秒間表示
- 削除操作: 確認ダイアログ「この項目を削除しますか？取り消しできません」を表示
結果: 「遅い」と感じるユーザーが28%から8%に減少。 実際の速度は変わらないが、フィードバックパターンの導入で体感が改善。
Before: 新規登録直後のダッシュボードが「データがありません」と白紙状態。初回ユーザーの72%が何もせずに離脱。
After: 空状態パターンを導入。
- イラスト + 「最初のプロジェクトを作りましょう」のCTA
- 3ステップのクイックスタートガイドをカード表示
- サンプルデータでダッシュボードのプレビューを表示
結果: 初回アクション実行率が18%から54%に向上（3倍）。 空状態が「何もない画面」から「行動の出発点」に変わった。
やりがちな失敗パターン#
- 独自UIを作りたがる — 「うちだけのオリジナルな操作方法」はユーザーにとって学習コスト。定番パターンを使うことは「手抜き」ではなく「ユーザーファースト」
- パターンの適用場面を間違える — 無限スクロールは記事一覧には合うが、比較検討が必要な商品一覧にはページネーションの方が適切。目的に合ったパターンを選ぶ
- パターンを知って思考停止する — パターンは出発点であって最終回答ではない。自分のプロダクトの文脈に合わせてカスタマイズすることも重要
- すべての状態にフィードバックがない — 成功時・エラー時・読み込み中・空の状態、すべてに適切な表示を用意するのが良いUIの条件
まとめ#
UIパターンは 「よくある課題の、実績ある解決策」 の引き出し。ナビゲーション・入力フォーム・フィードバックの3領域のパターンを押さえるだけで、UIの品質が安定する。ゼロから考えるよりパターンから始めて、自分のプロダクトに合わせて調整する。それが最も効率的で、ユーザーにも優しいUI設計の方法。