デザイン

デザインの基本

タイポグラフィ

書体は Noto Sans JP の1つだけ。スライド用とアプリ用で別の大きさの段階を使います。

元ファイルfoundations/tokens.cssfoundations/typography.md

書体と太さ

--font-sans：'Noto Sans JP',sans-serif

あア亜 Aa 1
--fw-bold　700
あア亜 Aa 1
--fw-medium　500
あア亜 Aa 1
--fw-regular　400

行間

トークン値
--lh-heading1.4
--lh-table1.5
--lh-body1.6
--lh-app1.5

スライド用サイズ

1920×1080 のスライド上の実寸で表示しています（縮小していないため、大きいものは右端で切れます）。

表紙タイトル112px・太さ 700
表紙タイトル Aa 123
表紙の社名・副題40px・太さ 700
表紙の社名・副題 Aa 123
スライド見出し64px・太さ 700
スライド見出し Aa 123
核メッセージ48px・太さ 700範囲 40〜48（3行以上になるときは40）
核メッセージ Aa 123
核メッセージ40px・太さ 700範囲 40〜48（3行以上になるときは40）
核メッセージ Aa 123
サブメッセージ34px・太さ 500
サブメッセージ Aa 123
カード見出し32px・太さ 700範囲 30〜36
カード見出し Aa 123
本文・箇条書き28px・太さ 400範囲 26〜30
本文・箇条書き Aa 123
表・会社概要の項目26px・太さ 400（項目名 500）
表・会社概要の項目 Aa 123
注釈・バッジ24px・太さ 400（バッジ 700）
注釈・バッジ Aa 123
矢印記号（→）40px・太さ 700
矢印記号（→） Aa 123
フッター20px・太さ 400
フッター Aa 123
大きな数字72px・太さ 700（idea-600）
大きな数字 Aa 123

アプリ用サイズ

画面上の実寸です。画面幅で拡縮しません。

大きな数字（KPI）40px・太さ 700
大きな数字（KPI） Aa 123
画面見出し32px・太さ 700
画面見出し Aa 123
セクション見出し24px・太さ 700
セクション見出し Aa 123
カード見出し20px・太さ 700
カード見出し Aa 123
本文・表16px・太さ 400
本文・表 Aa 123
補足・ラベル14px・太さ 500
補足・ラベル Aa 123
注釈・バッジ12px・太さ 400（バッジ 700）
注釈・バッジ Aa 123

ルール本文

foundations/typography.md をそのまま表示しています。

タイポグラフィ

  • フォント：Noto Sans JP のみ（Bold 700 / Medium 500 / Regular 400）。欧文・数字も同じ。
  • 行間：見出し 1.4、表・カード内 1.5、本文 1.6。字間は詰めない。
  • 本文は左揃え。中央揃えは表紙のタイトル・社名と大きな数字だけ（スライド見出しや核メッセージは左揃え）。

スライド用サイズ（1920×1080 換算）

表の「基準」の値が tokens.css に入っています。範囲があるものは、基準から外す理由があるときだけ範囲内で変えます。

要素 基準 px 範囲 太さ トークン
表紙タイトル 112 700 --fs-cover
表紙の社名・副題 40 700 --fs-cover-sub
スライド見出し 64 700 --fs-h1
核メッセージ 48 40〜48（3行以上になるときは40） 700 --fs-key / --fs-key-long
サブメッセージ 34 500 --fs-sub
カード見出し 32 30〜36 700 --fs-card
本文・箇条書き 28 26〜30 400 --fs-body
表・会社概要の項目 26 400（項目名 500） --fs-table
注釈・バッジ 24 400（バッジ 700） --fs-note
番号バッジの数字 28 700 --fs-body
矢印記号（→） 40 700 --fs-arrow
フッター 20 400 --fs-footer
大きな数字 72 700（idea-600） --fs-stat

アプリ用サイズ（実寸px、--fs-app-*）

スライドと違い画面幅で拡縮しないため、別の段階を使います。行間は 1.5（--lh-app）。

要素 px 太さ トークン
大きな数字（KPI） 40 700 --fs-app-stat
画面見出し 32 700 --fs-app-h1
セクション見出し 24 700 --fs-app-h2
カード見出し 20 700 --fs-app-h3
本文・表 16 400 --fs-app-body
補足・ラベル 14 500 --fs-app-sub
注釈・バッジ 12 400（バッジ 700） --fs-app-note
  • 数字は等幅にそろえる（font-variant-numeric: tabular-nums）。桁がずれると比較できない。
  • 本文 16px 未満を長文に使わない。