G
UI部品
Ajax・チップ・アラート・トースト・リスト・セグメント
15. Ajax連動デモ
パターン1: 入力パネルの「項目1」を編集 → 明細パネルの「1行目1列目」「3行目1列目」「3行目3列目」と合計が更新される
パターン2: 明細パネルの「1行目1列目」を編集 → 明細パネルの「3行目1列目」「3行目3列目」と合計が更新される
パターン3: 明細パネルの「1行目2列目」を編集 → 入力パネルの「項目2」が更新される
16. ステータスチップ（.chip）
下書き
申請中
承認済
差戻
入金済
期限超過
情報
注意
一覧テーブルの「状態」列、明細の進行ステータス等で利用。フォームと連動する場合は <input type="hidden" name="upAry[record][1][status]" value="approved"> を併記する。
17. アラートボックス（.alert-box）
案内
編集中の内容は自動保存されません。「登録」ボタンで保存してください。
警告
未入力の必須項目があります。確認のうえ再度送信してください。
エラー
サーバーとの通信に失敗しました。時間をおいて再度お試しください。
18. トースト通知（.toast）
右下にフェードインで表示され、約2.5秒後に自動消滅。Ajax成功時の App.toast.success('保存しました') 等で利用。
19. アコーディオンカード（.accordion-card）
本契約は最低12ヶ月からの契約となり、申し出がない場合は自動更新となります。
翌月末日に当月分をお支払いただきます。
20. お知らせリスト（.notice-list）
2026年4月分の社保料率改定について
制度変更
5月6日 09:30
新機能リリースのお知らせ
システム
5月3日 14:00
月次定期メンテナンスのお知らせ
運用
4月28日 18:00
21. アクションリスト（.action-list）
22. セグメント（.segment）
クリックで .is-active を切替（JSは利用箇所で実装）。name/value 属性でフォーム送信値を表現する。
23. 統計カードバリエーション（.stat-card.kind-*）
¥1,250,000
本日の売上
+12%
8件
承認待ち
+2
3件
期限超過
+1
42件
本日完了
+8
24. レジェンド・進捗サマリー（.legend / .progress-summary）
レジェンド（凡例）
未確定
仮
確定
完了
進捗サマリー（カレンダー上部・集計バー）
120確定
30仮
8未確定
合計158
H
画面サンプル
詳細・PICKUPトグル・メッセージ・上部検索バー・配置表
25. 詳細画面（読み取り専用・横並び縦積み）
東京都千代田区千代田1-1 サンプルビル5F
contact@sample.example.jp
月末締・翌月末払い。
請求書はPDF送信、紙原本は不要。
連絡は山田氏まで。
26. PICKUPトグル（ON/OFFスイッチ）
これはチェックボックス型のトグルです。ON時に upAry[pickup_xxx]=1 がフォーム送信されます。OFF時は送信されません（PHP側で isset() で判定）。
27. メッセージUI（チャット風）
取引先や担当者とのやり取りに使うメッセージUI。LINEやSlack風の左右分け吹き出し型。フォームは name="upAry[message]" 形式でPOST送信。
2025年5月10日
私
10:38
ありがとうございます。内容確認しました。
金額について1点だけ相談させてください。
山
山田 太郎
10:42
はい、どの項目でしょうか？
2025年5月11日
私
09:15
お世話になります。明日の打ち合わせ、13:00開始で確定いたします。
会議室は3Fの「桜」になります。
28. 一覧ページ上部検索バー
一覧ページの上部に配置するシンプルなキーワード検索。詳細絞り込みは下部の .search-box を併用。
29. 配置表（複合業務画面サンプル）
カレンダー型業務画面のフルサンプル。月／日／リストの3ビュー切替、ドラッグ＆ドロップ配置、自動配置モーダル、隊員プールなどを含む。
共通ヘッダー／メニュー／フッターを伴った独立ページとして実装。フォーム要素は本プロジェクト規約の name="upAry[xxx]" 形式で命名済み。
配置表を開く
I
バリエーション集
既存パーツのサイズ・カラー・スタイル違い
30. パーツバリエーション
チップ - サイズバリエーション
XS / chip-sm
標準
L / chip-lg
チップ - outline スタイル
申請中
承認済
差戻
入金済
期限超過
情報
注意
チップ - solid スタイル（強調表示）
申請中
承認済
差戻
入金済
期限超過
情報
注意
チップ - ドット付き（chip-dot）
ボタン - outline スタイル
ボタン - pill（丸角）
ボタン - サイズ違い（btn-xs / 標準 / btn-lg）
ボタン - icon-only（正方形アイコンボタン）
ボタン - ghost（背景なし・hover時に薄背景）
アラート - mini（1行コンパクト版）
アラート - flat（背景なし・左ボーダーのみ）
アラート - strong（アイコン背景強調）
機能アップデート
新しい機能が追加されました。詳しくはヘルプをご確認ください。
K
伝票・帳票系パーツ
ドキュメントヘッダー・Fキーバー・コンパクトグリッド・合計フッター
K-1. Functionキーバー（.fkey-bar）
F1〜F12 のキーボードショートカット帯。.fkey に data-fkey="N" を持たせて並べる。.is-primary / .is-info / .is-danger / .is-save / .is-off で色分け・無効化。common.js の OEFkey がクリック・キーボード操作とフォーカス位置に応じた文脈切替を一括処理。
K-2. ドキュメントヘッダー（.doc-header）
伝票や帳票画面の最上部に置く情報帯。書類種別・番号・ステータス・主要メタ・主アクションを 1 ラインにまとめる。
K-3. 識別コード入力（.input-code）
得意先コード・商品コードなど識別キー入力欄。黄背景で「ここに入力するとマスタが引かれる」ことを示す。.js-trigger と組み合わせれば blur 時にマスタ照会 Ajax を発火。
K-4. コンパクトグリッド（.tbl-list.tbl-grid）
明細入力用の密度高めグリッド。.tbl-list に .tbl-grid を追加し、行高 26px・thead 固定・内部スクロール対応。フォーカス行は黄ハイライト、金額セルは .input-amount で太字背景に。
K-5. 合計フッター（.totals-bar）
画面下部の合計表示。左に編集入力（送付区分・送料・代引・値引）、右に税抜/消費税/総合計。.totals-cell.is-grand で総合計を赤の大文字に。
商品合計（税抜）¥44,400
消費税¥4,440
総合計（税込）¥49,640
K-6. 完成例：受注伝票入力画面
上記パーツ（K-1〜K-5）と sample/ の Ajax パターンを組み合わせた実画面。
受注伝票入力画面を開く
J
追加パーツ
パンくず・ページネーション・空状態・プログレス・アバター・スケルトン
31. パンくずリスト（.breadcrumb）
32. ページネーション（.pagination）
33. 空状態（.empty-state）
データがありません
条件を変更して再検索するか、新規登録してください。
該当する結果が見つかりません
検索条件を変えてお試しください。
34. プログレスバー（.progress-bar）
基本
カラーバリエーション
処理中（縞模様アニメ）
サイズ違い
35. アバター（.avatar / .avatar-group）
サイズ違い
山
佐
鈴
高
田
カラーバリエーション
A
B
C
D
E
F
オンライン状態
山
佐
鈴
グループ（重なり表示）
36. スケルトンローダー（.skeleton）
プロフィールカード読み込み中
テキストブロック読み込み中
カード（サムネイル付き）読み込み中
ボタン読み込み中