Accessibility Studio：WCAG 2.2の検査・修正・手動確認
HTMLとCSSをブラウザ内の隔離環境で解析し、WCAG 2.2 Level A・AAを基準に、証拠付きの指摘、安全な修正候補、人が確認する項目、再監査、12形式のレポートを1つのAudit Projectで管理します。
ARCHIVE
使用技術: JAVASCRIPT
Accessibility Studio: Audit, remediate, and document WCAG 2.2 checks
Audit HTML and CSS in an isolated local workspace, separate automated, assisted, and manual WCAG 2.2 A/AA checks, apply reversible safe candidates, re-audit, and export twelve evidence-aware formats.
CSSボタンビルダー
30種類以上のRecipeを基に、背景、枠、影、変形、hover、focus、active、disabled、スマートフォン幅を編集します。
CSS Button Builder
Customize backgrounds, borders, shadows, transforms, hover, focus, active, disabled, and mobile width from more than 30 recipes.
CSS Transition・Easingシミュレーター
36種類以上のeasing、cubic-bezier、時間、遅延、再生、逆再生、速度、任意位置を比較します。
CSS Transition and Easing Simulator
Compare more than 36 easings with cubic-bezier controls, duration, delay, playback, reverse, speed, and scrubbing.
CSS Keyframes Animation Studio
複数keyframeと要素trackを編集し、loop、alternate、delay、fill-mode、reduced motionを含むコードを作ります。
CSS Keyframes Animation Studio
Edit multiple keyframes and element tracks with loop, alternate, delay, fill mode, and reduced-motion output.
フロントエンド・コンポーネントStudio
カード、見出し、バッジ、通知、フォーム、表、Accordion、Tabs、Navigation、Heroを編集します。
Frontend Component Studio
Build cards, headings, badges, notices, forms, tables, accordions, tabs, navigation, and hero sections.
In-viewアニメーションビルダー
Intersection Observerで表示領域への進入を検知し、方向、距離、threshold、rootMargin、staggerを調整します。
In-view Animation Builder
Build Intersection Observer reveals with direction, distance, threshold, root margin, stagger, and cleanup.
GSAP ScrollTriggerビルダー
start、end、scrub、pin、stagger、markersを視覚的に調整し、npm版とscript版のコードを生成します。
GSAP ScrollTrigger Builder
Configure start, end, scrub, pin, stagger, and markers visually, then export npm and script versions.
GSAP Timeline & Scroll Story Studio：動きを設計・検証・出力
GSAP TimelineとScrollTriggerの時間軸・スクロール軸を同じAnimation Projectで可視化し、position parameter、label、callback、stagger、pin、scrub、reduced motionを検証して9形式へ出力します。
CSS Scroll-driven Animationビルダー
scroll()・view() timelineでスクロール連動アニメーションを作り、fallbackと対応状況を確認します。
GSAP Timeline & Scroll Story Studio: Design, validate, and export motion
Design GSAP timelines and ScrollTrigger stories in one Animation Project, validate position parameters, labels, callbacks, stagger, pin, scrub, and reduced motion, then export nine implementation formats.
CSS Scroll-driven Animation Builder
Build scroll-linked animations with scroll() and view() timelines, including fallbacks and support checks.
Component Studio
ボタン、カード、見出し、バッジ、フォーム、表などを、HTML構造・状態・アクセシビリティまで含めて組み立てます。
Component Studio
Build buttons, cards, headings, badges, forms, and tables with semantic HTML, states, and accessibility checks.
Motion Studio
CSS transition・keyframes、Intersection Observer、Web Animations API、GSAP、ScrollTriggerを同じ設定から比較・生成します。
Motion Studio
Compare and generate CSS transitions, keyframes, Intersection Observer, Web Animations API, GSAP, and ScrollTrigger from one scene.