見出しやラベル、ボタンの動詞｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「見出しやラベル、ボタンの動詞」です。
見出しやラベル、ボタンの動詞
タイトルや見出し、項目名やボタンなど、ユーザーがとることができるアクションを表すテキストは、動詞の「〜する」をつけずに体言止め／名詞で表記します。これによりスペースをより有効に使うとともに、複数のボタンが並んだときに同じ文字が繰り返されてノイズとなるのを防ぎます。
場合によっては、「〜する」を付けることによって、アクションをとることができる／求められていることをより明示的にするという観点も考えられますが、原則として体言止め／名詞にします。
漢字の送り仮名については省略せずに表記します。コンテンツ内の見出しやボタンのテキストなど、どの場所でも一貫した表記を保つことで、無用なストレスを避けます。
以下はやりとりの内容を一部抜粋したものです。
kassy：ボタンのラベルで「編集」と「編集する」や「削除」「削除する」が混在していたりするんですよね
クボスケ：統一したポリシーがないと、開発した時期やチームでゆらぎが生じやすいので、ちゃんと決めておきたいですね
ナカシマ：対象とするユーザー層によっても方針が変わりそうです。たとえば多様で幅広いサービスを展開しているAmebaのような企業は、メディアやコンテンツの特性や、ユーザー層のノリや情緒、シズル感みたいなものを意識して決めているかもしれません
kassy：toCのサービスでは、ボタンの文言もテストで反応をみてチューニングしていたりします
ナカシマ：SmartHR社のまとめは同じtoBのプロダクトとして参考になりそうです
クボスケ：名詞、動名詞にする、でよさそうですね。
クボスケ：送り仮名はどうしますか。たとえば「取り込み」か「取込」などです。文章中の表現は送り仮名をつけますが、ボタンのラベルは短く「取込」でもいい気もします
kassy：理解はできるが、伝わりづらさも感じます。送り仮名はあったほうがいいのではないでしょうか
ナカシマ：ボタンだけでみるとたしかに違和感はないですが、ボタンを押した先の見出しとは合わせたいですね。そうなるとやはり送り仮名はあったほうがいいかもしれません。変に省略するよりも日本語としての標準的な言葉遣いに従うのが重要に感じます
クボスケ：わりと古くからの業務システムのUIでは省略されてるイメージでした。容量の問題や解像度の低いディスプレイなどの環境上の制約から、なるべく削る流れがあったのかもしれません。一貫性を重視してユーザーの負担を避ける方針にしましょう