#UI 10ツール
「UI」タグが付いた10個のツール一覧です。
ツール一覧 (10件)
CSSボタンデザイン集👑
70種類以上のCSSボタンデザインからクリックで選択しプレビューしながら作成。シンプル/グラデ/影付き/3D/アウトライン/アニメ/アイコン付/シャイン/ニューモ/グラスモーフィズム等。色・テキストをライブ編集してHTML/CSS・Tailwind・Bootstrap・Material 3の4形式で即コピー。
CSS フレームワーク プレイグラウンド👑
Tailwind CSS v4 / Bootstrap 5 / Bulma の3大CSSフレームワークを同じUI (ボタン・カード・フォーム) で比較できるプレイグラウンド。各フレームワークのCDN・基本クラス・特徴・サンプルコードを1ページに集約。
UI コンポーネントライブラリ比較
shadcn/ui / Material UI / Mantine / Chakra UI / Ant Design の5大Reactコンポーネントライブラリを概要・特徴・サンプルコード・採用例で比較。プロジェクトに合った選定の参考に。
フォームデザイン集👑
ログイン/問合せ/ニュースレター/検索など20種類以上のフォームデザインからクリック1つで選択。シンプル/モダン/グラスモーフィズム/ニューモ等を完全ブラウザ内でプレビュー、HTML/CSSコードを即コピー。
カードデザイン集👑
プロフィール/商品/ブログ/価格表/通知など20種類以上のカードデザインから選択。シンプル/モダン/グラデ/影付き/グラスモーフィズム等。HTML/CSSコードを即コピー。
CSSアニメーション生成 (keyframes)👑
フェードイン/スライドイン/バウンス/回転/拡大縮小/シェイクなど30種類以上のCSS @keyframes アニメーションをライブプレビュー&コード即コピー。継続時間・遅延・イージング調整可。
スクロール連動アニメ (AOS)
AOS (Animate On Scroll) ライブラリ向けのHTML属性を生成。スクロールで要素が出現するアニメ20種類以上をプレビューしながら設定可能。
GSAP コードジェネレータ
GSAP (GreenSock) で人気の演出パターン (フェード・スライド・スタガー・モーフ等) のJavaScriptコードを生成。プレビュー&コピーで即実装。
Animate.css コードジェネレータ👑
Animate.css ライブラリ向けのHTMLクラスを生成。フェード・スライド・バウンス・フリップ等の定番アニメーション40種類以上をプレビューしながら設定。継続時間・遅延・繰り返し回数も調整可能。
Hover.css コードジェネレータ
Hover.css ライブラリ向けのHTMLクラスを生成。マウスホバー時のエフェクト40種類以上 (拡大・回転・影・カラー変化・ボーダー演出等) をプレビューしながら選択可能。