UI設計パターン
デザインシステムの構築を外注するとき — 頼めるもの3層と、いちばん多い失敗
デザインシステムの構築を外注すると、いちばん多い失敗は「作ってもらったが使われない」です。頼めるものを方針・実装・運用の3層に分け、それぞれが向く場面、頼む前に決めておくこと、見積もりが何で動くか、そして外注では買えないものをまとめます。既製のものを使う選択肢も並べます。
Undo Redoとは？意味・アンドゥ/リドゥの違いと使い方
Undo Redoとは、操作を元に戻すUndoと、取り消した操作をやり直すRedoのこと。意味、アンドゥ/リドゥの違い、Undoの逆、UI設計での使い方を解説します。
ファットフィンガー問題 (Fat Finger Problem)
モバイル端末のタッチスクリーン操作において、指の接触面積が広いために意図しない要素を誤タップしてしまう問題。ユーザーの「不器用さ」ではなく、UIの「設計ミス」として捉えるべきモバイルUXの基本原則です。
アフォーダンス (Affordance)
「押せそう」「引けそう」「入力できそう」——UIが操作方法を説明なしに伝える力がアフォーダンス。シグニファイアを正しく設計し、ユーザーが迷わず直感的に操作できるUIを作る原則。
誤操作を防ぐ (Error Prevention)
優れたエラーメッセージよりも、エラーそのものを発生させないUIが上。制約・デフォルト値・インラインバリデーションを活用し、ユーザーが間違えられない設計を作る原則。
エラーから回復できる (Error Recovery)
エラーは必ず起きる。問題はその後だ。エラーメッセージが「何が起きたか」「なぜ起きたか」「どう直すか」を伝え、ユーザーが迷わず回復できるUIを設計する原則。
フィードバック (Feedback)
ユーザーの操作に対してシステムが反応を返さないUIは、沈黙という最悪の体験を生む。あらゆる操作に適切な反応を返し、ユーザーとシステムの対話を成立させる設計原則。
クリック領域・到達しやすさ (Fitts's Law / Touch Targets)
小さすぎるボタン、遠すぎるリンク、密集したタップ領域——これらはすべてユーザーの操作コストを増やす。フィッツの法則に基づき、押しやすく・届きやすいUIを設計する原則。
入力の負担を減らす (Form UX Principles)
フォームは離脱の最大の原因だ。不要な項目を削り、ラベルを明確にし、適切なキーボードを出し、エラーを事前に防ぐ——入力コストを最小化してコンバージョン率を守る原則。
一時停止・中断・再開 (Interruption Handling)
ユーザーは必ず中断する。電話が来る、通知が来る、急用が入る。中断しても「続きから始められる」設計が、完了率を守り、ユーザーの信頼を保つ原則。
レスポンスと待ち時間設計 (Response Latency)
「遅い」より「わからない」がユーザーを壊す。待ち時間を正直に伝え、体感速度を設計する原則。スケルトン・プログレスバー・楽観的UIの使い分けと実装チェックリスト。
ユーザーコントロール (User Control)
ユーザーが「自分でコントロールできている」と感じられないUIは、不安と不信を生む。操作の自由度・取り消し可能性・中断・再開を設計し、ユーザーに主導権を渡す原則。