濃いマスほど、このテーマでその指標が高いことを示します。
明瞭80
説得78
密度35
制作コスト22
課題適合88
仕事適合84
低高
短い答え
Excalidraw スケッチ ワイヤーフレームはいつ選ぶ？
次の条件に合う。キックオフ、教室でのブレインストーミング、広告コンセプトボード、UX の概要
いつ避ける？
次の場合は別の形にする。厳密なデザインシステムと一致する必要がある最終的なブランド資産
誰が作り、広めた？
Excalidraw (MIT) は共同スケッチ図をデフォルトの OSS 習慣にしました
何を符号化する？
思考レイヤーとしてのフリーハンドのボックス、矢印、付箋
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
Excalidraw スケッチ ワイヤーフレームは思考レイヤーとしてのフリーハンドのボックス、矢印、付箋として値を載せます。Excalidraw (MIT) は共同スケッチ図をデフォルトの OSS 習慣にしました。
業務報告・広告・課題では「キックオフ、教室でのブレインストーミング、広告コンセプトボード、UX の概要」に向く。「厳密なデザインシステムと一致する必要がある最終的なブランド資産」のときは別の形を選ぶ。
ソフト
- Excalidraw — エクスポート可能なシーンを備えた仮想ホワイトボード - MIT。 · MIT · github.com/excalidraw/excalidraw
- Excalidraw libraries — スケッチを高速化するための再利用可能なシェイプ パック。 · MIT · github.com/excalidraw/excalidraw-libraries
- Rough.js — 多くのスケッチ UI の内部にある手描きの美的プリミティブ。 · MIT · github.com/rough-stuff/rough
- tldraw — 無限のホワイトボードスタイルの作業のための別のオープンキャンバス。 · Apache-2.0 · github.com/tldraw/tldraw
- Callout demos — SaaS を使用せずにバッジとコールアウトを教える。 · 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 を尊重。
Excalidraw スケッチ ワイヤーフレーム: 思考レイヤーとしてのフリーハンドのボックス、矢印、付箋を守り、「厳密なデザインシステムと一致する必要がある最終的なブランド資産」のときは別の図を選ぶ。