UIXHERO
#508
UI設計パターン
#508

おーとこんぷりーと

オートコンプリート

別名・表記:Autocomplete入力補完オートサジェストTypeahead予測入力

UIXHERO Definition

UIXHEROでは、オートコンプリートを「入力途中の文字列から候補を提示し、ユーザーの入力量と記憶負荷を肩代わりするUIパターン」と定義する。

概要

オートコンプリートは「思い出して正確に打つ」作業を「見て選ぶ」作業に置き換える。再生(recall)より再認(recognition)のほうが認知的に楽であるという原則を、入力フォームに適用したパターンである。

テスラーの法則(複雑性保存の法則)の観点では、住所表記の正規化や商品名のゆれ吸収といった複雑さを、ユーザーではなくシステム側が引き受ける実装だと言える。

UXでの活用

  • 入力エラーの削減: 候補から選ばせることで、表記ゆれやタイプミスに起因するバリデーションエラーが減る。
  • 探索の補助: 検索サジェストは、ユーザーが自分の言葉を持っていない領域で「どう検索すればよいか」を示す役割も持つ。
  • 速度: 入力文字数が減ることで、特にモバイルでの離脱が下がりやすい。

誤用・混乱

  • 候補の押し付け: 候補が入力欄を覆う、Enterで意図しない候補が確定するなどの実装は、かえって入力を遅くする。確定は明示的な操作に紐づける。
  • 候補ゼロ状態の放置: 候補が出ないと「この値は登録できない」と誤解される。自由入力や新規登録の導線を残す。
  • アクセシビリティの欠落: role="combobox"aria-expanded / aria-activedescendant を伴わない独自実装は、キーボードや支援技術から候補を操作できないことがある。
  • 検索サジェスト=人気順とは限らない: サジェストの並びは実装依存で、ユーザーの需要順を表すとは限らない。分析の根拠には使えない。

💡 使いどころ

選択肢が多く一覧表示に向かない項目(住所、駅名、商品名、タグなど)や、正確な表記をユーザーが覚えていない項目の入力時。

⚠️ 注意点・誤用

候補が出ることに依存すると、候補にない値を入力したいユーザーが行き詰まる。自由入力を必ず残すか、候補がない場合の導線を用意する。またスクリーンリーダー利用時は候補の出現と件数が読み上げられる実装(combobox パターン)にしないと、変化に気づけない。

具体例

  • 検索窓に数文字入れるとクエリ候補が並ぶサジェスト
  • 郵便番号を入れると住所欄が補完される入力フォーム
  • タグ入力で既存タグを候補表示し、表記ゆれを防ぐ
出典・参考文献:
  • WAI-ARIA Authoring Practices — Combobox Pattern (W3C)
  • Forms(Web Form Design の実務知見)Luke Wroblewski
作成: 2026年7月29日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: