タブ｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「タブ」です。
タブ
タブは同じ文脈の中で表示内容を切り替えるために使用します。同時に参照する必要がないコンテンツを、扱いやすいかたまりに分けるのに適しています。別のページ・画面に移動するためのナビゲーションとは区別します。
タブの見た目は下線を用いたフラットでシンプルなものにします。
タブは1段の高さに収め、表示領域の幅に収まりきらない場合は横スクロールにします。スクロール操作を助けるコントロールを端に設け、隠れているタブの存在も伝えます。
タブのラベルはなるべく短く端的なものにしますが、幅の制約に合わせて適宜表示を縮めます。省略やツールチップについての共通のポリシーに準じます。
タブの幅は、タブのラベルテキストの長さやタブの数、表示領域の幅に応じて柔軟に調節されるように制御します。
以下はやりとりの内容を一部抜粋したものです。
ナカシマ：まず前提としてタブの用途を整理してみましょう
クボスケ：ナビゲーションが、異なる性質の情報へ移動するためのものであるのに対し、タブでは並列・等価に扱うのが妥当な情報を分ける場合と言えるでしょうか。表示を切り替えるため、並べて同時に参照したいような場合にも向きません
参考資料として挙げた、「タブに関するユーザビリティガイドライン」では、以下のように書かれています
同じコンテキストの中で、表示内容を切り替えるためにタブは利用しよう
それから、情報に対してアクションが付いている場合、タブで分割されていると、アクションの対象がどの情報なのか混乱するおそれもあります。たとえばフォームがタブで分割されていた場合、［送信］されるのはアクティブなタブ内の情報なのか、すべてのタブの情報なのかといったことです
kassy：前職のtoCのプロダクトでは基本的にタブを使用しない方針でした。SEO上の理由でもありました
クボスケ：検索結果の表示の切り替えにタブを用いた場合、初期でアクティブなタブ以外はあまり閲覧されない傾向があると聞きました
〈見た目〉
クボスケ：一般的に、タブの見た目には大きく2種類あるかと思います
ナカシマ：下線だけでも充分わかる気がします
クボスケ：インデックスのタイプではアクティブなタブ部とコンテンツの地がつながっているのに対し、下線のものはタブ部とコンテンツ部のつながりが弱い感じがしませんか
ナカシマ：ユーザーはそこまで意識していないのでは、という気も
kassy：使っているうちにユーザーもすぐに学習すると思うので、シンプルな下線のタイプのほうでいいかもしれません
ナカシマ：インデックスのタイプは、いまのプロダクトにあまりマッチしない印象です。また、MNTSQでは紙や文書の概念が多く登場します。紙のインデックスを模したスキューモーフィズム的なメタファーは、それとバッティングしてしまって、かえって理解の妨げになるおそれもあるかなと思います
クボスケ：WebアプリであるMNTSQは、すでにWebブラウザーのタブがある状態なので、デスクトップ全体で捉えるとタブが二重になってしまいますしね
〈多い場合〉
クボスケ：タブのアイテムが多くて幅が収まりきらない場合について考えたいです。段にして重ねていくのは、柔軟性に欠けてNGだと思っています
ナカシマ：重ねずに横スクロールがいいと思いますが、両端に［＜］［＞］などコントロールをつけて、はみ出しているタブの存在を示したいですね
kassy：タブのアイテムが多い場合のほか、タブのラベルテキストが長い場合でも幅が収まらなくなってしまうことがありますね
クボスケ：タブのラベルが何を指しているかによっては、長くなる場合がありそうですね。たとえばファイル名とか
kassy：英語の場合は日本語よりも長くなりがちかもしれません
クボスケ：横に並べていく以上、各タブの最大幅を決めて、長いテキストは表示上なんらか省略して隠す必要がありますね。ツールチップでテキスト全体を見られるようにするなども手当てしたいです
また、ChatGPTのサイドバーの履歴部分のように、AIが適宜短く名付けなおしてくれたりするのも考えられますね
ナカシマ：情報によっては、省略せず正確な記載が必要な場合も。たとえば会社名のような固有名詞とか
クボスケ：なるほど。基本的にタブ名を短くつけられるものはそうするが、必要に応じて省略表示を活用する、という感じでしょうか
ナカシマ：それから、最大幅と合わせて最小幅も制御しましょう
クボスケ：Chromeのタブのように、幅は可変だが最小幅よりタブ名の文字量が少ない場合は余白がつく感じですね
あと、コンテンツの上部に横に並べるのではなく、コンテンツのサイドに縦方向にタブアイテムを並べるという対処もあるかもしれません。たとえば、WebブラウザーArcのタブはそうなっています。縦方向のタブについては、今回の整理ではいったん除外しておくとしましょうか