その他のUIテキスト

アプリケーション上の表現で迷ったときの判断基準や、推奨する表記を記載しています。

ディスクリプションは敬体(です、ます調)を用いて、動詞まで書く

説明

アプリケーションにおけるディスクリプション(説明文)は、動詞まで記載します。体言止めは避けましょう。
なお、文体は敬体(です、ます調) を用います。

画面ごとのライティングの詳細は、デザインパターンで確認してください。

アクションに関する画面やダイアログのタイトルでは、助詞は「の」を使用する

説明

操作画面やアクションダイアログで、オブジェクトを明記しながら操作を表す場合には、助詞に「の」を使用します。

OK:権限の追加、申請の取り消し
NG:権限を追加、申請を取り消し

ボタンやテキストリンクでは、助詞は「を」を使用する

説明

ボタンのアクションテキストやリンクテキストでオブジェクトを明記する場合には、助詞に「を」使用します。
操作ボタンやリンクはユーザーの動作を表すので、操作を動詞として扱う「を」を伴います。

OK:権限を追加、申請を取り消し
NG:権限の追加、申請の取り消し

なお、画面タイトルは、操作を動名詞で表すという意図から「の」を使用します。

議事録

https://smarthr-inc.docbase.io/posts/1512192

画面タイトル、項目名、ボタンは名詞、動名詞で表記する

説明

画面タイトル、項目名、ボタンに表示するアクションテキストは名詞、動名詞による表現を基本とし、オブジェクトを伴って動詞で書く場合には用言止めにします。

関連ルール

ボタンやテキストリンクでは、助詞は「を」を使用する

OK:取り込み、CSVを取り込む
NG:CSVを取り込み

画面ごとのライティングの詳細は、デザインパターンで確認してください。

移動の操作を表すときの助詞は、具体的な対象なら「に」、相対的な位置なら「へ」

説明

移動の操作を書く場合、可能な限り場所を明示し「に」を伴います。 ただし、省略する場合は、相対的な位置で示して「へ」を伴います。

[○○](画面名)や[〇〇一覧]といった具体的な場所を指す場合は「に」を使用します。

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

ボタンのラベルは、そのボタンが担うアクションを体言止めで書く

説明

ラベルは、そのボタンが担うアクションを体言止めで書きます。

  • ユーザーが入力したフォームを「送信」
  • タスクやオブジェクトを「追加」
  • 次のプロセスに進む「次へ」

「権限を追加」「申請を取り消し」など、対象のオブジェクト名などを明記しないとアクションが伝わりにくい場合は「を」で接続します。

ラベルの判断基準は以下のとおりです。

判断基準の図

見出しの書き方

説明

画面上のオブジェクトや操作を、簡潔に体言止めで書きます。複数行になる長いタイトルは見直しましょう。

  • オブジェクトの一覧(コレクション)画面のタイトルでは、「[オブジェクト名]一覧」「[オブジェクト名]の一覧」のような冗長な表記をなるべく避け、「オブジェクト名」とのみ書くようにします。
  • よくあるテーブルの見出しに「一覧」はつけない

アクションを伴う画面(新規作成画面、編集画面)のタイトルや、ActionDialogのタイトルでは、アクションに関わる動詞(動名詞)は、基本的に「の」で接続して表記します。

  • 「権限の追加」
  • 「申請の取り消し」

見出しが動詞で終わる場合でも、句点は省略します。

Tooltipのライティング

説明

  • 文章は、簡潔なテキストになるよう心がけてください。
  • 1文のみの場合でも、文章には句点をつけます。
  • 単語/ラベルのみの場合は句点を省略します。