人間にも、AI にも、やさしいデザインシステムを目指して
2026-03-17・Mon 谷口 健太 (Kenta Taniguchi)
extension カスタム
スライドの個性を表現するプライマリカラー。リンク・ハイライト・インタラクション要素に使用する
accent-50
#F7F5FF
accent-100
#E5E0FF
accent-200
#CEC2FF
accent-300
#B8A6FF
accent-400
#A48BFF
accent-500
#906EFF
accent-600
#7F54FF
accent-700
#6637DF
accent-800
#4624A0
accent-900
#271060
accent-950
#190940
Generated by Kigen — #7F5AF0, Tailwind CSS, Shift 0.30
アクセントカラーから派生したニュートラルカラー。背景・テキスト・ボーダー要素に使用する
slate-50
#F1F0F3
slate-100
#DDDBE3
slate-200
#BFBCCB
slate-300
#A5A0B6
slate-400
#8D87A2
slate-500
#77708F
slate-600
#675F80
slate-700
#504A66
slate-800
#383347
slate-900
#1F1C29
slate-950
#121019
Generated by Kigen — #77708F, Tailwind CSS, Shift 0.00
アクセントカラーとスレートカラーの 2 つのパレットを意味付けしたもの。テーマ切替はこの層で吸収する
--color-bg
--color-surface
--color-surface-accent
.bg-accent
--color-stripe
--color-border
--color-heading
.text-heading
--color-text
--color-muted
.text-muted
--color-accent
.text-accent
--color-highlight
.highlight
--color-link
.text-link
--color-code
--color-code-bg
--color-code-border
書体を定義するデザイントークン。閲覧環境に依存しないよう、すべて Google Fonts から読み込み
Inter, Noto Sans JP, sans-serif
英文は Inter、和文は Noto Sans JP を使用
ABCDEFGabcdefg あいうえお 漢字表示 0123456789
JetBrains Mono, monospace
コードは JetBrains Mono JP を使用
const config = { color: '#906EFF'};
文字サイズと付随スタイルを制御するデザイントークン。.text-* クラスで適用
.text-*
2.2em .text-3xl 1.75em .text-2xl 1.4em .text-xl 1.15em .text-lg 1em 0.85em .text-sm 0.7em .text-xs 0.55em .text-2xs
.text-3xl
.text-2xl
.text-xl
.text-lg
.text-sm
.text-xs
.text-2xs
h1・ヒーローテキスト h2 数値の強調・キーメッセージ サブタイトル h3・h4・本文・リスト テーブル キャプション・補助テキスト 最小テキスト
文字の太さを制御するデザイントークン。.font-* クラスで適用
.font-*
.font-light
繊細で軽やかな印象を与える。キャプションや装飾的なテキストで使う
.font-normal
長文を自然に読ませる標準の太さ。段落やリストなど本文テキストのベースライン
.font-medium
本文より少し強い存在感を持たせる。強調テキストやサブタイトルに最適
.font-bold
視認距離が遠いスライドでも一目でわかる太さ。見出しやタイトルで使う
行と行の間隔を制御するデザイントークン。.leading-* クラスで適用
.leading-*
.leading-none
行が密着し窮屈な印象。見出しやラベルなど単行テキスト向き
.leading-tight
やや詰まった印象。見出しやカード内の短文に向く
.leading-snug
程よく詰まり情報密度が高い。リストや表の補足テキストに
.leading-normal
標準的な読みやすさ。本文テキストのベースライン
.leading-relaxed
ゆったりと読みやすい。長文の段落やキャプションに最適
.leading-loose
行間が広く開放的。注釈や余白を活かしたレイアウトに
文字と文字の間隔を制御するデザイントークン。.tracking-* クラスで適用
.tracking-*
.tracking-tight
文字を詰めて密度を高める。大きなテキストの引き締めや、見出しの一体感を出したい時に
.tracking-wide
文字を広げて開放感を出す。小さいテキストの視認性向上や、ラベル・キャプションに
Tailwind 式の 4px ベース。数値 × 4px で算出、24 以降は 8 刻み
--space-1
--space-2
--space-3
--space-4
--space-6
--space-8
--space-12
--space-16
--space-20
--space-24
--space-32
--space-40
--space-48
--space-56
--space-64
.t-*
.r-*
.b-*
.l-*
.mt-*
.mb-*
.pt-*
.pb-*
.px-*
.mx-auto
要素の余白を制御するデザイントークン。.mt-* .mb-* .pt-* .pb-* .px-* クラスで適用
.mt-0 .mt-4 .mt-6 .mt-8 .mt-12 .mt-16 .mt-24 .mt-32
.mt-0
.mt-4
.mt-6
.mt-8
.mt-12
.mt-16
.mt-24
.mt-32
要素の上に外側余白を追加する
.mb-0 .mb-4 .mb-6 .mb-8 .mb-12 .mb-16 .mb-24 .mb-32
.mb-0
.mb-4
.mb-6
.mb-8
.mb-12
.mb-16
.mb-24
.mb-32
要素の下に外側余白を追加する
.pt-0 .pt-1 .pt-2 .pt-4 .pt-8 .pt-12 .pt-16
.pt-0
.pt-1
.pt-2
.pt-4
.pt-8
.pt-12
.pt-16
要素の上に内側余白を追加する
.pb-0 .pb-1 .pb-2 .pb-4 .pb-8 .pb-12 .pb-16
.pb-0
.pb-1
.pb-2
.pb-4
.pb-8
.pb-12
.pb-16
要素の下に内側余白を追加する
.px-0 .px-1 .px-2 .px-4 .px-8 .px-12 .px-16
.px-0
.px-1
.px-2
.px-4
.px-8
.px-12
.px-16
要素の左右に内側余白を追加する
要素の浮きを表現するデザイントークン。.shadow-* クラスで適用
.shadow-*
.shadow-none
影なし。フラットな要素に
.shadow-sm
わずかな浮き。カードやサーフェスの基本レベル
.shadow-md
中程度の浮き。ホバー状態やアクティブなカードに
.shadow-xl
大きな浮き。モーダルやオーバーレイ要素に
要素の角の丸みを制御するデザイントークン。.rounded-* クラスで適用
.rounded-*
.rounded-none
シャープな印象。テーブルやハイライトに
.rounded-sm
わずかな丸み。インラインコードやバッジに
.rounded-md
カードやコードブロックの標準。最も使用頻度が高い
.rounded-lg
やわらかい印象。大きめのカードやパネルに
.rounded-xl
丸みが強い。チャットの吹き出しやトーストに
.rounded-full
完全な丸。アバターやタグ、ピルボタンに
リガチャ方式の Material Symbols Outlined (Google Fonts) を使用。.icon-* クラスでサイズを制御
.icon-*
==icon_name=={.icon}
info .icon-3xl · 5em info .icon-2xl · 4em info .icon-xl · 3em info .icon-lg · 2em info .icon · 1.2em info .icon-sm · 1em info .icon-xs · 0.8em
.icon-3xl
.icon-2xl
.icon-xl
.icon-lg
.icon
.icon-sm
.icon-xs
よく使うアイコンの一覧。Material Symbols で検索可能
home home
search search
close close
add add
edit edit
delete delete
info info
warning warning
star star
rocket rocket
person person
settings settings
schedule schedule
visibility visibility
check check
link link
bolt bolt
lightbulb lightbulb
::::col で列数と比率を指定するグリッドレイアウト。子要素は :::col-item / :::card を使用
::::col
:::col-item
:::card
左 (60%)
右 (40%)
::::col 3 2 :::card 左 (60%) ::: :::card 右 (40%) ::: ::::
::::col 2
::::col 1 1
::::col 3 2
::::col 3
::::col 1 1 1
::::col 1 3 1
:::center でコンテンツを上下左右中央に配置。{.top} / {.bottom} で縦位置を変更可能
:::center
{.top}
{.bottom}
上下左右中央に配置
:::center 上下左右中央に配置 :::
:::center{.top} 上寄せ・左右中央に配置 :::
:::center{.bottom} 下寄せ・左右中央に配置 :::
package_2 ビルトイン
 でスライドにインライン画像を挿入する
 {.text-center}  {.text-center}
 でスライド全体を画像で埋める
