その他のUIテキスト
アプリケーション上の表現で迷ったときの判断基準や、推奨する表記を記載しています。
ディスクリプションは敬体(です、ます調)を用いて、動詞まで書く
説明
アプリケーションにおけるディスクリプション(説明文)は、動詞まで記載します。体言止めは避けましょう。
なお、文体は敬体(です、ます調) を用います。
画面ごとのライティングの詳細は、デザインパターンで確認してください。
ボタンラベルには動詞の終止形を使用する
説明と例
ボタンは、ユーザーが押すことで特定の操作や処理を実行するものです。
そのためボタンのラベルは、ユーザーの操作を表す動詞の終止形で表記します。
例:「取り込む」「取り消す」「戻る」
ただし、名詞に「する」をつけたサ行変格活用動詞の場合の「する」は省略します。
よりテキストが短くシンプルになることで、業務アプリケーションであるSmartHRに適していると考えるためです。
OK例:「追加」「削除」
NG例:「追加する」「削除する」
動詞の終止形の前に、オブジェクトを明記する場合には、助詞は「を」が適切です。
OK例:権限を追加、申請を取り消す
NG例:権限の追加、申請の取り消し
画面タイトルや項目名には名詞を使用する
説明
画面タイトルや項目名は、名詞で表記します。
名詞の前に、オブジェクトを明記する場合には、助詞は「の」が適切です。
例
OK例:権限の追加、申請の取り消し
NG例:権限を追加、申請を取り消す
画面ごとのライティングの詳細は、デザインパターンで確認してください。
移動の操作を表すときの助詞は、具体的な対象なら「に」、相対的な位置なら「へ」
説明
移動の操作を書く場合、可能な限り場所を明示し「に」を伴います。
ただし、省略する場合は、相対的な位置で示して「へ」を伴います。
[○○](画面名)や[〇〇一覧]といった具体的な場所を指す場合は「に」を使用します。
例
OK:「一覧に戻る」、「従業員リストに戻る」
NG:「一覧へ戻る」
前後左右といった相対的な位置を指す場合は「へ」を使用します。
例
OK:「前へ」、「前へ戻る」
NG:「前に戻る」
議事録
https://smarthr-inc.docbase.io/posts/1719994
テキストリンクは「こちら」ではなく、移動先を想起しやすい表現をする
説明
テキストリンクは、移動先にどのような情報があるかを判断しやすいよう表現します。「詳細はこちら」などのリンク先を想起しづらい表現を避け、なるべく具体的な情報を記載しましょう。
ただし、文字数に制限がある場合は「ヘルプを参照する」などの表現をして構いません。
関連ルール
参考文献
Web Content Accessibility Guidelines - 2.4.4 リンクの目的(コンテキスト内)を理解する
議事録
https://smarthr-inc.docbase.io/posts/1308637#%E3%83%AA%E3%83%B3%E3%82%AF
よくあるテーブルの見出しに「一覧」はつけない
説明
よくあるテーブルのような表形式の一覧表示の見出しでは、「一覧」を省略します。
同様に、メインオブジェクトが一覧の画面タイトルも同様に「一覧」を省略します。
ただし、機能名とオブジェクト名が一致する場合は、同じ画面内でコンテンツを区別するために「一覧」をつけてください。
例:申請機能
- 申請機能の画面タイトルは「申請」
- 申請を一覧表示するテーブルの見出しは「申請一覧」
「上階層に戻る」リンクの場合は、戻る画面を具体的に伝えるために「〇〇一覧に戻る」の表記とします。簡潔な言い回しにするため、「〜の一覧」のように「の」はつけません。
議事録
見出しについては、一覧であることが明白なので必要ないと判断。
前の画面をより具体的に伝えるために、戻るリンクには「〇〇一覧」の表記にした方が良いと考えました。
ページタイトルは、機能名とSmartHRをバーティカルバー(|)でつなぐ
説明
アプリケーション内、ヘルプセンター、利用規約、サービスサイトなどSmartHR全体を通して「SmartHR(スマートHR)」 という表記に統一します。
ページタイトルは、「{機能名}|SmartHR(スマートHR)」とします。
例
- 文書配付|SmartHR(スマートHR)
- 組織図|SmartHR(スマートHR)
議事録
https://kufuinc.slack.com/archives/CJX59GJFR/p1631164443066500
ユーザー名、アカウントの表記方法
説明
社員番号と従業員氏名を併記する場合は、社員番号と氏名の間に半角スペースを挿入して、「{社員番号} {姓} {名}さんの{オブジェクト名}」のように書きます。
例
- 0001 須磨 英子さんの育児休暇申請
- 0001 eiko.suma@example.com の育児休暇申請
- 0001 の育児休暇申請
- 新しい従業員の育児休暇申請
複製したオブジェクトは、オブジェクト名の頭に(コピー)をつける
説明
複製したオブジェクトの名前は、オブジェクト名の頭に(コピー)
をつけます。
例(オブジェクト名が「hogehoge」の場合)
- (コピー)hogehoge
ファイル名の末尾に「のコピー」などを追加していくと、一覧表示での視認性が悪くなるほか、長いオブジェクト名の場合にコピーであることに気がつきにくいため、プレフィクスをつけることにしました。
議事録
https://kufuinc.slack.com/archives/CJX59GJFR/p1643274254069400
Tooltipのライティング
説明
- 文章は、簡潔なテキストになるよう心がけてください。
- 1文のみの場合でも、文章には句点をつけます。
- 単語/ラベルのみの場合は句点を省略します。