本文へ移動
サポーターズカレッジ
設定 ログアウト

部品集

会員/管理者サイトの部品クラスの一覧（見本の右にクラス名と用途を記載）

ボタン

.btn .btn-primary 主要操作／.btn-outline 副操作（キャンセル・編集等）／.btn-danger 危険操作の確定／.btn-danger-outline 危険操作の入口（一括削除等）。すべてピル型・影なし。hover で一段濃い色（outline は primary-soft の背景）、キーボードで focus すると primary のリング。

.btn .btn-accent 黄の塗り＋黒文字。画面ごとに1つの最重要操作だけに使う（2つ目以降は primary か outline）。

.btn-sm 表の行内・絞り込み等の小ボタン／（無印）標準／.btn-lg ログイン等のフォームの主ボタン（text-lg）。

アイコン付き: ボタンの中に sc_mock_icon() を置く（size-4・装飾扱いで aria-hidden）。元ワイヤーの絵文字はこの形に置き換える。

修了証を発行

無効状態: <button disabled>、リンクは href を外して aria-disabled="true"。どの変種も surface-muted＋text-muted になり、hover しても変わらない。

ログインIDをお忘れの方はお問合せフォームへ

.link-text テキストリンク（primary・下線。hover で primary-hover、focus で primary のリング）。ページ遷移は <a>、画面内の切替（タブの切替等）は見た目をリンクにした <button> に付ける（背景・余白なし）。文字サイズは置き場所の文字を継ぐ。

バッジ

Web講義 LIVEゼミ お試し NEW

.badge .badge-web Web講義（primary-soft＋primary）／.badge-live LIVEゼミ（primary の塗り）／.badge-trial お試し（warning-soft＋warning-border の縁）／.badge-new NEW 専用（new＋on-new）。

有効 修了 停止中 未更新（残り286日） 無効 受付中

.badge-active 有効・完了（success-soft＋success）／.badge-warning 停止中・期限接近（warning-soft＋縁）／.badge-danger エラー（danger-soft＋danger）／.badge-info 情報（primary-soft＋primary）。

期限切れ 未受講 未登録

.badge-expired 期限切れ（終了状態。エラーではないためグレー）／.badge-muted 未受講・未登録など（同じ配色）。

4 講座選択中 12件

.badge-count 件数（単独で使い .badge は付けない）。数字だけのときは単位を sr-only で添える。

通知帯・メッセージ

注意: 現在の契約期間は 2027/03/31 に満了します。更新手続きは契約管理から行ってください。

完了: アカウント情報を保存しました。

お知らせ: 2026年度後期の新着講座が追加されました。Web講義一覧からご確認ください。

.alert-banner ＋ .alert-warning（warning-soft・左罫線 warning-border・on-warning）／.alert-danger（danger-soft・danger-border・danger）／.alert-success（success-soft・success-border・success）／.alert-info（primary-soft・primary）。先頭に種類を文字で書き、アイコンを添える（色だけで伝えない）。動的に出すエラーは role="alert"、完了は role="status"。

パスワード再設定メールを送信しました。

.error-message／.success-message ログイン画面などフォーム上部のメッセージ（左罫線なし）。

カード・KPI

6 枚

このカード自体が .section-card の見本です。見出し行（右に件数や操作を置ける）と本文で構成します。

.section-card ＋ .section-card-header（h2/h3 は text-lg）＋ .section-card-body。

事業所管理者アカウント

5

全事業所

全体 研修進捗率

72%

2026年度 全研修計画平均

個人アカウント

148/ 200

残り52枠

無効・停止中

3

要確認

登録事業所数

5事業所

契約中の事業所

受講証明書 発行数

54

今年度累計（発行回数）

.kpi-row（1→2→4列）＋ .kpi-card ＋ 左罫線の色 .info／.primary（primary）・.success（成功・完了。success-border。元ワイヤーの .accent に対応）・.warning（warning-border）・.danger（danger-border）・無印（border）。.kpi-label／.kpi-value（text-3xl・tabular-nums）／.kpi-unit（単位）／.kpi-sub（注釈）。罫線の色だけで意味を伝えず、ラベルで示す。

全体 研修進捗率

72%

2026年度 全研修計画平均

登録事業所数

5事業所

契約上限: 5 ｜ 追加可能

個人アカウント数

148/ 200

残り52アカウント利用可

今月の受講記録

312

受講しました！＋証明書 合計

契約残日数

285日

更新期限: 2027/03/31

.kpi-row .kpi-row-5 5枚を xl で1行に並べる修飾（F-CORP-001 の KPI）。xl 未満は .kpi-row と同じく 1→2列で折り返す。

フォーム

ログイン情報・パスワード設定の案内がこのアドレスに送信されます

電話番号はハイフンを含めて正しい桁数で入力してください。

会員IDは変更できません

ログイン中のアカウント情報から自動入力されます（変更不可）。

.form-group ＋ .form-label（label の for と入力欄の id を対応させる）＋ .form-input。.required は「必須」の文字バッジ。.form-hint 補足（aria-describedby で関連付け）。エラーは aria-invalid="true" で枠が danger-border になり、.form-error のエラー文を aria-describedby で関連付ける。無効は disabled 属性（surface-muted＋text-muted）。読み取り専用は readonly 属性（.form-input[readonly]。bg の背景で文字は本文色のまま。選択・コピーはできる）。focus 時は primary のリング。

.form-select／.form-textarea 枠・角丸・focus・エラー・無効の扱いは .form-input と同じ。

.form-grid 2列（sm 未満は1列）。元ワイヤーの .form-row もこれで組む。

