濃いマスほど、このテーマでその指標が高いことを示します。
明瞭86
説得74
密度55
制作コスト32
課題適合78
仕事適合92
低高
短い答え
スライドとドキュメントのグリッドはいつ選ぶ？
次の条件に合う。PowerPoint または Google スライド、概要資料、教室用ポスター
いつ避ける？
次の場合は別の形にする。共有エッジのない浮動ボックスの積み重ね
誰が作り、広めた？
スイスのグリッド システム。後のプレゼンテーション テンプレートと CSS グリッド
何を符号化する？
共有空間システムとしての柱、側溝、余白
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
スライドとドキュメントのグリッドは共有空間システムとしての柱、側溝、余白として値を載せます。スイスのグリッド システム。後のプレゼンテーション テンプレートと CSS グリッド。
業務報告・広告・課題では「PowerPoint または Google スライド、概要資料、教室用ポスター」に向く。「共有エッジのない浮動ボックスの積み重ね」のときは別の形を選ぶ。
ソフト
- Open Props — 一貫したレイアウトを実現するために、スペースとサイズのスケールを含むトークンを設計します。 · MIT · github.com/open-props/open-props
- normalize.css — HTML 配布資料を配布するときのベースラインのレンダリングの一貫性。 · MIT · github.com/necolas/normalize.css
- Primer CSS — GitHub のデザイン システムの間隔パターンを開いて研究できます。 · MIT · github.com/primer/css
- Tailwind CSS — ユーティリティの間隔スケール - 必ずしもスタックではなく、リズムを盗みます。 · MIT · github.com/tailwindlabs/tailwindcss
- Geometry demos — 位置合わせを教えるサーバー描画の形状スケルトン。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
書き出し
- 書き出し 1 — SVG
- 書き出し 2 — PDF
- 書き出し 3 — スライドへ EMF/SVG（スクリーンショット禁止）
- 書き出し 4 — ウェブはSVG、印刷はPDF
アクセシビリティ
- アクセシビリティ 1 — 色だけに意味を持たせない。パターン・ラベル・位置を重ねる。
- アクセシビリティ 2 — 本文は 4.5:1、大きなマークは 3:1。
- アクセシビリティ 3 — チャートに短い代替テキスト。数値はHTML表でも。
- アクセシビリティ 4 — 動きは強調のときだけ。prefers-reduced-motion を尊重。
スライドとドキュメントのグリッド: 共有空間システムとしての柱、側溝、余白を守り、「共有エッジのない浮動ボックスの積み重ね」のときは別の図を選ぶ。