UIテキスト

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

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

説明

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

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

括弧「 」、[ ]、【 】の使い分け

説明

ライティングスタイル「括弧類は「 」、[ ]、【 】、( )を使用する」に準拠して、全角記号を使用します。

アプリケーション上での括弧の使い分けは以下です。
ヘルプページやリリースノートも準じます。

文中でファイル名を示すときに囲うもの

  • ファイル名:「 」
    地の文と区別したい
    強調したいとき

画面上の表示を示すときに囲うもの

  • 設定項目名、タブ名、操作ボタン名、選択肢など → [ ]
    画面名には[ ]をつけません。 例:マイナンバー管理画面に移動します。
  • フォームなどにユーザーが入力する文字列や値 → 「 」 例:「1000」と入力します。
  • ユーザーが独自に命名するオブジェクト名 → 【 】
    【 】は、以下のような場合に適宜使いましょう。 注意して操作してほしいとき
    強調させたいとき
    ダイアログなどで操作手順を示すとき 例:【2023年上期評価】を削除します。

議事録

https://kufuinc.slack.com/archives/CJX59GJFR/p1695364655322429

日付と時間の表記

説明

日付(date)の文字列形式は、他社アプリケーションと連携しやすいよう、「YYYY/MM/DD」で表記します。

  • YYYY:西暦年4桁
  • MM:2桁の月
  • dd:2桁の日 で表し、区切りには「/」を使用します。

時刻(time)の文字列形式は、HH:MMで表記します。

  • HH:24時間制の2桁
  • MM:2桁の分 で表し、区切りには「:」を使用します。

従業員に関連する数え方の表記

説明

従業員の数を数えるときには、1名、2名…100名として「名」の表記を用います。
人数の表記には「人」と「名」がありますが、SmartHRには従業員の名前や顔写真が登録されており、「名」という単位の成り立ち(※)から適していると考えます。

従業員に紐づくアカウントや、書類・依頼・申請などを数えるときの表記は「件」とします。

※「名」の成り立ち:明治時代に、個人を特定できる団体の人数の単位として、名前の「名」を取った「名」という数え方が生まれたといわれています。

従業員情報ダウンロード時のバックグラウンド処理の結果概要
OK:37名の従業員情報を書き出しました。
NG:37人の従業員情報を書き出しました。

社員番号アカウントの件数表示の案内
OK:22件の社員番号アカウントを表示中
NG:22名の社員番号アカウントを表示中

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

説明

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

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 の育児休暇申請
  • 新しい従業員の育児休暇申請

例を示すときには、コロン(:)を使用する

説明

ヒントメッセージなどで、例を示すときには「( )」ではなく、「:」を使いましょう。

括弧類は、左右を組み合わせて(両括弧)の使用が基本的な用法。右側のみ(片括弧)で使うことも間違いではないものの、学術論文や大学のレポートなどでの使用なので、SmartHRのヒントメッセージなどでは、両括弧を推奨とします。

また、例:(例)で比較すると、コロンを使用した方が少ない文字数に収められるので、「:」を使うことにしました。


OK:例:hogehoge
NG:(例)hogehoge、例)hogehoge、例: hogehoge

関連ルール

記述記号は全角を使用し、前後にスペースは入れない

「つくる」操作を表す文言

説明

「つくる」操作を表す文言は、基本的に「追加」とします。

ただし、以下の5つの例外があります。

例外

登録:従業員情報を登録、パスワードを登録、マイナンバーを登録
作成:書類を作成、電子申請を作成

「追加」を使うと違和感がある場合は、社内Slack#design_system_相談で気軽に相談してください。

操作を止めるときの言葉(キャンセル・取り消し・中断の考え方)

説明

操作を止めるときの言葉は、言葉の意味を理解し、コンテキストに合わせて使い分けましょう。

キャンセル

  • キャンセルとは、まだ実行していない操作を止めること
  • 例:従業員情報の編集をキャンセルする、申請の提出をキャンセルする

取り消し

  • 取り消しとは、すでに実行した操作を止めること
  • 例:申請を取り消す、登録を取り消す

