← TCLabo / コンポーネントシミュレーター TOOL
TONE & MANNER:

カラー

コントラスト比 (WCAG 2.1)

ボタン (文字/背景): 1.0:1
判定: 判定中
本文 (文字/背景): 1.0:1
判定: 判定中

シェイプ

タイポグラフィ

シャドウ

ホバーパターン

ボタンバリアント

ホバーパターン比較 — ホバーして体験・気に入ったものを選んでください

① LIFT

BtoC / EC / 医療

② DARKEN

Apple / GitHub系 汎用

③ FADE

SNS / Twitter系

④ UNDERLINE

メディア / ブログ

⑤ BORDER REVEAL

Stripe / SaaS

⑥ SLIDE FILL

クリエイター / 受賞系

⑦ SWEEP

Framer / Linear系

⑧ GLOW

ゲーム / テック系

⑨ SCALE

EC / Pinterest

⑩ ARROW

Stripe / Figma

⑪ MAGNETIC

ポートフォリオ系

⑫ TEXT SPLIT

高級 / ブランド系

⑬ INVERT

Dribbble / Behance

⑭ 3D TILT

Apple製品ページ

⑮ RIPPLE

Google Material

⑯ SHAKE

ゲーム / エラー演出

⑰ DRAW BORDER

士業 / 高級感

⑱ FILL CENTER

クリエイター系

⑲ LINE THROUGH

ToDo / 完了演出

⑳ NEON PULSE

ゲーム / 夜系ブランド

カード

カードタイトル

ここにカードの説明文が入ります。デザインのトンマナに合わせて自動的にスタイルが変わります。

バッジ・タグ

完了 新着 進行中 アーカイブ

入力フォーム

トグルスイッチ

ON
OFF

アコーディオン (FAQ)

タブ切り替え

タブ1のコンテンツテキストです。テーマカラーに連動したタブで表示を切り替えられます。

ミニヒーローセクション

HERO SECTION

あなたのブランドに合った
デザインが見つかる

コンポーネントシミュレーターで、トンマナを試してみよう。

💾 みんなのライブラリ

「ライブラリに保存」で全ユーザーと共有されます