Drawably、マウントごとに手描きスケッチを生成するUIコントロールを公開

Drawably: Hand-Drawn UI Controls

Drawablyは、ボタンやチェックボックスなどのUIコントロールを手描き風に描画するJavaScriptライブラリ。マウントごとにシード付き乱数で新鮮なペンスケッチを生成し、ストロークがアニメーションのように揺らめく。依存関係ゼロで、gzip圧縮されたJSは約9KB、スタイルシートは3KB。Reactラッパーも用意され、非同期処理用の状態機械やテキスト装飾、複合コンポーネントもサポートする。

Every mount generates a fresh pen sketch from seeded randomness, and the stroke boils like an animated doodle.
  1. voidUpdate

    たぶん自分は古臭い人間なんだろうけど、普通「手描き」と書いてあったら、機械描きじゃなくて手で描いたものを期待するよな

  2. robertlagrant

    これは d2lang の sketch モード[0]を思い出させる。自分はあれがすごく好きだ。コメント用に図を公開したいけど、あまりに公式っぽく見えると誰かにパクられて、自分の名前をくっつけて顧客に約束されちゃう、みたいなのを防ぎたいときに最高なんだよ。誰とは言わないけど。

    [0] https://d2lang.com/tour/sketch

  3. BariumBlue

    なんかすごくインクの染みっぽいというか、ペンすらまともに持てない人が線ごとに棒で止めながら描いて、間違いを直そうと各線の一部を描き直したみたいな感じ。小学生の落書きみたいに見える。

    自分は Excalidraw の見た目と感触のほうが好きだな。線ごとに滑らかでほぼまっすぐな線が数本、という感じで、素早くて不完全なツールを使いこなしつつ意図的にうまくやっているように見える。

この日のほかの記事

2026-09-14