Tweakpane

パラメータの微調整と値の変化の監視を行うコンパクトなペイン

Summary

クリエイティブコーディングや WebGL での値の調整に向くコンパクトな GUI ライブラリ。dat.GUI の現代的な後継として広く使われている。

依存関係なしで動き、Number / String / Boolean / Color / Point を直接バインドできる。Folder、Tab、Button などの UI 要素と、Slider、List、Separator といったブレードを組み合わせてパネルを構成する。

値の変化を時系列で見るグラフモニタも備え、バッファサイズや更新間隔を調整できる。テーマ変更とプラグインシステムで拡張できるので、デザイン要件に合わせて見た目と機能を寄せやすい。

Three.js のシーンや GLSL シェーダーのパラメータ操作、リアルタイムなオーディオ・ビジュアル系の制作で重宝する。

URL: https://tweakpane.github.io/docs/DATE: 2026年5月5日

関連リソース

珍しいアニメーション付きReactコンポーネントの無料・オープンソースなレジストリ。Tailwind CSS、Motion、shadcn CLIで作られていて、コピペして自分のコードにできる。

サイト、Webアプリ、モバイル、コンポーネント、フローのデザインチェックリスト集。細部まで確認して、より良いものを出す。

クリック直後の0.5秒を扱うReact向けマイクロインタラクション集。54個のコンポーネントを、部品の種類ではなく人が何の最中かで10セクションに分類。ソースをコピーして使い、依存はmotionだけ。

デザインのScopeを、
もっと広げよう。

noteメンバーシップで、デザインの深掘り記事を毎週配信。

チームへのデザイン導入・研修もご相談ください。