Section Composer：Webページの構成を設計・出力
ヒーロー（主見出し）、特徴、事例、料金、よくある質問、CTA（行動を促す導線）など13種類のセクションを並べ、文章・見出し・色や余白の設計値・品質を1つのプロジェクトで管理し、HTMLやWordPress向けの8形式へ変換します。
ARCHIVE
使用技術: CSS
CSS Filterエディター
画像またはHTMLへ複数のfilterを適用し、順番、before・after、ローカル画像を比較できます。
フロントエンド・コンポーネントStudio
カード、見出し、バッジ、通知、フォーム、表、Accordion、Tabs、Navigation、Heroを編集します。
Section Composer: Design and export complete web pages
Compose thirteen semantic page sections, manage content, headings, design tokens, and quality in one local project, then export eight HTML and WordPress implementation formats.
CSS Filter Editor
Apply multiple filters to an image or HTML element and compare effect order, before/after states, and local uploads.
Frontend Component Studio
Build cards, headings, badges, notices, forms, tables, accordions, tabs, navigation, and hero sections.
GSAP Timeline & Scroll Story Studio：動きを設計・検証・出力
GSAP TimelineとScrollTriggerの時間軸・スクロール軸を同じAnimation Projectで可視化し、position parameter、label、callback、stagger、pin、scrub、reduced motionを検証して9形式へ出力します。
backdrop-filterエディター
ガラス表現などの背面filterを編集し、背景、透明度、fallback、ブラウザ対応を同時に確認します。
レスポンシブ・レイアウトStudio
Flexbox、Grid、Subgrid、Container Queries、clamp()を、3つの画面幅とresize canvasで設計します。
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 Backdrop Filter Editor
Edit glass-like backdrop effects while checking backgrounds, opacity, fallbacks, and browser support.
Responsive Layout Studio
Design Flexbox, Grid, Subgrid, Container Queries, and clamp() layouts across three viewport previews.
Accessibility Studio：WCAG 2.2の検査・修正・手動確認
HTMLとCSSをブラウザ内の隔離環境で解析し、WCAG 2.2 Level A・AAを基準に、証拠付きの指摘、安全な修正候補、人が確認する項目、再監査、12形式のレポートを1つのAudit Projectで管理します。
CSS三角形・Shapeジェネレーター
360度の三角形をborder方式とclip-path方式で作り、吹き出し、矢印、装飾用HTMLを出力します。
In-viewアニメーションビルダー
Intersection Observerで表示領域への進入を検知し、方向、距離、threshold、rootMargin、staggerを調整します。
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 Triangle and Shape Generator
Create 360-degree triangles with border or clip-path techniques and export markup for arrows, callouts, and decoration.
In-view Animation Builder
Build Intersection Observer reveals with direction, distance, threshold, root margin, stagger, and cleanup.
Responsive Layout Studio
Flexbox、Grid、Container Queries、clamp()を使ったレイアウトを、3つの画面幅で比較しながら作ります。
Responsive Layout Studio
Build Flexbox, Grid, Container Query, and clamp() layouts while comparing three responsive widths.
WordPress CSS Studio
追加CSS、ブロックの追加クラス、Block Style Variation、theme.jsonなど、WordPressへ安全に反映できる形式で出力します。
WordPress CSS Studio
Export safe WordPress implementations for Additional CSS, block classes, Block Style Variations, theme.json, and per-block stylesheets.
CSS Doctor：CSSが効かない・崩れる原因を診断
HTMLとCSSをブラウザ内だけで解析し、カスケード、横はみ出し、sticky、z-index、WordPress追加CSSなどの原因を根拠付きで診断します。
CSS Doctor: Diagnose and repair HTML/CSS
Analyze HTML and CSS entirely in your browser, then diagnose cascade conflicts, overflow, sticky positioning, z-index, WordPress CSS, and more with evidence.
Design Token Studio：色・文字・余白を6形式へ変換
色、文字、余白、角丸、影、モーションを意味付きのデザイントークンとして管理し、light・darkを検証してCSS、Tailwind、WordPress theme.jsonなど6形式へ変換します。
Design Token Studio: Build, validate, and export design tokens
Manage color, type, spacing, radius, shadow, and motion as semantic design tokens, validate light and dark modes, and export six implementation formats.
Visual CSS Studio
背景、グラデーション、枠線、影、フィルター、2D・3D変形、状態を1つの要素へ重ね、実案件向けのCSSを作る統合Studioです。
Visual CSS Studio
Combine backgrounds, gradients, borders, shadows, filters, 2D/3D transforms, and component states in one production-oriented CSS studio.
Component Studio
ボタン、カード、見出し、バッジ、フォーム、表などを、HTML構造・状態・アクセシビリティまで含めて組み立てます。
Component Studio
Build buttons, cards, headings, badges, forms, and tables with semantic HTML, states, and accessibility checks.