Design Principles

デザイン原則NQrepoらしさ 6原則

デザイン原則は「NQrepoらしさ」を届けるために、私たちがどのように設計し、デザインするかの「約束事」です。

現場で記録する人、事務所で確認・承認する人。立場もデバイスも違う利用者が、同じ記録を安心して受け渡せるように、私たちがどのように考え、どのように判断すべきかの指針にしてください。

01 Overview

6つの原則と、その関係

NQrepoらしさは6つの原則で成り立っています。それぞれは独立したものではなく、互いに支え合ってひとつの体験をつくります。

体験の軸
支える土台
  1. 体験の軸

    PRINCIPLE01

    現場で迷わない

    Clarity on site

    「次に何をすればいいか」が、見ただけで分かる。

  2. PRINCIPLE02

    記録は正確に

    Accuracy by design

    間違いを防ぎ、間違えてもすぐ直せる。

  3. PRINCIPLE03

    誰が見ても追える

    Transparency

    いつ・誰が・何をしたかが、あとから辿れる。

  4. 支える土台

    PRINCIPLE04

    一貫性

    Consistency

    同じ意味のものは、いつも同じ形で。

  5. PRINCIPLE05

    アクセシビリティ

    Accessibility

    どの端末でも、どんな人でも読める。

  6. PRINCIPLE06

    段階的に育てる

    Built to grow

    帳票が増えても、崩れず広げられる。

記録が生まれる
記録が使われる
左の3つは記録の体験そのもの、右の3つはそれを支える土台です。番号は、原則同士がぶつかったときの優先順位。迷ったら小さい番号を取ります。

NQrepoが扱うのは、点検や日報といった「あとから誰かが確認する記録」です。記録は現場で生まれ、確認・承認を経て、事務所で束ねられます。

だから私たちは、まず現場で迷わせないこと、記録を正確に残すこと、その記録を誰が見ても追えることを大切にします。この3つを支えるのが、一貫性とアクセシビリティ、そして帳票が増えても崩れない、段階的に育てられる設計です。

6つの原則は、デザインの判断に迷ったときに立ち戻る場所です。新しい画面を考えるときも、レビューで意見が分かれたときも、ここに書かれた「問い」を自分に向けてみてください。

02 The Six Principles

NQrepoらしさ 6原則

それぞれの原則には、自分に向ける「問い」と、日々のデザインで実践するための具体的な決まりを添えています。

01 Clarity on site

現場で迷わせない

私たちが画面に情報を置くとき、現場で立ったまま、説明なしに読み解けるかを考えていますか?

点検は時間の制約がある作業です。設備の前で、手袋をしたまま、片手で iPad を持って操作しています。画面を読み解く時間も、余裕もありません。

次にすべき操作が、説明なしに1つに見えている状態を最優先します。選択肢が多いことは親切ではなく、判断を現場に押しつけることになります。私たちが先に判断し、画面には結論だけを置きましょう。

言葉も同じです。システムの都合で生まれた用語ではなく、現場で日常的に使われている言葉をそのまま使います。読む前に分かる。現場で迷わせないようにしましょう。

実践
  • 1画面の主要アクションは1つ。並列に見える選択肢を増やさない。
  • ラベルは現場の言葉で、省略しない。「登録」より「点検結果を保存」。
  • 補足説明やヘルプが必要になったら、説明を足す前に画面の構成を疑う。
02 Accuracy by design

記録は正確に

私たちが入力を求めるとき、間違えない仕組みではなく、注意書きに頼っていませんか?

記録は、その場で使い終わるものではありません。あとで確認者が見て、承認者が判断し、必要なら何年も先に見返されます。入力の1つの誤りが、後工程のすべてに影響します。

入力ミスを「注意」で防ぐのではなく、「構造」で防ぎます。取りうる値が決まっているなら自由入力にはしません。単位や範囲が決まっているなら、入力する前から画面上に見せます。間違えたときは、その場で、その隣で伝えます。

正確さを利用者の注意力に委ねない。仕組みで正確に。記録は正確に残しましょう。

実践
  • 必須・単位・入力範囲を常に画面上に出す。プレースホルダーだけに頼らない。
  • 取りうる値が決まっているなら選択式にする。ラジオ・セレクト・チェックボックスを使う。
  • エラーは入力箇所の隣で伝える。画面上部にまとめて出さない。
03 Transparency

誰が見ても追える

私たちが記録を見せるとき、いまどの状態で、誰の手元にあるのかが、開いた瞬間に分かりますか?

1つの記録に、実施者・確認者・承認者・管理者という立場の違う4つのロールが順番に触れます。バトンがいまどこにあるのかが見えないと、確認は止まり、差し戻しの理由は伝わらず、現場と事務所の間に「聞かないと分からないこと」が生まれます。

記録がいまどの状態にあり、誰の手元にあるのか。何が起きて、なぜそうなったのか。状態は必ず目に見える形で表し、判断には理由を添えます。

