チップ・タグ

定義

チップは小さくて角の丸いラベルのような見た目ですが、それ自体をユーザーが押したり 消したりできる独立した要素です。使い道は大きく二つあります。一つはフィルターチップで、 リストの上に条件をチップとして並べ、押してオン・オフを切り替えながら結果を絞り込みます。 もう一つはタグで、入力欄に打ち込んだ項目やユーザーが付けた分類を小さな断片として表示し、 それぞれに付いた×ボタンで不要なものを一つずつ消していきます。見た目がバッジと似ていて 混同しやすいのですが、バッジが他の要素にくっついて状態を知らせるだけの目印であるのに対し、 チップはそれ自体が押されて消される、ユーザーが直接操作する独立した対象である点が 決定的に違います。

なぜ重要か

チップが大切なのは、複数の選択や項目を狭いスペースに目に見える形で収めてくれるからです。 いまどのフィルターがオンなのか、何をすでに入力したのかがチップで並んでいれば、ユーザーは 自分の現在の状態をひと目で確認でき、不要なものをその場ですぐに消せます。ドロップダウンの 中に隠れた選択とは違い、チップは結果が外に見えているので、自分が何を選んだかを記憶に 頼らなくて済みます。さらにチップはそれぞれが個別の操作単位なので、追加も削除も直感的で、 タグ入力や複数フィルターのように項目が流動的に増えたり減ったりする場面を、自然で 負担なく扱えるようにしてくれます。

よくある間違い

• チップを押しても何の反応もなかったり、消す方法がなかったりする場合です。チップは操作 できる要素のような見た目なので、ユーザーは当然、押したり消したりできると期待します。 その期待を裏切ると、ただのもどかしいラベルになってしまいます。
• 選択されたチップとそうでないチップの違いがぼやけている場合です。状態の区別が弱いと、 いまどのフィルターがオンなのか分からず、チップを使う意味がなくなり、ユーザーは結果が なぜこうなったのかを毎回たどり直すはめになります。
• 削除ボタンを小さくしすぎる場合です。特に指で押す画面では、×が小さすぎると隣のチップを 間違えて押したり、何度も空振りしたりして、消すという簡単な動作までストレスに変わって しまいます。

実務のヒント

• 選択状態を色ではっきり区別しましょう。オンのチップは塗りつぶした背景とアクセントカラーで、 オフのチップは薄い枠線で表すと、いま何がアクティブかがひと目で読み取れて誤操作が減ります。 色だけで足りないときは、チェックマークを添えるとより確実です。
• チップの数が多くなったら、一行に無理やり詰め込まず、複数行へ自然に流しましょう。折り返しを 許せば、狭い画面でもすべてのチップが切れずに見えるようになります。
• 削除用の×は十分に押せる大きさにしつつ、チップ本体のクリックと区別して配置しましょう。 選択と削除が紛らわしいと、消そうとしてオンにしてしまう間違いが増えるので、二つの動作の 反応領域をはっきり分けるのが安全です。

関連概念