［×］ボタン｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQモンテスキューのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「［×］ボタン」です。
［×］ボタン
デジタルスクリーンのUIにおいて、「×」という記号のボタンで閉じる機能を表すことはとても一般的です。ウィンドウやポップアップを閉じるほか、消去や除外、非表示にするといった意味を持つこともあります。
モーダルウィンドウを閉じる機能のボタンとして［×］ボタンは設けません。また、トーストは基本的に自動で消えるため［×］ボタンは備えないものとします（「トースト」参照）。検索条件としてセットしたタグを外すボタンや、一時的なリストからアイテムを消す場合に、テキスト要素の右端に設けます。
記号は、テキストの「×（文字実体参照における乗算記号）」「x（英字）」や「×（全角ばつ、かけ、たすきじるしなど）」で代用せずにアイコンを使用します。ユーザーがオブジェクトとして認識しているものを削除する場合には、［×］ではなくゴミ箱アイコンを使用します。
以下はやりとりの内容を一部抜粋したものです。
ナカシマ：モーダルウィンドウには設けないことになりましたね。何かを「閉じる」ほか、のセット済みの検索条件（タグなど）を外すときなどにも使います
kassy：ツールチップ的な見た目の「popover」に［×］ボタンがあるケースも
ナカシマ：popoverの場合、hoverをトリガーとしたものの場合は［×］ボタンが付くことはなく、クリックで表示したものの場合は付くこともある、というイメージ
クボスケ：分析システムなどで使われるリストメーカーのUIパターンなど、一時的にセットしたアイテムをまたそこから外すような場合には［×］ボタンが使われる気がします。
ナカシマ：バックエンド（データベース）でデータを操作する場合はゴミ箱で、フロントエンド側のみで扱う場合は［×］ということでしょうか
kassy：ユーザーからすると、その違いがわからないので、使い分けをしても理解が難しいのではないでしょうか
クボスケ：「ゴミ箱」は物理的に実態があるものを捨てるメタファーだから、抽象的なものには合わないとか？ 単純に「×」のほうがゴミ箱より視覚的に控えめだから、行為の重さに連動させるとか
kassy：ファイルを削除するときとか
クボスケ：データベースといったシステムからの視点ではなく、ユーザーにとってオブジェクトとして認識できる時はゴミ箱にする、という整理ですかね