.checkbox-group label で囲んだチェックボックス（accent-primary）。

個人アカウントの管理権限

.permission-card（fieldset）＋ .radio-group ＋ .radio-item（label でラジオを囲む）。選択中のカードは primary の枠＋primary-soft の背景。.radio-label／.radio-desc。

.password-field ＋ .toggle-password（eye／eye-slash のアイコンボタン。aria-label を状態に合わせて切り替える）。押すと入力欄の type を password／text で切り替える。

検索・絞り込み

.search-bar（lg 未満は縦積み）＋ .filter-tags ＋ .filter-tag（チップ。選択は aria-pressed="true" で primary の塗り）。検索欄は .form-input に左のアイコン分の余白を足す。

.filter-tag-count チップの中の件数（surface-muted＋text-muted。選択中のチップでは反転して surface＋primary）。単位は sr-only で添える。アイコン・文字・件数の間は .filter-tag の gap（F-TOP-008 の分類、F-CMN-001 のカテゴリ）。

.filter-panel ＋ 見出し .filter-header 内の開閉ボタン .filter-toggle（aria-expanded・aria-controls。矢印 .filter-toggle-icon は開くと上向き）＋ .filter-body ＋ .filter-grid（4→2→1列）＋ .filter-group ＋ .filter-actions（リセット・検索）。この見本は背景を bg にしている（ページ上に置いた状態）。

表

氏名 所属事業所 個人ID メールアドレス ステータス 最終ログイン 操作
山田 太郎 ◯◯デイサービス U000077-00001 yamada@example.com 有効 2026/06/15 14:32
鈴木 花子 ◯◯デイサービス U000077-00002 suzuki.h@example.com 有効 2026/06/15 10:20
伊藤 美咲 □□訪問介護ステーション U000077-00004 ito@example.com 停止中 2026/05/20 09:00
加藤 由美 ◎◎リハビリセンター U000077-00006 kato@example.com 無効 2026/04/15 12:00
松本 さくら △△グループホーム U000077-00008 matsumoto@example.com 未登録 —

.table-wrapper（横スクロールはこの内側だけ。中の sr-only の配置基準となるため relative。tabindex="0"・role="region"・aria-label でキーボードでもスクロールできる）＋ .data-table（text-sm・表の見出し行は surface-muted・罫線 border・行 hover と選択行は primary-soft）。選択列のチェックボックス、状態のバッジ列、操作列 .row-actions の例。数値・日時の列は tabular-nums。

事業所名 管理者名 メールアドレス ステータス 最終ログイン 操作
事業所名◯◯デイサービス 管理者名佐藤 一郎 メールアドレスsato@example.com ステータス有効 最終ログイン2026/06/15 14:32 操作
事業所名△△グループホーム 管理者名田中 花子 メールアドレスtanaka@example.com ステータス有効 最終ログイン2026/06/14 10:15 操作
事業所名◎◎リハビリセンター 管理者名渡辺 健一 メールアドレスwatanabe@example.com ステータス未登録 最終ログイン— 操作

.data-table .data-table-stack md 未満で行をカードに組み替える変種（F-CORP-005-006 用）。各セルの先頭に .data-table-stack-label で列名を置く（md 以上では隠れる）。

# 種別 講座名 発行日 受講日 PDF 操作
1 Web講義 認知症ケアの基礎と実践的アプローチ（詳細を表示中） 2026/10/15 2026/10/14
2 LIVEゼミ チームリーダーのためのコミュニケーション 2026/10/05 2026/10/05
3 Web講義 感染症対策研修 2026年版 2026/09/20 2026/09/18

.data-table tr.selected 詳細パネルを開いている行（primary-soft）。色だけで伝えないよう、行に aria-current="true" を付け、sr-only で「（詳細を表示中）」を添える（F-CERT-001-002-004）。

ページ送り

.pagination（nav）＋ .pagination-info（件数）＋ .pagination-pages ＋ .pagination-btn。現在ページは aria-current="page" で primary の塗り。前後はアイコンだけのため aria-label を付ける。.pagination-far を付けた項目は sm 未満で隠れ、現在±1 だけの省略形になる。.pagination-ellipsis 省略記号。

先頭ページでは「前のページ」を href なし・aria-disabled="true" にする（surface-muted＋text-muted）。

タブ

事業所管理者（5） の一覧がここに入ります。

.tabs（role="tablist"。sm 未満で収まらないときは横スクロール）＋ .tab（role="tab"・aria-selected。選択中は primary の下線と文字）＋ .tab-content（role="tabpanel"）。左右キーでタブを移動し、選択中のタブだけ tabindex="0"。

進捗バー

0%
40%
60%
80%
100%

.progress-wrap ＋ .progress-bar（進捗バーの未達部分（トラック）は surface-muted。role="progressbar"・aria-valuenow・aria-label）＋ .progress-bar-fill（success-border）＋ .progress-text。塗りの色だけでは読み取れないため数値（%）を必ず併記する。モックの幅は w-2/5 等の分数クラスで表す。

手順表示

  1. 1. 基本情報（完了）
  2. 2 2. 講座選択
  3. 3 3. 割当設定
  4. 4 4. 確認・保存

.stepper（ol）＋ .step（li。完了は .completed）＋ .step-connector ＋ .step-body（番号とラベルの組。sm 未満は番号の下にラベル）＋ .step-number ＋ .step-label。4段・ラベル付き（F-CORP-002 研修計画作成）。完了の段は success-soft＋success の文字とチェック、現在の段は primary の塗りで aria-current="step"。折り返さないため、4段以上は .stepper-compact を併用して sm 未満では数字だけにする。

  1. 入力（完了）
  2. 確認（完了）
  3. 3 発行完了