説明しなくても、開けば分かる。誰が見ても追えるようにしましょう。

実践
  • 状態はステータスタグで統一する。色・語彙・位置を App と Admin で揃える。
  • 差し戻しは理由とセットで表示する。「差し戻し」だけで終わらせない。
  • いつ・誰が・何をしたかを、時系列でたどれるようにする。
04 Consistency

同じ意味は、同じ形で

私たちが新しい見た目を作るとき、同じ意味のものが、すでに別の形で存在していませんか?

NQrepo は、現場の iPad アプリと事務所の管理画面、2つのプロダクトで構成されます。使う人は、日によって、役割によって、両方を行き来します。

iPad で見た「承認済み」と管理画面で見た「承認済み」が違う色や違う言葉なら、それは新しい情報ではなく、新しい迷いです。見た目や語彙のズレは、そのまま操作の迷いになります。前提が違っても語彙と意味は共通に保ち、寸法や密度だけを環境に合わせます。

新しく作る前に、すでにあるものを探す。同じ意味は、同じ形で伝えましょう。

実践
  • 新しい見た目を作る前に、コンポーネント一覧を確認する。既存で表せないか、まず疑う。
  • 語彙は App と Admin で揃える。同じ状態・同じ操作に、別の言葉を当てない。
  • 環境に合わせて変えてよいのは寸法と密度だけ。意味と構造は変えない。
05 Accessibility

だれの環境でも読める

私たちが色や大きさを決めるとき、明るい屋外や、手袋をした手や、見え方の違う人のことまで考えていますか?

作業環境も、使う人の見え方も一定ではありません。屋外の直射日光の下、薄暗い設備室、水滴のついた画面。年齢や視力、色の見え方も人それぞれです。

色だけに頼らず、十分な文字サイズとコントラストで伝えます。指先で正確に押せる大きさを確保します。「普通の環境で、普通に見える人」を基準にしない。もっとも厳しい現場でも読めることを、最低ラインにします。

アクセシビリティは特別な配慮ではなく、現場で使えるための前提です。だれの環境でも読めるようにしましょう。

実践
  • 本文のコントラストは 4.5:1 以上、UI の枠線は 3:1 以上。カラーページの値を使う。
  • タップ領域は 44×44px 以上。iPad では余白を広く取る。
  • 色だけで状態を伝えない。アイコンや文言を必ず添える。
06 Built to grow

段階的に育てる

私たちがひとつの帳票に合わせて作り込むとき、次の帳票が増えても、同じ形で受け止められますか?

NQrepo が扱う帳票は、これからも段階的に増えていきます。工場ごと、設備ごと、季節ごと。今日きれいに収まる画面が、来月の帳票では破綻するかもしれません。

個別の帳票に合わせた作り込みではなく、追加に耐える共通部品として設計します。帳票を「入力フィールドとリストアイテムの組み合わせ」として捉えれば、新しい帳票は新しい画面ではなく、新しい組み合わせになります。

今ある1つのために作らず、これから来る100のために作る。段階的に育てましょう。

実践
  • 帳票固有の表現は避け、入力フィールドとリストアイテムの組み合わせで表す。
  • 例外を作るときは、コンポーネントとして戻す。1画面だけの特別な部品を残さない。
  • 「この帳票が10倍になったら」を想像して、一覧・検索・絞り込みの余地を残す。
03 How to Use

原則の使い方

原則は読んで終わりにするものではなく、日々の判断の中で使う道具です。3つの場面での使い方をまとめます。

デザインするとき

画面を作り始める前に、その画面を使うロールと環境を確かめます。作りながら、6つの「問い」を順に自分に向けてください。

  1. 誰が、どのデバイスで、どんな状況で使うかを書き出す
  2. 既存のコンポーネントで表せないかを先に確認する
  3. 6つの問いに 1 つずつ答えられるかを確かめる

レビューするとき

好みではなく原則で話します。「気になる」ではなく「原則 02 に対して、単位が画面に出ていない」のように、番号と観点を添えて伝えてください。

  1. 指摘には原則の番号を添える
  2. 原則に照らして問題がなければ、好みの違いは通す
  3. 原則に書かれていない判断が出たら、原則の更新を検討する

原則同士がぶつかったとき

たとえば「一貫性」を守ると「現場で迷わせない」に反する場合があります。そのときは番号の小さい原則を優先し、なぜそうしたかを記録に残します。

  1. ぶつかっている原則を 2 つ特定する
  2. 番号の小さい方を取る
  3. 例外として残るなら、コンポーネント一覧に注記を追加する

原則は育てるもの

この6原則は、NQrepo の今の姿から書き起こしたものです。帳票やロールが増え、現場の使われ方が変われば、原則も見直します。原則に当てはまらない判断を3回したら、原則側を疑う。それ自体が原則 06「段階的に育てる」の実践です。