あやね
名前を省略してよいのは、残った文字で正しい項目を見分けられ、必要なときに全文を確認できる場合です。3つの文書が同じ長い接頭部を持つとき、末尾を省略するとすべて同じ名前に見えることがあります。見た目の整った列でも、選ぶために必要な違いを隠してしまっては役に立ちません。
実用的なUIの文字組み（英語）を土台に、作業上どの部分を読む必要があるかを決めます。全部収まるまで文字を小さくする方法は、情報の整理の問題を読みにくさの問題に置き換えているだけです。
判断を変えるのは名前のどの部分か
プロジェクトの成果物を選ぶ画面に、次の3ファイルが並んでいるとします。
- Northstar_customer-onboarding_research-notes.pdf
- Northstar_customer-onboarding_flow-v03.pdf
- Northstar_customer-onboarding_flow-v04-approved.pdf
利用者が必要としているのは、承認済みのフローです。先頭のプロジェクト名は文脈を伝えますが、正しいファイルを区別するのは末尾です。狭いパネルで3件とも「Northstar_customer-on…」と表示すれば、選択に必要な情報そのものが隠れます。
文字の表示方法を選ぶ前に、それぞれの値のどこが識別、比較、操作に役立つかを確認します。顧客名は先頭から読めれば区別できる場合があり、ファイル名には拡張子と版の末尾が必要な場合があります。レコードIDは1文字も省略できないかもしれません。同じ位置に省略記号を置いても、3つの用途すべてには対応できません。
デザインの検証用データには、実際に想定される短い値、標準的な値、とても長い値、末尾付近だけが違う複数の値を入れます。無作為な長いダミーテキストでは、はみ出しは見つかっても、見分けられない問題を見落とすことがあります。
改行に使う高さが、作業の役に立つかを見る
名前が主な情報なら、折り返しが最も分かりやすいことは少なくありません。2行にすれば、一覧性を保ちながら識別に必要な文字を多く残せます。成果物の選択画面では、装飾的なサムネイルを横に詰め込むより、ファイル名を折り返す方が役立つ場合があります。
行の高さが変わると、他の要素にも影響します。補足情報の位置を意図的にそろえ、操作ボタンと対象項目の関係を保ち、長い名前によって唯一の操作手段がパネル外へ押し出されないようにします。短い名前の中に長い名前を1件だけ入れるのではなく、長い行が続く場合を試してください。
行数に上限を設けても、全文を開示するルールは必要です。3番目のファイル名が2行でも収まらないなら、どこで全文を読んでコピーできるかを決めます。「2行」はレイアウトの制約であり、重要な文字が収まる保証ではありません。
IDや空白のない長い文字列など、自然に区切れない値は、開発者と折り返し方を決めます。表示上の改行によって、コピーした値に余分な文字を挿入してはいけません。
隠しても影響の少ない部分を省略する
| 方法 | 適した場面 | 注意する失敗 |
|---|---|---|
| 折り返す | 値が重要で、縦方向の追加スペースが作業に役立つ。 | ボタンが対象項目から離れたり、長い行が続いて一覧を追いにくくなったりする。 |
| 末尾を省略する | 先頭の言葉で通常は区別でき、全文も確認できる。 | 共通の接頭部によって、重要な末尾、版、条件が隠れる。 |
| 中間を省略する | 先頭と末尾の両方が識別に役立つ。 | どちらも十分に残らない、または実装で重要な文字のまとまりを切ってしまう。 |
| 短い表示名と詳細を併用する | 完全な識別子とは別に、正式に使える分かりやすい表示名がある。 | 自動的な略称で別のレコードが区別できなくなる、または元の値が変わったように見える。 |
この選択画面なら、「Northstar_…_flow-v04-approved.pdf」のように中間を省略すると、プロジェクトの手掛かりと識別に必要な末尾を残せます。ただし、試す価値がある案であって、常に正解とは限りません。さらに狭くすると末尾ばかりが目立ち、プロジェクトの文脈が失われることがあります。その場合は、折り返しや、内容に集中できる詳細画面の方が分かりやすいかもしれません。
MDNのtext-overflow解説（英語）は、切り取った文字のあふれをどう示すかを説明しています。このプロパティだけであふれる条件を作ったり、全文を読む手段を提供したりするわけではありません。中間省略にも適切な実装が必要です。任意の中央位置で切る見た目を指定し、CSSの設定一つで再現できると考えないでください。
省略記号は文字が省かれていることを伝えるために使い、完全な値の後ろに飾りとして付けません。元の名前は保持します。ファイル名をコピーするときは、通常、省略された表示ではなく完全な名前がコピーされるようにします。
マウスホバーなしでも全文を確認できるようにする
ポインターを使う端末では、ホバー時のツールチップで短いラベルを補えます。ただし、重要な文字を読む唯一の手段にはしないでください。タッチ操作では安定したホバー状態を使えず、キーボード操作にも到達できる手段が必要です。作業によっては、行の展開、詳細パネル、内容が分かる展開ボタン、移動先のページの方が有効です。
名前を押すとファイルが開く場合、その名前にはすでに主な操作があります。1回目のタップで予想外にツールチップが出て、2回目で開く動作にしないでください。違いが重要な場面では、開く、選択する、全文を表示する操作を分けます。この選択画面では、行で成果物を選び、意味の分かる詳細ボタンで正式名、種類、版を確認できるようにします。
ホバーやフォーカスで独自の内容を表示する場合、WCAGの達成基準1.4.13の解説（英語）では、指定の例外を含め、閉じられること、表示内容の上へポインターを移せること、必要な間は表示が続くことを説明しています。内容へポインターを近づけると消えたり、次の操作を覆い隠したりするツールチップは、安定して読める場所とはいえません。
実装では、適切なアクセシビリティ上の意味付けを通じて全文を取得できるようにし、実際の読み上げを確かめます。同じ名前を2回読ませる追加ラベルを、機械的に付けないでください。視覚的にもプログラム上も、どのレコードを選ぶのかが一致している必要があります。
Pixsoで同じ名前を2つの幅で比較する
Pixsoのデザインファイルに、幅280pxの選択パネルと、幅640pxの表を作ります。これは今回の検証用の幅であり、共通のブレークポイントではありません。各レイアウトに3つのファイル名をすべて入れます。案をよく見せるために文字列を短くせず、折り返し、末尾省略、中間省略を比較します。
コンパクトな一覧の隣に、選択済み状態と全文を示す詳細を置きます。レビュー担当者に承認済みフローを選び、正式な名前をコピーしてもらいます。区別のためにすべてのファイルを開く必要があるなら、文字がはみ出していなくても、その表示方法は作業に合っていません。
必ず見えるようにする部分と、全文を確認する場所を注記します。中間省略のロジック案は引き継ぎメモに残します。静止したフレームで示せるのは目指す結果であり、実際の文字処理は実装で検証する必要があります。
文字ではなくレイアウトを変えるべき場合
カードの高さをそろえるために、エラーメッセージの役立つ部分を隠してはいけません。「送信するには…」の条件が消えていたら、次に何をすればよいか分かりません。折り返すか、継続して読める適切な領域へ移します。
金額、安全上の指示、状態を限定する言葉、操作ラベルも同様です。「選択した項目を削除…」では、何を削除するのかが隠れる場合があります。マイナス記号や単位が消えれば、値の意味が変わります。省略しても問題ないと判断する前に、情報の優先順位を決めます。
狭いUIでラベルを説明するために長いオーバーレイが何度も必要になるなら、情報密度を見直します。補足情報を減らす、詳細を明確な次の階層へ移す、識別情報にもっと幅を割く方法があります。本当に別の表示領域が必要な場合は、ツールチップ、ポップオーバー、ダイアログの比較（英語）が参考になります。ただし、窮屈な行すべてを救う手段にはしないでください。
文字が変わったら、判断を再検証する
文字数だけでは、フォント、言語、文字体系をまたいだ表示幅を予測できません。翻訳で折り返しが変わり、指定フォントがないと寸法も変わります。利用者が文字を拡大すると、元の検証にあった余白がなくなることもあります。別の文字見本で済ませず、同じ操作の中で対応する文字体系と長い翻訳語を試します。
狭い幅と拡大文字で一覧を確認し、キーボードとタッチで全文へ到達できるかを試します。フォーカス表示と操作ボタンが見え、コピーすると元のデータが返ることも確かめます。成果物選択の最後の問いは単純です。推測せずに、承認済みフローを調査メモや旧版から見分けられるでしょうか。