3段（F-WEB-007 受講証明書発行）。.stepper-compact を足すと sm 未満でラベルを隠して数字だけにする（読み上げは残る）。

  1. メール入力（完了）
  2. メール送信（完了）
  3. 3 パスワード設定
  4. 4 設定完了

4段・.stepper-stacked .stepper-compact（F-AUTH-001-004 パスワード再設定。ログイン画面の max-w-md のカード内）。.stepper-stacked は幅の狭いカード向けで、sm 以上でもラベルを番号の下に置き、ラベルは折り返さない。.stepper-compact と併用すると sm 未満は数字だけになる。元ワイヤーの .reset-steps・.step-item もこの部品で組む。

モーダル・詳細パネル

.modal-overlay（背面 bg-text/50）＋ .modal-backdrop（背面クリックで閉じるボタン）＋ .modal（role="dialog"・aria-modal・aria-labelledby。rounded-modal・shadow-modal。スマホはほぼ全幅）＋ .modal-header／.modal-body／.modal-footer ＋ .modal-close。開くとモーダル内の最初の入力欄へフォーカスし、Esc・背面・閉じるボタンで閉じて開いたボタンへフォーカスを戻す。

.detail-panel-overlay ＋ .detail-panel（右からのスライドオーバー。スマホは全幅）＋ .detail-panel-header／.detail-panel-body／.panel-footer（左に削除、右に保存）。開閉・フォーカス・Esc の扱いはモーダルと同じ。

講座選択・割当

  1. 1 Web講義

    福祉の基礎知識（全5回）

    山田 太郎 ／ 計2.5h

  2. 2 Web講義

    認知症ケアの基礎

    鈴木 花子 ／ 1.5h

  3. 3 LIVEゼミ

    新人向け接遇マナー研修（6月開催）

    伊藤 直美 ／ 2026/06/15 14:00-16:00

  4. 4 Web講義

    感染症対策の実践

    田中 美咲 ／ 1.0h

.selected-courses（ol）＋ .selected-course-item（li）＋ .course-info（.order-number 丸い番号・種別バッジ・講座名。講座名の下の補足行は .course-sub。補足が無い画面（F-CORP-002）は講座名を直接置く）＋ .remove-btn（アイコンだけの解除ボタン。aria-label に対象の講座名を含める。hover で danger）。sm 未満は番号・バッジの下に講座名が回る。

.search-panel（カードの中に置く淡い背景 bg の検索帯）＋ .search-row（ラベル付きの入力欄と検索ボタンを横並び・折り返し・下揃え。sm 未満は縦積み）。中の .form-group は最小幅 160px で均等に伸びる。広くしたい欄は sm:flex-2 を足す。ページに直接置く白地の検索は .search-bar。

この研修計画を法人配下のすべてのアカウント（事業所アカウント3件 + 個人アカウント45名）に一括で割り当てます。今後追加されるアカウントにも自動適用されます。

.assign-panel ＋ .assign-panel-header（淡い背景 bg の見出し帯。label にして左の見出しと右のチェックボックスを関連付ける）＋ .assign-panel-body。

.assign-target-list ＋ .assign-target-item（label で行全体を包む。中のチェックボックスを選ぶと primary の枠＋primary-soft の背景）＋ .assign-target-info（チェックボックス・種別バッジ .badge-muted・名前）＋ .assign-target-meta（右の補足）。状態: 上2行が選択、3行目が未選択。

要約・項目と値・情報タイル

講座名
認知症ケアの基礎と実践的アプローチ
受講日
2026年10月20日
受講者
山田 太郎（個人アカウントの場合は自動取得）

.summary-box（モーダル等の冒頭に置く淡い背景 bg の角丸の箱。text-sm）。中に .kv-grid を入れられる（F-WEB-003 受講証明書発行モーダルの冒頭）。文だけの要約（F-CORP-002 の保存確認）もこの箱に入れる。

計画名
2026年度 新入職員向け基礎研修
対象年度
2026年度（2026/04〜2027/03）
対象階層
初任者（新人）
計画期間
2026/04/01 〜 2027/03/31
研修方針
新入職員の皆さんへ：まずは基礎的な知識を身につけていただくため…

.kv-grid（dl の中で dt・dd の組を div で囲む）。sm 以上は項目名（muted・幅 144px）＋値の2列、sm 未満は項目名の下に値。元ワイヤーの .confirm-row（F-CORP-002）・.lecture-meta-grid（F-WEB-003）。

氏名
山田 太郎
所属法人
社会福祉法人◯◯会
所属事業所
◯◯デイサービス
メールアドレス
yamada@example.com

.kv-grid.divided 行間に区切り線を付ける変種（F-CMN-002 の .confirm-table）。

法人名

社会福祉法人◯◯会

起算日

2026/04/01

現在の契約期間の開始日

最初の受講開始日

2024/04/01

現契約期間

2026/04/01〜2027/03/31

起算日より1年ごとに更新

法人の年度期間

4月〜3月

契約事業所数

5 事業所

上限: 10 事業所（追加可能）

更新ステータス

未更新（残り286日）

申込責任者

山田太郎

管理部長 ｜ yamada@example.com

.info-grid（2列。sm 未満は1列）＋ .info-item（淡い背景 bg のタイル）＋ .info-label（muted）／.info-value（太字。バッジも置ける）／.info-sub（補足）。.info-item.highlight は左に primary の線（上の2枚）。全幅にするタイルは sm:col-span-2 を足す。F-CORP-001 の契約情報・F-CORP-007-F-SITE-007 の契約基本情報・F-CERT-001-002-004 の詳細パネルの基本情報に使う。

