Talk
Overseas / DE16:9 · 119p
Painting With the Web
Matthias Ottの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
表紙の題が、色をずらして重なる。
Matthias Ottの登壇資料は、黒地に NaN Tresor の極太を画面の端まで大きく組み、版ずれのような表紙や絵の具の垂れる章扉で、ウェブを画材として見せる話を文字の大きさで語っている。
NaN Tresor の極太を、平気で画面からはみ出させてる。字間もかなり詰めてる。読ませる気と見せる気の境目を、わかったうえでやってるのがちょっと悔しい。
- 1見出しは最大427px（1920px換算）。画面の端に届くほど大きく組み、文字を絵として扱う
- 2表紙は青・赤・灰の版をずらして題を重ねる。刷りずれのような揺れが、手仕事の話を予告する
- 3資料や作例は黒地の中央に画面ごと置き、下に等幅体でURLを添える。出典まで型にしている
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上91 右82 下88 左88
- 1枚の文字量
- 中央値 約27字
- 多いページ
- 約154字
- 写真・画像の面積
- 約65%
公開PDFの119ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上50・下42・左64・右47px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 21:1
Typography
書体と文字サイズ（実測）
見出し・表紙（L Bold / L Semibold / S Regular）
- 使用
- NaN Tresor
- 代替
- Bricolage Grotesque
本文（Regular）
- 使用
- NaN Tragedy Text
- 代替
- Inter
コード・URL（Regular / Condensed）
- 使用
- Input Mono
- 代替
- JetBrains Mono
PDFに埋め込まれた書体: NaNTresorL-Bold（25%）、InputMono-Regular（19%）、NaNTragedyText-Regular（18%）、NaNTresorL-Semibold（9%）
- 表紙・中扉の大見出し資料の型 Aa427px · PPT 214pt
- ページ見出し資料の型 Aa48px · PPT 24pt
- 本文資料の型 Aa34px · PPT 17pt
- 注釈・出典資料の型 Aa32px · PPT 16pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
黒地に題の3語を青・赤・灰で重ね、版がずれたように画面の端まで広げる。右の空きに名前と会場名を白とピンクで小さく置く。題の重なりが画面の上下いっぱいまで広がる。
中扉
紫からマゼンタのグラデーションの地に、上から絵の具が垂れたような暗い形を置く。見出しは白の極太で2行、画面の幅いっぱいに組む。
写真
黒地の中央に古いウェブ文書の画面を置き、下に青い等幅体でURLを1行。歴史の資料を出典つきで見せる。画面は白いまま大きく置き、周りの黒で囲む。
メッセージ
黒地の中央に、等幅体の白文字を1行だけ置く。コードの記法のまま見せ、ほかに何も足さない。前後の大きな見出しとの落差で、1行に目を留めさせる。
写真
黒地に道具のサイトの画面を大きく置き、左上に白の下線つきでサイト名を添える。紹介のたびに同じ型を使うので、道具の紹介だと一目で分かる。
本文
白い作例の画面で、右上に黒の極太見出し、下に黄色の面と建物の写真を重ねる。作例そのものがポスターの組み方になっている。右下にURLを小さく添える。
Reproduce
この型で資料を作るには
- 01背景は黒。見出しは NaN Tresor の極太
- 02見出しは画面の幅いっぱいまで大きく。最大427px（1920px換算）
- 03資料や作例は画面ごと中央に置き、URLは等幅体で添える
- 041枚の文字は中央値27字・2行前後
- 05色の面は表紙・章扉・作例だけ。本文ページは黒と白で通す
- 06黒地に極太のグロテスク体を1つ決め、見出しは画面の端まで大きく組む
- 07表紙は同じ文字を色違いで少しずらして重ね、版ずれのように見せる
- 08紹介する資料やサイトは画面ごと中央に置き、URLを等幅体で添える
- 09本文ページは黒と白だけにして、色は章扉と作例に任せる
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Painting With the Webについてよくある質問
大胆なタイポグラフィの登壇資料の例は？
Matthias Ottの「Painting With the Web」は、黒地に NaN Tresor の極太を最大427px（1920px換算）で組み、表紙では色違いの題をずらして重ねています。
どんなフォントを使っている？
見出しは NaN Tresor、本文は NaN Tragedy Text、コードとURLは Input Mono です。
何ページある？
16:9で119ページです。1ページの文字数は中央値27字で、画面キャプチャのページも多く挟まります。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
