課題:なぜ今、軽量Web Componentsが刺さるのか
ReactやVueのUIキットを選定するたびに、バンドルサイズ・依存関係の連鎖・ビルド設定の複雑さに悩まされた経験がある開発者は多いと思います。特にランディングページやフォーム中心の小〜中規模プロダクトでは、フレームワーク込みのUIライブラリはオーバースペックになりがちです。
そんな中、フレームワーク非依存のWeb Componentsベースのライブラリが再評価される流れがあります。今回紹介する「Jelly UI」(jelly-ui.com)は、その流れに乗った上で「soft-body physics(柔らかい物理演算)」という独自の見た目を打ち出しているのが特徴です。公式サイトの記述をもとに、何ができるライブラリなのかを整理します。
結論の先出し
Jelly UIは、依存関係ゼロ・script type="module"タグ1本で読み込める40種類のカスタム要素からなるWeb Componentsライブラリです。公式サイトによれば、ダークモード・RTL(右から左言語)対応・WCAG AA準拠のカラートークンが標準で組み込まれており、フォームコントロールに「soft-body physics」という柔らかい挙動の演出を加えている点が最大の差別化ポイントとみられます。MITライセンスで、bmson.comという個人(または小規模チーム)によってオープンに開発されているとのことです。現バージョンはv1.0です。
詳細解説:Jelly UIとは何か
公式サイトのトップには "It's okay to be a little jelly" というキャッチコピーが掲げられており、"Real form controls meet soft-body physics" と説明されています。つまり、見た目だけのスキンではなく、実際に機能するフォームコントロール(ボタン、テーマ切り替えなど)に、押した時にぷるっと沈み込むような物理挙動を持たせたコンポーネント群、という位置づけです。
UIライブラリの多くはCSSトランジションやイージング関数で「それっぽい」動きを作りますが、Jelly UIは名前の通りsoft-body(柔体)物理演算そのものをコンポーネントの挙動に組み込んでいる点が特徴的です。ただし、物理演算エンジンの詳細(質量・減衰係数の設計など)については公式サイトの抜粋からは確認できず、この記事では「〜とみられる」の範囲にとどめます。
詳細解説:スペックと特徴
公式サイトが明示している数値・仕様は以下の通りです。
- 依存関係:0(dependency-free)
- カスタム要素数:40
- 導入方法:scriptタグ1本
- アクセシビリティ:WCAG AA準拠のカラートークンを内蔵
- ダークモード:標準搭載(mode="auto"属性で切り替え可能)
- 国際化対応:RTL(右横書き言語)サポート
- ライセンス:MIT
- バージョン:v1.0
この中で特に注目したいのがWCAG AAトークンとダークモードが「ビルトイン」である点です。一般的なUIライブラリ導入では、アクセシビリティ対応やダークモード対応は後付けで設計・実装コストがかさむ部分ですが、Jelly UIはこれらをコンポーネント側の初期状態として持たせているとのことです。実際のコントラスト比の検証データなどは公式サイトの抜粋には含まれていないため、導入検討時は自プロジェクトのカラーパレットと組み合わせた際の実測確認が必要になると考えられます。
詳細解説:導入コード例
公式サイトに掲載されているサンプルコードは以下の通りです。
<!-- index.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>日本の開発者にとっての意味・使い所
ビルドツール不要、npm installも不要で、CDN配信されているpackage.jsを読み込むだけという構成です。jelly-themeというラッパー要素でダークモード(mode="auto")の制御を行い、jelly-buttonのようなカスタム要素にvariant属性でスタイルバリエーションを指定する設計になっているとみられます。この「theme要素で全体を包み、中に個別コンポーネントを配置する」構造は、Web Components系ライブラリでよく見る設計パターンです。
日本国内の受託・自社サービス開発の現場では、以下のようなケースでJelly UIのような軽量Web Componentsライブラリが選択肢に入ってくると考えられます。
- フレームワーク非依存の管理画面・社内ツール:jQueryからの移行やLP的な小規模フォームで、React/Vueを導入するほどでもない場面では、scriptタグ1本で完結する構成は運用コストの面でメリットがあるという声が多いです。
- 多言語対応が必要な海外向けプロダクト:RTL対応が標準搭載されている点は、アラビア語圏など右横書き言語を含む多言語展開を検討するプロダクトにとって、追加実装の手間を減らせる可能性があります。
- アクセシビリティ対応の初期担保:WCAG AAトークンが組み込まれていることで、デザインシステム構築の初期段階でコントラスト比の作り込みコストを下げられる可能性があります。ただし前述の通り、実際のコントラスト実測は自前で確認するべき部分です。
一方で、40種類という要素数は一般的なUIキット(Material UIやAnt Designなど)と比べると絞り込まれた印象で、複雑な業務システムのフルカバーは想定されていないとみられます。ランディングページやシンプルなSaaSのフォーム周りなど、スコープを絞った採用が現実的な使い所と言えそうです。また、v1.0というバージョン表記から、本番採用前にはIssueの状況やメンテナンス頻度を確認しておくのが無難だと考えられます。
まとめ
Jelly UIは、依存関係ゼロ・1スクリプトタグ導入というシンプルさと、soft-body physicsという独自の触感演出を掛け合わせたWeb Componentsライブラリです。公式サイトの情報からは、WCAG AA・ダークモード・RTLが標準搭載されている点が明確な強みとして読み取れます。フル機能の業務システムというよりは、LPやシンプルなフォームUIでのデザイン差別化を狙う場面で検討価値のある選択肢だと言えそうです。導入を検討する際は、実際のコントラスト比やパフォーマンス、v1.0段階でのメンテナンス継続性を自分の目で確認することをおすすめします。