イベント概要
- 開催日:2025/12/3
- テーマ:「ノブ」をテーマにUIを作って持ち寄る"UI大喜利”
- 参加人数:22人(オフライン：8人/オンライン：14人)
- イベントページ:https://studio.connpass.com/event/373723/
レポート
2025年12月3日に、Studioオフィスで、テーマに合わせたUIを作成し持ち寄る「UI LAB#1」を開催しました。
これまではStudio社内に限定して開催していたUI Lab。今回からは社外のUIラバーにも一緒に楽しんでいただきたいと思い、社外公開することにしました。
今回の記事では、UI LAB#1の様子を、参加者のみなさんが実際に作ってくれたUIとともにレポートします。
#1のテーマは「ノブ」のUI
UI LABはUIの可能性を追求し、批評は一切なしで、純粋にUIを楽しむための遊び場です。
過去にはStudio社内で開催し、メンバーが思い思いのUIを持ち寄って楽しみました。
【イベントレポート】UI大喜利「カルーセルUI」UI Lab #0
初の社外公開イベントとなった#1のテーマは「ノブ」。
辞書によると……ノブ(英：knob)-主に、ドアや機器などの操作部分を指す。- と定義されています。
想定していたのはボリュームを調整するようなツマミタイプのノブですが、拡大解釈もOKとし、参加者の自由な発想を期待していました。
UI Gallery
ここからは、今回のUI Labで持ち寄られたUIを紹介していきます。
Katashinさん
小気味よいクリック音が印象的で、操作していて気持ちの良い UI でした。全体的にクールで洗練されたデザインにまとめられており、ポインタとの距離に応じて編集項目が切り替わるインタラクションも特徴的です。
さらにタッチデバイスにも対応しており、隙のないUIです！
こちらから試せます：
hashrock
DAWなどのノブ操作が統一されていないことが気になって作ったノブUIです。上下ドラッグや円周上ドラッグなど、プラグインによって操作がまちまちで地味にストレスが溜まります。
また、変わり種として3D球ノブも作りました。
他にも、ガリの発生する劣化ノブUIなどを作りました。こちらから試せます：
ゆきさん
一見するとシンプルなノブ UI ですが、実際にドラッグしてみると会場から驚きの声が上がりました。画面を広く使って詳細な値を選べるため、実用性も高い設計になっています。
一方で、本人いわく画面端には配置しづらく、置き場所を選ぶとのことでした。作ってみるといろんなことが見えてきますね！本人の言葉によりますと「ノブはロマン」とのことでした。
いいづかやまとさん
「ノブ」のつまみをひねる動きの拡大解釈として、歯車状のスクロールUIを作って来てくれました。柔らかい印象のかわいいデザインで、Webサイトのかわいいアクセントになっています。ダブルタップで歯車の位置・大きさや歯の数を変えたりと、サイト制作者観点でもエディットしやすい仕組みになっています。
実際に触ることができるページも公開されています。
https://yamatoiizuka.github.io/rap-scroll/
Shintaro Nakajimaさん
3D 形状作成ツールに実装されたノブ UI を紹介してくださいました。リッチで存在感のある見た目が特徴で、画面下部に大きな目盛りが表示されるなど、独自性のある構成になっています。
Saina(さいな)さん
自作の VJ アプリのデモを披露してくださいました。Novationの物理ノブ機材との連携（WebMIDI）はまさに現場の機材という感じでかっこいいですね！
mimozさん
https://tremolo-ui-sb-react.vercel.app/?path=/docs/components-knob-root--docs
オーディオアプリケーション向けのUIライブラリ tremolo-ui のStorybookデモを見せてくださいました。JUCE Framework上で使うライブラリだそうです。オーディオアプリケーションもWeb技術で書く時代なんですね！
wadakatuさん
回していくと「シンギュラリティ」が起きるという、強烈なインパクトのノブ UI を持ち込んでくださいました。言葉で説明するよりも、ぜひ実際に触って体験してほしいです！
他にも、ルービックキューブノブ（？）など、ぶっ飛んだUIを作ってきてくれました！
https://wadakatu.github.io/ui_lab/knob/
atsushienoさん
イメージストリップを使ったノブ UIフレームワーク「KnobMan」の紹介をしてくださいました。オーディオアプリケーションでは広く使われているそうで、atsushienoさんは Jetpack Compose への移植ライブラリを制作されているそうです。ミャクミャクくんのような見た目のノブも楽しいですね！
https://github.com/atsushieno/compose-audio-controls/
イベントを振り返って
少しお題を絞りすぎたかな・・・？と思いましたが、予想以上に多様なノブが集まって、GUI好きとしては感無量でした。
次回は「カラーピッカー」をテーマに2月27日（金）に開催予定
次回のUI Labは、2026年2月27日（金）に開催予定です。今回と同様に、オフライン・オンラインのハイブリッド形式で実施します。
テーマは 「カラーピッカー」。色を選ぶ行為を深堀りしてワイワイ議論したいと思っています！
作り途中のUIや、検証中のアイデアでも大歓迎です。発表・見学どちらの参加も可能ですので、気軽にご参加ください。
Web制作を、ノーコードで。 ノーコードWeb制作プラットフォーム「Studio」開発で培った技術的な知見を投稿します。 Unleash Creativity.
Discussion