Slides

Application / 16:9

Foundation トークンを 16:9 スライドに適用したレイアウト集。各レイアウトは見本とスロット（差し込み口）で定義し、 スターターデッキをコピーして中身を差し替えれば使える。色・タイポは Color ／ Typography に準拠。

スターターデッキを開く グリッドを試す slide.css

白地スライドのアクセント文字は 黒、黒地スライドは Mustard #FFDA00 を使う。Mustard は面・線・マーカー専用で、白地の本文・見出しには使わない。 見出しは Zen Old Mincho、本文は Noto Sans JP、欧文・数字は Cormorant Garamond。土台は社内共通の html-slide-design-system を SF ブランドに適用したもの。

01 ／ 表紙（マスタード地）

マスタード全面地に黒の明朝タイトル。左上にキッカー、左下に登壇者、右下にロゴ。登壇・フォーラム向け。

スロット（差し込み口）

cover-kickerキッカー（日付｜イベント名）
titleタイトル（明朝・最大2行）
cover-author登壇者・発表者名
cover-logo-mark右下の SF ロゴ

02 ／ 表紙（写真モザイク）

黒地に左タイトル＋下ロゴ、右に写真モザイク。10周年・DE系の定番タイトル。タイトルが欧文なら Cormorant、和文なら明朝。

スロット（差し込み口）

title / cover-subタイトルと小サブ（版・年など）
cover-logo左下の SF ロゴ＋タグライン
cover-grid右側の写真モザイク（大1＋小5）

03 ／ アジェンダ

表紙の次に置き、章立てを一覧する。番号付きのテーマリストで構成する。

スロット（差し込み口）

label-sectionセクション見出し（Agenda）
h1タイトル
leadリード文
theme-row章番号・章名・概要を 1 行ずつ。必要な数だけ繰り返す

04 ／ 章扉

章の区切りに 1 枚挟む明地スライド。左にセクション名（欧文セリフ）、右端に幾何モチーフを薄く透かす。

スロット（差し込み口）

section-num章番号（大きく、1/1 セルに配置）
section-titleセクション名（3 列目から）

05 ／ ステートメント

いちばん伝えたい一文を大きく言い切る。キーワードは黄色マーカーで強調する。

スロット（差し込み口）

statement-lg大きな一文（.mark でキーワードを黄色マーカー）
statement-source補足・出典（任意）

06 ／ 本文（1カラム）

セクション見出し・タイトル・リード文・コンテンツで 1 つの論点を展開する標準スライド。

スロット（差し込み口）

label-sectionセクション見出し
h1タイトル
leadリード文
page-bodyコンテンツエリア（本文・箇条書き）

07 ／ 本文（2カラム）

セクション見出し・タイトル・リード文の下で、左右に対になる内容を並べる。split-6-6。

スロット（差し込み口）

label-sectionセクション見出し
h1タイトル
leadリード文
左カラム / 右カラムコンテンツエリア（本文・図など）

08 ／ 3項目比較

セクション見出し・タイトル・リード文の下で、横並びに 3 項目を対比する。phase-grid。

スロット（差し込み口）

label-sectionセクション見出し
h1タイトル
leadリード文
phase-cardコンテンツエリア（ラベル・見出し・説明の 3 カード）

09 ／ 強調表（中央列ハイライト）

3 列で要素を並べ、要となる中央列を黄色で強調する。Input/Strategy/Output 型。

スロット（差し込み口）

io-head各列の見出し
io-cell各列の項目セル
io-col--accent中央列（黄色ハイライト）

10 ／ ロードマップ

セクション見出し・タイトル・リード文の下で、時系列のステップを縦に並べる。

スロット（差し込み口）

label-sectionセクション見出し
h1タイトル
leadリード文
stepコンテンツエリア（番号・見出し・説明のステップ）

11 ／ 引用

一文の引用を黒地に大きく見せる。白い吹き出しに和文（黄色マーカー）と原文、吹き出し外の左下に出典。

スロット（差し込み口）

q-jp引用（和文・明朝。強調語を .hl で黄色塗り）
q-en原文・英訳（セリフ斜体・任意）
q-cite出典（氏名・書誌）

12 ／ 数値強調

セクション見出し・タイトル・リード文の下で、統計・実績の大きな数字を金のセリフで見せる。ラベルは数字の上。

スロット（差し込み口）

label-sectionセクション見出し
h1タイトル
leadリード文
stat-fig数字 1 つ＝ラベル（上）＋大数字（下）。必要な数だけ並べる

13 ／ 統計（Before / After）

黒地に 2 つの面を対置して変化を示す。左=現状（明面）、右=変化後（金と黒の分割面）、間に金の矢印。

スロット（差し込み口）

ba-label各面のラベル（Before / After）
ba-cell面の中身（小ラベル＋大数字）
ba-cell--gold / --darkAfter 面の分割（金面・黒面）

14 ／ 強調（ピル・帯）

ピル型ラベルと、背景塗りの上のテキスト（帯）で要点を強調する。任意のスライドに差し込める部品。

スロット（差し込み口）

pillピル型ラベル（塗り / アウトライン）
fill-band背景塗りの帯（マスタード / 黒）の見出しと本文

15 ／ 画像はめ込み（白地）

白地に大きく画像をはめ込む。見出し・リードの下に画像エリアが残り高さいっぱいに広がる。

スロット（差し込み口）

label-sectionセクション見出し
h1タイトル
image-stage画像エリア（残り高さいっぱい）
diagram-captionキャプション（任意）

16 ／ 画像はめ込み（黒地）

黒地に大きく画像をはめ込む。白地版と対の暗地レイアウト。

スロット（差し込み口）

label-sectionセクション見出し
h1タイトル
image-stage画像エリア（残り高さいっぱい）
diagram-captionキャプション（任意）

17 ／ フル幅画像

キービジュアルや写真を全面に見せる。padding 0 のフルブリード。

スロット（差し込み口）

bleed-image全面画像
bleed-caption右下キャプション（任意）

18 ／ 連絡先

デッキの最後。連絡先・出典・クレジットを黒地で示す。

スロット（差し込み口）

h1見出し（お問い合わせ等）
連絡先担当者・所属・メール
データソース出典・参考リスト

Spice Factory Design System — Slides / Application