@charset "UTF-8"; /* ============================================================================ PlusOnePoint — 役割トークン（提案・2026-09-06） ---------------------------------------------------------------------------- ▲ **この時点ではまだどこからも読み込まれていない。** 見本は /prototype/design/ だけが読んでいる。採用が決まったら public_html/css/includes/member-css.php の $member_css（ui.css の後）に 1行足す。それだけで会員5画面70ページすべてに届く。 ── この層は何か ──────────────────────────────────────────────── ds/tokens.css は **色そのもの**（--navy-700 は何色か）を持つ。 ここは **役割**（主ボタンは何色か）を持つ。画面側のCSSは色ではなく 役割を参照する。「紺」ではなく「主要」と書く。 ds/tokens.css ランプ・余白・影・モーション ← 色の定義 ds/roles.css 役割 ← いまここ ← 意味の定義 member/ui.css .mui-* の部品 ← 形の定義 各画面のCSS ← 配置だけ こうしておくと、色を変えたいときに触るのは1か所で済み、 「同じ役割なのに画面ごとに色が違う」が構造的に起きなくなる。 ── 適用範囲 ──────────────────────────────────────────────────── いまは会員5画面（private / mypage / summit / speaking-summit / myessay） から使い始める。**トップ・記事も順次このデザインへ寄せる予定**なので、 役割の名前は会員画面に限らない言葉にしてある（--m-* ではなく --ui-*）。 公開ページへ広げるときに名前を変えずに済ませるため。 ▲ /app は対象外。ページ全体が暗色で Space Mono を使う別系統。 ── 決め方の原則 ──────────────────────────────────────────────── 1. 役割は少なく。役割が増えるほど、見た人が色の意味を覚えられなくなる。 2. 基本はブルー1系統。**ブルー以外を当てるのは購入と取消の2つだけ** （2026-09-06 ユーザー判断）。どちらも間違えると困る操作なので、 押す前に色で気づけるようにする。それ以外はすべてブルーの中で、 塗り／枠線／薄い面／文字だけ、の差で強弱を付ける。 3. 塗りは1画面に1個。2個目からは枠線か文字だけにする。 4. 状態を表すもの（達成・完了）は押させない。ボタンの色を使わない。 ── 避けること（既定のテンプレートに見せないため）────────────── 生成ツールが出す画面には共通の癖があり、それをなぞると 「どこかで見た管理画面」になって、教室のサイトに見えなくなる。 × 影で浮かせる → 罫で分ける。影は本当に浮くもの（シート・ モーダル・追従バー）だけ。 **ボタンには付けない**（実測では .me2-cta-btn だけが影を持っていた）。 例外はフォーカスリングだが、あれは装飾ではなく キーボードでいまどこにいるかの表示 × 大きい角丸 → 器 10px・部品 6px まで。ピルは数値バッジだけ × グラデーション → 単色。実測で紺グラデ・金グラデが混在していた × 何でも囲う → 囲いは「器」「選ぶもの」「押すもの」の3つだけ。 読むだけの値は囲わずラベルと値の組で置く × 二重枠 → 器の中の一覧は、行ごとに囲わず**罫で区切る**。 実測では .sm2-fb-item / .ss2-fb-item / .sm2-help-item が、器の中でさらに面＋罫＋角丸を 持ち、その中の閲覧ボタンでもう1枚増えて 三重になっていた。囲いを重ねるほど中身が痩せる。 項目が1つしかないなら、囲いは器の1枚で足りる × 片側だけ色を差す帯 → 左に3〜4pxの色罫を立てる「注意書き」の形。 目印は記号と文言で足りる。実測では mypage/css/local.css:34 の h4（左に4pxの空色）と myessay 側の同じ行がこれ × 絵文字 → アイコンは assets/icons の自作SVG × 意味のない中央揃え → 本文と一覧は左揃え × 色数を増やす → 上の役割表から選ぶ。増やしたくなったら、 既存の役割で足りない理由を先に言葉にする ========================================================================= */ :root { /* ── 面 ──────────────────────────────────────────────────────── 3つ。実測では会員5画面に12色あった。 */ --ui-surface: var(--neutral-0); /* 器の中身 */ --ui-surface-sunken: var(--neutral-50); /* 沈めたい面（囲いの中の囲い） */ --ui-surface-head: var(--navy-50); /* 器の頭。#f0f5f9 */ /* ── 罫 ──────────────────────────────────────────────────────── 2つ。実測では16色あった。 */ --ui-line: var(--neutral-200); /* 既定 */ --ui-line-strong: var(--neutral-300); /* 入力欄・押せるものの枠 */ /* ── 文字 ────────────────────────────────────────────────────── 4つ。実測では補足の灰だけで12色あった。 */ --ui-ink-head: var(--navy-700); /* 見出し */ --ui-ink: var(--neutral-700); /* 本文 */ --ui-ink-muted: var(--neutral-500); /* 補足・メタ */ --ui-ink-on-fill: var(--neutral-0); /* 塗りの上に載る文字 */ /* ── 主要（塗り）────────────────────────────────────────────── その画面でいちばん重い行動。1画面に1個。 ▲ hover は #032e4f ではなく --navy-800。5画面が使っていた #032e4f は トークンと1桁違うだけの別色で、残す理由がない。 */ --ui-primary: var(--navy-700); --ui-primary-hover: var(--navy-800); /* ── 操作（枠線）────────────────────────────────────────────── ZOOM参加・提出・切り替えなど、押すと何かが起きる次点。 ▲ 実測10色（#1a5cb8 #1a5494 #1565a8 #1a4a9a #046ABD #2e6fd4 #1b5aa0 #2563eb #2D8CFF #46A2DA）をこの1つに寄せる。 */ --ui-action: var(--sky-700); --ui-action-bg: var(--sky-50); /* ── リンク・アイコン ────────────────────────────────────────── 押せるが「行動」ではないもの。course-shell の --cs-blue と同値。 */ --ui-link: var(--sky-500); /* ── 副次（灰の枠線）────────────────────────────────────────── 戻る・表示切替など、並べても主役を食わないもの。 */ --ui-secondary-line: var(--neutral-300); --ui-secondary-ink: var(--navy-700); /* ── 取り消し ────────────────────────────────────────────────── 押すと元に戻せないもの。塗らない（塗ると押してほしそうに見える）。 ▲ 実測4色（#e05252/#b91c1c・#d9534f・#f87171・#e63946）を1組に。 */ --ui-danger-line: #e05252; --ui-danger-ink: #b91c1c; --ui-danger-bg: #fee2e2; /* ── 購入 ────────────────────────────────────────────────────── /purchase/ へ送るもの。ここだけブランドの桃を使う。 ▲ 実測4系統（淡いローズ／濃いローズ／紺グラデ／金）を1組に。 同じキャンペーンバナーが summit ではローズ、speaking-summit では 紺グラデになっていた。 */ --ui-buy-line: var(--pink-300); --ui-buy-ink: var(--pink-700); --ui-buy-bg: var(--pink-50); /* 淡い桃の面の上で、いちばん重い行動（購入へ進むボタン）を塗るとき。2026-09-19 */ --ui-buy-fill: var(--pink-500); --ui-buy-fill-hover: var(--pink-600); --ui-buy-on-fill: var(--neutral-0, #fff); /* ── 資料・お知らせ ──────────────────────────────────────────── 授業資料・返却物など「届いているので見てほしい」もの。 ▲ 2026-09-06 ユーザー判断で**ブルー系**にした。以前は琥珀を当てていたが、 別色を使うのは「間違えると困る操作」（購入・取消）だけに絞る方針のため。 操作（--ui-action）との差は、こちらが薄い面を持つこと。 押させるのではなく「ここに届いている」と示すもの。 */ --ui-material-line: var(--sky-200); --ui-material-ink: var(--sky-800); --ui-material-bg: var(--sky-50); /* ── 注意（オレンジ）────────────────────────────────────────── 「まだ取り消しではないが、放っておくと困る」状態。**取消（赤）の一歩手前**で、 受講ペースのバーのように段階を出す必要があるところだけに使う。 ▲ 2026-09-07（/admin/bugfix/ #64・ユーザー指定）に追加。それまでは注意にも --ui-danger-line（赤）を当てていて、危険との区別が付かなかった。 **ボタンには使わない**（別色を当てる操作は購入と取消の2つだけ、という方針は変えない）。 */ --ui-warn-line: var(--orange-300); --ui-warn-ink: var(--orange-700); --ui-warn-bg: var(--orange-50); --ui-warn-fill: var(--orange-500); /* ── 割引（オレンジ）────────────────────────────────────────── 割引後の価格・割引率・「期間限定」など、**値引きを読ませる文字**だけに使う。 ▲ 2026-09-18 ユーザー判断で追加。それまで料金ページでは、クーポン価格が オレンジ（#FF6B00）、同時割の内訳が桃（--accent）、割引の見出しが黄土 （--orange-700）とばらばらだった。桃は「購入」の色なので割引には使わない。 ▲ **ボタンには使わない。** 押させるのは購入（桃）。こちらは読むだけの値。 ▲ 注意（--ui-warn-*）とは別の役割。同じ橙系だが、注意は状態、割引は値。 */ --ui-sale-ink: #d9580a; --ui-sale-line: #f7b88a; --ui-sale-bg: #fff3ea; /* ── 講師の色（規約の例外）────────────────────────────────── プライベート講座の講師を見分けるためだけの色。**役割ではない。** 規約では別色を当てるのは購入と取消の2つだけだが、「誰の枠か」は 受講生も講師も毎回する判断なので、2026-09-07（/admin/bugfix/ #65）に 2026-09-06 以前の色へ戻した（それまでの sky/purple/gold/navy は 紫と金が誰の色か覚えられず、見分けが付かなくなっていた）。 ▲ **名前のバッジの面にだけ**使う。枠や行の面は塗らない。 ▲ ここに置いてあるのは、受講生側（`/private/`）と管理画面 （`/admin/private/` `/admin/free-counselling/` の開講枠）の**両方が読む**ため。 tokens.css と roles.css はどちらにも届く唯一の2本。 **講師を増やしたらここに1行足す。** teacher_id は teacher_name テーブル。 */ --pv-tc-1-bg: var(--sky-100); --pv-tc-1-ink: var(--sky-800); /* Hibiki : ブルー */ --pv-tc-2-bg: var(--pink-100); --pv-tc-2-ink: var(--pink-700); /* Mika : ピンク */ --pv-tc-5-bg: var(--ui-ok-bg); --pv-tc-5-ink: var(--ui-ok-ink); /* Yuki : グリーン */ --pv-tc-10-bg: var(--orange-100); --pv-tc-10-ink: var(--orange-700); /* Yu : オレンジ */ /* ── 達成・完了（緑）────────────────────────────────────────── 合格報告・チャレンジ達成・提出済み。**状態であって操作ではない。** ボタンには使わない。 */ --ui-ok-line: #c4dece; --ui-ok-ink: #2d6a4a; --ui-ok-bg: #e8f2ec; /* ── 形 ──────────────────────────────────────────────────────── 3段。実測では16段あった。 器＝画面を分ける囲い／部品＝その中のボタン・入力・バッジ。 ピル（999px）は**数値バッジだけ**。ボタンには使わない。 */ --ui-r-card: 12px; --ui-r-ctl: 6px; --ui-r-pill: 999px; /* ▲ 器に影は付けない。罫（--ui-line）で分ける。 影は「本当に上に乗っているもの」だけ ── モバイルのシート、モーダル、 追従バー。実測では全部の器に影が付いていて（.06/.07 × 6/8/10px の 6通り）、画面じゅうが浮いて見えていた。 */ --ui-shadow-float: 0 4px 16px rgba(4, 63, 109, .12); /* ── 級数 ────────────────────────────────────────────────────── ▲ 公開ページの --fs-*（clamp）とは混ぜない。あちらは幅で変わるので、 表や一覧の行数がウィンドウ幅で変わってしまう（ui.css:50-53 に既述）。 */ --ui-fs-page: 1.375rem; /* ページ見出し */ --ui-fs-lead: 1.0625rem; /* 状況カードの主文 */ --ui-fs-card: 0.9375rem; /* 器の見出し */ --ui-fs-body: 0.875rem; /* 本文 */ --ui-fs-meta: 0.75rem; /* 補足・ラベル */ /* 毎日見る一覧のためのもう1段（2026-09-06 追加）。管理画面の font-size は 実値2,866件のうち857件が 0.75rem 未満で、0.72 / 0.70 / 0.68rem に固まっていた。 画面ごとの例外を作らず、級数として1段だけ足す。 使ってよいのは「一覧の行・チップ・アイコンボタンのラベル」だけで、 読ませる文章には使わない。 */ --ui-fs-micro: 0.6875rem; /* 一覧の行・チップ */ --ui-fw-head: 700; --ui-fw-strong: 600; --ui-lh: 1.7; /* ── 余白 ────────────────────────────────────────────────────── 4の倍数。器の内と器どうしの間だけ決め、中の細かい gap は画面の裁量。 */ --ui-pad-card: 16px; --ui-pad-card-head: 12px 16px; --ui-gap: 12px; /* グリッドの gap */ --ui-stack: 16px; /* 器の下マージン */ }