クロス集計表

氏名 4月 5月 6月 7月 8月 9月 10月 11月 12月 1月 2月 3月 合計
山田 太郎 8 6 7 5 4 6 — — — — — — 36
鈴木 花子 6 5 8 4 3 5 — — — — — — 31
田中 一郎 4 4 5 3 2 4 — — — — — — 22
佐藤 美咲 3 2 4 2 0 3 — — — — — — 14
高橋 健二 5 6 7 4 5 6 — — — — — — 33
中村 裕子 2 3 2 0 0 2 — — — — — — 9
合計 28 26 33 18 14 26 — — — — — — 145

.cross-table（.table-wrapper の中に置き、横スクロールはその内側だけ）。全セル罫線・数値は中央揃え＋tabular-nums。列見出しと行見出し（tbody の th。左揃え・折り返さない）は surface-muted。合計列 .total（列見出しのセルにも付ける）と合計行 tr.total-row は primary-soft＋太字。0 は .zero（muted）。「—」は未到来月（F-SITE-005）。

氏名／受講区分 4月 5月 6月 7月 8月 9月 10月 11月 12月 1月 2月 3月 合計
山田 太郎
フリー受講 1.5 1.0 2.0 0.5 1.0 1.5 — — — — — — 7.5
研修計画 3.0 2.5 3.5 2.0 1.5 2.5 — — — — — — 15.0

tr.group-row まとまりの見出し行（colspan で全列にまたがる）／tr.breakdown-row 内訳行（見出しセルを字下げ。元ワイヤーの「└」は付けない）。F-CORP-004・F-SITE-005 の受講区分の内訳。

お知らせ・アクティビティ・開催予定

  • 2026/10/01 重要 2026年度下半期の新着講座を30本追加しました
  • 2026/09/20 お知らせ 10月のLIVEゼミスケジュールを公開しました
  • 2026/09/15 メンテナンス 9/28（土）2:00〜6:00 システムメンテナンスのお知らせ
  • 2026/09/01 お知らせ 受講証明書のデザインをリニューアルしました

.notice-list（ul）＋ .notice-item ＋ .notice-date（muted・折り返さない・最小幅）＋ 分類のバッジ ＋ .notice-text（sm 未満は日付・分類の下の行）。分類は 重要＝.badge-danger／メンテナンス＝.badge-warning／お知らせ＝.badge-info／その他＝.badge-muted。

  • 山田太郎さんが「認知症ケアの基礎」の受講証明書を発行しました

    △△グループホーム ｜ 2026/06/15 14:32

  • ◯◯デイサービスが「感染症対策研修」を受講完了しました

    事業所アカウント ｜ 2026/06/15 11:20

  • 鈴木花子さんの個人アカウントが新規登録されました

    □□訪問介護ステーション ｜ 2026/06/14 16:45

  • 研修計画「管理者向けリーダーシップ研修」が新規作成されました

    法人管理者 ｜ 2026/06/14 10:15

  • 田中一郎さんが「チームビルディング実践」の視聴を完了しました

    ☆☆特養 ｜ 2026/06/13 15:50

.activity-list（ul）＋ .activity-item ＋ .activity-icon（32px の丸。primary-soft にアイコン。装飾扱い）＋ .activity-body ＋ .activity-meta（所属・日時）。元ワイヤーの絵文字は document-check／check-circle／user-plus／clipboard-document-list／video-camera に置き換える。

  • 10月 15 火曜日

    個別支援計画の書き方実践

    14:00〜16:00 講師: 中村 裕子 残り3席

  • 10月 22 火曜日

    虐待防止のためのチームビルディング

    10:00〜12:00 講師: 鈴木 花子 残り5席

  • 11月 05 火曜日

    支援記録の効率化ワークショップ

    13:00〜15:00 講師: 田中 一郎 残り8席

.schedule-list（ul）＋ .schedule-item（左に .date-box、右に .schedule-body）＋ .schedule-title／.schedule-detail（アイコン付きの項目を折り返して並べる）。.date-box は月 .date-box-month・日 .date-box-day・曜日 .date-box-weekday の3段（F-TOP-001_office の LIVEゼミ開催情報・F-LIVE-001）。

開閉

ログイン画面の「パスワードをお忘れの方」リンクをクリックし、登録済みのメールアドレスを入力してください。パスワード再設定メールが届きますので、メール内のリンクから新しいパスワードを設定してください。メールが届かない場合は、迷惑メールフォルダもご確認ください。

.accordion（項目の間に区切り線）＋ .accordion-item（1件の枠。x-data を置く）＋ 見出しの中の .accordion-trigger（button。aria-expanded・aria-controls）＋ 右の .accordion-icon（chevron-down。開くと上向き）＋ .accordion-panel（閉じているときは hidden 属性）。状態: 1件目が開、2・3件目が閉（押すと開閉する）。FAQ（F-CMN-001）と講座の一覧の開閉（F-TOP-002）に使う。Q/A の印などの画面固有の装飾は含めない。外枠はこの見本では rounded-card・border を足している。

研修計画カード

2026年度 新入職員向け研修計画

2026/04/01〜2027/03/31 作成者: 法人管理者 全6講座

100% 完了（6 / 6講座）
修了

