ハクソク

世界を動かす技術を、日本語で。

Jelly UI: ネイティブHTMLフォームコントロールのためのソフトボディ物理シミュレーション

2026年7月21日原文(jelly-ui.com)

概要

Jelly UI は、依存関係ゼロのWeb Componentsライブラリ。 ソフトで触感的なUI を簡単に導入可能。 WCAG AA 準拠のカラートークンとダークモード、RTL対応。 40種類のカスタムエレメント を1つのスクリプトタグで利用可能。 導入や使い方がシンプルな点が特徴。

Jelly UIの特徴

  • 依存関係ゼロ で動作するWeb Componentsライブラリ
  • ソフトボディ物理表現 を取り入れた、柔らかい印象のUI実現
  • 実際のフォームコントロール として動作
  • ダークモード と 右から左（RTL） の言語サポート
  • WCAG AA レベルのアクセシビリティカラートークン内蔵
  • 40種類のカスタムエレメント 収録
  • 1つのスクリプトタグ 挿入のみで利用開始可能
  • 公式デモ や APIリファレンス も提供

主な導入方法

  • CDN経由 で以下のスクリプトタグをHTMLに追加

    <script type="module" src="https://jelly-ui.com/package.js"></script>

  • テーマ設定 やモード自動切替も可能

    <jelly-theme mode="auto">
  <jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>

利用シーン・メリット

  • デザイン性とアクセシビリティ 両立が必要なプロダクトUI
  • 軽量・高速 なWebサイトやアプリケーション
  • 依存ライブラリを増やしたくない 開発環境
  • 多言語対応 や ダークモード 必須なグローバル向けUI

公式リソース

  • デモショーケース や APIリファレンス へのリンクあり
    • Showcaseで実際の見た目や動作を確認可能
    • APIリファレンスで詳細な使い方やカスタマイズ方法を学習

まとめ

  • Jelly UI は、現代的なWeb UI開発に最適な、 依存関係ゼロ・高アクセシビリティ なWeb Componentsライブラリ

Hackerたちの意見

可愛いね（本気で言ってるから、皮肉じゃないよ）。それに、@media (prefers-reduced-motion: reduce)に優雅に対応してるのもいいと思う。ただ、デモサイトでは、ユーザーがシステム設定を変えずにオーバーライドできるようにした方がいいかも。もしくは、アニメーションが見れないってことを知らせてあげるとか。

└

あなたのコメントを読んでよかった。意図的に優雅に劣化することを見逃してて、壊れてると思ってた。設定したことをすっかり忘れてたから。

└

お知らせ：Appleメニュー > システム設定 > アクセシビリティ > モーション。こういうクールなデモが時々出てくるけど、いつも自分が動作軽減を設定してることを思い出すのにちょっと時間がかかる。その間、"何がそんなに大したことなの？"って思いながらクリックしてた。

このUIデザインシステムに物理的な要素が全然見当たらなくて困ってる。

└

ライブラリは、クライアントサイドの動作軽減設定を尊重してるね（アニメーション効果を全部無効にしてる）。

若かったらこれめっちゃ好きだっただろうな。今は、ローカルスタイルシート使ってこの手のものを排除するのに時間をかけてるか、ダークモードとかリーディングモードを使ってる。時代は変わったね。

└

何が起こっているか、何が変わっているかを強調するためにアニメーションフィードバックがあるのが好き。ネイティブコンポーネントはそれをうまくやらないことが多いからね。アニメーションは単なるアートじゃなくて、ちゃんとやればUXにとって本当に価値があるものだよ。

└

毎年くらい、ソフトウェアにもっと楽しさを求めるか、邪魔にならないようにしてほしいかで揺れ動いてる。

これ言うと失礼かもしれないけど、こんな風に動くフォームコントロールを誰が欲しがるんだろう？

└

私。

└

お菓子屋さん、アイスクリーム屋、子供向けのウェブサイト？

ウィンドウがちょっとラグいなと思って、何が起こってるのか掘り下げてみたんだ。このライブラリは、ページ上のすべてのコンポーネントで8ミリ秒ごとにRAFアニメーションループを実行してて、ドキュメント全体を再描画させてる。上のコメントはAIが生成したっぽいね：「一つの共有アニメーションフレーム：すべてのライブコンポーネントをステップさせ、アイドルの時は待機。」デルタは制限されてるから、バックグラウンドタブの一時停止が一気に大きなステップになることはない。 "JellyEngine"は、ポインターイベントだけでなく、ページ上のすべてのアクティブなコンポーネントのために毎フレーム再計算してるんだ。こういうのは普通、人間が気づいて「それやめて、ちょっとおかしいよ」と言うようなことだよね。

Hacker Newsで議論の続きを見る