HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI
Post on:2026年5月25日
sponsorsr
HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。
各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促すアクションが加えられ、フォームには息吹が与えられます。
AliveUIの特徴
AliveUIは、モーションを最優先にしたCSSのフレームワークです。WebサイトやスマホアプリのUIインターフェイスは視覚的に構造化されていますが、時間的な動きには乏しいのが現状です。
AliveUIはclassを一つ加えるだけで、あらゆる要素にモーション、奥行き、インタラクションを与えて、ユーザーインターフェイスに息吹きを与えます。
AliveUIの特徴は、下記の通り。
- Tailwind CSSのクローンではありません（ただしclass名は意図的に互換性を持たせています）。
- アニメーションの遊び場ではありません。モーションは構造的なプリミティブで、装飾ではありません。
- コンポーネントライブラリではありません。3つのプリミティブがあり、ユーティリティと組み合わせて使用できます。
- カラーパレットに制限はありません。設定で任意のカラーを使用できます。
- MITライセンスで、商用プロジェクトでも無料で利用できます。
AliveUIでは、以下のデザインルールに基づいています。
- ビューごとに主要なアニメーションは、一つだけ。
- AliveUIのモーションモデルは派手さではなく、穏やかな動きが特徴です。
- 無限ループ、視差効果、スクロールによるカオスな動きは一切ありません。
- モーションの動作は深度によって決まります。
d1は色の変化、d2は高さの変化、d3は登場の変化を表します。
AliveUIには、3つの深度レベル（d1, d2, d3）が用意されています。深度は視覚的な要素だけでなく、動きの挙動も制御します。
|
1 2 3 4 5 6 7 8 |
<!-- d1: base surface — カラーの変化のみ --> <div class="d1 bg-white p-6 rounded-xl">...</div> <!-- d2: elevated interactive — マウスオーバー時に標高とスケールを表示 --> <div class="d2 bg-white p-6 rounded-xl">...</div> <!-- d3: floating layer — 濃いシャドウ、登場アニメーション --> <div class="d3 bg-white p-6 rounded-xl">...</div> |
深度コンテキストは、CSSのカスタムプロパティを介してDOM全体に伝播します。カラーや不透明度を扱うすべての子ユーティリティは、適切な持続時間とイージングでトランジョンがおこなわれます。transition-colors duration-200のような記述は不要です。
|
1 2 3 4 5 6 |
<!-- bg-blue-500はｍd2トランジション内で自動表示 --> <div class="d2 rounded-xl p-4"> <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> Automatically animated </button> </div> |
AliveUIのデモ
デモページでは、AliveUIの実際の動作を確認できます。単一classの使用から完全なUI構成まで、ビフォーアフターで比較もできます。デモページには、6種類のUIパターンとすぐに使える3種類のテンプレートが用意されています。
UIパターンでは、カード、モーダル、スタック、グリッド、リスト、ボタングループの6つです。
たとえば、下記のカードのデモではclass="alive-card d2"をラッパーのdivに追加するだけで、ホバー時のリフト、シャドウ、スケールの効果を与えます。
デモページ: UIコンポーネント
テンプレートは、ダッシュボード、ヒーロー、サインアップフォームの3つです。
デモページ: テンプレート
また、すぐに使えるページレイアウトのテンプレートも用意されています。AliveUIを使用して実装されたフルページのテンプレートで、ブラウザで表示して動作を確認してみたり、コードをダウンロードしたり、AIコーディングエージェント用の構造化されたプロンプトをコピーしたりできます。
たとえば、ランディングページのテンプレート。AliveUIではアニメーションで動くのは、ビューに対して一つだけです。あちこち動いていると気が散って、何が重要なのか分からなくなります。
AliveUIの使い方
AliveUIは、Vite、Next.js、Astro、Webpackなど、PostCSSを使用するあらゆるツールに対応しています。また、CLIを使用すればビルド手順を完全に省略することも可能です。
|
1 |
npm install @alivecss/aliveui |
PostCSSのプラグインとして使用する場合は、postcss.config.jsに下記を記述します。
|
1 2 3 4 5 6 7 |
module.exports = { plugins: { '@alivecss/aliveui': { content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'], }, }, } |
あとは、CSSエントリファイルにインポートします。
|
1 2 |
@aliveui base; @aliveui utilities; |
CLIの場合は、下記の通り。
|
1 2 3 4 5 6 7 8 |
# Create config npx @alivecss/aliveui init # Build once npx @alivecss/aliveui build # Watch mode npx @alivecss/aliveui watch |
設定ファイルaliveui.config.jsに下記を記述します。
|
1 2 3 4 5 6 7 8 |
/** @type {import('@alivecss/aliveui').AliveUIConfig} */ module.exports = { content: ['./src/**/*.{html,js,jsx,ts,tsx}'], output: './public/alive.css', theme: { // optional overrides }, } |
AliveUIには、必要なユーティリティが揃っています。class名はTailwind CSSの命名規則に互換性を持たせています。
奥行きと動きのclass名。
|
1 2 3 4 |
d1 d2 d3 motion-fast motion-normal motion-slow motion-none ease-standard ease-emphasized ease-exit alive-enter alive-enter-fade alive-enter-scale |
レイアウトのclass名。
|
1 2 3 4 5 6 7 8 9 |
flex inline-flex grid block hidden contents flex-row flex-col flex-wrap flex-nowrap flex-1 flex-auto flex-none items-start items-center items-end items-stretch justify-start justify-center justify-end justify-between grid-cols-{1-12} grid-rows-{1-6} col-span-{n} row-span-{n} gap-{size} gap-x-{size} gap-y-{size} relative absolute fixed sticky |
スペースのclass名。
|
1 2 3 |
p-{size} px-{size} py-{size} pt-{size} pr-{size} pb-{size} pl-{size} m-{size} mx-{size} my-{size} mt-{size} mr-{size} mb-{size} ml-{size} top-{size} right-{size} bottom-{size} left-{size} inset-{size} |
カラーのclass名。
|
1 2 3 |
bg-{color}-{shade} text-{color}-{shade} border-{color}-{shade} ring-{color}-{shade} fill-{color}-{shade} stroke-{color}-{shade} slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose |
深度コンテキスト内に存在するすべてのカラーユーティリティ（d1）はd2、そしてd3と正しいモーションタイミングで自動的に遷移します。
タイポグラフィのclass名。
|
1 2 3 4 5 6 7 8 9 10 |
text-{xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl} font-{thin|extralight|light|normal|medium|semibold|bold|extrabold|black} font-{sans|serif|mono} leading-{tight|snug|normal|relaxed|loose} tracking-{tighter|tight|normal|wide|wider|widest} text-left text-center text-right text-justify uppercase lowercase capitalize underline line-through no-underline truncate whitespace-nowrap italic |
サイズのclass名。
|
1 2 3 4 5 |
w-{size} w-full w-screen w-auto w-min w-max w-fit w-1/2 w-1/3 w-2/3 w-1/4 w-3/4 h-{size} h-full h-screen h-auto min-w-{size} max-w-{size|xs|sm|md|lg|xl|2xl|...} min-h-{size} max-h-{size} |
エフェクトのclass名。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
opacity-{0|5|10|20|25|30|40|50|60|70|75|80|90|95|100} shadow-{sm|DEFAULT|md|lg|xl|2xl|none} rounded-{none|sm|DEFAULT|md|lg|xl|2xl|3xl|full} border border-{0|2|4|8} border-{t|r|b|l} ring ring-{1|2|4} blur-{sm|DEFAULT|md|lg|xl} backdrop-blur-{sm|DEFAULT|md|lg|xl} scale-{0|50|75|90|95|100|105|110|125|150} z-{0|10|20|30|40|50} overflow-{hidden|auto|scroll|visible} cursor-{pointer|default|not-allowed|wait|text|grab} select-{none|text|all} |
その他バリエーションのclass名。
|
1 2 3 4 |
hover: focus: focus-visible: active: disabled: dark: md: lg: xl: 2xl: first: last: odd: even: group-hover: (requires class="group" on parent) |
これらのclass名を使用してコンポーネントを実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Card --> <div class="alive-card d2"> Content here </div> <!-- Button variants --> <button class="alive-button alive-button-primary">Primary</button> <button class="alive-button alive-button-secondary">Secondary</button> <button class="alive-button alive-button-ghost">Ghost</button> <!-- Button sizes --> <button class="alive-button alive-button-primary alive-button-sm">Small</button> <button class="alive-button alive-button-primary alive-button-lg">Large</button> <!-- Stack layout --> <div class="alive-stack alive-stack-v gap-4"> <div>Item one</div> <div>Item two</div> </div> |
さらに詳しくは、ドキュメントをご覧ください。
sponsors