.plan-card ＋ .plan-card-header（左に .plan-name＋.plan-meta、右に .plan-card-actions（進捗・バッジ・ボタン。中の .progress-wrap は棒の下に数値を置き、sm 以上は幅 192px、xl 以上は右揃え）。xl 未満は縦積み（lg〜xl はサイドバーの常時表示で本文が狭いため））。状態: 修了。下に .accordion を続けて講座の一覧を開閉する（F-TOP-002。閉じた状態）。

2026年度 個人スキルアップ計画

2026/04/01〜2027/03/31 作成者: 事業所管理者 全5講座

60% 完了（3 / 5講座）
受講中
種別 講座名 受講状況 視聴率 受講開始〜完了日時
Web講義 アセスメントの実践テクニック 受講完了 100% 2026/05/30（土）09:00:12〜09:29:47
Web講義 地域生活支援の最新動向 受講完了 100% 2026/07/10（金）18:20:03〜19:08:55
Web講義 ケース記録の書き方 受講完了 100% 2026/08/22（土）15:05:41〜15:47:19
Web講義 2026年度 制度改正ポイント解説 進行中 55% —
Web講義 ストレスマネジメント基礎 未受講 0% —

状態: 受講中（修了証の発行は無効）。.plan-card-body（余白 p-5）に講座の表を置く形（F-TOP-001_personal）。

講義カード

.lecture-grid（1→2→3列）＋ .lecture-card（縦型。カード全体を a にする。hover で shadow-card）＋ .lecture-thumb（16:9。画像が無いときは surface-muted）＋ 中央の .lecture-thumb-play・右下の .lecture-thumb-duration（画像の明暗によらず見える白地）・下端の .lecture-thumb-progress（中に .progress-bar-fill。装飾扱いで aria-hidden、進み具合は状態行の文字で示す）＋ .lecture-info ＋ .lecture-title／.lecture-meta ＋ .lecture-status（区切り線の下の状態行。カードの下端に揃う）。分類タグは .badge-muted。状態: 受講完了・進行中 65%・未受講。

.lecture-card-h 横型（左にサムネイル（幅 144px、sm 以上 160px）、右に情報）。F-TOP-001_personal の新着講義。

講義ページの部品

講座内容

本講座では、認知症の基本的な症状理解から始め、日常ケアにおける実践的なアプローチ方法を体系的に学びます。BPSDへの対応、コミュニケーション技法、環境調整のポイントを具体的な事例とともに解説します。

学習目標

  • 認知症の4大疾患の症状と進行過程を説明できる
  • BPSDの背景要因を分析し、適切な対応策を立案できる
  • パーソンセンタードケアの理念に基づいたケアを実践できる
  • ご家族への説明と支援方法を理解する

前提知識

介護の基礎知識があることが望ましいですが、初任者の方も受講可能です。

佐藤 智子

認知症ケア専門士 ・ 社会福祉士

認知症ケアの専門家として20年以上の経験を持つ。施設長を経て現在は研修講師として全国で活動。著書に『認知症ケアの実践ガイド』など。

資料

  • 認知症ケアの基礎_講義資料.pdf 2.4 MB
  • BPSDチェックリスト.pdf 180 KB
  • ケーススタディワークシート.xlsx 95 KB
  • 字幕データ（日本語）.vtt 12 KB

視聴進捗（研修計画）

65%

視聴率

19:30

視聴時間

3

視聴回数

—（未完了）

完了フラグ

初回視聴日
2026/09/12
最終視聴日
2026/10/20
受講しました！
未記録
受講証明書
未発行

関連するWeb講義

.content-layout（本文＋右の補助カラム。xl 以上は2カラム、xl 未満は本文の下に縦積み）＋ .main-column ＋ .side-column（xl 以上は幅 320px で共通ヘッダーの下に追従する sticky）。本文側: .description（説明本文。h3・p・ul の余白と ul の字下げ）、.instructor-card（.instructor-avatar・.instructor-name・.instructor-title・.instructor-bio）、.material-list／.material-item（.material-icon・.material-name・.material-size・DL ボタン。DL ボタンの aria-label にファイル名を含める）。補助カラム: .stat-grid／.stat-tile（.stat-value・.stat-label）、.kv-list（項目名を左・値を右に振り分ける）、.related-list／.related-item（行全体を a にし、hover で題名に下線。サムネイル付きは .related-thumb、無い形（F-LIVE-002-003）は省く）＋ .related-title／.related-meta。F-WEB-003・F-LIVE-002-003 のページ見出しの種別バッジと講座番号は $pageHeader['meta'] で出す。この見本は背景を bg にしている（ページ上に置いた状態）。

動画・映像枠

Vimeo Player 埋め込みエリア

16:9 アスペクト比 ｜ Vimeo Player API 連携

研修計画の講座として受講中のため、早送り・倍速再生・シークバー操作はできません（視聴率10割で完了）

視聴進捗
65% ｜ 19:30 / 30:00

フリー受講のため再生操作の制限はありません（最後まで再生すると視聴済み）

F-WEB-003 の動画領域。.media-area（16:9。media の暗い面に text-inverse の文字）＋ 中央の .media-play（surface の丸に primary の play。押せるので button にして aria-label を付ける。フォーカスの輪は暗い面で見えるよう text-inverse）・.media-label・.media-sub（補足も text-inverse のまま。muted のグレーは暗い面で 2.59:1 しかなく使わない）。直下に .media-context-bar（primary の地。上は研修計画の講座で lock-closed、下はフリー受講で academic-cap。画面では受講区分に応じてどちらか1つを出す）と .media-progress（暗い面。中に .progress-bar／.progress-bar-fill と .media-progress-label。トラック surface-muted は暗い面に対し 13.04:1、塗り success-border は 7.08:1。数値を必ず併記する）。3つをまとめて overflow-hidden rounded-card で囲み、角丸を付ける。