.abs + 位置クラスで画像を自由配置。上下 (t / b) と左右 (l / r) の 2 軸を必ずセットで指定する
.abs
t
b
l
r
{.abs .b-16 .r-16}
.t-0
.t-4
.t-8
.t-12
.t-16
.t-20
.t-24
.t-32
.t-40
.t-48
.t-56
.t-64
.b-0
.b-4
.b-8
.b-12
.b-16
.b-20
.b-24
.b-32
.b-40
.b-48
.b-56
.b-64
.l-0
.l-4
.l-8
.l-12
.l-16
.l-20
.l-24
.l-32
.l-40
.l-48
.l-56
.l-64
.r-0
.r-4
.r-8
.r-12
.r-16
.r-20
.r-24
.r-32
.r-40
.r-48
.r-56
.r-64
:::card で背景・ボーダー・角丸を持つ装飾ブロック。カラム内で :::col-item の代替としても使える
背景色 + 控えめなシャドウで情報をグループ化
色で区別が必要なケースに
浮き上がる表現で注目を集める
:::card ### デフォルト 背景色 + 控えめなシャドウで情報をグループ化 ::: :::card{.bg-accent} ### アクセント背景 色で区別が必要なケースに ::: :::card{.shadow-md} ### シャドウ付き 浮き上がる表現で注目を集める :::
:::showcase で画像 + タイトル + 説明を表示。col-item / card と同列で col 内に配置。画像またはユニコード絵文字が使用可能
:::showcase
組織のデータを活用した意思決定
協力して目標を達成する
::::col :::showcase  ### データ分析 組織のデータを活用した意思決定 ::: :::showcase ### チームワーク 協力して目標を達成する ::: ::::
:::hgroup で見出しとキャプションをグループ化。手動のスタイル指定を不要にする
:::hgroup
キャプション
Before
## 見出し{.mb-0} キャプション{.text-xs .text-muted .mb-4} <style scoped>h2 {padding-bottom: 0}</style>
After
:::hgroup ## 見出し キャプション :::
:::statement で 1 つのメッセージを全画面で見せる。手動のスタイル指定を不要にする
:::statement
テキストを ドンと見せる
テキストを ==ドンと=={.text-accent}見せる {.text-3xl .text-center .font-bold .leading-relaxed .text-heading} <style scoped>section { justify-content: center; }</style>
:::statement テキストを ==ドンと=={.text-accent}見せる :::
:::topic でセクション内のトピック切り替えを示す。h2 がアクセント、p がミュート
:::topic
データの中心を表す指標
:::topic ## 代表値 データの中心を表す指標 :::
_paginate: skip との併用を推奨
_paginate: skip
::::timeline-item 内に :::timeline-label を配置。{.active} で強調
::::timeline-item
:::timeline-label
{.active}
2024 年
アイデアを固める
2025 年
実装を進める
2026 年
本番デプロイ
:::::timeline-vertical ::::timeline-item :::timeline-label 2024年 ::: ### 企画 アイデアを固める :::: ::::timeline-item{.active} :::timeline-label 2025年 ::: ### 開発 実装を進める :::: ::::timeline-item :::timeline-label 2026年 ::: ### リリース 本番デプロイ :::: :::::
:::timeline-label を省略すると、ラベル列を詰めてコンパクトに表示
:::::timeline-vertical ::::timeline-item ### 企画 アイデアを固める :::: ::::timeline-item{.active} ### 開発 実装を進める :::: ::::timeline-item ### リリース 本番デプロイ :::: :::::
::::chat-left / ::::chat-right で LINE 風の会話 UI。アバターは Unicode 絵文字・画像の両方に対応
::::chat-left
::::chat-right
後輩
情報が多くて見づらいです…
たぬ
:::card で囲むといいよ
::::col で横に並べてみて
:::::chat ::::chat-left :::chat-avatar ::: :::chat-name 後輩 ::: :::chat-message 情報が多くて見づらいです… ::: :::: ::::chat-right :::chat-avatar  ::: :::chat-name たぬ ::: :::chat-message{.bg-accent} `:::card` で囲むといいよ ::: :::chat-message{.bg-accent} `:::col` で横に並べてみて ::: :::: :::::
Caption text is here.
{.badge} でスライド右上にピル型のラベルを表示する。アイコンやテキストは自由に指定可能
{.badge}
β版
==extension=={.icon-sm} カスタム {.badge}
==package_2=={.icon-sm} ビルトイン {.badge}
β版 {.badge}
```mermaid コードブロックで記述。ビルド時に SVG 化される。テーマカラーは .mermaidrc.json で一括管理
```mermaid
.mermaidrc.json
flowchart LR A[入力] --> B{判定} B -->|Yes| C[処理A] B -->|No| D[処理B] C --> E[出力] D --> E
.mermaid-xl
.mermaid-lg
.mermaid-sm
```vega-lite コードブロックで JSON spec を記述。ビルド時に SVG 化される。テーマは .vegaliterc.json で一括管理
```vega-lite
.vegaliterc.json
{ "$schema": "...", "data": { "values": [...] }, "mark": { "type": "line", "point": true }, "encoding": { "x": {"field": "month"}, "y": {"field": "sales"} } }