デザインシステム カタログ
🕒 12:00 時点
工藤 太郎 さんL5
.ds-header（2026-09-28）仕様の正本＝docs/アプリヘッダー標準_2026-09-28.md。
上のヘッダーが見本（アプリ名・ロゴ＝押すと先頭へ／「工藤 太郎 さん」＝押すとアカウントメニュー）。
右端の4つ（✦リクエスト・🔔・ログイン者・ログアウト）が共通部品、スロット（左＝移動・右＝操作）がアプリ固有の置き場。
.ds-btn.ds-chip.ds-card.ds-table| 店舗 | 件数 | 金額 | 状態 |
|---|---|---|---|
| 西荻窪店 | 95 | ¥9,800,000 | 稼働中 |
| 高円寺駅前店 | 44 | ¥4,200,000 | 確認中 |
| 阿佐ヶ谷店 | 47 | ¥5,100,000 | 稼働中 |
.ds-input / .ds-selectいつ・どれを使うかは docs/UI使い分け定義_v2_2026-10-12.md が正本。ここは見た目と動きの見本。
寸法は現場（スマホ・指）が既定、事務（PC・一覧の密度）は箱に .ds-dense を付ける。
.ds-btn1画面（1小窓）に主操作は1つ。主操作＝青の塗り、戻す・閉じる・量を増やす＝白、補助＝文字リンク、取り返しのつきにくい操作は「入口＝赤枠」→確認の「確定＝赤塗り」の2段。
2〜5択を常に見せる＝セグメント／その画面の最上位の切替＝大きなセグメント／選択肢が多い並列の条件＝押せるチップ／小窓で1つ選んで即確定＝選択グリッド／オン・オフ＝チェック行／候補が多い・増える＝select。
.ds-fieldラベルは上、必須は赤い＊、任意は「（任意）」、例は placeholder に「例：」。入力の直し方は欄の下の赤い1行（小窓は閉じない・入力は残す）。自動で入った値は入力欄ではない見た目にして「変える」。
済んだこと＝トースト（消える）／状態が続く限り＝帯（消えない）／入力の直し方＝欄の下／画面そのものが出せない＝帯 danger＋「読み込み直す」／出していないボタンの理由＝1行。
LINE の送り先が未設定のため、リマインドは出していません（設定は「LINE通知」）。
要約の数字＝見出し直下の数字の帯／一覧＝行（押す先が1つなら行ごとボタン、2つなら本体＋丸ボタンに分ける）／列で比べる＝表（数字は右寄せ）／1件の項目＝項目と値。状態＝札、片付ける件数だけ＝赤い丸数字。
| 店舗 | 件数 | 金額 | 状態 |
|---|---|---|---|
| 西荻窪 | 95 | 9,800,000円 | 稼働中 |
| 高円寺駅前 | 44 | 4,200,000円 | 確認中 |
| 本部（数えない） | 3 | — | 対象外 |
| 合計 | 142 | 14,000,000円 |
見るもの＝別画面＋「← 戻る」／短い入力・選択＝小窓（スマホは下からのシート）／一覧を見たまま1件の詳細＝ドロワー／取り返しのつきにくい操作＝確認（中央）／長い入力フォームの保存＝下部の操作帯。
常駐の説明文は置かない。語の定義・数字の出どころ＝見出し横の「？」／初めての人に流れを伝える＝実画面を照らすガイド（初回だけ自動・いつでもボタン）。
DSUI.fmt| 関数 | 例 | 使う場所 |
|---|