Talk
Overseas / US16:9 · 65p
Programmable colors: bridging design and code
Irina Nazarova & Arthur Objartel (Evil Martians)の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
白いカードを、色の額縁に入れて見せる。
Evil MartiansのConfig 2025の登壇資料は、白い面に黒の太字と画面の作例だけを置き、外周の色をピンク・緑・橙と替えながら色の話を進める。
縁の色が、ピンクから緑、橙へと衣替えしていくのがすき。中身はずっと白いままだから、色は額縁が全部引き受けてる感じ。色見本をそっと載せる台みたいな落ち着きがある。
- 1外周をピンク・緑・橙で縁取り、中は白いカード。色の話なのに、読む面は白のまま保つ
- 2見出しは1920px換算で80px。左に大きく組み、右には画面の作例を1つだけ置く
- 3中扉は橙一色に極太の一語だけ。65ページの中で、話の段落がはっきり切り替わる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上112 右220 下158 左104
- 1枚の文字量
- 中央値 約41字
- 多いページ
- 約138字
- 写真・画像の面積
- 約4%
公開PDFの65ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上97・下140・左49・右158px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 4.3:1
Typography
書体と文字サイズ（実測）
見出し・本文
- 使用
- グロテスク系サンセリフ・太字（推定）
- 代替
- Inter
中扉の一語
- 使用
- 幅広の極太サンセリフ（推定）
- 代替
- Archivo（Expanded Black）
- 表紙・中扉の大見出し資料の型 Aa120px · PPT 60pt
- ページ見出し資料の型 Aa80px · PPT 40pt
- 本文資料の型 Aa30px · PPT 15pt
- 注釈・出典資料の型 Aa27px · PPT 14pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
くすんだ藤色の地に、緑の四角で切り抜いた2人の白黒写真を並べる。右上に細いサンセリフで題名を3行、右下にイベントの水色の図形を大きく置き、名前と肩書きは写真の下に小さく添える。
グラフ
白地に、写真に写る色の割合を年代ごとに積み上げたグラフを1枚。見出しは左上に小さく、出典は左下に添えるだけで、色の移り変わりそのものを見せ場にする。
図解
ピンクの縁の白いカードに、同じ形のボタンを3つ縦に並べる。色を抜いた状態で見せ、名前だけでは役割の違いが伝わらないことを問いかける。
本文
左に黒の太字で見出しを3行、右に色を調整するパネルの画面を縦長に置く。縁はピンクで、操作の様子を1画面で見せる。
中扉
橙一色の地に、幅の広い極太の大文字で一語だけ。左右の端ぎりぎりまで広げ、文字で画面を横切る。
図解
橙の縁の中に、明るいモードと暗いモードの画面を左右に並べ、両端に色の変数の一覧を添える。下の中央にQRコードを重ね、その場で試せる導線にする。
Reproduce
この型で資料を作るには
- 01読む面は白いカード。色は外周の縁と中扉に回す
- 02見出しは黒の太字で80px前後、左寄せ（1920px換算）
- 031枚の文字は中央値41字。説明は画面の作例に任せる
- 04中扉は橙#fca14dの一色に、極太の一語だけ
- 05ツールを紹介するページにはQRコードを添える
- 06白いカードと色の縁のテンプレートを作り、縁の色を話の区切りで替える
- 07見出しは太いサンセリフで左に大きく、作例は右に1つだけ置く
- 08中扉は1色の地に、幅の広い極太書体の一語で組む
- 09紹介するツールにはQRコードを添え、会場ですぐ開けるようにする
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Programmable colors: bridging design and codeについてよくある質問
Programmable colorsのスライドのデザインの特徴は？
白いカードをピンク・緑・橙の縁で囲み、中には黒の太字の見出しと画面の作例だけを置いています。中扉は橙一色に極太の一語だけで、表紙はイベント共通の藤色のテンプレートです。
どんなフォントを使っている？
埋め込み書体名は取得できませんでした。画像からは、見出しと本文に太いグロテスク系サンセリフ、中扉に幅の広い極太サンセリフが使われていると推定できます。
何ページある？文字の大きさは？
16:9で65ページです。1920px換算で本文30px・見出し80px・最大120pxで、1ページの文字数は中央値41字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
