さまざまなUI要素をゼリーみたいにぷるるんとした質感にする、かわいいUIコンポーネントライブラリ -Jelly UI
Post on:2026年10月21日
sponsorsr
Webサイトやアプリに使用されているさまざまなUI要素・UIコンポーネントをゼリーみたいにぷるるんとした質感にするライブラリを紹介します。
ボタンやアイコンをはじめ、フォームの入力欄やタブやカードなど、あらゆる要素をゼリーの質感にできます。
Jelly UIは、ゼリーみたいにぷるるんとした柔らかな触感を備えた、依存関係のないWebコンポーネントのライブラリです。すべてのUI要素・UIコンポーネントはソフトボディ（柔軟な物体）の物理挙動を融合させており、ダークモード、WCAG AA準拠のカラー・トークンを標準で備えています。
Jelly Themeはデザイントークンをサブツリーにスコープするテーマプロバイダーで、OSのテーマに合わせたり、ライトまたはダークモードにしたり、アクセントカラーの色を変更したりできます。
以下は、ダークモードに設定してみました。
Jelly UIには、Webサイトやスマホアプリで使用するさまざまなUI要素・UIコンポーネントが揃っています。かなりの数があるので、その中からいくつかピックアップして紹介します。
まずは、Jelly Button。クリックした箇所を中心に、柔らかなエフェクトが楽しめます。また、キーボード操作やスクリーンリーダーもサポートされています。
※デモページでエフェクトが再現されないときは、OSの視覚効果でアニメーション効果がオンになっているかご確認ください。ページ上部の「Motion」で一時的にオンにすることもできます。
単一のアイコン用にサイズ調整された、コンパクトな正方形または円形のソフトボディボタン。スクリーンリーダー向けにlabel属性が付けられています。
柔らかいゼリー状の表面にある一行のテキストフィールド。フォーカスを合わせるとぷるん揺れ、テキストを入力する度にその場所がぷるるん揺れます。
ここには掲載していませんが、ラジオボタンやチェックボックス、テキストエリアにもかわいいエフェクトが備わっています。
スライド式のゼリー状のタブバー、タブリストのセマンティクスと跳ね返るパネルを備えています。
ゼリー状の柔らかい表面を備えたカード。柔らかいクッションのように押し込まれ、ボタンのように機能します。
各UIコンポーネントはそのデザインとエフェクトを見ているだけでも楽しめ、ここで紹介したのはほんの少しです。
これらの実装方法は、ドキュメントが用意されています。
sponsors
