範囲を示す表記｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「範囲を示す表記」です。
範囲を示す表記
期間や量などデータについて、範囲を示すことがよくあります。表示だけでなく、対象となるデータを探し出すための検索条件として入力することもあります。
範囲を示すときは、開始値と終了値の間に「–（エヌダッシュ）」をおきます。ハイフンでの代用や日本語では「〜（波ダッシュ）」の使用も慣例的ですが、本来の記号の用途に合わせます。エヌダッシュはUTF-8での文字コードはE28093で、Option＋ハイフン（macOSの場合）で入力できます。 インラインのテキスト内ではとくに前後に半角スペースを空けませんが、UIとしてデータを見やすくするために適切に配慮します。
スクリーンリーダーでの記号の読み上げについては、リーダーによってばらつきがあるため、意図通りの読み上げとなるように適切に指定します。
以下はやりとりの内容を一部抜粋したものです。
クボスケ：以前社内でエンジニアとの会話の中で出た話題です。
和文では一般的に「〜」（波ダッシュ）を使いますが、欧文では「–」（エヌダッシュ／エヌダーシ）が普通なのかな、と。もちろん波ダッシュは全角なので記号として欧文に無いですし、似た見た目の「~」（チルダ）は「およそ」という意味を持つので、「まで」のつもりで数字の前につけると意味が違ってしまいます
あと、「値A から 値B まで」にような表記は、英語にすると「from 値A to 値B」のように順序が変わってしまいますが、ロケールごとに順序も変わるようにするなら、それはそれでありなのかなと
ナカシマ：個人的には半角ハイフンをつかうことが多いですね。半角ハイフンの前後に半角スペースをいれて見やすくする、という方針もあり得ますが、iOSはOS側で和文内の欧文の前後に自動で余白を挿入する仕様になっているため、アキすぎになってしまったりして、悩ましいところです
kassy：グラフィックデザインでは正しい約物が使われているかは非常に気にしますよね。欧文の記号を使う場合は前後に余白をいれる設定にするなどの対応はしてきました。フォントによって余白感や見た目が変わってしまうこともありますよね
クボスケ：エヌダッシュの知名度や入力のひと手間を考えると、UIでは半角ハイフンで代用するのが合理的でいいかな、と思っていました。デジタルスクリーンのUIのデザインの中に、印刷物の組版のルールを杓子定規に持ち込まなくてもよいだろうし。でも、フォントによる見た目の差を考えると、本来その用途に向けて作られているダッシュを使うほうが、意図しないブレは防止できそうですね
ナカシマ：ちゃんとした理由がある場合はともかく、本来別のものを見た目が近いからといって便宜的に使うという姿勢はよくないかなと思いました
クボスケ：表面的に取り繕うのではなく本質的な正しさをとる、というのはMNTSQのデザイン原則に照らし合わせても妥当性な感じがしますね