バナー・LP・サービスUIを「誰が作っても、AIが作っても同じ品質」にするための統一基準です。このページは assets/tokens.css と assets/styles.css を直接読み込んで表示しているため、値をこのページに書き写していません。CSSを直せば、色見本・実測値・コード例がすべて自動で最新になります。
正（マスター）は Figma「コンポーネント」ファイル。コード側は tokens.css → styles.css の順に値が流れ、このページはそれを表示するだけです。
AIにバナーやUIを作らせるときは、このページのURL（または styles.css）を渡して「この基準のクラスとトークンだけで作って」と指示します。トークン外の色・px値が出てきたら差し戻しの合図です。
色・文字・余白・角丸・影。すべての部品はここで定義した値だけで組み立てます。
--color-*ブランドは blue。pink は「応募」など事業上最重要の行動と評価数値だけに使います。右下のバッジは白文字を載せたときのコントラスト判定（AA = 4.5:1以上）。
--font-size-*フォントはOS標準（Mac/iPhoneはヒラギノ）。サイズは6段階のみ。1画面で使うサイズは4種類までに抑えます。
| トークン | 値 | 用途 | 見本 |
|---|---|---|---|
| トークン | 値 | 用途 |
|---|---|---|
--spacing-*4pxグリッド。12px・10px・15px は使いません（8か16に寄せる）。関係の近い要素ほど小さい余白でまとめます。
| トークン | 値 | 用途 | 見本 |
|---|---|---|---|
--round-*「小さい部品ほど小さい角丸」。ボタンとチップはすべてピル型です。
--shadow-*影は「浮いている・押せる」を伝えるときだけ。装飾目的では使いません。
SPファースト。まず375pxで設計し、PCはその拡張として考えます。
| トークン | 値 | 用途 |
|---|---|---|
.msiGoogle Material Symbols（Outlined / FILL 0 / wght 400）。<span class="msi">アイコン名</span> で表示します。クリックで名前をコピー。お気に入り・星は塗り（FILL 1）を使います。
絵文字（📍💰など）をUIのアイコン代わりに使わない。求人タイトル内の絵文字は原稿側の表現なのでOK。
tokens.css の :root を読み取って一覧化しています。tokens.css に変数を追加すると、ここにも自動で並びます。
| 変数名 | 定義 | 計算値 |
|---|
ボタン・ラベル・入力欄など、画面を組み立てる最小の部品。クラス名は本番サイトと同じ命名です。
.button .is-*すべてピル型・太字14px・高さ36px。is-primary-dark（pink）は「応募する」専用で1画面1つまで。ホバーは不透明度85%。下の数値は実際の描画から測った値です。
| 種類 | 使う場面 |
|---|---|
.is-primary-dark | 応募・会員登録など事業上最重要の1アクション。1画面1つまで |
.is-primary | 画面の主要アクション（検索・保存・次へ） |
.is-outline / 標準 | 主要アクションの対になる選択肢・「もっと見る」・FAQ導線 |
.is-grey | 条件確定など、色を主張させたくない決定ボタン |
.is-line | LINE連携・LINE問い合わせのみ |
.is-red | 削除・退会など破壊的操作。確認ダイアログとセット |
.is-link | 補助的な導線（利用規約・詳細を見る） |
.fav写真の上に浮かせて使う円形ボタン。押すとハートが塗りに変わります（クリックで切替）。
.contract-type「派遣」はblue、「紹介」はpink。求人カードではカード左端に接する旗型（.is-flag）で使います。
.label求人の特徴は淡いblue面＋blue文字。強調したいものだけ .is-strong。黄色の .is-new は新着など時限的な情報に限ります。
.chip「人気の検索条件」など、押すと絞り込みが変わるもの。選択中は塗り（.is-selected）。
.score数値と星はpink。件数は必ず添えます（件数のない評価は信頼されない）。
.heading .markerセクション見出しはPC24px / SP20px。ブランド色の中央見出し（.is-brand）は訴求セクションのみ。黄色マーカーは1セクション1箇所まで。
寮費・光熱費はすべて無料。初めての方でも安心して働けます。
.field .input .select .check .toggleラベルは入力欄の上（プレースホルダーをラベル代わりにしない）。エラーは送信時にまとめず、項目の直下に「何が起きたか＋どうすればよいか」で表示します。
.search-buttonFVの「いつから／どこで／こだわりの検索条件」。押すとモーダルで条件を選ぶ入口です。
.alert .is-*色だけで意味を伝えないよう、必ずアイコン＋文章をセットにします。
Atomsを組み合わせた画面パーツ。新しいページはまずここにあるブロックの組み合わせで考えます。見本はSP幅（375px）で表示しています。
.site-header高さ60px。左にロゴ、右に「お気に入り」「メニュー」のアイコン＋ラベル。
.search-panel掲載件数で信頼を示し、そのまま検索へ。人気の検索条件はチップで1タップ絞り込み。
.job-card一覧の主役。給与・場所・期間は一覧の時点で必ず見せる。情報行は「アイコン＋太字キー＋値」、給与だけpinkで強調。SPは1列、PCは2〜3列のグリッド。
.review-card「実際に働いた人のリアルな声」。属性（年代・期間）を添えて信頼性を出します。
寮が新しくて快適でした。休日はスタッフ同士で海に行ったり、思っていた以上に楽しめました。
.pickup-banner急募・特集の定型バナー。「見出しラベル＋メインテキスト＋補足訴求」の3要素で、写真とテキストを差し替えるだけで量産できる設計（季節型／開始時期型／エリア型／条件型）。右側の面は写真に差し替えます。
.campaign-grid横長バナー1枚ではなく、キャンペーン詳細ページのアイキャッチ（1200×630）を並べる構成。PC4列 / SP2列。
.similar-band検索結果が少ない／0件のとき、一覧の下に帯で「近い条件の求人」を出す。ボタンを押すと同じページ内で展開し、展開後はボタンを見出しに置き換えて文言を重複させない。
条件に合う求人は 2件 でした。
近い条件の人気求人もあわせて見てみませんか？
.empty「0件」で終わらせず、必ず次の一歩（条件変更・保存）を添えます。
条件に合う求人が見つかりませんでした
勤務期間やエリアを広げると、見つかりやすくなります
.faqQ（blue）／A（pink）の丸バッジ＋開閉アイコン。.is-open で開閉します（クリックで動作確認できます）。
ほとんどの求人で寮費・光熱費は無料です。求人ごとの条件は「待遇」欄でご確認ください。
はい、できます。応募時の備考欄に一緒に働きたい方のお名前をご記入ください。
.contact-ctaページ下部の相談導線。LINE（green）とFAQ（outline）の2択。
お仕事探しで迷ったら、お気軽にご相談ください
.apply-bar詳細ページの最重要CTA。画面下に固定し、どこまでスクロールしても応募に到達できるようにします。この画面のpinkはこの1つだけ。
迷ったときの判断基準。レビューで指摘したことはここに追記して、次から同じ指摘をしなくて済むようにします。
迷ったら上を優先。
| 1. わかりやすさ | 初めての利用者が迷わないこと。かっこよさより明快さ |
| 2. 安心感 | 住み込み・遠方の仕事だからこそ、給与・寮・期間を隠さない |
| 3. 速さ | 「探す → 詳細を見る → 応募する」を最短にする |
| 4. ブランドらしさ | 明るく、前向きで、親しみやすいトーン |
最重要の行動だけpink。対になる選択肢は標準ボタンで控えめに。
pinkが2つあると、どちらを押せばいいか分からなくなる。
var(--color-*) を使う記事タイトル画像（1200×630）など記事ごとの世界観が必要なバナーは、このパレットの外で配色してOK。その場合はHTMLの :root に記事専用パレットとして定義し、「DS外」とコメントで明記します。
| ルール | ⭕ よい例 | ❌ 悪い例 |
|---|---|---|
| ボタンは動詞で終える | 応募する / 検索する | 応募 / 検索 |
| エラーは「何が起きた＋どうする」 | 通信に失敗しました。電波の良い場所で再度お試しください | エラーが発生しました |
| 近くで同じ文言を繰り返さない | 展開前はボタンのみ → 展開後に見出しへ置き換え | 見出し「山形県の人気求人」＋ボタン「山形県の人気求人を見る」 |
| 数字は半角・単位つき | 時給 1,300円 / 128件 | 時給千三百 / １２８ |
| 敬体（です・ます）で統一 | ご確認ください | 確認しろ / 確認すること |
| 社内用語を出さない | お仕事 / 勤務先 | 案件 / 稼働先 |
人もAIも、提出前にこれを全部確認します。全項目クリアで「90点」。
2026-10-03に本番サイトの実装値を計測し、Figmaの定義と食い違っていたもの。このガイドは本番の値を採用しています。どちらに揃えるか決めたら、Figma側を直してこの表から消してください。
| 項目 | Figma | 本番（採用） | メモ |
|---|---|---|---|
| 太字のウェイト | W6 (600) | 700 | Webフォントではなくシステムフォントのため |
| 本文のウェイト | W3 (300) | 400 | 300はWindowsで細く見えすぎる |
| ボタンの角丸 | round 8 | 100px（ピル型） | 本番は全ボタンがピル型 |
| ボタンの高さ | —（未取得） | 36px / 小30px | Figmaのボタンコンポーネント要同期 |
| カードの影 | 0 4px 4px .15 | 0 4px 8px .15 | 本番の方がやわらかい |
| red | 未定義 | #FD2B2B | 注記・削除ボタンで使用中 |
| error / success | 未定義 | 仮値 | 使う場面が確定したらFigmaに変数追加 |
| PCコンテンツ幅 | 1080px | 980px | トップページ実測 |
| 2026-10-03 | v1.0 公開。Figmaトークン（2026-07-09同期分）と本番サイトの実装値を突き合わせて作成。Foundations 8 / Atoms 10 / Blocks 12 / Rules 6 |