> For the complete documentation index, see [llms.txt](https://ds.photoruction.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds.photoruction.com/writing/ui.md).

# UI

## ボタンやリンクなどでアクションを表す場合は目的語＋「を」＋動詞で表す

何に対してどんな事を行うのかが端的に伝わるように、アクションに関しては敬体（ですます）や修飾語はつけずに、目的語と動詞のみで表します。

{% hint style="success" %}
図面を追加
{% endhint %}

{% hint style="danger" %}
新しい図面を追加する
{% endhint %}

## モーダルやダイアログのタイトルなどで、アクションを表す場合は目的語＋「を」＋動詞＋「する」で表す

アクションに対するオブジェクトが主になることかつ説明文として扱いたいため、動作や行為を表す「〜する」の形で表記します。

{% hint style="success" %}
図面を追加する
{% endhint %}

{% hint style="danger" %}
図面を追加
{% endhint %}

## オーダーボードの見出しはアクションを表す表現とし、目的語＋「を」＋動詞で表す。

実施してほしい唯一のことを簡潔に表現します。

{% hint style="success" %}
構造図をアップロード
{% endhint %}

{% hint style="danger" %}
構造図をアップロードする
{% endhint %}

## モバイルアプリの画面タイトルは、目的を要約する単語もしくはフレーズで端的に表現する。

画面が小さいこともあり、出来る限り簡潔に表現します。長くても10文字以下が理想的です。

{% hint style="success" %}
表示項目
{% endhint %}

{% hint style="danger" %}
表示項目を設定します。
{% endhint %}

## 日付と時間の表記はYYYY/MM/DD HH:MM:SS

Dateデータの表記については、他社サービスでも一般的に広く使われている「YYYY/MM/DD」で表記します。

{% hint style="info" %}
YYYY：西暦年4桁

MM：2桁の月

DD：2桁の日
{% endhint %}

時刻（time）の文字列形式は、HH:MMで表記します。日付とは半角スペースで繋ぎます。

{% hint style="info" %}
HH：24時間制の2桁

MM：2桁の分

SS：2桁の秒
{% endhint %}

## 「日付(YYYY/MM/DD)」「日時（YYYY/MM/DD HH:MM:SS)」「日時（YYYY/MM/DD HH:MM）」の表示を適切に使い分ける

<table data-full-width="false"><thead><tr><th width="172"></th><th width="318">使う場面</th><th> 例</th></tr></thead><tbody><tr><td>日付(YYYY/MM/DD)</td><td>日付だけわかれば問題がない時。一般ユーザーの操作で生成されるデータに対しては原則使わない。</td><td>プロジェクト作成日。竣工日。</td></tr><tr><td>日時(YYYY/MM/DD HH:MM）</td><td>理由がない限りメインで使用する。</td><td>書類作成日時。最終ログイン日時。</td></tr><tr><td>日時(YYYY/MM/DD HH:MM:SS)</td><td>1分の間で頻繁に生成されるデータに対して利用する。</td><td>写真の撮影日時。顧客に提供するログ。検査日時など。</td></tr></tbody></table>

## ディスクリプションは敬体（ですます調）を用いて動詞まで記載する。加えて「！」「？」などは使わない。

機能の説明文は必ず動詞まで記載します。体言止めなどは使わないでください。またユーザーに不安感を与えないように「！」や「？」は使わないでください。

{% hint style="success" %}
操作は元に戻せないためご注意ください。
{% endhint %}

{% hint style="danger" %}
操作は元に戻すことができません！よろしいですか？
{% endhint %}

## ダウンロードできるファイル名称でユーザー側で決められないものに関しては本日の日付（YYYYMMDD）+「\_」+ 名称で表す。

ユーザーがタイトルなどを決められるものをダウンロードする場合は、日付など余分なものを付与せずに、ユーザーが決めた内容をそのままファイル名として活用してください。一方で、ユーザーで名称を決められないものに関しては、ダウンロードした日付と名称（出来るだけユーザに内容が伝わる工夫をする）を半角のアンダーバーで繋いだものをファイル名としてください

## 小数点は可能な限り使わず切り捨てる

厳密に表そうと思えばいくらでも可能であるものの、直感的かつ視認性を考慮して小数点以下は切り捨てます（注：四捨五入ではなく切り捨て）。ただし面積や体積など、精度が求めらたり小数点以下で表すことに特別な意味があるものは除きます。

{% hint style="success" %}
97%
{% endhint %}

{% hint style="danger" %}
97.5%
{% endhint %}

## 画面を移動するアクションのリンクは具体的な対象なら「に」、相対的な位置なら「へ」を使う。

可能な限り場所を明示し助詞は「に」を使います。 省略できる場合は、相対的な位置を示す「へ」を使います。なお、視認性を考慮して「図面一覧」などは「一覧」と表現します。

{% hint style="success" %}
一覧に戻る
{% endhint %}

{% hint style="danger" %}
図面一覧へ戻る
{% endhint %}

{% hint style="success" %}
前へ戻る
{% endhint %}

{% hint style="danger" %}
前に戻る
{% endhint %}

## 「以下の内容に」や「こちら」といった場所を表す言葉は使わない

抽象的な言葉であり相対的な場所を表すような「以下の内容に」や「こちら」と言った表現は避けましょう。

{% hint style="success" %}
ヘルプページを参照する
{% endhint %}

{% hint style="danger" %}
ヘルプページはこちらを参照してください。
{% endhint %}

## ユーザー名称を表すときは性と名を合わせたフルネームとして、間に半角スペースを入れる。

プロダクトの中でユーザー名称を表示するときはフルネームかつ半角スペースを間に入れて表現します。また、前後に文書を入れる時にも接続に半角スペースを入れてください

{% hint style="success" %}
削除すると 中島 貴春 さんのデータは消去されます。
{% endhint %}

{% hint style="danger" %}
削除すると中島貴春さんのデータは消去されます
{% endhint %}

## 文書をラベルとして使うときは全角の「：」を使う

鉤括弧などはスペースを多く使うのに対して全角の「：」は非常に視認性も高くコンパクトに表現することが可能です。

{% hint style="success" %}
撮影日時：2023/4/23 12:10:23
{% endhint %}

{% hint style="danger" %}
（撮影日時）2023/4/23 12:10:23
{% endhint %}

## 文書でステータスや詳細を表すときは「()」を使う。手前に半角スペースと末尾に配置する

文書自体のステータスや詳細は備考的な要素が含まれるので必ず末尾に、視認性を考慮して半角スペースで繋ぎます。

{% hint style="success" %}
すべての写真 (200)
{% endhint %}

{% hint style="danger" %}
すべての写真 \[200]
{% endhint %}

## 「追加」「登録」「作成」「保存」を適切に使い分ける

<table data-full-width="false"><thead><tr><th width="100"></th><th width="409">使う場面</th><th> 例</th></tr></thead><tbody><tr><td>追加</td><td>見えているものにデータを追加する場合</td><td>写真一覧に写真データを追加する場合のアクションボタン</td></tr><tr><td>登録</td><td>帳簿など元になるものを登録する場合</td><td>ユーザーの登録時のボタン</td></tr><tr><td>作成</td><td>ユーザーが入力した情報を元に何かを生成する場合</td><td>写真を選んで書類を作成する時のボタン</td></tr><tr><td>保存</td><td>今あるものの情報を編集する場合</td><td>組織情報などの保存するボタン</td></tr></tbody></table>

## 3桁以上の数字には、カンマ（ , ）を入れる

視認性を考慮して、3桁以上の数値を表記する場合は「,」を入れます。ただしIDなど意味のない数字を列挙する場合は別となります。

{% hint style="success" %}
1,000枚
{% endhint %}

{% hint style="danger" %}
1000枚
{% endhint %}

## ステップで操作が進む場合は「次へ」「戻る」を使う

例えば書類を作成する場合、最後の操作するボタンは「作成」になりますが、それまでにステップが必要な場合は「次へ」「戻る」を使います。

## 強調したい場合は前後に半角スペースを入れた “ “ で囲う

文書の中で特に強調したい場合は前後に半角スペースを入れたダブルクオーテーションでくくる。「」は『』などはスペースを取るため使用しない

{% hint style="success" %}
利用する場合は “書類” に移動してください
{% endhint %}

{% hint style="danger" %}
利用する場合は「書類」に移動してください
{% endhint %}

## ソート表現は「並び替え」で統一する

「並べ替え」は「レイアウト変更」や「グループ分け」のニュアンスが強いため、ソート機能を指す場合は 「並び替え」 を使用する。

{% hint style="success" %}
昇順に並び替え
{% endhint %}

{% hint style="danger" %}
昇順に並べ替え
{% endhint %}