Zoom オンライン開催

開催30分前からZoom URLが表示されます

F-LIVE-002-003 のヒーローの映像枠。.media-area.media-area-short（16:9 にせず最小の高さ 200px）。.media-play は押せないので span にする（💻 は computer-desktop）。画面ではヒーローのカード（.section-card）の先頭に置き、角丸はカード側で付く。

フリー受講エリア

フリー受講エリア

研修計画外の講座を自由に受講できます。興味のあるテーマを探してスキルアップしましょう。

Web講義一覧へ LIVEゼミ一覧へ

.free-area（warning-soft の地に warning-border の点線の枠。中央揃え。注意の意味は持たず、見出しの文字で用途を示す）＋ 見出し h3 ・説明 p ＋ .free-area-actions（ボタン2つ。sm 未満は縦積み）。F-TOP-001_office のフリー受講タブ。

元ワイヤーとの対応表

表に無いクラス（.btn・.badge-active・.form-input 等）は元ワイヤーと同じ名前で使う。

置き換え・統合したクラス

元ワイヤーのクラス 部品集のクラス 備考
.form-row .form-grid 2列のフォームは .form-grid に統一
.stepper／.step／.step-number（F-CORP-002） .stepper／.step／.step-body／.step-number／.step-label／.step-connector 手順表示は1部品に統合。番号とラベルは .step-body で囲む
.step-item／.step-circle（F-WEB-007） .step／.step-number（.stepper 系） 同上
.reset-steps／.reset-step／.step-num（F-AUTH-001-004） .stepper／.step／.step-number（.stepper 系） 同上
.step.active／.step.completed .step[aria-current="step"]／.step.completed 現在の段は aria-current="step" で表す。完了の段はラベルに sr-only の「（完了）」を添える
.progress-bar-wrap .progress-bar role="progressbar"・aria-valuenow 等を付け、.progress-text で数値を併記
.progress-fill .progress-bar-fill 塗りは success-border
.kpi-card.accent .kpi-card.success 成功・完了の左罫線（success-border）。黄（accent）は KPI に使わない
.tab.active .tab[aria-selected="true"] role="tab"・tabindex（選択中だけ 0）と左右キーの移動を付ける
.tab-content.active .tab-content（非選択は hidden 属性） role="tabpanel"・aria-labelledby
.tab-body .section-card で囲み、パネルは .tab-content 専用クラスは設けない
.pagination-pages button／button.active .pagination-btn／.pagination-btn[aria-current="page"] 前後はアイコンボタン（aria-label）。省略は .pagination-ellipsis
.filter-tag.active .filter-tag[aria-pressed="true"] チップは button 要素
.filter-header h3 .filter-header ＋ .filter-toggle（aria-expanded） 見出しのボタンで .filter-body を開閉
.filter-group label／select／input .form-label／.form-select／.form-input label の for と id を対応させる
.search-bar input .form-input（左のアイコン分 pl-10） 検索アイコンは magnifying-glass
.radio-item.selected／.radio-circle .radio-item（中のラジオの checked で選択表示） .radio-circle は使わず input type="radio" を置く
.form-label .required（「*」） .required（「必須」の文字） 色だけで伝えない
.toggle-password（絵文字） .toggle-password（eye／eye-slash） aria-label を状態に合わせて切り替える
.modal-header の閉じるボタン（.btn .btn-outline .btn-sm）／.panel-close .modal-close アイコンだけのボタン（aria-label="閉じる"）
.modal-overlay（style で表示切替） .modal-overlay（hidden 属性）＋ .modal-backdrop 背面クリックで閉じる button を置く
.detail-panel.open .detail-panel-overlay（hidden 属性）＋ .detail-panel モーダルと同じ開閉・フォーカスの扱い
.contract-info／.contract-item（F-CORP-001）／.contract-detail-grid／.contract-detail-item（F-CORP-007-F-SITE-007）／.panel-info-grid／.panel-info-item（F-CERT-001-002-004） .info-grid／.info-item ラベル・値・補足は .info-label／.info-value／.info-sub。.contract-detail-item.highlight は .info-item.highlight
.contract-detail-item.full-width .info-item ＋ sm:col-span-2 全幅のタイル
.confirm-row／.confirm-label／.confirm-value（F-CORP-002）／.confirm-table（F-CMN-002）／.lecture-meta-grid（F-WEB-003） .kv-grid（.confirm-table は .kv-grid.divided） dl の中で dt・dd の組を div で囲む
.progress-detail-list／.progress-detail-item（F-WEB-003）／.status-detail-list（F-LIVE-002-003）／.complete-summary-row（F-WEB-007） .kv-list 項目名を左・値を右に振り分ける
.complete-summary（F-WEB-007）／.lecture-info-banner（F-WEB-007）／モーダル冒頭の style 付きの要約（F-CORP-002・F-WEB-003） .summary-box 項目と値は中に .kv-grid／.kv-list を置く
.faq-item／.faq-question／.faq-answer（F-CMN-001）／.plan-detail-toggle（F-TOP-002） .accordion／.accordion-item／.accordion-trigger／.accordion-icon／.accordion-panel ▼ は chevron-down。Q/A の印は部品に含めない
.faq-cat-tab（F-CMN-001）／.category-tab（F-TOP-008） .filter-tag（選択は aria-pressed） 件数（.category-tab .count）は .filter-tag-count
.lecture-tag（F-WEB-001）／.seminar-tag（F-LIVE-001）／.target-type（F-CORP-002） .badge .badge-muted 分類・種別のタグ
.notice-tag 分類に応じたバッジ 重要＝.badge-danger／メンテナンス＝.badge-warning／お知らせ＝.badge-info／その他＝.badge-muted
.permission-note／.info-note／.scope-bar .alert-banner .alert-info 先頭に種類を文字で書き、アイコンを添える
.warning-note .alert-banner .alert-warning 同上
.caution .alert-banner .alert-danger 同上
.info-banner .alert-banner .alert-warning 同上
.info-banner.info-tone .alert-banner .alert-info 同上
.form-group.full-width .form-group ＋ sm:col-span-2 .form-grid の中で全幅にする
td.num text-right（＋ tabular-nums） 表の数値の列。.cross-table の中は部品側で中央揃え
.flow-card／.form-card .section-card 見出しは .section-card-header、本文は .section-card-body
.progress-panel／.plan-link-panel／.related-panel（F-WEB-003・F-LIVE-002-003） .section-card 補助カラムの中のカード
.panel-actions .panel-footer 詳細パネルの下部の操作
.close-btn .modal-close アイコンだけのボタン（aria-label="閉じる"）
.more-link .link-text 「すべて見る →」等は a 要素にし、矢印は arrow-right
.action-bar .footer-actions 左右に分けた操作の並び
.example-divider 「状態: …」の見出しで区切ったセクション 同一ファイル内で状態ごとに見出しを置く（§1.3）
.checkbox／.checkbox.checked（div で描いたチェックボックス） input type="checkbox" .assign-panel-header・.assign-target-item・.checkbox-group・.data-table の中で部品側が装飾する
.target-info .assign-target-info 右の補足は .assign-target-meta
.live-schedule-item／.live-date-box（F-TOP-001_office）／.seminar-date-box（F-LIVE-001） .schedule-item／.date-box（.date-box-month／.date-box-day／.date-box-weekday） 右の情報は .schedule-body（.schedule-title／.schedule-detail）。絵文字は clock／user／users
.plan-row／.plan-row-header／.plan-title／.plan-meta-row（F-TOP-002） .plan-card／.plan-card-header／.plan-name／.plan-meta 右側（.plan-row-header-right）は .plan-card-actions
.plan-meta（F-TOP-001_personal の右側の進捗・ボタン） .plan-card-actions 清書の .plan-meta は計画名の下の補足行（名前が同じで役割が違う）
.play-icon／.duration-badge／.progress-bar-mini（F-WEB-001・F-TOP-001_personal） .lecture-thumb-play／.lecture-thumb-duration／.lecture-thumb-progress（中に .progress-bar-fill） サムネイル画像の上に置くため、画像の明暗によらず見える白地で作る
.lecture-instructor .lecture-meta 絵文字の 👤 は user
.lecture-description（F-WEB-003）／.seminar-description（F-LIVE-002-003） .description h3・p・ul をそのまま置く
.progress-stat-grid／.progress-stat（F-WEB-003）／.status-stat-grid／.status-stat（F-LIVE-002-003） .stat-grid／.stat-tile（.stat-value／.stat-label） 2×2
.related-item-date／.related-item-title／.related-item-meta（F-LIVE-002-003） .related-meta／.related-title／.related-meta 日時は題名の上に .related-meta で置く
.cross-table の内訳行（style の字下げと「└」）／合計列（style の背景） tr.breakdown-row／.total 「└」は付けない。まとまりの見出し行は tr.group-row
.action-btn-done.is-done（F-WEB-003 の記録後の見た目） （部品なし） 実装仕様書にボタンの記録後の表示の定義が無いため作らない。記録済みは視聴進捗パネルの「✓ 記録済み」バッジ（.badge-active）で表す
.video-player-area／.video-placeholder（F-WEB-003） .media-area 暗い面は media、文字は text-inverse。.video-player-area の角丸は、映像枠・帯・進捗表示をまとめて囲む overflow-hidden rounded-card で付ける
.seminar-hero-visual（F-LIVE-002-003） .media-area.media-area-short 16:9 にせず最小の高さで作る。角丸はヒーローのカード（.section-card）側で付く
.play-btn（F-WEB-003）／.zoom-icon（F-LIVE-002-003） .media-play surface の丸に primary のアイコン（▶ は play、💻 は computer-desktop）。押せる場合は button にして aria-label を付ける
.video-placeholder 内の文言／.meta（F-WEB-003）／.seminar-hero-visual .label／.sub（F-LIVE-002-003） .media-label／.media-sub 補足も text-inverse のまま（暗い面に muted のグレーを使わない）
.viewing-context-bar（F-WEB-003） .media-context-bar 🔒 は lock-closed、🎓 は academic-cap
.viewing-progress-bar／.progress-track／.progress-fill／.progress-label（F-WEB-003） .media-progress（中に .progress-bar／.progress-bar-fill／.media-progress-label） トラックは surface-muted、塗りは success-border（既存の進捗バーと同じ組）。数値を必ず併記する

