絞り込みのアイコン｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「絞り込みのアイコン」です。
絞り込みのアイコン
絞り込みは、大量のデータの中から目的の情報を見つけ出すために、特定の条件を指定して検索結果などのリストの表示を絞り込む機能です。
絞り込む条件を指定するためのボタンなどのアイコンは、等間隔に縦方向に並んだ三本線の図案を使用します。線は上から順に長さが短くなっていて、中央揃えです。
基本的にアイコン単体ではなくテキストを添えて使用します。
以下はやりとりの内容を一部抜粋したものです。
クボスケ：データの絞り込みについて漏斗（funnel）のアイコンが使われることがありますが、これって意味伝わってるんでしょうか。「自分は理系で馴染みがある。考えたこともなかった」という声もあれば、「そもそも何を表しているのかわからない」という反応もあります。Microsoft Officeなどでも色々なところで使われているので、業務用ソフトウェアとしては問題ないような気もしますが……
ナカシマ：コントロールパネルみたいのもありますね。これは絞り込み条件として使う各パラメータを設定する実際のUIを模しているんですかね
Googleスプレッドシートでは場所によって漏斗と3本線の両方が使われています
クボスケ：フィルターという概念、フィルターするUI、フィルターされるデータのいずれかを図案のモチーフにしたか、とも言えるでしょうか
漏斗のように“モノ”の図案を使ったアイコンは、モノが持つ性質などを借りることで、目新しい概念を旧来の概念と照らして理解してもらえるといった利点があると思います。いっぽうで、元にしたモノが時代によって馴染みがなくなったり（保存を表すフロッピーディスクのアイコンとか）、対象のユーザーの間では知名度が低かったりするとかえって伝わらないというデメリットもあるのでは、と思います。参照した資料の中には、「アイコンのなかにはとても稀だが普遍的に通用する“標準アイコン”がある（例：検索の虫眼鏡）」「漏斗のアイコンは数少ない“標準アイコン”になる寸前である。」という見解もありました。頻繁に触れる中で学習が進んでいくことで普遍性を獲得していけるのかもしれません
kassy：三本線の方がスタンダード感がある印象です
クボスケ：単に漏斗より三本線のほうが識別しやすい気もします。ただ、やはり万人に伝わると言い切れるものではないため、なるべくテキストを併記するという方針がよさそうに思います