省略の表記｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「省略の表記」です。
省略の表記
省略のシンボルは、多くの情報や機能を限られたスペースに持たせ、シンプルさを保ちながらユーザーの体験を向上させるため、デジタルスクリーンのUIでは古くから使われてきました。
長いテキストの表示を省略する際に、所定の字数からあふれた末尾のテキストを削り、「... （半角ピリオド3つ）」を置きます。基本的にCSSで自動的に付加されるものにまかせます。ファイル名など、末尾に識別のための情報がある場合には、中間を省略します。
あるアイテムについてのアクションをまとめたり、グローバルメニュー以外のメニュー項目を格納したアイコンボタンとして省略の記号を使う場合や、ページングにおける表示で中間のページを省略する場合は、省略記号はアイコン化したものを使います。
省略記号は「三点リーダー」と呼び、アイコンをコード内で扱う時の名前は「three-dots」とします。
テキストフィールドやテキストエリアのプレースホルダーテキストで入力を促す目的や、ボタンのラベルテキストでは省略記号を使いません。
以下はやりとりの内容を一部抜粋したものです。
ナカシマ：もともと、メニューバーの端に置かれた、メニューを格納したアイコン［⋯］が、メニューを展開した時のアイテムの並びに呼応するのか？ というのが発端でしたね。そのときは、アイテムの並びが横方向なら［⋯］で縦方向なら［⋮］になるというわけではなく、テキストやアクションの省略を表す共通的な表記である、という話でした
クボスケ：GUIの歴史の中で、けっこう古くから使われてきたものですよね。慣例にも揺らぎがあって厳密に使い方が定まっていなさそうなので、ポリシーを決めておきたいところだな、と思いました
kassy：［⋮］（縦方向に点）はケバブメニュー、［⋯］（横方向に点）はミートボールメニューという通称があったりします。使い分けの基準てあるんでしょうか？
クボスケ：明確な使い分けはなさそうで、たとえばMaterial Designでは［⋯］と同じ意味で［⋮］が使われていますよね。
https://m2.material.io/components/menus
ちなみにハンバーガーメニューはグローバルメニューに相当するという用法はもう一般的に認知されているといっていいのでは（異論はあると思いますが）。いっぽう［⋯］［⋮］はその他のメニューを展開するためのボタンになっていますね
ナカシマ：ミートボール、ハンバーガー、のほかにもベントーとか。使い分けについてはまた別途話したいです
クボスケ：アイコンボタンとしての［⋯］以外にも、さまざまなコンテキストで点を並べた省略表記が見られますね。いくつかの例が、参考記事「偉大なる省略記号 三点リーダーがいかに多くを物語るか」の中で挙げられていました
〈規定のスペースに収めるために長いテキストを省略する〉
クボスケ：文書を取り扱うMNTSQでは、長いファイル名やテキストコンテンツを省略して「…（ellipsis）」で丸めることが多いですよね。さらにスマートフォンやタブレットといった様々な解像度のスクリーンにレスポンシブに対応する中では必然的に出てきます
kassy：スペースに収めるために、なんでも省略すればいいかというとそうでもなくて、その情報の用途やユーザーの目的によっては、省略しないで全文表示した方が妥当なケースもありますね
また、省略する場合でもどこをどう省略するのか。たとえばファイル名の場合、ファイル名の末尾にファイルのバージョンを示す文字列が付いていたりするので、先頭から数えてn字以降は「…」で省略、としてしまうとファイルの識別に支障があります。こういう場合では、先頭と末尾は表示して中間を省略するのが有効と言えます
クボスケ：そうですね。各行の高さを揃えて一覧性を高めてデータを並べたい場合や、一覧性を優先するよりもデータの内容に注目したい場合など、省略をするかどうかやどこを省略するかは、コンテンツ、場面、目的によると言えそうです
〈テキストフィールドやテキストエリアのplaceholderで入力を促す意図で使う〉
クボスケ：テキストフィールドやテキストエリアのplaceholderでも使われる例がありますが、これはどうでしょう？
kassy：これはなくていいんじゃないでしょうか
〈処理や動作が進行中であることを示す〉
クボスケ：「Now Loading…」のように、「もう少しお待ちください」的なメッセージを端的に伝える使い方については、ライティングの表現の話として、また別途議論しましょうか
〈記号や呼称〉
クボスケ：テキストの省略記号はテキストが流れる横方向に点が並ぶのが自然に感じられます。そしてそれとの共通性から、アイコン化したものもやはり縦向きに点が並ぶのではなく横に並ぶのがいいのではないかと思います。点の数は3つが標準的でしょうか。また、表記の仕方はいくつか考えられるので、混在しないように統一したいです
全角三点リーダー「…」（JIS X 0208）
半角ピリオド3つ「...」
ミートボールアイコン
数学記号「⋯」（Unicode：U+22EF）
ナカシマ：実装上はtext-overflow: ellipsis;で自動的につきます。わざわざ変えることもできますが、なるべく標準のものからいじらないのがいいと思っています
クボスケ：テキストの場合は多言語も含めた取り回しを考慮すると、半角ピリオド3つ「…」がいいのではないでしょうか
記号だけのアイコンボタンの場合は、アイコンとして用意したものを使うのがよいと思います。テキストで半角ピリオド3つだと、欧文ベースラインで揃うためにボタンに対して下寄りの位置になってしまうので
ボタンのラベルテキストにつくケースはどうしますか？ たとえば ［選択…］といったものです
ナカシマ：アクションに続きがある場合に、ボタンのラベルに「…」を付けて示唆するやつですよね。たとえばChromeのUIを見てみると、ダイアログが開くものは「…」をつけるなどの整理もあるみたいですが、そもそもボタンのラベルにおいて省略記号を付けない、でもいいかもしれません
kassy：揺らぎや混乱を生む種になりますし、ボタンのラベルでは使わない整理でいいのではないかと思います
ナカシマ：また、ボタンではラベルテキストが長くても省略せずすべて表示するのが妥当だと思いますので、長いテキストを収めるための省略という観点でも、やはり省略記号はつけない、となりますね。その場合、そもそも省略の必要性が生じるような長いラベルにならないようライティングを考えたいところですね
kassy：この省略の表記・記号をなんと呼ぶか決めておきたいです。MNTSQでは法律関係の文書を取り扱うことに馴染みがある人も多く、文書の約物として定着している「三点リーダー」が通りがよいでしょうか？
クボスケ：コード内で扱うアイコン名はどうするかという観点もありますね。呼称と揃っていた方がスムーズだと思います。ちょっと調べたら以下の例が見つかりました
three-dots
meatball
Material Symbols & iconsでは「More Horiz」と呼んでいる
「三点リーダー」との連想で、コード内のアイコン名は「three-dots」が混乱がなくてよさそうですね