部品集で新設したクラス

クラス 用途
.btn-danger 削除など危険操作の確定に使う塗りのボタン
.badge-trial／.badge-expired／.badge-new お試し・期限切れ・NEW のバッジ（用途表 §4）
.alert-danger／.alert-success エラー・完了の通知帯
.kpi-unit KPI の数値の後ろの単位（元ワイヤーではインライン style）
.form-error 入力欄のエラー文（aria-describedby で関連付け）
.filter-toggle／.filter-toggle-icon／.filter-body 絞り込みの開閉ボタン・矢印・開閉する本体
.data-table-stack／.data-table-stack-label md 未満で行をカードに組み替える表の変種と、各セルの列名
.pagination-ellipsis／.pagination-far ページ送りの省略記号／sm 未満で隠す項目
.step-body／.stepper-compact 手順の番号とラベルの組／sm 未満でラベルを隠す変種
.stepper-stacked 幅の狭いカード（ログイン画面の max-w-md 等）向けの手順表示。sm 以上でもラベルを番号の下に置く（.stepper-compact と併用可）
.link-text テキストリンク（<a> と、見た目をリンクにした <button> の両方に使う）
.modal-backdrop 背面クリックで閉じるボタン（モーダル・詳細パネル共通）
.detail-panel-overlay 詳細パネルの背面
.kpi-row-5 .kpi-row と併用し、KPI カード5枚を xl で1行に並べる（F-CORP-001・F-CORP-004・F-SITE-005・F-TOP-001_personal）
.form-input[readonly] 読み取り専用の入力欄（bg の背景・本文色の文字。disabled と区別する）（F-CMN-002）
.filter-tag-count .filter-tag の中の件数（選択中は反転色）（F-TOP-008・F-CMN-001）
.data-table tr.selected 詳細パネルを開いている行の強調（行に aria-current="true" も付ける）（F-CERT-001-002-004）
.selected-courses／.selected-course-item／.order-number／.course-info／.course-sub／.remove-btn 選択済み講座の並び（番号・種別バッジ・講座名・補足行・アイコンだけの解除ボタン）（F-CORP-002・F-CORP-003_edit）
.assign-panel／.assign-panel-header／.assign-panel-body 割当パネル（淡い背景の見出し帯にチェックボックス）（F-CORP-002）
.assign-target-list／.assign-target-item／.assign-target-info／.assign-target-meta 割当対象の一覧（label で行全体を包み、選択中は primary-soft）（F-CORP-002）
.search-panel／.search-row カードの中の淡い背景の検索帯（ページに直接置く .search-bar とは別物）（F-CORP-002）
.summary-box モーダル等の冒頭の要約箱（F-CORP-002・F-WEB-003・F-WEB-007）
.kv-grid／.kv-grid.divided／.kv-list 項目名と値の組（2列／区切り線付き／左右に振り分け）（F-CORP-002・F-CMN-002・F-WEB-003・F-WEB-007）
.info-grid／.info-item／.info-item.highlight／.info-label／.info-value／.info-sub 淡い背景の情報タイルの2列グリッド（F-CORP-001・F-CORP-007-F-SITE-007・F-CERT-001-002-004）
.cross-table（.total／tr.total-row／.zero／tr.breakdown-row／tr.group-row） クロス集計表（F-CORP-004・F-SITE-005）
.notice-list／.notice-item／.notice-date／.notice-text お知らせの一覧（分類は既存のバッジ）（F-CORP-001・F-TOP-001_office）
.activity-list／.activity-item／.activity-icon／.activity-body／.activity-meta アクティビティの一覧（F-CORP-001）
.accordion／.accordion-item／.accordion-trigger／.accordion-icon／.accordion-panel 汎用の開閉（区切り線は .accordion 側。.accordion-item は1件の枠で装飾なし）（F-CMN-001・F-TOP-002）
.plan-card／.plan-card-header／.plan-name／.plan-meta／.plan-card-actions／.plan-card-body 研修計画カード（F-TOP-001_personal・F-TOP-002）
.lecture-grid／.lecture-card／.lecture-card-h／.lecture-thumb／.lecture-thumb-play／.lecture-thumb-duration／.lecture-thumb-progress／.lecture-info／.lecture-title／.lecture-meta／.lecture-status 講義カード（縦型・横型）（F-WEB-001・F-TOP-001_personal）
.date-box（.date-box-month／.date-box-day／.date-box-weekday）／.schedule-list／.schedule-item／.schedule-body／.schedule-title／.schedule-detail 日付の箱と開催予定の一覧（F-TOP-001_office・F-LIVE-001）
.free-area／.free-area-actions フリー受講エリア（F-TOP-001_office）
.content-layout／.main-column／.side-column 本文＋右の補助カラム（xl 未満は縦積み）（F-WEB-003・F-LIVE-002-003）
.stat-grid／.stat-tile／.stat-value／.stat-label 2×2 の統計タイル（F-WEB-003・F-LIVE-002-003）
.description 説明本文（h3・p・ul）（F-WEB-003・F-LIVE-002-003）
.instructor-card／.instructor-avatar／.instructor-name／.instructor-title／.instructor-bio 講師情報（F-WEB-003・F-LIVE-002-003）
.material-list／.material-item／.material-icon／.material-name／.material-size 資料の一覧（F-WEB-003）
.related-list／.related-item／.related-thumb／.related-title／.related-meta 関連講義・関連ゼミの一覧（F-WEB-003・F-LIVE-002-003）
.media-area／.media-area.media-area-short／.media-play／.media-label／.media-sub 動画・映像枠（media の暗い面に text-inverse の文字。16:9／LIVE のヒーロー用の最小の高さの変種）と、中央の再生ボタンの丸・ラベル・補足文（F-WEB-003・F-LIVE-002-003）
.media-context-bar 動画の直下の帯（研修計画の再生操作の制限／フリー受講を示す。primary の地）（F-WEB-003）
.media-progress／.media-progress-label 動画の直下の暗い面の進捗表示（中に .progress-bar／.progress-bar-fill）とその文字（F-WEB-003）