01
Brand & Principles
NQrepoらしさを体現するために
NQリポは、iPadアプリと管理画面の2つのプロダクトで構成されます。どちらを操作していても「同じ意味のものが同じ形で出てくる」状態を保つために、デザインの前提と判断基準をここにまとめます。
デザインの前提Design Context
使われる場所が違えば、最適な形も変わります。NQリポのデザインは現場のiPadと事務所のPCという、2つの環境を前提にしています。
iPad側は立ち作業・手袋・タッチペンでの操作、明るさの変わる現場での視認性が前提です。管理画面側はマウスとキーボード、そして一覧での情報密度が前提になります。
この違いを吸収するのがデザインシステムの役割です。前提が違っても語彙と意味は共通に保ち、寸法や密度だけを環境に合わせます。
App
iPad アプリ（iPadOS）
現場でのタッチ操作が基本
Admin
管理画面（Web ブラウザ）
事務所での PC・マウス操作が基本
デザイン原則Design Principles
判断に迷ったときの優先順位です。上から順に、迷ったら上を取ります。各原則の「問い」と背景は、デザイン原則のページで詳しく説明しています。
体験の軸
支える土台
-
体験の軸
PRINCIPLE01現場で迷わない
Clarity on site
「次に何をすればいいか」が、見ただけで分かる。
-
PRINCIPLE02
記録は正確に
Accuracy by design
間違いを防ぎ、間違えてもすぐ直せる。
-
PRINCIPLE03
誰が見ても追える
Transparency
いつ・誰が・何をしたかが、あとから辿れる。
-
支える土台
PRINCIPLE04一貫性
Consistency
同じ意味のものは、いつも同じ形で。
-
PRINCIPLE05
アクセシビリティ
Accessibility
どの端末でも、どんな人でも読める。
-
PRINCIPLE06
段階的に育てる
Built to grow
帳票が増えても、崩れず広げられる。
記録が生まれる
記録が使われる
01
現場で迷わないClarity on site
点検は時間の制約がある作業です。画面を読み解く時間はありません。次にすべき操作が、説明なしに1つに見えている状態を最優先します。
実践1画面の主要アクションは1つ。ラベルは現場の言葉で、省略しない。
02
記録は正確にAccuracy by design
入力ミスを注意で防ぐのではなく、構造で防ぎます。取りうる値が決まっているなら、自由入力にはしません。
実践必須・単位・入力範囲を常に画面上に出す。エラーは入力箇所の隣で伝える。
03
誰が見ても追えるTransparency
記録がいまどの状態にあり、誰の手元にあるのかが、開いた瞬間に分かること。状態は必ず目に見える形で表します。
実践状態はステータスタグで統一。差し戻しは理由とセットで表示する。
04
一貫性Consistency
iPadアプリと管理画面で、同じ意味のものは同じ形をしていること。見た目や語彙のズレは、そのまま操作の迷いになります。
実践新しい見た目を作る前に、コンポーネント一覧に既存のものがないか確認する。
05
アクセシビリティAccessibility
作業環境も、使う人の見え方も一定ではありません。色だけに頼らず、十分な文字サイズとコントラストで伝えます。
実践本文は 4.5:1 以上、UI 枠線は 3:1 以上。タップ領域は 44×44px 以上。
06
段階的に育てるBuilt to grow
帳票は段階的に増えていきます。個別の帳票に合わせた作り込みではなく、追加に耐える共通部品として設計します。
実践帳票固有の表現は避け、入力フィールドとリストアイテムの組み合わせで表す。
利用者とデザイン要件Users & UI Requirements
1つの記録に、立場の違う4つのロールが順番に触れます。使うデバイスと責任の範囲が違うため、UI に求めるものも変わります。
実施者
App（iPad）
現場で点検結果と日報を記録する、入力量がもっとも多いロールです。
UI要件：立ち作業・手袋のまま扱えるタップ領域と、明るさの変わる現場で読めるコントラスト。
確認者
App（iPad） / 管理画面（PC）
入力内容をひととおり見て、問題がなければ次の工程へ送ります。現場の iPad からも、事務所の管理画面からも確認できます。
UI要件：大量の項目から「未入力・異常値」だけを拾えること。欠落が目立つ表示。
承認者
管理画面（PC）
提出された記録を確認し、承認または差し戻しを判断します。
UI要件：承認と差し戻しの重みの差が形で分かること。取り消しにくい操作は明確に区別する。
管理者
管理画面（PC）
帳票テンプレートや職員・工場などの設定を扱います。
UI要件：設定変更の影響範囲が事前に読めること。一覧・検索・絞り込みの一貫性。
02
Styles
NQrepoらしさを形作る
カラー、タイポグラフィ、コンポーネントなど、デザインシステムの基本要素です。
コンポーネント一覧Component Overview
ボタンButton
Figma「NQrepo UI Kit」のボタン定義。App（アプリ）と Admin（管理画面）でコンポーネントセットが分かれており、Style・Size・State・Icon の組み合わせで構成されています。
原則
ボタンは「いま実行できるアクション」を表す
ボタンの見た目は装飾ではなく、その画面でユーザーが何を優先すべきかを伝える手段です。NQrepo では スタイル（Solid / Outline）が重要度を、サイズが置かれる場所を表します。迷ったときは「この画面でユーザーが達成したいことは何か」から先に決め、そのアクションに Solid を1つだけ与えてください。
使い分け
スタイル ＝ 重要度
1つの画面、1つのダイアログに対して Solid は原則 1 つです。Solid が並ぶと主目的が 2 つあることになり、ユーザーは選べなくなります。
PrimarySolid
その画面でユーザーが達成したい主目的。原則 1 画面 1 つ。
例: 保存 / 登録する / 次へ / 送信 / 検査を開始
SecondaryOutline
主目的から外れるアクション、取り消し・戻る系。Solid と並べて使い、複数並べても構いません。
例: キャンセル / 戻る / 下書き保存 / 条件をクリア
DisableState
スタイルではなく状態です。第 3 のボタン種として使わないでください。
使う場面: 必須項目が未入力 / 送信処理中
未定義：削除・退会など取り返しのつかない操作を表す Danger と、文中リンクとして使う Text Link は、現在 Figma に定義がありません。Admin のテーブル行に削除操作があるため、status/error #f85c5c を起点にした Danger の追加を検討してください。
使い分け
サイズ ＝ 置かれる場所
サイズは「強調したいから大きくする」ではなく、「どこに置かれるか」で決まります。同じ重要度でも、置かれるコンテナによって選ぶサイズが変わります。
| App | サイズ | 使う場所 |
|---|---|---|
| Large | 360 × 64 | 画面幅を使えるメインアクション。フォーム末尾や下部固定領域。1 画面 1 つ |
| Medium | 240 × 64 | ダイアログ・カードなど、囲まれた領域の中での主アクション |
| Small | 96 × 44 | リスト行やヘッダーなど、高さに制限がある場所 |
| Admin | サイズ | 使う場所 |
|---|---|---|
| ExtraLarge | 400 × 48 | フォーム送信・モーダルの確定など、画面全体に対する確定操作 |
| Large | 200 × 48 | セクション単位の主アクション |
| Medium | 120 × 40 | 標準。テーブル上部の操作、フィルター適用など最も使用頻度が高い |
| Small | 80 × 40 | テーブル行内の操作 |
| Icon | 40 × 40 | ラベルを置く余地がないツールバー内。単独では意味が伝わらないため aria-label 必須 |
Do / Don't
並べ方のルール
Do
主アクションを Solid、副アクションを Outline にする。並び順は画面全体で統一し、途中で入れ替えない。
Don't
Solid を並べない。どちらが主目的か判断できず、誤操作の原因になる。片方は必ず Outline にする。
Do
ラベルには何が起きるかを書く。確認ダイアログでも「はい / OK」ではなく、実行される動作をそのまま置く。
Don't
「OK」「はい」だけのラベルにしない。スクリーンリーダーでボタンだけを読み上げたとき、何が起きるか分からなくなる。
そのほかの禁則：Disable のまま放置して押せない理由を示さない／アイコンだけで意味を説明したつもりになる／Solid の背景色をブランド緑以外に変える／サイズを CSS で上書きして Figma にないサイズを作る。
アクセシビリティ
実装時のチェックリスト
- 要対応白文字 ×
brand/primary #009944のコントラストは 3.72:1 で、WCAG AA（4.5:1）に届いていません。App の 20px W6 は「大きい文字」扱いのため 3:1 をクリアしますが、App Small（18px）と Admin の Large・Medium（16px）／ Small（14px）は未達です。Solid の背景を#00853C（白文字で 4.75:1）に寄せるか、小さいサイズのラベルを別色にする対応が必要です。 - 要確認タップ領域は 44 × 44px 以上。App Small は 96 × 44 で条件を満たしますが、Admin の Medium・Small・Icon は高さ 40px です。Admin はマウス操作前提のため許容していますが、タッチ操作が想定される画面では使用しないでください。
- 必須フォーカスリングを消さない。
outline: noneだけを書いた実装は不可です。Figma 側に Focus のバリアントがないため、実装時に:focus-visibleのスタイルを必ず定義してください。 - 必須Icon ボタンには
aria-labelを設定する。アイコンの形だけに意味を持たせない。 - 必須状態を色だけで伝えない。Disable は見た目だけでなく
disabled属性を併用し、支援技術にも状態が伝わるようにする。 - 必須テキストの拡大に耐える。ラベルが長いときに切り詰めるのではなく、レイアウト側で折り返しや幅の調整ができる設計にする。
Appアプリ向け（24バリエーション）
角丸 8px / Hiragino Kaku Gothic ProN W6（600）/ 行間 100% / シャドウなし。Style（Solid・Outline）× Size（Large・Medium・Small）× State（Default・Disable）× Icon（Off・On）の24通りです。
| Size | サイズ (W × H) | フォント | パディング |
|---|---|---|---|
| Large | 360 × 64 | 20px | 16 / 8（アイコン付きは 12・gap 8） |
| Medium | 240 × 64 | 20px | 16 / 8（アイコン付きは 12・gap 8） |
| Small | 96 × 44 | 18px | 12 |
Solid
Large360 × 64 / 20px
Default
Default / Icon
Disable
Disable / Icon
Medium240 × 64 / 20px
Default
Default / Icon
Disable
Disable / Icon
Small96 × 44 / 18px
Default
Default / Icon
Disable
Disable / Icon
Outline
Large360 × 64 / 20px
Default
Default / Icon
Disable
Disable / Icon
Medium240 × 64 / 20px
Default
Default / Icon
Disable
Disable / Icon
Small96 × 44 / 18px
Default
Default / Icon
Disable
Disable / Icon
Admin管理画面向け（54バリエーション）
角丸 8px / Hiragino Kaku Gothic ProN W6（600）/ 行間 100% / gap 4px / シャドウ 0 2px 4px rgba(51, 51, 51, 0.24)。Style（Solid・Outline）× Size（ExtraLarge・Large・Medium・Small・Icon）× State（Default・Hover・Disable）× Icon（Off・On）の54通りです（Icon サイズは Icon=On のみ）。
| Size | サイズ (W × H) | フォント | パディング |
|---|---|---|---|
| ExtraLarge | 400 × 48 | 20px | — |
| Large | 200 × 48 | 16px | — |
| Medium | 120 × 40 | 16px | 左右 8 |
| Small | 80 × 40 | 14px | — |
| Icon | 40 × 40 | — | アイコン 24px |
Solid
ExtraLarge400 × 48 / 20px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Large200 × 48 / 16px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Medium120 × 40 / 16px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Small80 × 40 / 14px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Icon40 × 40
Default / Icon
Hover / Icon
Disable / Icon
Outline
ExtraLarge400 × 48 / 20px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Large200 × 48 / 16px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Medium120 × 40 / 16px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Small80 × 40 / 14px
Default
Default / Icon
Hover
Hover / Icon
Disable
Disable / Icon
Icon40 × 40
Default / Icon
Hover / Icon
Disable / Icon
カラーシステムColor System
NQrepoの視覚体系を支える8つのカラーファミリー。各カラーファミリーは50から900の10段階のシェードで構成されています。Figma「NQrepo UI Kit」のカラー定義をもとに、プリミティブカラーとニュートラルカラーをコントラスト比の基準とあわせて掲載しています。
プリミティブカラーPrimitive Color
プリミティブカラーはカラースタイルの基盤となる基本的な色で構成され、サービスに統一感のあるカラースキームを作成するために利用します。各ベースカラーは広範なカラー設定を導出するための色相と明度の段階で構成されています。プリミティブカラーを参考とし、色相、明度、彩度などを調整しサイトやサービスの目的に相応しいカラースキームを構築します。
Greenグリーン
←4.5:1
3:1→
4.5:1→
←3:1
LightGreenライトグリーン
←4.5:1
3:1→
←3:1
4.5:1→
Blueブルー
←4.5:1
3:1→
4.5:1→
←3:1
Redレッド
3:1→
←4.5:1
←3:1
4.5:1→
Orangeオレンジ
←4.5:1
3:1→
←3:1
4.5:1→
Ocherオーカー
←4.5:1←3:1
3:1→
4.5:1→
Yellowイエロー
←4.5:1
3:1→
←3:1
4.5:1→
Beigeベージュ
←4.5:1
3:1→
←3:1
4.5:1→
ニュートラルカラーNeutral Color
グレー、ホワイトなどのニュートラルカラーは、背景、ディバイダー、ボーダーなど、デザイン要素に共通カラーとして使用されます。
Black / White基本色
Grayグレー
←4.5:1
3:1→
←3:1
4.5:1→
コントラスト比の表記Contrast Ratio
各スケールに付いたタグは、そのシェードを境に矢印の方向へ基準を満たす範囲です。
3:1→白(#FFFFFF)に対して、コントラスト比3:1以上を確保できるカラー
4.5:1→白(#FFFFFF)に対して、コントラスト比4.5:1以上を確保できるカラー
←3:1黒(#000000)に対して、コントラスト比3:1以上を確保できるカラー
←4.5:1黒(#000000)に対して、コントラスト比4.5:1以上を確保できるカラー
アイコンIcon
Figma「NQrepo UI Kit」から書き出した、統一ストロークのアイコンライブラリ。クリックするとコードを確認できます。
タイポグラフィTypography
Figma「NQrepo UI Kit」のタイポグラフィ定義。PC / Tablet それぞれの Heading・Body・Label トークンと、アプリの文字サイズ設定との対応表を掲載しています。
フォントファミリーFont Family
Hiragino Kaku Gothic ProN を基本フォントとし、見出しとラベルに W6（600）、本文に W3（300）を使用します。トークン名は「役割 - サイズ - ウェイト - 行間」の順で、例えば H1-32-W6-140 は 32px / W6 / 行間140% を意味します。
PC1024px 以上
HeadingW6 / 600
H1-32-W6-140
32px / W6 (600) / 行間 140%H2-28-W6-140
28px / W6 (600) / 行間 140%H3-24-W6-140
24px / W6 (600) / 行間 140%H4-20-W6-140
20px / W6 (600) / 行間 140%H5-16-W6-140
16px / W6 (600) / 行間 140%H6-14-W6-100
14px / W6 (600) / 行間 100%BodyW3 / 300
Body-20-W3-160
20px / W3 (300) / 行間 160%Body-18-W3-160
18px / W3 (300) / 行間 160%Body-16-W3-160
16px / W3 (300) / 行間 160%Body-14-W3-160
14px / W3 (300) / 行間 160%LabelW6 / 600
Label-20-W6-100
20px / W6 (600) / 行間 100%Label-18-W6-100
18px / W6 (600) / 行間 100%Label-16-W6-100
16px / W6 (600) / 行間 100%Label-14-W6-100
14px / W6 (600) / 行間 100%Tablet1023px 以下
HeadingW6 / 600
H1-24-W6-140
24px / W6 (600) / 行間 140%H2-20-W6-140
20px / W6 (600) / 行間 140%H3-18-W6-140
18px / W6 (600) / 行間 140%H4-16-W6-140
16px / W6 (600) / 行間 140%H5-14-W6-140
14px / W6 (600) / 行間 140%H6-12-W6-100
12px / W6 (600) / 行間 120%BodyW3 / 300
Body-20-W3-160
20px / W3 (300) / 行間 160%Body-18-W3-160
18px / W3 (300) / 行間 160%Body-16-W3-160
16px / W3 (300) / 行間 160%Body-14-W3-160
14px / W3 (300) / 行間 160%LabelW6 / 600
Label-20-W6-100
20px / W6 (600) / 行間 100%Label-18-W6-100
18px / W6 (600) / 行間 100%Label-16-W6-100
16px / W6 (600) / 行間 100%Label-14-W6-100
14px / W6 (600) / 行間 100%Label-12-W6-100
12px / W6 (600) / 行間 100%アプリフォントサイズ対応表App Font Size
アプリの文字サイズ設定（小 / 中 / 大）と見出しトークンの対応です。「中」が基準サイズとなります。
| フォントサイズ小 | フォントサイズ中 | フォントサイズ大 |
|---|---|---|
| 22pt | H1-24-W6-140 | 28pt |
| 18pt | H2-20-W6-140 | 24pt |
| 16pt | H3-18-W6-140 | 22pt |
| 14pt | H4-16-W6-140 | 20pt |
| 12pt | H5-14-W6-140 | 18pt |
| 10pt | H6-12-W6-100 | 16pt |
エレベーションElevation
エレベーションは、コンポーネントの高さの度合いを示します。デフォルト値は高さレベル0で、画面上で最も低く表示されます。コンポーネント上に重なって表示されるダイアログやオーバーフローメニューなどのコンポーネントは、他のコンポーネントよりも高いエレベーションをもつことでオーバーレイ表示されます。
エレベーションレベルElevation Level
Level.1 から Level.8 までの 8 段階です。値が大きいほど手前に浮かんで見えます。各レベルは 2 つのドロップシャドウを重ねて表現します。
- カード
- 検索バー
- テキスト入力フィールド
- 標準的なボタン
- 切り替えスイッチ
- プルダウンメニュー
- 選択リスト
- 浮遊アクションボタン
- 画面下部の通知バー
- 補足説明（ツールチップ）
- 操作補助メニュー
- 中央ダイアログ
- 下からせり出す操作パネル
- 横から引き出すメニュー
- 全画面を覆う一時的な画面
- 最優先の警告画面
- 緊急通知
NQリポ エレベーション表First Shadow
1 つ目のドロップシャドウです。広がりをもった柔らかい影で、浮き上がりの大きさを表します。
| レベル | 位置 X | 位置 Y | ぼかし | 広がり | 色コード | 透明度 |
|---|---|---|---|---|---|---|
| Level.1 | 0 | 2 | 4 | 1 | #333333 | 10% |
| Level.2 | 0 | 4 | 6 | 2 | #333333 | 10% |
| Level.3 | 0 | 6 | 8 | 3 | #333333 | 10% |
| Level.4 | 0 | 8 | 10 | 4 | #333333 | 10% |
| Level.5 | 0 | 10 | 12 | 5 | #333333 | 10% |
| Level.6 | 0 | 12 | 14 | 6 | #333333 | 10% |
| Level.7 | 0 | 14 | 16 | 7 | #333333 | 10% |
| Level.8 | 0 | 16 | 18 | 8 | #333333 | 10% |
NQリポ エレベーション表Second Shadow
2 つ目のドロップシャドウです。接地面に近い濃いめの影で、輪郭を引き締めます。
| レベル | 位置 X | 位置 Y | ぼかし | 広がり | 色コード | 透明度 |
|---|---|---|---|---|---|---|
| Level.1 | 0 | 1 | 5 | 0 | #333333 | 30% |
| Level.2 | 0 | 1 | 6 | 0 | #333333 | 30% |
| Level.3 | 0 | 1 | 6 | 0 | #333333 | 30% |
| Level.4 | 0 | 2 | 6 | 0 | #333333 | 30% |
| Level.5 | 0 | 2 | 10 | 0 | #333333 | 30% |
| Level.6 | 0 | 3 | 12 | 0 | #333333 | 30% |
| Level.7 | 0 | 3 | 14 | 0 | #333333 | 30% |
| Level.8 | 0 | 3 | 16 | 0 | #333333 | 30% |
入力フィールドInput
テキスト入力欄。App はラベル・補足テキスト・チェックボックスの有無を切り替える入力アイテム、Admin は Size と State（Default / Bordered / Focus / error）のバリアントを持ちます。
Appアプリ向け（コンポーネントセット2 + 単体4）
角丸 8px / Hiragino Kaku Gothic ProN。ラベルは W6 18px・行間 100%、補足テキストは W6 14px、入力テキストは W6 16px・行間 140%。入力欄は 280 × 48 で背景 surface #ffffff、必須の ※ は brand/danger #f34949。InputTextItem は Checkbox × Remarks × Contents の3軸で8通りです。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| InputTextItem | Checkbox = Off / On Contents = Off / On Remarks = Off / On | 8 |
| LabelUnits | StatusLabel = On / Off SupportText = On / Off Tooltip = On / Off | 8 |
InputText280 × 48
入力テキスト
InputTextItem幅 672 / 8バリアント
テキスト※
入力テキスト
テキスト※
入力テキスト
ラベル
テキスト※
入力テキスト
※テキストテキストテキストテキスト
テキスト※
入力テキスト
ラベル
※テキストテキストテキストテキスト
テキスト※
入力テキスト
原因：
選択肢01テキストテキストテキストテキスト
対応：
選択肢01テキストテキストテキストテキスト
テキスト※
入力テキスト
ラベル
原因：
選択肢01テキストテキストテキストテキスト
対応：
選択肢01テキストテキストテキストテキスト
テキスト※
入力テキスト
※テキストテキストテキストテキスト
原因：
選択肢01テキストテキストテキストテキスト
対応：
選択肢01テキストテキストテキストテキスト
テキスト※
入力テキスト
ラベル
※テキストテキストテキストテキスト
原因：
選択肢01テキストテキストテキストテキスト
対応：
選択肢01テキストテキストテキストテキスト
InputLongTextItem幅 672 / 入力欄 h82
テキスト※
テキストを入力
SelectBox240 × 48
選択してください
InputSelectBox幅 672
テキスト※
選択してください
LabelUnits8バリアント
テキスト※
テキスト※
テキスト※
サブテキストが入ります。テキスト※
サブテキストが入ります。正常
テキスト※
正常
テキスト※
正常
テキスト※
サブテキストが入ります。正常
テキスト※
サブテキストが入ります。単体コンポーネント（4）InputText、InputLongTextItem、SelectBox、InputSelectBox
Admin管理画面向け（コンポーネントセット1 + 単体5）
角丸 8px / 入力欄は Large 480・Medium 300 × 48、パディング 16px。State は Default（枠線なし）・Bordered border/default #d0d0d0・focus brand/primary #009944・error status/error #f85c5c（下にエラーテキスト W3 16px）。ラベルは W6 20px、必須表記は W6 14px の #f34949。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| InputText | Size = Large / Medium State = error / focus / Bordered / Default | 8 |
InputTextLarge 480 / Medium 300 × 48 / 8バリアント
入力テキスト
Size = Large / State = Default入力テキスト
Size = Large / State = focus入力テキスト
※エラーテキストが入ります入力テキスト
Size = Large / State = Bordered入力テキスト
Size = Medium / State = Default入力テキスト
Size = Medium / State = focus入力テキスト
※エラーテキストが入ります入力テキスト
Size = Medium / State = BorderedInputTextUnits/Large480 × 101
ラベル※必須
サポートテキスト入力テキスト
SelectBoxesUnits/Large240 × 101
ラベル※必須
サポートテキスト選択してください
LabelUnits112 × 49
ラベル※必須
サポートテキストMulchButton/Default/Large416 × 48 / Button 200 × 48
Button
Button
MulchButtonUnits/Large416 × 101
ラベル※必須
サポートテキストButton
Button
単体コンポーネント（5）InputTextUnits/Large、SelectBoxesUnits/Large、LabelUnits、MulchButton/Default/Large、MulchButtonUnits/Large
日付入力Input Date
日付の入力欄。Admin には期間指定用の InputDateRange も含まれます。
Appアプリ向け（単体2）
角丸 8px / InputDate は 200 × 48、パディング 左右 16px、gap 8px。プレースホルダは W6 16px の text/secondary #808080、カレンダーアイコンは 24px 枠に 19.5px のリーフを中央配置。
DateItem672 × 48
テキスト※
日付を選択
InputDate200 × 48
日付を選択
単体コンポーネント（2）DateItem、InputDate
Admin管理画面向け（単体2 + セット2）
角丸 8px / InputDate 200 × 48。State は Default（枠線なし）と Bordered #d0d0d0。DateRange は 2つの InputDate を gap 8px で並べ、区切りに「〜」（W6 16px）を挟みます。Units 版はラベル（W6 20px）+ 必須 + サポートテキスト（W6 14px）付き。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| InputDate | Size = Large State = Bordered / Default | 2 |
| InputDateRange | Size = Large State = Bordered / Default | 2 |
InputDateUnits/Large300 × 101
ラベル※必須
サポートテキスト日付を選択
InputDateRangeUnits/Large432 × 101
ラベル※必須
サポートテキスト日付を選択
〜日付を選択
InputDate200 × 48 / 2ステート
日付を選択
State = Default / Size = Large日付を選択
State = Bordered / Size = LargeInputDateRange432 × 48 / 2ステート
日付を選択
〜日付を選択
日付を選択
〜日付を選択
単体コンポーネント（2）InputDateUnits/Large、InputDateRangeUnits/Large
セレクトSelect
選択系のコンポーネント。App は検査結果を選ぶ SelectButton（OK / NG / Repair / none）、Admin はプルダウン形式の SelectBox です。
Appアプリ向け（コンポーネントセット2）
SelectButton は 160 × 48 を 80 × 48 の2分割で構成し、左右の外側だけ角丸 8px。State ごとに OK status/success #19c95f、NG status/error #f85c5c、none border/default #d0d0d0、Repair は全幅 status/caution #dcaa14 に「修理中」（W6 18px）。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| SelectButton | State = OK / NG / Repair / none | 4 |
| SelectItem | Contents = On / Off | 2 |
SelectButton160 × 48 / 4ステート
State = OK
State = NG
修理中
State = RepairState = none
SelectItem幅 672 / 2バリアント
テキスト※
テキスト※
原因：
選択肢01テキストテキストテキストテキスト
対応：
選択肢01テキストテキストテキストテキスト
Admin管理画面向け（コンポーネントセット2）
SelectBox は 240 × 48・角丸 8px・パディング 左右 16px。State は Default / Bordered #d0d0d0 / Focus #009944 / Error #f85c5c。Button = On は右に 120 × 40 のアウトラインボタン（gap 24px、シャドウ 0 2px 4px rgba(51,51,51,0.24)）が付きます。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| SelectBox | Button = On / Off Size = Large State = Bordered / Default / Error / Focus | 8 |
| PulldownItem | プロパティ1 = Default / Hover | 3 |
SelectBox240 × 48（Button = On は + Button 120 × 40）/ 8バリアント
選択してください
State = Default / Size = Large / Button = Off選択してください
State = Focus / Size = Large / Button = Off選択してください
※エラーテキストが入ります選択してください
State = Bordered / Size = Large / Button = Off選択してください
Button
選択してください
Button
選択してください
Button
選択してください
Button
PulldownItem146 × 40 / tag は 227 × 40
テキストテキスト
プロパティ1 = Defaultテキストテキスト
プロパティ1 = Hoverテキストテキスト
tagステータスタグStatus Tag
状態を示すタグ。App は検査状態を6種、Admin は3種のステータスと認証状態（CertificationState）を持ちます。
Appアプリ向け（コンポーネントセット1・6ステート）
64 × 24 / 角丸 8px / パディング 2 · 8px。文字は W6 12px・行間 120% の白。地色は Success #19c95f、Error #f85c5c、Repair #dcaa14、Done #4b9ff8、un checked #808080。see off だけ白地 + #ddf3e7 の枠線で文字が #009944 です。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| StatusTag | State = Error / Repair / Success / Done / un checked / see off | 6 |
StatusTag64 × 24 / 6ステート
正常
State = Success異常あり
State = Error修理中
State = Repair修理完了
State = Done未点検
State = un checked見送り
State = see offAdmin管理画面向け（コンポーネントセット2）
StatusTag は 88 × 28・W6 16px。CertificationState は 120 × 40・白地・枠線 #d0d0d0・角丸 8px で、文字色が状態を表します（認証待ち #808080 / 認証済み #009944 / 否認 #f34949）。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| StatusTag | Status = Error / Success / Repair | 3 |
| CertificationState | State = Denial / Pending / Verified | 3 |
StatusTag88 × 28 / 3ステート
正常
Status = Success異常あり
Status = Error修理中
Status = RepairCertificationState120 × 40 / 3ステート
認証待ち
State = Pending認証済み
State = Verified否認
State = DenialダイアログDialog
モーダルダイアログ。App はボタン数・説明文・アイコンの有無を切り替えるバリアント構成、Admin は用途別（削除・ダウンロード・承認・ログアウト・未保存）に単体コンポーネントとして用意されています。
Appアプリ向け（コンポーネントセット1・8バリアント + 単体5）
幅 640 / 角丸 8px / パディング 40 · 24px / 内側 gap 40px、地色は background/page #f1efea、シャドウ 0 2px 6px rgba(51,51,51,0.24)。タイトルは W6 24px・中央、説明文は W6 16px。ボタンは 240 × 64・W6 20px で、Single はアウトライン1つ、Bouble は #333 枠 + #009944 塗りの2つ（gap 40px）。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Dialog | Button = Single / Bouble Description = Off / On Icon = Off / On | 8 |
Dialog幅 640 / 8バリアント
タイトルが入ります
Button
タイトルが入ります
Button
タイトルが入ります
テキストが入ります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
Button
タイトルが入ります
テキストが入ります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
Button
タイトルが入ります
ButtonButton
タイトルが入ります
ButtonButton
タイトルが入ります
テキストが入ります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ButtonButton
タイトルが入ります
テキストが入ります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ButtonButton
Dialog/InspectionIssue640 × 610
点検箇所
テキスト※
テキストテキスト※
原因を記入してください。
対応※
テキストテキストその他
その他の場合は対応内容を記入してください。
キャンセル完了
Dialog/InspectionIssue/Glassplastics640 × 586
点検箇所
異常あり
テキスト※
内容※
破損ひび割れその他
原因※
人や物との接触その他
対応※
補修テープでの応急処置修理依頼その他
キャンセル完了
Dialog/RadioButtonContainer592 × 164
テキストテキスト※
テキストテキストその他
その他の場合は対応内容を記入してください。
Dialog/InputLongTextContainer592 × 108
テキストテキスト※
テキストテキストテキストテキストテキスト
CommentContainer640 × 127
単体コンポーネント（5）Dialog/InspectionIssue、Dialog/RadioButtonContainer、Dialog/InputLongTextContainer、Dialog/InspectionIssue/Glassplastics、CommentContainer
Admin管理画面向け（単体5）
幅 640 / 角丸 8px / パディング 40 · 24px、地色 #f1efea。タイトル W6 24px + 本文 W3 16px を gap 24px で積み、ボタンは 200 × 48・W6 16px を gap 24px。破壊的操作は brand/danger #f34949、通常の確定は brand/primary #009944 です。
Dialog/Delete640 × 252
〇〇〇〇を削除
削除した情報は元に戻せません。削除しますか？
キャンセル削除
Dialog/Download640 × 350
ダウンロード形式選択
ダウンロード形式を選択してください。
ファイル形式
CSV形式PDF形式
キャンセルダウンロード
Dialog/Approval640 × 252
承認しますか？
一度承認すると取り消せません。内容をご確認のうえ進めてください。
キャンセル承認
Dialog/Logout640 × 202
ログアウトしますか？
キャンセルログアウト
Dialog/UnsavedChanges640 × 278
未保存の項目があります
入力内容が保存されていません。このまま別の画面に切り替えると、入力内容は失われます。本当に画面を切り替えますか？
キャンセル破棄して画面移動
単体コンポーネント（5）Dialog/Delete、Dialog/Download、Dialog/Approval、Dialog/Logout、Dialog/UnsavedChanges
ナビゲーションNavigation
画面のナビゲーション。App はヘッダー・タブ・ボトムアクションバー・サイドメニュー、Admin はサイドナビゲーションが中心です。
Appアプリ向け（単体5）
Tab Container は 672 × 40、選択タブが #009944 塗り。Header は 704 × 64・地色 #f1efea・上だけ角丸 8px で、右に進捗（点検済み）を重ねます。BottomActionBar は 704 幅・上向きシャドウ 0 -4px 16px rgba(51,51,51,0.16)。バッジは #f34949 の丸に白文字です。
Tab Container672 × 40
すべて
00未点検
BottomActionBar704 × 112
ButtonButton
Header704 × 64
ページタイトル
点検済み0/0
_Head1156 × 323
DesignSystem
Title
概要
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
SideMenuItem56 × 56（アイコン・文字が白のため brand/primary 上で表示）
単体コンポーネント（5）Tab Container、BottomActionBar、Header、_Head、SideMenuItem
Admin管理画面向け（単体5）
サイドナビゲーション。アイコンレールは 72 × 960、展開時は 240 × 960。地色は brand/primary #009944 でアイコン・文字は白です。
単体コンポーネント（5）Navigation、Icon/dataSearch、Navigation_manager、Icon/sidebarButton、Content container
チェックボックスCheckbox
チェックボックス。通常の Check と NG 用の2系統があり、それぞれ On / Off を持ちます。
Appアプリ向け（コンポーネントセット2 + 単体2）
Check / NG は 80 × 48・角丸 8px。Off は border/default #d0d0d0、On は Check が status/success #19c95f、NG が status/error #f85c5c。CheckboxContainer はチェックボックス 24px + ラベル W6 14px + ツールチップ 20px を gap 4 / 8px で並べます。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Check | State = On / Off | 2 |
| NG | State = On / Off | 2 |
Check80 × 48 / On は status/success
State = Off
State = On
NG80 × 48 / On は status/error
State = Off
State = On
CheckboxContainer98 × 24
ラベル
CheckboxItem672 × 48
テキスト※
単体コンポーネント（2）CheckboxContainer、CheckboxItem
リストアイテムList Item
一覧行のコンポーネント群。検査リスト・アイテム行・テキストコンテンツなどで構成されます。
Appアプリ向け（単体8）
一覧行のコンポーネント群です。
単体コンポーネント（8）ItemRow、ListItem、Row、Row、InspectionList、Item、Item_持ち場のみ、TextContent
検査ステータスInspection Status
検査フローに関わるコンポーネント群。ステータス表示、数値入力ボタン、質問コンテナ、進捗アコーディオン、確認行などが含まれます。
Appアプリ向け（コンポーネントセット6 + 単体3）
検査フローのコンポーネント群です。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| InspectionStatus | State = checked / Inspected / unchecked / remand / progress / seeoff | 6 |
| NumberButtonItem | Contents = On / Off | 2 |
| NumberButton_OK | State = Default / OK | 2 |
| NumberButton_NG | State = Default / NG | 2 |
| QuestionContainer | State = active / inactive | 2 |
| ProgressAccordion | State = active / inactive | 2 |
| ConfirmRow | Error = On / Off Type = StatusLabel / Text / LongText | 5 |
単体コンポーネント（3）QuestionContainer/Button Container、QuestionContainer/Frame 13321、InspectionItem
ラジオボタンRadio Button
ラジオボタン。active / inactive の2状態です。
Admin管理画面向け（コンポーネントセット1・2ステート）
88 × 22 / ラジオは 16px、ラベルとの gap 8px。文字は W6 16px・行間 140% の text/primary #333333。active は brand/primary #009944 の二重丸、inactive は text/secondary #808080 の輪郭のみです。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| RadioButton_PC | State = active / inactive | 2 |
RadioButton_PC88 × 22 / 2ステート
テキストState = active
テキストState = inactive
フィルター検索Filter Search
一覧の絞り込み用フィルター。開閉状態（active / inactive）を持ちます。
Admin管理画面向け（コンポーネントセット1 + 単体1）
幅 1152 / 角丸 8px / パディング 16px の白いパネル。見出し「絞り込み検索」は W6 16px の #009944 で、inactive は + 、active は − アイコンが付きます。中の入力は枠線 #d0d0d0 付きで gap 16px の折り返し配置、右にリセット（80 × 40）と検索（120 × 40・#009944）を gap 8px で置きます。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Filtersearch | State = active / inactive | 2 |
Filtersearch幅 1152 / 2ステート
絞り込み検索
絞り込み検索
リセット検索
Accordion/Filtersearch1152 × 80
リセット検索
単体コンポーネント（1）Accordion/Filtersearch
カードCard
カード。アイコンの有無と Default / Hover / Selected の状態を持ちます。
Admin管理画面向け（コンポーネントセット1・6バリアント）
270 × 80 / 角丸 8px / パディング 左右 16px / シャドウ 0 2px 6px rgba(51,51,51,0.24)。文字は W6 20px・行間 140%。Hover は不透明度 70%、Selected は #009944 の枠線と文字色になります。Icon = On は 40 × 40 のアイコンが左に付きます。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Card | Icon = Off / On Size = Large State = Default / Hover / Selected | 6 |
Card270 × 80 / 6バリアント
テキストテキスト
Size = Large / State = Default / Icon = Offテキストテキスト
Size = Large / State = Hover / Icon = Offテキストテキスト
Size = Large / State = Selected / Icon = Offテキストテキストテキストテキストテキストテキストテーブル / 行Table / Row
テーブルのヘッダー行とデータ行。用途別（会社・工場・スタッフ・お知らせ・官能検査・重量・使用水・ガラプラなど）に多数の行コンポーネントが用意されています。
Admin管理画面向け（コンポーネントセット1 + 単体20）
テーブルのヘッダー行とデータ行です。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| ProductContainer | State = Selected / Default / Hover | 3 |
単体コンポーネント（20）Row/Table_PC、cell、Row/Staff_PC、Row/Company_PC、Row_PC、Row/News_PC、Row/Factory_PC、Row/water _PC、TableHeader/glas_PC、Row/glas _PC、Row、Row、HeaderRow_使用水、HeaderRow_ガラプラ、Row/SensoryTest_PC、Row/SensoryTestScore_PC、Row/ weight_PC、Row/water02_PC、Row/ weight_PC、Header
アコーディオンAccordion
開閉するアコーディオン。3つの状態を持ちます。
Admin管理画面向け（コンポーネントセット1・3ステート）
幅 1148 / 角丸 8px / パディング 16px / シャドウ 0 2px 4px rgba(51,51,51,0.24)。質問は Q. マーク（24px 枠）+ W6 16px・行間 140%、開閉は 24px の +／− #009944。active は下に回答領域（地色 #f8f8f8、パディング 16 · 56 · 24 · 16px）が付き、A. マーク + W3 16px・行間 160% と画像スロットが入ります。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Accordion | State = active / inactive / State3 | 3 |
Accordion幅 1148 / 3ステート
ここに質問が表示されます
ここに質問が表示されますここに質問が表示されますここに質問が表示されますここに質問が表示されますここに質問が表示されますここに質問が表示されますここに質問が表示されますここに質問が表示されますここに質問が表示されます
ここに質問が表示されます
ここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されます
Image 400 × 225（Figma のアセットは空）ここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されますここに回答が表示されます
パンくずリストBreadcrumb
パンくずリスト。階層数を 2〜10 で切り替えられます。
Admin管理画面向け（コンポーネントセット2 + 単体1）
幅 1200 / パディング 16 · 24px / gap 8px。各項目は W6 14px で、途中の階層は brand/primary #009944 + 16px の矢印、最後の階層だけ text/primary #333333 で矢印なしです。unit で階層数 2〜10 を切り替えます。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Breadcrumb | unit = 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 | 9 |
| Breadcrumb/Parts/Item | state = false / ture | 2 |
Breadcrumb幅 1200 / padding 16・24 / unit 2〜10
ページページ
unit = 2ページページページ
unit = 3ページページページページ
unit = 4ページページページページページ
unit = 5ページページページページページページ
unit = 6ページページページページページページページ
unit = 7ページページページページページページページページ
unit = 8ページページページページページページページページページ
unit = 9ページページページページページページページページページページ
unit = 10Breadcrumb/Parts/Item14px W6 / false は brand/primary + 矢印
ページstate = false
ページstate = ture
BreadcrumbItem71 × 18 / 18px W6
テキスト
単体コンポーネント（1）BreadcrumbItem
ページネーションPagination
一覧のページ送り。
Admin管理画面向け（単体1）
セルは 32 × 32・角丸 8px・パディング 6px・gap 8px の白地。数字は W3 14px・行間 160% で、現在ページだけ brand/primary #009944 塗りの白文字です。前後送りは 16px の矢印アイコンです。
Paginationセル 32 × 32 / gap 8
12345…910
単体コンポーネント（1）Pagination
カレンダーCalendar
カレンダーの日付セルと曜日ヘッダー。
Admin管理画面向け（コンポーネントセット1 + 単体1）
曜日ヘッダーは 80 × 32、日付セルは 80 × 64。どちらも枠線 border/default #d0d0d0・W6 16px・行間 140%。active は地色が #ddf3e7 になり、下に #009944 塗りのタグ（W6 14px・角丸 8px）が入ります。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Calendar/Day | State = active / inactive | 2 |
Calendar/DayOfWeek80 × 32
日
Calendar/Day80 × 64 / 2ステート
1
State = inactive1休業日
State = active単体コンポーネント（1）Calendar/DayOfWeek
テキストエリアTextarea
複数行のテキスト入力。Default / Focus / Error / Disabled の4状態です。
Admin管理画面向け（コンポーネントセット1・4ステート）
360 × 120 / 入力枠は 360 × 96・角丸 4px。ラベルは 12px、プレースホルダは 14px の #b5b5b5。枠線は Default / Disabled が #d0d0d0、Focus が 2px の #009944、Error が #f34949。Disabled だけ地色が #f6f6f6 です。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Textarea | State = Default / Focus / Error / Disabled | 4 |
Textarea360 × 120 / 4ステート
ラベルテキストを入力
State = Defaultラベルテキストを入力
State = Focusラベルテキストを入力
State = Errorラベルテキストを入力
State = DisabledタブTab
タブ。Default / Active / Hover の3状態と、それらを並べる TabBar があります。
Admin管理画面向け（コンポーネントセット1 + 単体1）
106 × 29 / パディング 上 10px・左右 16px、下線は 74 × 2px。Default は text/secondary #808080、Active は #009944 の文字と下線、Hover は地色 #f1efea + #333333 の文字です。TabBar は幅 560 で下線が 60 × 2px になります。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Tab | State = Default / Active / Hover | 3 |
Tab106 × 29 / 下線 74 × 2
タブ名
State = Defaultタブ名
State = Activeタブ名
State = HoverTabBar560 × 10 / 下線 60 × 2
単体コンポーネント（1）TabBar
アラートAlert
画面内に表示する通知。Primary / Danger / Caution の3種です。
Admin管理画面向け（コンポーネントセット1・3タイプ）
520 × 44 / 角丸 6px / 枠線 1px、文字は 14px。Primary は #ddf3e7 地 + #009944 枠 + #228b22 文字、Danger は #feecec / #f85c5c / #c62828、Caution は #fffbea / #dcaa14 / #b38b00 です。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Alert | Type = Primary / Danger / Caution | 3 |
Alert520 × 44 / 角丸 6 / 3タイプ
操作が完了しました。
Type = Primaryエラーが発生しました。
Type = Danger確認が必要な項目があります。
Type = CautionバッジBadge
件数バッジ。数値・99+・ドットの3種です。
Admin管理画面向け（コンポーネントセット1・3タイプ）
地色は #f85c5c、角丸 99px。Number / Number99+ はパディング 2 · 5px で 10px のボールド白文字、Dot は 8 × 8 の丸だけです。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Badge | Type = Number / Number99+ / Dot | 3 |
Badge角丸 99px / Dot は 8 × 8
1
Type = Number99+
Type = Number99+Type = Dot
トーストToast
一時的に表示される通知。Success / Error の2種です。
Admin管理画面向け（コンポーネントセット1・2タイプ）
320 × 52 / 角丸 6px。地色は Success #19c95f、Error #f85c5c。左に 20px の白丸（中の記号は地色と同じ）、その右 48px から 14px の白文字が入ります。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| Toast | Type = Success / Error | 2 |
Toast320 × 52 / 角丸 6 / 2タイプ
✓操作が完了しました
Type = Success✕エラーが発生しました
Type = Error権限タグAuthority Tag
ユーザー権限を示すタグ。実施者 / 確認者 / 承認者 / 管理者の4種です。
Admin管理画面向け（コンポーネントセット1・4ロール）
52 × 23 / 角丸 4px / パディング 4 · 8px / 12px。ロールごとに 実施者 #e3f7e6/#228b22、確認者 #fff6d6/#b38b00、承認者 #dff1ff/#005e9e、管理者 #ffe4e1/#c62828 の地色・文字色です。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| AuthorityTag | Role = 実施者 / 確認者 / 承認者 / 管理者 | 4 |
AuthorityTag52 × 23 / 4ロール
実施者Role = 実施者
確認者Role = 確認者
承認者Role = 承認者
管理者Role = 管理者
ドロップダウンDropdown
ドロップダウンメニューの項目。Default / Hover / Danger の3状態と DropdownMenu があります。
Admin管理画面向け（コンポーネントセット1 + 単体1）
DropdownItem は 200 × 40 / パディング 10 · 16px / 14px。Default は白地 #333333、Hover は #f1efea、Danger は #f34949 の文字です。DropdownMenu は 200 × 128・角丸 6px・枠線 #d0d0d0 で 40px の項目を3つ並べます。
| コンポーネントセット | バリアント | 数 |
|---|---|---|
| DropdownItem | State = Default / Hover / Danger | 3 |
DropdownItem200 × 40 / 3ステート
メニュー項目
State = Defaultメニュー項目
State = Hoverメニュー項目
State = DangerDropdownMenu200 × 128
単体コンポーネント（1）DropdownMenu
03
Components
コンポーネントライブラリ
Figma「NQrepo UI Kit」に定義された UI 部品の全体像です。どのプロダクトで使えるか（スコープ）を軸に整理しています。
NQrepo は App（記録を作る iPad アプリ）と Admin（記録を束ねて判断・運用する管理画面）の 2 つのプロダクトで構成されています。同じ「入力フィールド」でも、立ったままタッチで操作する App と、マウス・キーボードで一覧を扱う Admin では、最適な寸法・密度・状態表現が異なります。そのためライブラリは「共通 / App のみ / Admin のみ」の 3 スコープに分けて管理しています。
新しい画面をつくるときは、まずこの一覧で既存のコンポーネントで解決できないかを確認してください。各カードをクリックすると、上の「コンポーネント一覧」の該当パネルが開き、バリアント・状態・使い分けの詳細を確認できます。ここに無いものが必要になった場合は、独自に作らず未定義コンポーネントの運用に沿って提案してください。
- ソース
- Figma「NQrepo UI Kit」デザインの正はつねに Figma 側です。実装と差異がある場合は Figma を優先します。
- スコープ
- App + Admin 共通 / App のみ / Admin のみスコープ外での流用は、寸法・タップ領域が前提から外れるため避けてください。
- 更新
- Figma 更新 → 本ガイド反映コンポーネントの追加・変更は、必ず Figma の定義更新とセットで行います。
24群
Components
用途ごとに束ねたコンポーネント群の数
6群
App + Admin
両プロダクトで共通して使える基本部品
3群
App only
検査フロー特有の入力・表示に特化
15群
Admin only
一覧・絞り込み・大量データ操作向け
基本要素
Foundations個別のコンポーネントより先に決まる、すべての部品が参照する土台です。ここを変えるとライブラリ全体に波及します。
カラー
Color
8 つのカラーファミリー × 50〜900 の 10 段階。コントラスト比の基準とあわせて定義。
タイポグラフィ
Typography
PC / Tablet それぞれの Heading・Body・Label トークン。アプリの文字サイズ設定と対応。
アイコン
Icon
ストローク幅を統一したアイコンライブラリ。クリックで SVG コードをコピーできます。
エレベーション
Elevation
重なりの高さ。レベル 0 が基準で、ダイアログやメニューはより高い値を持ちます。
ボタン
Button
スタイル＝重要度、サイズ＝置かれる場所。Solid は 1 画面 1 つが原則です。
スコープ別コンポーネント
By Scope同じ名前でも App と Admin ではバリアント構成が異なります。実装前に、どちらのセットを使うのかを必ず確認してください。
App + Admin 共通
両プロダクトで使う基本部品
6 群
役割は共通ですが、バリアントはプロダクトごとに分かれています。共通だからといって、App のバリアントをそのまま Admin に持ち込まないでください。
入力フィールド
Input
App はラベル・補足テキスト・チェックボックスの有無を切り替え。Admin は Size × State で構成。
日付入力
InputDate
単一日付の入力欄。Admin には期間指定用の InputDateRange も用意されています。
セレクト
Select
App は検査結果を選ぶ SelectButton、Admin はプルダウン形式の SelectBox。形が大きく異なります。
ステータスタグ
StatusTag
状態を示すタグ。App は検査状態を 6 種、Admin は 3 種＋認証状態（CertificationState）を持ちます。
ダイアログ
Dialog
App はボタン数・説明文・アイコンの有無で切り替え、Admin は用途別（削除・ダウンロード・承認・ログアウト・未保存）に個別定義。
ナビゲーション
Navigation
App はヘッダー・タブ・ボトムアクションバー・サイドメニュー、Admin はサイドナビゲーションが中心。
App のみ
記録を作る画面に特化した部品
3 群
タッチとタッチペンでの片手操作を前提に、タップ領域と判読性を優先した設計です。情報密度が前提から外れるため、Admin 画面には転用しないでください。
Admin のみ
大量データの閲覧・操作に向けた部品
15 群
一覧・絞り込み・ページ送りなど、情報密度を高く保つことを優先しています。ホバー状態を前提とする部品が多く含まれます。
テーブル / 行
TableRow
ヘッダー行とデータ行。会社・工場・スタッフ・お知らせ・官能検査・重量・使用水など用途別に多数用意。
フィルター検索
FilterSearch
一覧の絞り込み。開閉状態（active / inactive）を持ちます。
ページネーション
Pagination
一覧のページ送り。件数の多いテーブルとセットで使用します。
カード
Card
アイコンの有無と Default / Hover / Selected の状態を持つコンテナ。
ラジオボタン
RadioButton
排他選択。active / inactive の 2 状態です。
テキストエリア
Textarea
複数行のテキスト入力。Default / Focus / Error / Disabled の 4 状態。
ドロップダウン
Dropdown
メニュー項目。Default / Hover / Danger の 3 状態と、それらを束ねる DropdownMenu。
アコーディオン
Accordion
開閉して情報量を制御するコンテナ。3 つの状態を持ちます。
タブ
Tab
Default / Active / Hover の 3 状態と、それらを並べる TabBar。
パンくずリスト
Breadcrumb
現在位置を示す階層表示。階層数を 2〜10 で切り替えられます。
カレンダー
Calendar
日付セルと曜日ヘッダー。日付入力（InputDate）と組み合わせて使います。
アラート
Alert
画面内に留まる通知。Primary / Danger / Caution の 3 種です。
トースト
Toast
一時的に表示して自動で消える通知。Success / Error の 2 種です。
バッジ
Badge
未読・未処理の件数表示。数値 / 99+ / ドットの 3 種です。
権限タグ
AuthorityTag
ユーザー権限を示すタグ。実施者 / 確認者 / 承認者 / 管理者の 4 種です。
命名とバリアントの考え方
Conventionsコンポーネントを探すとき・追加するときの共通ルールです。名前とバリアント軸が揃っていれば、Figma と実装のズレを早い段階で発見できます。
命名規則
Figma 上のコンポーネント名は、プロダクト / 種別 / バリアントの順に並べます。日本語名はこのガイド上の表示用で、実装・Figma の正式名は英語です。
App / Button / Solid・Large・Default
Admin / Input / Medium・Focus
Admin / TableRow / Company・Header
バリアントの 4 軸
ほとんどのコンポーネントは、次の 4 つの軸の組み合わせで表現します。新しいバリアントを足す前に、既存の軸で表せないかを確認してください。
- Style役割・重要度を表す（Solid / Outline など）
- Size置かれる場所で決まる（画面全体 / セクション / 行内）
- Stateユーザー操作やデータの状況（Default / Hover / Focus / Error / Disabled）
- Iconアイコンの有無と位置。テキストなしの場合は
aria-label必須
使うときの手順
How to useSTEP 01
スコープを決める
つくる画面が App か Admin かを最初に確定します。共通コンポーネントでも、選ぶバリアントセットが変わります。
STEP 02
既存から探す
この一覧で近いコンポーネントを探し、詳細パネルでバリアントと状態を確認します。名前が違っても役割が同じなら流用します。
STEP 03
状態まで揃える
Default だけでなく、Hover・Focus・Error・Disabled・空状態まで設計します。抜けた状態は実装時の判断ブレになります。
STEP 04
足りなければ提案する
既存で解決できない場合のみ、追加を提案します。まず Figma に定義を追加し、そのうえで本ガイドに反映します。
未定義のコンポーネント
Gaps運用上は必要とされているものの、現時点で Figma に定義がないものです。これらが必要な場面では、個別に作り込む前に定義の追加を検討してください。
コンポーネント
状況と検討事項
ステータス
Danger Button
削除・退会など取り返しのつかない操作を表すボタン。Admin のテーブル行に削除操作があるため、status/error #f85c5c を起点とした定義の追加を検討中。
Text Link
文中リンクとして使うスタイル。現在は定義がなく、実装ごとに見た目が分かれる可能性があります。
検討中
空状態 / ローディング
データが 0 件のとき、読み込み中のときの表示。一覧系コンポーネントとセットで必要になります。
未定義
04
Get Involved
NQrepoに貢献する
NQrepoはチーム全体の協力によって成り立っています。フィードバックや改善提案をお待ちしています。
ドキュメント
デザインシステムの詳細なドキュメント
Figmaコンポーネント
Figmaコンポーネントライブラリ
フィードバック
改善案や問題報告はこちら
コメントが入ります。テキストテキストテキストテキストテキストテキストテキストテキストコメントが入ります。テキストテキストテキストテキストテキストテキストテキストテキスト