デザイン基準

Sync8 の画面は、どの機能でも同じ見た目・同じ操作感になるよう、共通の部品と基準で作っています。ここでは、お客様や導入を検討されている方、一緒に開発する方に向けて、その基準を公開します。

基本の考え方

• 一目でわかる: 1 つの画面で、まずしてほしいことが 1 つに絞られている。
• 迷わず戻せる: 消す・確定するなど戻せない操作は、はっきり確認してから実行する。
• どの端末でも同じ: パソコンでもスマートフォンでも、同じ内容を同じ順番で扱える。
• 誰でも使える: 色だけに頼らない、キーボードだけで操作できる、読み上げソフトで内容が伝わる。

共通の部品

| 部品 | 役割 |
|---|---|
| ボタン | 主な操作（実行）、副次の操作（キャンセル）、注意が要る操作（削除）で見た目を分けます。すべて共通の部品から作ります。 |
| 操作の並び（アクションバー） | 保存・キャンセル・削除などの順番と場所を、画面が変わっても同じにします。 |
| 状況の画面（読み込み中・空・エラー） | 待ち時間、データがないとき、失敗したときの表示を共通にし、画面が真っ白になる時間を作りません。 |
| 色・文字・余白の基準値（トークン） | 色、文字の大きさ、余白、角の丸みを、画面ごとに決めず共通の値から使います。明るい表示と暗い表示の両方に対応します。 |
| 表 | 横に広い表は、スマートフォンでは横にスクロールできる形にし、列の見出しを残します。 |
| ポップアップ | その場で編集するための小さな画面。閉じる方法を必ず 2 つ以上用意します。 |

見た目のルール

1. 画面の部品に色や大きさを直接指定せず、共通の基準値を使う。
2. 文字と背景のコントラスト比は、通常の文字で 4.5:1 以上を目安にする。
3. 状態（成功・注意・エラー）は、色に加えて文字やアイコンでも示す。
4. 押せる大きさは、スマートフォンで縦横 44px 以上を目安にする。
5. 印刷する画面は A4 横 1 枚に収め、白黒でも読めるようにする。

文章のルール

• 画面のボタン名・見出しは、専門用語や社内の呼び名を使わず、利用者の言葉で書く。
• 日本人の名前の表示は、同じ姓の人がいなければ姓のみ、いればフルネーム。
• 日付や金額は、日本の商習慣の書き方にそろえる（令和・西暦の切り替え、税込・税別の明記など）。
• 文言は日本語を基準に、英語など複数の言語に対応する。

確認の仕組み

基準を守っているかは、人の目だけでなく、機械的な検査でも確かめています。共通部品を使っていない画面、読み上げ用のラベルが欠けているボタン、基準外の色指定などは、変更を取り込む前に自動で見つけます。

ご意見

基準へのご意見や、使いにくい画面のご指摘は、お問い合わせからお寄せください。