CDN経由で使えるUI/UXライブラリ集

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

x-dataや@clickなどのHTML属性だけで、Vueに似た宣言的リアクティビティを実現。仮想DOMなし、JSXなし、ビルドツールなし。約8KB(gzip)。

用途：タブ・ドロップダウン・モーダル開閉・簡易フィルタリングなど「画面内で完結する状態管理」

<script src="https://unpkg.com/htmx.org@1.9.12"></script>

hx-get/hx-postなどの属性でAjaxリクエストを発行し、サーバーが返すHTMLフラグメントをそのままDOMに差し込む「HTML over the wire」方式。

用途：サーバー側でHTMLを生成できる構成のページ更新・無限スクロール・フォーム送信

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({startOnLoad:true});
</script>

テキスト定義（graph TD A-->Bなど）を書くだけでSVGを自動描画。フローチャート以外にシーケンス図・ガントチャート・状態遷移図・マインドマップにも対応。

用途：ドキュメント的な静的フロー図、設計図、決定木

<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>

ドラッグ&ドロップでノードを配置・接続できるインタラクティブなノードエディタ。new Drawflow(el)で即座に使える。

用途：ワークフロービルダー、パイプライン設計UI

<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>

Drawflowよりさらに軽量な、ドラッグ&ドロップのブロック連結ライブラリ。

用途：シンプルな条件分岐・自動化フローの組み立てUI

<script type="module">
  import { animate, stagger } from "https://cdn.jsdelivr.net/npm/motion@latest/+esm";
</script>

motion.dev。旧Framer Motionのvanilla/DOM API。ビルド不要・ESM importのみで、フェード/スタガー/スプリング/レイアウトアニメーション/スクロール連動まで一通りカバーする。実装例はmotion.dev/examplesを参照。

用途：タブ切り替え時のコンテンツ登場演出、要素のスタガー表示、hoverのスプリング演出

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>

業界標準のアニメーションエンジン。CSS・SVG・Canvas・DOM属性など何でもアニメーション可能。

用途：数値カウントアップ、複雑なタイムライン制御が必要な場合

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

data-aos="fade-up"のような属性を要素に付けるだけでスクロール出現アニメーションが付く、設定不要の手軽さが売り。

用途：Motion導入前の軽量代替

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

alert()/confirm()の置き換え。美しくアクセシブルなモーダルダイアログをSwal.fire({...})だけで表示。

用途：削除確認、保存完了通知、フォームバリデーションエラー表示

<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

画面端に一定時間だけ表示される軽量トースト通知。

用途：「保存しました」「エラーが発生しました」等の非モーダル通知

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Popper.js(位置計算エンジン)を基盤にした、高機能なツールチップ/ポップオーバー/ドロップダウンライブラリ。

用途：チャートの補足説明、KPIカードの用語解説、ドロップダウンメニュー

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

依存ゼロの軽量な日付/期間/時刻ピッカー。flatpickr("#el", {...})の1行で初期化。

用途：ダッシュボードの期間フィルタ（例:「過去7日間」セレクタ）

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

jQuery不要、依存ゼロのドラッグ&ドロップ並べ替えライブラリ。new Sortable(el, {...})だけでリストの並べ替えが可能に。

用途：カンバンボード、優先順位の並べ替えUI、ウィジェットの配置換え

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

タッチ操作・ハードウェアアクセラレーションに対応した、モバイル最適化済みの定番スライダー。

用途：画像ギャラリー、複数KPIカードの横スクロール表示

<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet">

ビルド不要でCDNから使える前提で公式に設計されている、モダンなWYSIWYGエディタ。

用途：コメント欄、メモ機能、簡易CMS的な入力欄

<script type="module">
  import { createIcons, icons } from "https://cdn.jsdelivr.net/npm/lucide@latest/+esm";
  createIcons({ icons });
</script>

シンプルで線が細く、ダッシュボードUIと相性の良いアイコンセット。<i data-lucide="check"></i>で利用。UMDグローバル版(lucide@latest単体scriptタグ)は「infinity」アイコン名がJS予約語Infinityと衝突して構文エラーになるため使わない。必ずESM版をimportする。

用途：ボタン内アイコン、KPIカードのアクセントアイコン、あらゆるUI用途の線アイコン

<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/all.min.js"></script>

最も普及しているアイコンライブラリ。種類が非常に豊富。

用途：汎用アイコン全般

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

ソート・フィルタ・行内編集・仮想スクロールまで含む本格的なデータグリッド。

用途：大量データの一覧表示、CSVライクな編集画面

<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

Tabulatorより軽量。ソート・検索・ページネーションに特化。

用途：シンプルな一覧表示、検索付きリスト

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

画像・動画・iframeに対応した軽量ライトボックス。

用途：スクリーンショット・製品画像の拡大表示

https://cdn.jsdelivr.net/npm/photoswipe

より高機能なタッチ対応ギャラリー/ライトボックス。

用途：モバイル込みの本格的な画像ギャラリー

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
  }
}
</script>
<script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

UMDのscriptタグではなく、公式が正式にサポートしているimport map方式でCDNから読み込む。

用途：回転する3Dロゴ、データの3D散布図、パーティクル背景演出

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">

JS不要、CSSクラス(hvr-growなど)を付けるだけの110種類以上のホバーエフェクト集。

用途：ボタン・カード・ロゴのホバー演出

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1/dist/confetti.browser.min.js"></script>

confetti()の1行で紙吹雪演出。クリック座標を起点にした発火や、色・角度・重力まで細かく制御可能。

用途：目標達成・保存完了・KPI達成時などの「お祝い」演出