中断

  • 中断とは、実行中の操作を止めること
  • 例:アンケートの回答を中断して、一時保存する

状態を戻すときの言葉(解除・差し戻し・戻すの考え方)

説明

状態を戻すときの言葉は、言葉の意味を理解し、コンテキストに合わせて使い分けましょう。

解除

  • 解除とは、元の状態に戻すこと
  • 例:確定を解除する、アーカイブを解除する

差し戻し

  • 差し戻しとは、ワークフローで承認ないしは合意を求められたユーザーが提出されたものに対して修正を求めること
  • 例:申請を差し戻す、承認依頼を差し戻す

戻す

  • 戻すとは、業務フローのなかでタスクを前の状態に戻すこと
  • 例:未確定に戻す

複製したオブジェクトは、オブジェクト名の頭に(コピー)をつける

説明

複製したオブジェクトの名前は、オブジェクト名の頭に(コピー)をつけます。

例(オブジェクト名が「hogehoge」の場合)

  • (コピー)hogehoge

ファイル名の末尾に「のコピー」などを追加していくと、一覧表示での視認性が悪くなるほか、長いオブジェクト名の場合にコピーであることに気がつきにくいため、プレフィクスをつけることにしました。

議事録

https://kufuinc.slack.com/archives/CJX59GJFR/p1643274254069400

ファイルを取り込んで操作するときの文言

説明

一括登録など、CSVファイルを取り込んで操作する場合は、以下の通りの表現を用います。

ファイルを選択するときのボタンのアクションテキストは「ファイルを選択」

ファイルの取り込みを実行するときのボタンのアクションテキストは「一括{操作名}」 もしくは、「取り込み」、「CSVを取り込む」とします。

  • 一括登録
  • 一括更新
  • 取り込み
  • CSVを取り込む

関連ルール

画面タイトル、項目名、ボタンは名詞、動名詞で表記する
ボタンやテキストリンクでは、助詞は「を」を使用する

バックグラウンド処理をリクエスト時の文言は「{処理名}を受け付けました」

説明

バックグラウンド処理をリクエストしたときに表示する文言は、「{処理名}を受け付けました」とします。

OK:従業員情報のダウンロードを受け付けました。
NG:従業員情報のダウンロードを予約しました。

議事録

https://kufuinc.slack.com/archives/CJX59GJFR/p1608001964454300

給与明細でCSV取り込み後のインフォメーションパネルの文言として、予約→受け付けに変更。

ヘッダーの行も含めてエラーの発生した行数を表示する

説明

バックグラウンド処理のエラー詳細で表示する行数は、ヘッダーの行も含めてエラーの発生した行数を表示します。

{n}行目:{エラー文言}

そのため、nには2以上の数字が入ります(なお、1行目はヘッダーになるため、nに1が入ることはない)。

「デフォルト」と「プリセット」の使い分け

説明

用途に合わせて使い分けましょう。

デフォルト

  • ユーザーによる設定がされていない初期の状態や値を指すときに使用する。システム側で値やデータが設定されているケースと、設定されていないケースの両方がある。

プリセット

  • あらかじめシステム側で設定されている状態を指すときに使用する。

使い分け例

  • デフォルト値
  • プリセットレポート

なお、「プリセット」はユーザーが使い慣れない言葉なので、機能名称などで用いることを基本とし、ディスクリプションやヘルプページなどで状態を説明する表現としての使用は避けましょう。

OK:データがあらかじめ用意されています。
NG:データがプリセットされています。

議事録

https://kufuinc.slack.com/archives/CJX59GJFR/p1637839749187700

「テンプレート」と「フォーマット」の使い分け

説明

ひな型を意味する文言は、「テンプレート」とします。「フォーマット」の使用は控えましょう。

  • 書類テンプレート
  • 評価テンプレート

「グループ」と「セット」の使い分け

説明

複数の項目を束ねるまとまりを意味する文言は、「グループ」とします。「セット」の使用は控えましょう。

  • 依頼グループ
  • 書類グループ