濃いマスほど、このテーマでその指標が高いことを示します。
明瞭74
説得88
密度30
制作コスト34
課題適合70
仕事適合68
低高
短い答え
Rough.js アノテーションはいつ選ぶ？
次の条件に合う。説明者のハイライト、広告コンセプトのフレーム、教育用コールアウト
いつ避ける？
次の場合は別の形にする。正確な長さを必要とする緻密な定量的比較
誰が作り、広めた？
Rough.js は、オープン Web に制御可能なスケッチ レンダリングをもたらしました
何を符号化する？
注意の合図としての不完全なストロークとフィル
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
Rough.js アノテーションは注意の合図としての不完全なストロークとフィルとして値を載せます。Rough.js は、オープン Web に制御可能なスケッチ レンダリングをもたらしました。
業務報告・広告・課題では「説明者のハイライト、広告コンセプトのフレーム、教育用コールアウト」に向く。「正確な長さを必要とする緻密な定量的比較」のときは別の形を選ぶ。
ソフト
- Rough.js — スケッチ スタイルのキャンバス/SVG プリミティブ - MIT。 · MIT · github.com/rough-stuff/rough
- Rough Notation — 下線とボックスをアニメーション化して強調します。 · MIT · github.com/rough-stuff/rough-notation
- Excalidraw — ストロークではなくシーンが必要な場合の完全なスケッチ アプリ。 · MIT · github.com/excalidraw/excalidraw
- Fabric.js — カスタム アノテーターを構築する場合のキャンバス オブジェクト モデル。 · MIT · github.com/fabricjs/fabric.js
- Callout SVG — スケッチノイズのないクリーンなティーチングコールアウト。 · 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 を尊重。
Rough.js アノテーション: 注意の合図としての不完全なストロークとフィルを守り、「正確な長さを必要とする緻密な定量的比較」のときは別の図を選ぶ。