全パーツ一覧・検索

▶ 動かすクリック

リップル波紋ボタン解説あり

Ripple Effect

クリックした位置から波紋が広がる。Material Designでおなじみの「押した手応え」。

▶ 動かすホバー

マグネティックボタン

Magnetic Button

カーソルに吸い付くように動くボタン。近づくとぬるっと反応して、つい動かしたくなる。

▶ 動かすホバー

グラスモーフィズムボタン

Glassmorphism Button

背景がすりガラス越しに透ける質感のボタン。カラフルな背景の上で映える。

▶ 動かす自動再生

流れる光グラデボタン

Glow Gradient Button

グラデーションが流れ、背後がぼんやり発光するボタン。CTAで視線を集めたいときに。

▶ 動かすホバー

スライドフィルボタン

Slide Fill Button

ホバーすると背景色が左から滑り込み、文字色が反転する。線画ボタンの定番演出。

▶ 動かすクリック

いいねバーストボタン

Like Burst Button

押すとハートが弾けて粒子が飛び散る。SNSでつい連打したくなるあの気持ちよさ。

▶ 動かすクリック

コピー完了フィードバック

Copy-to-Clipboard Feedback

クリックすると「✓ コピーしました」に変わって元に戻る。操作が伝わる安心感のある演出。

▶ 動かすクリック

スプリットボタン

Split Button

主操作ボタンの右端に▼トグルが連結し、押すと別動作（名前を付けて保存など）のメニューが開く。外側クリック・Escで閉じる。

▶ 動かすクリック

ボタングループ

Button Group

複数ボタンを罫線を共有して連結したセグメント操作。上段は単一選択（左/中央/右揃え）、下段は複数トグル（太字/斜体/下線）の2パターンを見せる。

▶ 動かすホバー

3Dチルトカード

3D Tilt Card

カーソルの位置に合わせてカードが立体的に傾く。カード周辺の広い範囲で反応するので、離れた場所からでも動く。

▶ 動かすホバー

画像ズーム＋タイトル

Image Zoom on Hover

ホバーで画像がゆっくり拡大し、タイトルが浮かび上がる。カード型の記事一覧で定番。

▶ 動かすホバー

スポットライト追従

Spotlight Hover Card

カーソルの周りだけ光が灯り、動かすと付いてくる。暗い背景のカードに高級感が出る。

▶ 動かすホバー

光沢スイープ

Shine Sweep

ホバーすると斜めの光がツヤッと走り抜ける。ボタンやバナーを一段リッチに見せる。

▶ 動かすホバー

下線スライドリンク

Animated Underline Link

ホバーで下線が右から消えて左から伸びる。テキストリンクの上品な定番演出。

▶ 動かすホバー

グレースケール→カラー

Grayscale-to-Color Hover

普段はモノクロ、ホバーでふわっと色づいて少し拡大。写真ギャラリーで効果的。

▶ 動かすホバー

カード反転

Flip Card

ホバー（PC）またはタップ（スマホ）でカードがY軸回転して裏面を表示。transform-style: preserve-3d＋backface-visibility: hiddenで実装。

▶ 動かすホバー

カスタムカーソル追従

Custom Cursor

小さなドットがカーソルに張り付き、リングが少し遅れて追いかける。ボタンに乗ると大きく開く、定番のサイト演出。

▶ 動かすホバー

フラッシュライト追従

Flashlight Reveal

暗闇に隠れた内容を、カーソル周りだけ懐中電灯で照らして読ませる。CSS mask の円形グラデで“穴”を開けて実装。

▶ 動かすクリック

トグルスイッチ解説あり

Toggle Switch

クリックでつまみが滑らかにスライドする ON/OFF スイッチ。設定画面の定番UIパターン。

▶ 動かすクリック

チェック描画解説あり

Animated Checkbox

チェック時にレ点が線で描かれるアニメーション。操作の手応えを視覚で強調する。

▶ 動かすクリック

トースト通知解説あり

Toast Notification

ボタン操作後にふわっと現れ、数秒で自動消滅する通知。処理完了などの確認に使う。

▶ 動かすクリック

スケルトンローディング解説あり

Skeleton Screen

読み込み中に輝く光が流れるプレースホルダを表示し、完了後に実コンテンツへ差し替わる。

▶ 動かすクリック

送信ボタン演出解説あり

Button Loading State

送信ボタンを押すとスピナーが回り、完了後にチェックマークへ変化。処理中の状態を明示する。

▶ 動かすクリック

ダークモードトグル解説あり

Dark Mode Toggle

太陽↔月にモーフするトグルで昼夜を切替。ミニカードの背景・文字色・アイコンがアニメ遷移する今風のテーマスイッチ。

▶ 動かすクリック

紙吹雪セレブレーション

Confetti Celebration

ボタンを押すと紙吹雪が舞い上がる成功演出。依存ゼロの自前パーティクルが重力で落下＋回転。連打しても枠内に収まる。

▶ 動かすクリック

AIタイピングインジケータ

AI Typing Indicator

AIが考え中の「・・・」3点バブルから、回答が1文字ずつ流れ込むストリーミング風表示。チャットUI・AIアシスタントの定番フィードバック。

▶ 動かす長押し

絵文字リアクションバー

Emoji Reaction Bar

メッセージにホバー（PC）または長押し（スマホ）すると絵文字バーが開き、選ぶとバウンスしながらリアクションが付く。Slack/Messenger風。

▶ 動かすクリック

アラート・バナー解説あり

Alert / Banner

情報・成功・警告・エラーの4色のインラインバナー。アイコンと文言、×ボタンで構成し、×を押すとスライドしながら消える。

▶ 動かす自動再生

ローディングスピナー解説あり

Loading Spinner

CSSだけで動く3種のローディング表現。回転リング・3点バウンス・バーのシマー。読み込み中を静かに伝える定番の見本。

▶ 動かす入力

フローティングラベル解説あり

Floating Label

フォーカスするとラベルが枠の上にスッと浮き上がる入力欄。省スペースで、いま何を入力中か直感的に分かる。

▶ 動かす入力

リアルタイム検証解説あり

Inline Validation

メールアドレスを入力すると形式を即時判定し、✓（緑）/ ✗（赤）とメッセージでフィードバックする。

▶ 動かす入力

パスワード表示切替解説あり

Password Visibility Toggle

目のアイコンをクリックするとパスワードの表示・非表示を切り替えられる。入力ミスを確認しやすい。

▶ 動かす入力

文字数カウンタ解説あり

Character Counter

テキストエリアの残り文字数をリアルタイム表示。上限に近づくと色が変わり、超過を防ぎやすい。

▶ 動かすドラッグ

レンジスライダー

Range Slider

スライダーを動かすと値がリアルタイムに数値表示され、達成部分のトラックに色が乗る。

▶ 動かすクリック

日付ピッカー解説あり

Date Picker

入力欄をタップするとカレンダーが開き、日を選ぶと入力される。月の前後移動にも対応。

▶ 動かす入力

タグ入力

Tag Input (Chips)

入力してEnterでタグ（チップ）が追加され、×ボタンで削除できる。日本語タグの初期表示あり。

▶ 動かす入力

入力マスク

Input Mask

電話番号を入力すると自動整形（03-1234-5678 形式）。数字以外は無視され、入力がスムーズになる。

▶ 動かすクリック

星評価

Star Rating

星にホバー（PC）またはタップ（スマホ）で評価を選択。選んだ値をテキストで表示する。

▶ 動かす入力

オートコンプリート解説あり

Autocomplete

入力に応じて候補リストを絞り込み表示。↑↓キーやタップで選択でき、選ぶと入力欄に反映される。都道府県など日本語ダミー候補つき。

▶ 動かす入力

ステップフォーム解説あり

Multi-Step Form (Wizard)

3ステップ（基本情報→住所→確認）を進捗バー付きで切り替え。次へ/戻るボタンと必須チェックを備え、最後に入力内容を確認表示する。

▶ 動かすドラッグ

ドラッグ&ドロップ アップロード解説あり

Drag & Drop File Upload

点線の枠にファイルをドラッグするか、クリック/タップで選択。ファイル名と疑似プログレスバーで進捗を表示する。

▶ 動かす入力

ワンタイムコード入力

OTP Input

6桁の区切り入力フォーム。1文字入力で次マスへ自動移動、Backspaceで前へ戻る。全桁入力で確認演出、ペースト時は各マスに自動分配。

▶ 動かす入力

コンボボックス（検索＋複数選択）

Combobox (multi-select)

入力で候補を絞り込み、選ぶとチップとして入力欄に積み上がる複数選択UI。×で削除、↑↓とEnterのキーボード操作にも対応。

▶ 動かす入力

テキストフィールド

Text Field

ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。

▶ 動かす入力

自動リサイズテキストエリア

Auto-grow Textarea

入力量に合わせて高さが自動で伸びるテキストエリア。scrollHeight に合わせて高さを更新し、文字数カウンタも連動する。

▶ 動かすクリック

セレクト

Select / Dropdown

ボタンを押すとリストボックスが開くカスタムのセレクト。矢印キー・Enter・Escで操作でき、選択中の項目にはチェックが付く。

▶ 動かすクリック

ラジオボタン

Radio Group

選択肢をカード状に並べたラジオグループ。ネイティブの input を使うので矢印キーで移動でき、選んだカードだけ枠と丸が色づく。

▶ 動かす入力

検索バー

Search Bar

先頭に虫めがねアイコンを置いた検索入力。文字を入れるとクリア（×）ボタンが現れ、押すと入力が消えてフォーカスが戻る。

▶ 動かす入力

パスワード強度メーター

Password Strength Meter

表示/非表示トグル付きのパスワード欄。長さと文字種の多さから強度を判定し、弱い/普通/強いのバーとラベルがリアルタイムに変化する。

▶ 動かす入力

ログインフォーム

Login Form

メール・パスワード・「ログイン状態を保持」チェック・送信ボタン・パスワード再発行リンクを備えた定番のログイン画面。送信すると短いローディング演出が出る。

▶ 動かす入力

新規登録フォーム

Sign Up Form

お名前・メール・パスワード（簡易強度表示）・利用規約同意を備えた新規登録フォーム。各欄はフォーカスを外した時点で検証し、問題があればその場でメッセージを出す。

▶ 動かすクリック

下線スライドタブ解説あり

Animated Tabs

選択中タブの下に下線がスッと横移動するタブUI。現在地が直感的に伝わり、内容も切り替わる。

▶ 動かすクリック

アコーディオン解説あり

Accordion

クリックで項目が開閉し、アイコンが回転。一度に1つだけ開く排他制御で高さを抑える。

▶ 動かすクリック

ハンバーガーメニュー解説あり

Hamburger Menu

三本線アイコンが × に変形しながらメニューが横からスライドイン。iframe内対応のposition:absolute実装。

▶ 動かす入力

即時フィルタ

Live Search Filter

検索ボックスに入力するとリストが即座に絞り込まれる。ページ遷移なしでさくさく探せる。

▶ 動かすスクロール

Topへ戻る解説あり

Back to Top Button

スクロールすると右下に「↑ Top」ボタンが浮かび上がり、押すと先頭へ滑らかに戻る。

▶ 動かすスクロール

縮小ヘッダー

Shrinking Sticky Header

スクロールするとヘッダーが縮み、背景と影が付く。上部に戻ると元のサイズに戻る。

▶ 動かすスクロール

現在地ハイライト解説あり

Scrollspy

縦に並ぶセクションをスクロールすると、サイドの目次の現在地が自動でハイライトされる。

▶ 動かすホバー

メガメニュー

Mega Menu

ナビ項目にホバー/タップで複数列の大きなドロップダウンが開く。PCもスマホも対応。

▶ 動かすクリック

ステッパー解説あり

Progress Stepper

カート→配送→決済→完了など手順の進捗を示すインジケータ。次へ/戻るボタンで進められる。

▶ 動かすクリック

フローティングメニュー(FAB)

FAB Speed Dial

右下の+ボタンをタップすると複数アクションが縦に展開するスピードダイアル。

▶ 動かすドラッグ

スワイプ削除

Swipe to Delete

リスト項目を左にスワイプすると赤い削除ボタンが現れ、さらに引っ張ると削除アニメ。PC（ドラッグ）もスマホ（スワイプ）も対応。元の位置にスナップバックも。

▶ 動かすスクロール

無限スクロール解説あり

Infinite Scroll

コンテナ内を下までスクロールすると自動でアイテムを追加読み込み。IntersectionObserverでsentinelを監視。

▶ 動かすホバー

マグニファイ・ドック

Dock Magnification

macOS風のドック。カーソルに近いアイコンほど大きく持ち上がり、なめらかに波打つ。横並びナビやツールバーをリッチに。

▶ 動かすクリック

グーイ・メタボールメニュー

Gooey Menu

FABを押すと、子ボタンがぷるんと分裂して飛び出すメタボール演出。SVGフィルタ(ぼかし＋コントラスト)で液体のように繋がって見える。

▶ 動かすクリック

セグメンテッドコントロール

Segmented Control

選択中の背景ピルがスッと横移動するiOS風の切替。可変幅ラベルにも追従し、内容も切り替わる。矢印キー操作にも対応。

▶ 動かすドラッグ

ドラッグ並べ替え

Drag-to-Reorder List

ハンドルをつまんで縦リストの順序を入れ替える。掴んだ項目に合わせて他の項目がスッと動いて場所を空ける（並べ替えの定番）。PC・スマホ両対応。

▶ 動かすドラッグ

引っ張って更新

Pull to Refresh

リストを上端で下に引っ張るとインジケータが伸び、閾値を超えて離すと更新スピナーが回って新着が差し込まれる。SNS/ニュースアプリの定番ジェスチャー。

▶ 動かすクリック

タブバー解説あり

Tab Bar

画面下部に固定するモバイル定番のタブバー。アイコン＋ラベルの項目をタップすると選択が切り替わり、現在地が藍色で示される。

▶ 動かす静的

パンくずリスト解説あり

Breadcrumb

「ホーム › カテゴリ › … › 現在地」と階層をたどれるパンくず。最後の項目は現在地として aria-current で示し、リンクにはしない。

▶ 動かすクリック

サイドバーナビ解説あり

Sidebar Navigation

セクション見出し付きの縦型ナビ。折りたたみグループはクリックで開閉し、現在の項目は藍色でハイライトされる。管理画面やダッシュボードの定番。

▶ 動かすクリック

ページネーション解説あり

Pagination

前へ／次へと番号ボタンで構成する定番ページャ。ページ数が多いときは「…」で省略し、現在のページを藍色で示す。クリックでページが切り替わる。

▶ 動かすクリック

アプリバー

App Bar

モバイル画面上部のアプリバー。左に戻る（またはメニュー）、中央にタイトル、右にアクションアイコンを置く。スクロールしても追従する想定のヘッダー。

▶ 動かすクリック

ツリービュー

Tree View

フォルダを開閉できるファイルツリー。クリックでフォルダが開き、キャレットが回転する。階層はインデントで表現し、キーボード（矢印キー）でも操作できる。

▶ 動かすスクロール

仮想スクロール解説あり

Virtual Scroll

1万件のリストでも、見えている範囲の行だけをDOMに描画する仮想スクロール。スクロールに応じて表示スライスを差し替え、総量ぶんの高さはスペーサーで確保する。

▶ 動かすクリック

モーダル解説あり

Modal Dialog

ボタンでフェード＋スケールインしながらモーダルが中央に開く。背景クリック・×ボタン・Escキーで閉じる。

▶ 動かすクリック

ドロワー解説あり

Side Drawer

ボタンで右側からパネルがスライドイン。背景クリックか×で閉じる。モバイルではボトムシートになる想定のスタイル。

▶ 動かすホバー

スナックバー＋取り消し解説あり

Snackbar with Undo

リスト項目を削除すると「削除しました ［取り消す］」が下部に出て3秒で自動消滅。取り消しで元に戻る。

▶ 動かすクリック

確認ダイアログ

Confirmation Dialog

「本当に削除しますか？」をOK/キャンセルで確認。破壊的操作の前に一歩置く確認UIのパターン。

▶ 動かすクリック

ポップオーバー解説あり

Popover Menu

ボタン横に矢印付きの小パネル（メニュー）がフェードイン。外側クリックで閉じる。コンテキストメニューの基本形。

▶ 動かすドラッグ

ドラッグ式ボトムシート解説あり

Draggable Bottom Sheet

画面下からせり出すシート。ハンドルをドラッグして「半分／全開／閉じる」の3段階にスナップする。iOS/AndroidのモバイルUI定番。

▶ 動かすクリック

コンテキストメニュー

Context Menu

ステージ上を右クリック（長押し）すると、カーソル位置にメニューが開く。アイコン付き項目・区切り線・破壊的項目を持ち、項目クリック・外側クリック・Escで閉じる。

▶ 動かすクリック

アクションシート

Action Sheet

画面下からせり上がるiOS風のアクションシート。操作の一覧と、離れた位置の「キャンセル」を持ち、破壊的操作は朱色で示す。背景クリック・Escで閉じる。

▶ 動かす入力

即時検索＋一致ハイライト

Search Term Highlighting

入力のたびに記事一覧を絞り込み、一致した文字を <mark> で強調する。件数はライブで更新され、空白区切りの複数語は AND で効く。0件では言い換えを促す。

▶ 動かすクリック

複数選択フィルタチップ実例あり

Multi-Select Filter Chips

カテゴリ・価格帯・在庫のチップで商品を絞り込む。同じ群の中は OR、群をまたぐと AND。各チップに「今押したら何件か」を出し、0件は押せない色にする。

▶ 動かすクリック

ファセット絞り込み実例あり

Faceted Navigation

ブランド・素材・色のチェックボックスで絞り込む。1つ選ぶたびに他のファセットの件数が再計算され、0件になる選択肢は淡色で押せなくなる。PC は左サイドバー、狭い幅は上に積む。

▶ 動かすクリック

並び替えメニュー

Sort Menu with FLIP Reorder

「並び替え」ボタンでメニューを開き、価格・評価・新着を選ぶと商品カードが FLIP で滑らかに入れ替わる。ボタンには現在の並びを常に表示する。

▶ 動かす入力

最近の検索

Recent Searches

検索欄にフォーカスすると直近の検索語が並ぶ。行の × で1件ずつ消せ、「履歴を消す」で全部消える。Enter で検索すると先頭に追加され、重複はまとめられる。

▶ 動かすホバー

グループ分けサジェスト

Grouped Search Suggestions

入力に応じて候補を「商品／カテゴリ／記事」の見出し付きで出す。↑↓ で見出しをまたいで移動し、Enter で確定。何が起きるかは行の右に「商品ページ」「一覧」と示す。

▶ 動かすクリック

0件の立て直し

No Results Recovery

条件を重ねて0件になった検索結果を、行き止まりにしない。「条件を1つ外すと何件になるか」をボタンで示し、押すとその場で結果が出る。近い候補も先に見せる。

▶ 動かすドラッグ

価格レンジ＋数値入力実例あり

Dual-Handle Range with Inputs

2つのハンドルと「下限・上限」の数値入力が双方向に連動する価格フィルタ。ドラッグでも直接入力でも同じ値になり、該当件数がその場で更新される。矢印キーでも動く。

▶ 動かす入力

検索演算子のヒント実例あり

Search Operator Tokens

メール検索で from: is: before: を打ち始めると演算子のヒントが出て、確定するとチップ（トークン）になる。トークンと本文の語を組み合わせて一覧が絞られる。Gmail 型。

▶ 動かすクリック

結果プレビュー付き検索モーダル

Search Dialog with Preview Pane

ボタンか ⌘K で検索モーダルを開き、左の結果リストを ↑↓ で辿ると右にプレビューが出る。空のときは「最近開いた」と「おすすめ」。Enter か「開く」で確定、Esc で閉じる。

▶ 動かすクリック

モバイルの絞り込みドロワー実例あり

Filter Bottom Sheet

スマホの商品一覧で「絞り込み」を押すと下からシートが出る。条件を変えるたびに「○件を表示」ボタンの数字が更新され、押すと閉じて一覧が切り替わる。閉じるだけなら変更は捨てる。

▶ 動かすクリック

結果件数のライブ更新

Live Result Count

条件を変えると件数がスケルトンになり、少し置いて数字に戻る。連続した変更はデバウンスで1回のリクエストにまとめ、aria-live で件数の変化を読み上げる。右上に変更回数とリクエスト回数を出す。

▶ 動かす入力

もしかして

Did You Mean

「ぶらうざ」のようなかな違い・打ち間違いで0件になったとき、辞書との編集距離が近い語を「もしかして: ブラウザ」と提案する。押すとその語で検索し直す。

▶ 動かすクリック

保存した絞り込み

Saved Filter Presets

いまの絞り込み条件に名前を付けて保存し、チップで呼び出す。現在の条件と一致するチップは強調され、× で削除できる。条件を変えると強調が外れ、保存ボタンが再び現れる。

▶ 動かすクリック

本文へスキップ解説あり実例あり

Skip Link

Tab を1回押すと最初に「本文へスキップ」が現れ、Enter でナビ4件を飛ばして本文へフォーカスが移る。下の帯に今どこにフォーカスがあるかを表示。

▶ 動かすクリック

フォーカスリングの設計解説あり実例あり

Focus Ring (:focus-visible)

:focus-visible で「キーボードのときだけ」2px のリングを 2px 離して描く。角丸に追従し、ダーク背景では白＋藍の二重輪。マウスクリックでは出ない。

▶ 動かすクリック

ARIA タブ（roving tabindex）解説あり実例あり

Roving Tabindex Tabs

Tab でタブ列に入り、← → Home End で移動。選択中のタブだけ tabindex=0（roving tabindex）、aria-selected と aria-controls で読み上げが「料金, タブ, 2/4, 選択」になる。

▶ 動かすクリック

ライブリージョンの読み上げ順解説あり

ARIA Live Region

「カートに追加」は aria-live=polite で今の読み上げが終わってから、エラーは role=alert（assertive）で割り込んで読まれる。帯に読み上げ中の文と待ち行列を可視化。

▶ 動かすクリック

モーション設定の切替

Reduced Motion Toggle

「動きを減らす」スイッチで data-motion="reduce" を付け、跳ねるドットと流れるお知らせを止める。初期値は OS の prefers-reduced-motion。

▶ 動かすクリック

文字サイズ切替

Font Size Switcher (rem)

小／標準／大で html の font-size を変える。rem で組んだカードは余白・幅・ボタンごと追従し、px で書いた注記だけ取り残されるのが見える。

▶ 動かすホバー

アクセシブルなツールチップ解説あり

Accessible Tooltip (aria-describedby)

ホバーは 300ms 待ってから、フォーカスとタップは即座に出る。role=tooltip を aria-describedby で結び、Esc で閉じる。帯に「保存, ボタン, 説明: …」と読まれる形を表示。

▶ 動かすクリック

フォーカストラップ解説あり

Focus Trap (dialog + inert)

<dialog>.showModal() で開き、背後のページに inert を付けて Tab も読み上げも届かなくする。Tab は中で循環し、閉じると開いたボタンへフォーカスが戻る。

▶ 動かすクリック

読み上げ専用テキスト

Visually Hidden Text

3つの「もっと読む」に、見た目には出ない「：〜について」を sr-only で足す。切替で隠し文を可視化し、支援技術のリンク一覧でどう区別されるかを帯に表示。

▶ 動かすクリック

強制カラーモード対応

Forced Colors Mode Support

Windows のハイコントラスト（forced-colors: active）では背景色と影が消える。透明な border を持たせた「対応済み」と、色だけで形を作った「未対応」を模擬トグルで比べる。

▶ 動かす入力

エラーサマリ解説あり実例あり

Error Summary

送信すると先頭に「3 件の入力に問題があります」が現れてフォーカスが移り、各項目へのリンクで飛べる。項目側は aria-invalid と aria-describedby で理由が読まれる。

▶ 動かすクリック

キーボード操作の可視化実例あり

Key Press Visualizer

j / k で選択が動き、Enter で開く、? で一覧が出る。押したキーが右下に浮かんで消えるので、動画や説明会で「何を押したか」が伝わる。

▶ 動かすクリック

アクセシブルなアコーディオン解説あり

ARIA Accordion

見出し（h3）の中にボタンを置き、aria-expanded と aria-controls で開閉を伝える。↑↓ Home End で見出し間を移動。帯に「配送は…, 見出しレベル3, ボタン, 展開」を表示。

▶ 動かすクリック

透過・ぼかしの代替

Reduced Transparency Fallback

地図のような騒がしい背景の上のガラス質感パネル。prefers-reduced-transparency: reduce では不透明＋境界線に切り替える。模擬トグルで見比べられる。

▶ 動かすスクロール

フェードイン出現

Scroll Reveal (Fade In Up)

画面に入った要素がふわっと下から浮かび上がる。IntersectionObserverの基本形。

▶ 動かすスクロール

スタッガー出現

Staggered Reveal

複数の要素が少しずつ時間をずらして現れる。リストやカード並びに躍動感が出る。

▶ 動かすスクロール

数字カウントアップ解説あり

Count Up Animation

画面に入ると数字が0から目標値へ駆け上がる。実績や統計の見せ場に。

▶ 動かすスクロール

スクロール進捗バー解説あり

Reading Progress Bar

ページ上部のバーが読み進めた割合を示す。長い記事で残量がわかって安心。

▶ 動かすスクロール

1文字ずつ出現

Per-Character Text Reveal

見出しの文字が1つずつ波打つように現れる。ヒーロー見出しのインパクトに。

▶ 動かすスクロール

クリップreveal

Clip-Path Image Reveal

画面に入ると画像が左から右へ開くように現れる。clip-pathを使った上質な登場。

▶ 動かすスクロール

背景色シフト

Scroll-Linked Background Color

スクロールでセクションに入るたび背景色が滑らかに切り替わる。物語性のあるLPに。

▶ 動かすスクロール

CSSスクロール駆動アニメ

CSS Scroll-Driven Animations

JavaScript無しでスクロール連動。新CSSの animation-timeline で、上部に進捗バー(scroll())、各行は画面に入るとふわっと出現(view())。

▶ 動かすスクロール

横スクロールギャラリー

Horizontal Scroll Gallery

横並びカードを横スワイプで閲覧。scroll-snap-type: x で各カードにピタッと止まる。タッチ対応。

▶ 動かすスクロール

スクロールスナップ解説あり

Full-Page Scroll Snap

縦スクロールで全画面セクションがピタッと止まる。scroll-snap-type: y でページめくり感を演出。

▶ 動かすスクロール

sticky追従ヘッダー

Sticky Section Headers

セクション見出しが position:sticky で上に張りつきながら、下のコンテンツがスクロールする。

▶ 動かすスクロール

スクロールで画像出現

Scroll-Linked Mask Reveal

スクロール量に応じて clip-path が開き、画像がだんだん現れる。scroll イベント連動の視覚演出。

▶ 動かすスクロール

スクロール連動タイムライン

Scroll Timeline

スクロールで各ステップ（年表/手順）が順に点灯する。IntersectionObserver で各要素を検知して色付け。

▶ 動かすスクロール

パララックススクロール

Parallax Scrolling

地面・木・山の眺めから、スクロールに連れて空・雲・太陽の眺めへカメラが大きくパンするダイナミックなパララックス。近い層ほど速く動いて奥行きが出る。

▶ 動かすスクロール

ピン留めスクロール

Pinned Scroll Section

あるセクションが画面に固定されたまま、スクロール進行に応じて内部の要素（テキスト/数値）が切り替わる。position:sticky＋スクロール進捗で内部をmorph。

▶ 動かすスクロール

スクロールストーリーテリング

Scrollytelling

左に章立てテキストが流れ、固定された右のビジュアルがスクロールの章に応じて切り替わる。IntersectionObserverで現在の章を検知。

▶ 動かすスクロール

スクロールズーム

Scroll-Linked Zoom

スクロール量に応じて画像（グラデdivで代用）や見出しが拡大・縮小する。scrollイベント連動でscaleを変える。

▶ 動かすスクロール

スクロール速度スキュー

Scroll Velocity Skew

速くスクロールするほど中身がぐにゃっと傾き、止まるとシュッと戻る。スクロール速度を物理量として見せるキネティックな演出。

▶ 動かすクリック

イージング4レーン比較実例あり

Easing Comparison Lanes

linear / ease-out / ease-in-out / spring 風の4レーンを同時に走らせて、同じ1秒でも「速く入って遅く止まる」動きが自然に見える理由を目で確かめる。

▶ 動かすドラッグ

スプリング物理ドラッグ実例あり

Spring Physics Drag

つまみをドラッグして離すと減衰振動で中央へ戻る。stiffness（硬さ）と damping（減衰）を変えると、同じ距離でも戻り方がまったく変わる。

▶ 動かすクリック

スタガーの波（距離順）

Radial Stagger Wave

グリッドのどこかを押すと、押した位置からの距離に比例した遅延で周りのタイルが順に膨らみ、波紋のように広がる。一方向のスタガーとの違いは「起点が操作位置」なこと。

▶ 動かすクリック

FLIP で並び替え

FLIP Reorder Animation

「シャッフル」「数値順」で DOM の順序を入れ替えても、各行が元の位置から新しい位置へ滑らかに移動する。First / Last / Invert / Play の4手順を JS で実装。

▶ 動かすクリック

高さ auto の開閉アニメ

Animate Height Auto (grid-rows)

grid-template-rows を 0fr → 1fr にトランジションさせて、中身の高さを測らずに開閉する。JS は aria-expanded を切り替えるだけで、高さの計算をしない。

▶ 動かすクリック

ページ遷移カーテン

Route Transition Curtain

リンクを押すと幕が下から閉じ、閉じきった瞬間に内容を差し替えて上へ開く。3ページ分の擬似ルーティングで、遷移中の連打も最後の行き先だけを採用する。

▶ 動かすクリック

カード→詳細のモーフ

FLIP Layout Morph (Card to Detail)

一覧のカードを押すと、その位置と大きさを計測して枠いっぱいの詳細へ拡大する（FLIP）。閉じると同じ経路で元のカードへ戻るので、どこから来たかを見失わない。

▶ 動かすクリック

差分の桁だけ回る数字

Digit Roll Ticker (changed digits only)

桁ごとに 0〜9 を縦に並べた帯をずらして表示する数字スロット。値を更新すると変わった桁だけが回り、変わらない桁は静止するので、どこが動いたかが一目で分かる。

▶ 動かすクリック

アイコンの線が変形

Icon Shape Morph

メニュー⇄閉じる、再生⇄一時停止、＋⇄− の3つを、アイコンを差し替えずに線の回転・clip-path の頂点移動で変形させる。同じ図形が姿を変えるので、状態が連続して伝わる。

▶ 動かすクリック

スケルトン→本文クロスフェード

Skeleton Crossfade

スケルトンと本文を同じグリッドセルに重ねて置き、読み込み完了で不透明度だけを入れ替える。要素の差し替えをしないのでレイアウトシフトが起きない。

▶ 動かすクリック

見出し→本文→CTA の順出し

Sequential Entrance

ヒーローの要素を、見出し・本文・CTA の順に 80ms ずつ遅らせて fade+rise で出す。読む順番と現れる順番を揃えると、視線が自然に CTA へ着地する。

▶ 動かすドラッグ

スワイプで決めるカード

Swipe-to-Decide Gesture Card

カードを左右にドラッグすると傾きながら「残す／捨てる」のラベルが濃くなる。距離か速度がしきい値を超えると飛んでいき、下のカードが繰り上がる。届かなければ弾んで戻る。

▶ 動かすホバー

ホバーインテント

Hover Intent (Safe Triangle)

サブメニューへ斜めに移動するとき、素朴な実装は途中の項目に反応して中身が切り替わる。ポインタの移動方向が「サブメニューへ向かう三角形」の中なら切替を遅らせて、ちらつきを防ぐ。

▶ 動かすクリック

共有軸トランジション実例あり

Shared Axis Transition

「次へ」で今の画面が左へ、新しい画面が右から入る。「前へ」なら向きが逆になる。進む・戻るの方向を動きで示すので、どこにいるかを見失わない。

▶ 動かす自動再生

タイプライター解説あり

Typewriter Effect

複数のフレーズを1文字ずつ打ち込み、カーソルが点滅。打つ→消す→次のフレーズをループする。

▶ 動かすクリック

文字スクランブル

Text Scramble

ランダム文字がパラパラ変化しながら目的の文字列に次第に確定していく。ボタンで再生。

▶ 動かすホバー

グリッチ

Glitch Text

見出しのRGBがずれ、ノイズ状のチラつきでグリッチエフェクトを演出。タップ/ホバーで発火。

▶ 動かす自動再生

グラデ流れ文字

Animated Gradient Text

background-clip:text を使い、藍系グラデーションが左から右へ流れ続ける見出し演出。

▶ 動かすクリック

キネティック分割

Kinetic Typography

見出しの単語が1つずつ下からスライドインしながらフェードイン。ボタンで何度でも再生。

▶ 動かすドラッグ

Before/After スライダー解説あり

Before/After Comparison Slider

中央のハンドルをドラッグして2枚の画像を見比べる。加工前後やリフォーム事例の比較に。

▶ 動かすクリック

ライトボックス解説あり

Lightbox

サムネイルをクリックすると暗いオーバーレイと拡大表示が現れる。背景か × ボタンで閉じる。

▶ 動かすクリック

カーテン遷移

Curtain Page Transition

ボタンを押すと色面がスライドして画面を覆い、めくれて次の内容が現れる。ページ切り替え演出の定番。

▶ 動かすクリック

SVGライン描画

SVG Line Drawing

SVG パスが stroke-dashoffset アニメーションで描かれていく。ロゴやチェックマーク演出に。

▶ 動かすホバー

マウス追従パララックス

Mouse Parallax

マウス位置に応じて背景・中景・前景の3層が異なる量で動き、自然な奥行きが生まれる。

▶ 動かすホバー

ベントグリッド

Bento Grid

大小のタイルを敷き詰めた今風のBentoレイアウト。ホバー/タップで各タイルが浮き上がり、内容がちらっと変化する。

▶ 動かす自動再生

ロゴマーキー

Logo Marquee

ダミーのロゴバッジが横へ無限スクロール。2セット並べてシームレスループ。ホバーか停止ボタンで一時停止。

▶ 動かすドラッグ

カードスタック

Swipeable Card Stack

Tinder風の重なったカード。最前面をドラッグで左右にスワイプするか👍/👎ボタンで送れる。Pointer Events対応でPC/スマホ両対応。デモ用に5枚のカードを無限ループさせており、最後まで送ると先頭へ戻って繰り返します。

▶ 動かす自動再生

グロウ・グラデ枠カード

Animated Gradient Border

枠を光のグラデーションがぐるぐる回る、Linear風のカード。@property で角度を滑らかにアニメーションし、ホバーで一段まぶしくなる。

▶ 動かす自動再生

オーロラ・メッシュ背景

Aurora Gradient Background

ゆっくり漂う光の塊が溶け合う、オーロラ風のアニメ背景。WebGL不要、ぼかした放射グラデだけで作るリッチなヒーロー背景。

▶ 動かす静的

フロストガラスカード

Glassmorphism Card

背景をぼかして透ける、ノイズ入りの曇りガラスカード。半透明＋微粒子＋やわらかい縁取りで、進化したグラスモーフィズム。

▶ 動かすクリック

ホバー拡張ベント

Expanding Bento Grid

ベントグリッドのタイルにカーソルを乗せると、その列がぐっと広がって隠れた説明が現れる。CSSの :has() だけで作るモダンなベント。

▶ 動かすホバー

WebGL背景

WebGL Shader Background

生WebGLのフラグメントシェーダーで藍系プラズマをアニメーション。マウス/タッチで揺らぎが反応し、上に重ねたキャッチコピーがヒーロー背景として機能する。WebGL非対応時はCSSグラデにフォールバック。

▶ 動かすドラッグ

3Dオブジェクト操作

3D Object Viewer

CSS 3D transformで立方体をドラッグ回転。慣性付き。矢印キーでも回せる。

▶ 動かすホバー

パーティクル演出

Particle Network

Canvas 2D で粒子が漂い、近い粒子同士を線でつなぐネットワーク表現。マウス・タッチに反応して粒子が引き寄せられ、線が伸びる。

▶ 動かすホバー

インタラクティブ地図

Interactive SVG Map

正確な日本地図（47都道府県）をインライン SVG で描画。ホバー/タップで属する地方全体がハイライトされ、地域名と統計をツールチップ表示。地方ボタンからも選べる。地図データ © geolonia/japanese-prefectures, MIT

▶ 動かすクリック

音連動ビジュアル

Audio Visualizer

Web Audio API でアルペジオを鳴らし、周波数データを Canvas のバーグラフにリアルタイム反映。再生/停止ボタンで制御。

▶ 動かすクリック

ゲーム風UI

Gamified UI

制限時間内に動く的をタップ/クリックしてスコアを稼ぐ。的はランダム移動し、ヒットするとパーティクル演出＋スコア加算。タイムアップで結果表示、スタート/もう一度ボタンでリトライ可能。

▶ 動かすクリック

打ち上げ花火

Canvas Fireworks

クリック/タップした座標へロケットが打ち上がり、放物運動で必ずその位置で開花する。重力+空気抵抗で減衰するパーティクルと加算合成の発光で花火らしさを出す。

▶ 動かすクリック

水面の波紋

Water Ripple Effect

クリック/タップした場所から波紋が広がる。複数の波紋が同時に重なり合い、揺らぎのある輪郭と加算合成の光の縁でシェーダーなしでも水面らしさを出す。ドラッグでなぞると航跡状に波紋が連続発生する。

▶ 動かすホバー

紙吹雪バースト

Canvas Confetti Burst

ボタンを押すと画面上部から紙吹雪が舞い落ちる。矩形パーティクルをscaleYで周期的に潰し3D回転のフラッターを近似、重力+左右の揺れで落下させる。EC購入完了・フォーム送信完了などの祝祭演出に。

▶ 動かす自動再生

星空と流れ星

Starfield with Shooting Stars

自動で瞬く星空に、数秒おきにランダムな流れ星が横切る。カーソルを乗せる/触れると近くの星がひときわ強く輝く。

▶ 動かす自動再生

降る雪

Falling Snow

奥行き(z)を持った雪片が自動で降り続ける。マウス/指を素早く動かすとその方向へ風が吹き、雪片が流される。風は時間とともに基準の弱い風へ戻っていく。

▶ 動かすクリック

泡・バブル

Rising Bubbles

水底から泡が揺らぎながら立ち上る。タップした泡はすぐに弾けて波紋状のリングを残す。画面上端まで届いた泡も一定確率で自然に弾ける。

▶ 動かすホバー

パーティクルテキスト

Particle Text Formation

テキストをオフスクリーンcanvasへ描画し、ピクセルをサンプリングして粒子の目標座標にする。粒子はバネで文字の形へ帰巣し、カーソルを近づける/タップすると反発して散り、離れるとまた文字に戻る。

▶ 動かすホバー

描く線の軌跡

Pointer Trail Ribbon

ポインタが動いた軌跡が発光するリボンになり、時間とともに尾を引いて消えていく。PCはホバーで常時描け、スマホは触れている間だけ setPointerCapture で追従して描ける。

▶ 動かす自動再生

ジェネラティブ背景グリッド

Generative Dot Field

格子状のドットが位置ごとに位相をずらしたsin波でゆっくり明滅・拡縮する、静かに動き続けるヒーロー背景。カーソルを近づけると周囲のドットがわずかに明るくなる。

▶ 動かすクリック

ランダムウォークの木/枝

Random Walk Growing Tree

クリック/タップした場所から枝が伸び始める。各枝は角度に小さなランダムウォークを加えながら成長し、伸び切ると確率的に2本へ分岐するか、先端に花を咲かせて止まる再帰的な生成表現。

▶ 動かすクリック

モーフ遷移（View Transitions）

View Transitions (morph)

カードをタップすると、そのサムネがそのまま拡大して詳細へなめらかに変形する。View Transitions APIで一覧⇄詳細をモーフさせる。

▶ 動かすホバー

アンカーツールチップ（JSなし）

CSS Anchor Positioning Tooltip

ボタンにホバー/フォーカスすると、CSS Anchor PositioningとPopoverだけで位置が決まる吹き出しが出る。画面端では自動で上下反転。JS不要。

▶ 動かすクリック

ネイティブ開閉アニメ（details）

Native Details Disclosure

HTMLの<details>だけで、中身がふわっと高さアニメーションしながら開閉する。::details-contentとcalc-size()でJSなしのアコーディオン。

▶ 動かすドラッグ

コンテナクエリ適応カード

Container Query Card

同じカードが、画面幅ではなく“置かれた入れ物”の幅に応じて縦積み⇄横並びに切り替わる。右下をドラッグして幅を変えると形が変化する。

▶ 動かすクリック

:has() 選択式カード

:has() Selectable Cards

ラジオを隠したプラン選択カード。選ぶとそのカードだけ枠と背景が変わり、チェックが点く。:has()だけで実現しJSは不要。

▶ 動かすドラッグ

カルーセル解説あり

Carousel

横並びスライドを矢印・ドット・スワイプで切り替える。scroll-snap で滑らかに止まり、Pointer Events でタッチスワイプにも対応。

▶ 動かすドラッグ

拡大鏡ルーペ

Image Magnifier (Loupe)

画像にホバーまたはタッチした位置を丸いルーペで拡大表示する。PCはマウス追従、スマホはタッチ移動に対応。

▶ 動かすクリック

サムネ連動ギャラリー

Thumbnail Gallery

下段のサムネをタップ/クリックするとメイン表示が切り替わる。選択中サムネをハイライトし、切替時にフェードイン。

▶ 動かすクリック

比較グリッド

Expanding Image Grid

タイル表示された画像をタップすると1枚だけ拡大され他が縮小する。再タップで元の均等グリッドに戻る。

▶ 動かす自動再生

Ken Burns

Ken Burns Effect

画像がゆっくりズームしながらパンし続ける、映画的なヒーロー演出。ヒーロー用途のため常時アニメーションする。

▶ 動かすクリック

ビデオプレーヤー

Video Player

グラデーションのポスター上に自作の動画プレーヤーUIを重ねる。中央の再生ボタン、クリックでシークできる進捗バー、経過/総時間、ミュート・全画面のアイコンが揃う。

▶ 動かすクリック

オーディオプレーヤー

Audio Player

音楽プレーヤーカード。グラデーションのジャケット、曲名/アーティスト、再生・前後スキップ、ドラッグできる進捗バーと時間表示、再生中に揺れるイコライザーバーを備える。

▶ 動かす静的

グリッドレイアウト

Grid Layout

枠幅に応じて列数が自動で増減する等幅グリッド。grid-template-columns の repeat(auto-fill, minmax()) だけで、メディアクエリなしにレスポンシブする基本形。

▶ 動かす静的

メイソンリー

Masonry Layout

高さの違うカードを隙間なく積み上げる石垣（メイソンリー）配置。CSS の columns で縦方向に流し込むだけの、Pinterest 風レイアウト。

▶ 動かす静的

カードレイアウト

Card Layout

画像帯・見出し・本文・メタ情報を縦に積んだ、王道のコンテンツカード。一覧にも詳細にも使える、最も基本的なカード部品。

▶ 動かす静的

スプリットスクリーン

Split Screen

画面を左右50/50に割り、片側にビジュアル・片側にテキストを置くヒーロー。枠が狭いと上下に積み替わる、LP冒頭の定番構図。

▶ 動かす静的

ヒーローセクション

Hero Section

グラデーション背景の上に、見出し・サブコピー・CTAを中央に重ねたページ最上部の主役ブロック。LPやサービス紹介の第一印象をつくる型。

▶ 動かす静的

ホーリーグレイル

Holy Grail Layout

ヘッダー／（左ナビ・メイン・右アサイド）／フッターの3段5領域を、CSS Grid の grid-template-areas で組む古典的な万能レイアウト。

▶ 動かす静的

フルブリード

Full Bleed

読み幅を制限した記事の中で、1つの帯だけを枠の端から端まで広げる全幅ブレイクアウト。本文は狭く、写真や引用だけを大きく見せる型。

▶ 動かすスクロール

スティッキーサイドバー

Sticky Sidebar

本文をスクロールしても、横のサイドレールが position:sticky で画面上部に貼り付いて追従する2カラム。目次や広告、要約を常時見せる型。枠内をスクロールすると挙動が見えます。

▶ 動かす静的

料金テーブル解説あり

Pricing Table

3つのプランを横並びで比較する料金表。中央の「おすすめ」プランを藍のふちとバッジで強調し、各プランに機能リストとCTAを添えます。

▶ 動かす静的

お客様の声

Testimonial

利用者の声を1枚のカードで見せる証言パーツ。頭文字入りのグラデーションアバター、名前・肩書き、星評価を添えて信頼感を伝えます。

▶ 動かす静的

CTAセクション

CTA Section

藍のグラデーション帯の上に、太い見出し・補足文・主要ボタンを中央寄せで置く行動喚起セクション。ページ末尾の締めに使います。

▶ 動かすクリック

FAQセクション解説あり

FAQ Section

質問をクリックすると答えがなめらかに開くアコーディオン式のよくある質問。開いている項目のシェブロンが回転し、一度に複数開けます。

▶ 動かす静的

フィーチャーセクション

Feature Section

3つの特徴を、アイコンタイル・見出し・短い説明の組で並べる紹介セクション。プロダクトの強みを一目で伝えるLPの定番ブロックです。

▶ 動かす静的

精密ヘッダーのヒーロー実例あり

Precision Header Hero

64px の細いヘッダー（ロゴ・ナビ・仕切り線・pill CTA）と、字間を詰めた大型見出し＋一行リード＋製品画面の枠。狭幅ではナビがメニューに畳まれます。

▶ 動かすスクロール

1画面1メッセージのヒーロー実例あり

One Message Per Screen Hero

見出し＋一行＋CTA 1つだけを1画面に置き、スクロールすると同じ構造の次のメッセージが現れます。スナップで1画面ずつ止まります。

▶ 動かす自動再生

生きた数字のヒーロー実例あり

Live Counter Hero

見出しの上に、小数点以下まで動き続けるカウンタ（今この瞬間の処理件数）。色の見せ場は右の斜めリボン1箇所に絞り、リードは本文級の大きさで読ませます。

▶ 動かすホバー

幾何学バランスのヒーロー実例あり

Three-Column Geometric Hero

左にコピー、中央に図形のコラージュ、右に CTA を置く3分割のヒーロー。CTA を余白の中に孤立させて、探さなくても見つかるようにします。

▶ 動かすクリック

対象者で分岐するヒーロー実例あり

Audience Split Hero

ヒーロー直下に「法人のお客さま／個人事業主・副業のお客さま」の2つの入口を置き、誰向けかで迷わせません。ホバーで持ち上がり、選ぶと案内が切り替わります。

▶ 動かすホバー

「〜向け」タグ付きカード実例あり

Audience Cards with Tags

家計／バックオフィス／開発者の3枚のカードに「〜向け」タグを付け、誰向けかを押す前に分からせます。ホバーで矢印が進みます。

▶ 動かす自動再生

機能紹介のベントグリッド

Feature Bento with Micro Motion

大小のタイルで機能を紹介するベントグリッド。主役は大タイル1枚だけ、他4枚は脇役。各タイルに CSS だけの小さな動く図を置き、機能の中身を一目で伝えます。

▶ 動かす静的

事実で語る信頼帯実例あり

Social Proof Band

導入社数の実数・継続率・「No.1」に調査主体の但し書き・テキストロゴの並び。形容詞ではなく、検証できる事実だけで信頼を作る帯です。

▶ 動かすホバー

誇張しない目次型セクション実例あり

Plain Table-of-Contents Section

「堅牢で、使いやすい。それだけです」のような平文の見出しと、下線リンク＋一行説明の縦並びだけで製品を紹介するセクション。装飾を足さず、言葉で信頼を作ります。

▶ 動かすホバー

導入事例カード

Case Study Cards

写真の代わりのグラデーション・引用・成果の数字（問い合わせ対応時間 −42%）・担当者名を1枚にまとめた事例カード3枚。ホバーで少し持ち上がります。

▶ 動かすクリック

更新履歴タイムライン実例あり

Changelog Timeline

左に日付レール、右にバージョンタグ＋見出し＋変更点を並べる更新履歴。新着に「New」バッジ。「新機能／修正」のフィルタで項目が絞り込まれます。

▶ 動かす静的

安心の一言つき CTA 帯実例あり

CTA Band with Reassurance

主 CTA は1つ、副 CTA は文字リンクに格下げした帯。ボタンの脇に「クレジットカード不要」「いつでも解約できます」と、押す前の不安に答える一言を添えます。

▶ 動かす静的

サイトマップ型フッター

Sitemap Footer

4カラムのリンク群・言語切替・SNS アイコン・法務リンクをまとめたフッター。320px では2カラムに畳まれ、法務リンクは横に流れます。

▶ 動かすホバー

作品リストがインターフェース実例あり

Work Index List

装飾ゼロの一行リスト（年・題・種別）。ホバーやフォーカスで右にサムネイル（グラデーション）が浮かび、行の位置に追従します。狭幅では右下に小さく出ます。

▶ 動かすクリック

ダッシュボード画面実例あり

Analytics Dashboard

KPI 4枚＋折れ線グラフ＋上位テーブルの定番構成。右上の期間セグメント（7日/30日/90日）を切り替えると数字・グラフ・表が同時に更新される。

▶ 動かす入力

設定画面

Settings Page

左ナビ（プロフィール/通知/課金/セキュリティ）で各セクションへ移動する設定画面。どこかを変更した瞬間に下から保存バーが現れ、保存か破棄を選ぶまで消えない。

▶ 動かすクリック

受信箱の2ペイン実例あり

Split-Pane Inbox

左に一覧（未読は太字・スター付き）、右に選択中のプレビュー。行を選ぶと既読になり、アーカイブすると行が消えて次のメールへ進む。狭い画面では一覧→詳細へスライドする。

▶ 動かすドラッグ

カンバンの画面まるごと実例あり

Kanban Board (Full Screen)

ボード名・フィルタ・メンバーのヘッダーと、WIP 上限付きの4列（バックログ/着手中/レビュー/完了）。カードはドラッグで列間を移動でき、上限を超えた列は赤く警告する。

▶ 動かすクリック

週カレンダー

Week Calendar

8〜19 時の時間帯グリッドに色分けした予定ブロックを置く週表示。現在時刻の赤線が引かれ、空いている枠をクリックすると 1 時間の仮予定が置かれる（もう一度クリックで取り消し）。

▶ 動かす入力

チャットのワークスペース実例あり

Chat Workspace

左にチャンネル一覧（未読バッジ）、中央にスレッド、下に入力欄の3段構成。送信すると吹き出しが追加され、少し遅れて相手からの返事が届く。チャンネルを切り替えると未読が消える。

▶ 動かすドラッグ

音楽プレイヤー実例あり

Music Player

ジャケット（グラデーション）・曲名・シークバー・再生／停止・キュー一覧のプレイヤー画面。シークバーはドラッグで移動でき、再生中は波形バーが揺れて曲が進む。

▶ 動かすクリック

ファイルブラウザ実例あり

File Browser

パンくず・グリッド／リスト切替・クリックだけの複数選択を備えたファイル画面。フォルダを開くと階層が進み、選ぶと下部に「N 件を選択」の操作バーが現れる。

▶ 動かすクリック

チェックアウト画面実例あり

Checkout Flow

配送→支払い→確認の3ステップ。左に住所フォーム／支払い方法の選択カード、右に固定の注文サマリ。狭い画面ではサマリが上部の折りたたみになる。CTA の脇に安心の一言。

▶ 動かすクリック

検索結果ページ

Search Results Page

上に検索語と件数、左にファセット（カテゴリ／価格帯／在庫）、右に結果カードと並び替え。チェックを入れるたびに件数と一覧が更新され、0件なら条件を外す提案を出す。

▶ 動かすクリック

プロフィール画面実例あり

Profile Page

カバー（グラデーション）に重なるイニシャルのアバター、名前と肩書き、統計3つ、フォローボタン。タブ（投稿／いいね／概要）でその下の内容が切り替わる。

▶ 動かすスクロール

モバイルアプリのシェル実例あり

Mobile App Shell

ステータスバー・大見出しヘッダー・スクロール領域・タブバーのアプリ骨格。上へスクロールすると大見出しが縮んで中央の小さなタイトルになり、PC では中央に端末枠で表示される。

▶ 動かすクリック

タスク管理画面実例あり

Task Manager (Today / Upcoming / Someday)

「今日／予定／いつか」の3リストを持つタスク画面。丸をチェックすると取り消し線が引かれ、少し置いてから完了へ移る。下の入力欄で今日のタスクを追加できる（Things 型）。

▶ 動かす入力

ノートエディタ実例あり

Block Editor

左にノート一覧、右に contenteditable のブロック本文。空のブロックで「/」を打つとブロックメニュー（見出し／箇条書き／区切り／本文）が出て、Enter で次のブロックへ進む。

▶ 動かすドラッグ

左右両側のスワイプアクション

Two-Sided Swipe Actions

メール一覧の行を右へスワイプすると「既読」、左へスワイプすると「アーカイブ／削除」が現れる。しきい値を越えると色が濃くなり、離した瞬間に実行される。

▶ 動かすクリック

浮いた主アクションのボトムナビ実例あり

Bottom Navigation with Raised Action

5枠のボトムナビ。中央に浮いた「投稿」ボタンを置き、選んだタブの下でインジケータが滑る。通知タブには未読バッジ。タップで画面のタイトルが変わる。

▶ 動かすスクロール

スクロールで縮む拡張FAB実例あり

Extended FAB

ラベル付きの「＋ 新規作成」ボタンが、一覧をスクロールしている間はアイコンだけに縮んで本文を隠さず、指が止まると再びラベル付きに戻る。

▶ 動かすクリック

スライドするサムのセグメント

Sliding Segmented Picker

「日／週／月／年」の4区分。選ぶと白いサムが選択位置へ滑り、下の集計値が切り替わる。矢印キーでも移動でき、iOS 型の見た目をボタンだけで作る。

▶ 動かすドラッグ

慣性スナップのスワイプページャー

Swipe Pager with Snap

4枚のカードを横スワイプでめくる。指の速さで次へ飛ぶか戻るかを決め、必ず1枚の位置にスナップする。ドットが連動し、PC ではドラッグと矢印ボタンで操作できる。

▶ 動かす長押し

長押しコンテキストメニュー

Long-Press Context Menu

写真タイルを長押し（PC は押し続け）すると、タイルがわずかに縮んで「押している」手応えを返し、450ms 後にメニューが浮かぶ。離すか外側をタップすると閉じる。

▶ 動かすドラッグ

ピンチズームのキャンバス

Pinch to Zoom

2本指のピンチで拡大・縮小し、1本指でパンする地図風キャンバス。ダブルタップで 2 倍と等倍を往復、PC ではホイールで拡大・ドラッグで移動。倍率は 1〜4 倍に制限。

▶ 動かすスクロール

スクロールで現れる固定CTA実例あり

Scroll-Revealed Sticky CTA

商品ページを読み進めて価格が画面外に消えたところで、下から価格＋「カートに入れる」の帯が現れる。上へ戻って価格が見えると帯は引っ込む。

▶ 動かすクリック

インセットグループリスト実例あり

Inset Grouped List

iOS の設定画面の型。角丸の白いグループを灰色の地に浮かせ、セクション見出し・アイコン・値・シェブロン・トグルを行に並べる。トグルはその場で切り替わる。

▶ 動かすドラッグ

スナップ位置のあるシート実例あり

Sheet with Detents

地図の上に重なるシートを、ハンドルのドラッグで「閉じる／半分／全画面」の 3 段階に止める。離した位置と速さで最寄りの段へ吸い付き、全画面のときだけ中身がスクロールする。

▶ 動かすドラッグ

スワイプで消せる通知スタック

Swipe-to-Dismiss Notification Stack

ロック画面風に積まれた通知を、横スワイプで 1 枚ずつ払って消す。しきい値を越えると流れて消え、下の通知が詰め上がる。「すべて消去」で一括、空になると案内文が残る。

▶ 動かすクリック

タッチリップル付きリスト実例あり

Touch Ripple List

Android 型のリスト。押した位置から波紋が広がって「どこを押したか」を返す。スクロール中は指が動いた量で判定してリップルを出さず、タップだけに反応する。

▶ 動かすドラッグ

スキップできるオンボーディング

Onboarding Pager with Skip

初回起動の 3 画面。スワイプか「次へ」で進み、右上の「スキップ」でいつでも抜けられる。最後の画面だけボタンが「はじめる」に変わり、押すと本編へ。

▶ 動かすクリック

押し込みの手応えトグル

Press-Scale Toggle

「保存」「通知」「お気に入り」の 3 つのトグル。押している間だけ 0.96 倍に沈み、離すと弾んで戻る。切り替わった瞬間に navigator.vibrate があれば 10ms 震える。

▶ 動かすクリック

バーチャート描画

Animated Bar Chart

棒が下から伸びるアニメーション。読み込みで自動再生し、ボタンで何度でも再生できる。

▶ 動かすクリック

ドーナツ進捗

Radial Progress (Donut)

SVGの stroke-dashoffset で指定%まで円弧が描かれ、中央に数値%がカウントアップで表示される。

▶ 動かすクリック

折れ線グラフ描画

Line Chart Draw-In

SVG polyline が stroke-dashoffset で描かれ、続いて各頂点の点が順番にポップインして現れる。

▶ 動かすクリック

グラフtooltip

Chart Tooltip

棒グラフの各棒にホバー（PC）またはタップ（スマホ）でその棒の値がツールチップで表示される。

▶ 動かす自動再生

リアルタイム風スパークライン

Real-Time Sparkline

1秒ごとに新しい値が追加され、折れ線グラフが左に流れる。現在値と変化方向をリアルタイムで表示。

▶ 動かすクリック

ゲージメーター

Gauge Meter

スピードメーター風の半円ゲージ。針が0から目標値までアニメで動き、中央に数値がカウントアップで表示される。

▶ 動かすホバー

カレンダーヒートマップ

Calendar Heatmap

GitHub風の週×曜日グリッドを値の濃淡(藍の階調)で塗る。セルにホバー/タップで値ツールチップを表示。

▶ 動かすクリック

ソート可能テーブル解説あり

Sortable Table

列ヘッダーをタップすると昇順/降順に並び替わり、矢印で現在の方向を表示する。日本語ダミーデータ5行。

▶ 動かすクリック

オドメーター数字ロール

Odometer Counter

各桁が縦に回転して数字が切り替わる、スロット／走行距離計のようなカウンタ。KPIや売上の更新を“動いて”見せる、count-upの上位版。

▶ 動かすクリック

リストビュー

List View

アバター＋主・副テキスト＋右端メタ／シェブロンで構成する定番のデータ一覧。行をタップすると選択状態になり、区切り線とホバーで視認性を保ちます。

▶ 動かす静的

タイムライン解説あり

Timeline

縦の連結線とノードで出来事を時系列に並べる見本。現在地のノードだけ藍で強調し、各項目に時刻・見出し・説明を添えます。読み込みで各項目がふわっと現れます。

▶ 動かす静的

統計カード解説あり

Stat Card

ラベル・大きな数値・前期比の増減（増は緑↑／減は朱↓）・小さなスパークラインをまとめたKPIカード。横に2〜3枚並べてダッシュボードの要約を示します。

▶ 動かす静的

バッジ解説あり

Badge

ステータスドット（成功／警告／エラー／情報）、アイコンに重ねる件数バッジ、NEWピル、数値の通知バブルを一覧にした見本。状態や件数を小さく添えるための定番部品です。

▶ 動かすクリック

カート投入アニメ

Fly-to-Cart Animation

「カートに入れる」ボタンで商品サムネがカートアイコンへ放物線を描いて飛び込み、バッジ数が +1 される。タップでも動作。

▶ 動かすクリック

カラースウォッチ

Color Swatch Picker

色の丸をタップすると商品プレビューの色と選択中カラー名が変わる。選択中は白いリングでハイライト。

▶ 動かすクリック

サイズ選択

Size Selector

S/M/L/XL のピルをタップしてサイズを選ぶ。品切れは取り消し線で無効化。未選択でカートを押すと選択を促すシェイクと案内が出る。

▶ 動かすクリック

在庫・残数表示

Stock Urgency Indicator

「残りわずか 3点」の残量バーと控えめなパルスアニメーションで購買意欲を後押しするウィジェット。

▶ 動かすクリック

価格シミュレーター

Price Calculator

数量 ± とオプション選択で合計金額がカンマ区切りのアニメ付きカウントアップで更新されるウィジェット。

▶ 動かすクリック

料金 月/年トグル

Pricing Plan Toggle

月額⇄年額をトグルすると価格が数値カウントアニメで切替わり、「2ヶ月分お得」の割引バッジがふわっと出現するプランカード。

▶ 動かすドラッグ

価格ヒストグラム・スライダー

Price Histogram Slider

在庫の価格分布を棒グラフで見せ、下の二重スライダーで範囲を絞る。範囲内の棒だけ色づき、該当件数が更新される。Airbnb風の定番ECフィルタ。

▶ 動かすクリック

レビュー評価分布バー

Review Rating Distribution

平均★と、★5〜★1ごとの件数バーを表示。バーをタップするとその評価に絞り込み、対象レビューだけを表示する。商品ページの定番。

▶ 動かすクリック

切り取り線クーポン

Perforated Coupon Ticket

ミシン目（半円の切り欠き＋破線）で仕切られたチケット型クーポン。「コードを表示」でクーポンコードがめくれて現れ、タップでコピー完了に変わる。

▶ 動かすホバー

商品比較テーブル解説あり

Product Comparison Table

3商品を仕様ごとに ○/× で比較し、おすすめ列をハイライト。狭い画面では横スワイプでき、行ホバーで横一列が強調される。

▶ 動かすクリック

商品カード解説あり

Product Card

画像・お気に入り♥・SALEタグ・ブランド・商品名・星評価・価格（元値は取り消し線）・カート追加ボタンを収めたEC定番の商品カード。ホバーでふわっと持ち上がる。

▶ 動かすクリック

カート

Shopping Cart

サムネ・商品名・数量ステッパー（−／＋）・削除×を持つ明細行と、小計・送料・合計のサマリーを備えた買い物カゴ。数量変更や削除で行の金額と合計がその場で再計算される。

▶ 動かす入力

インライン編集

Inline Editing

テキストをクリック／タップでその場編集に切り替え、Enter または保存ボタンで確定、Esc またはキャンセルで元に戻す。

▶ 動かすドラッグ

カンバン D&D

Kanban Board

カードを「ToDo／進行中／完了」の列間でドラッグして移動できる。Pointer Events で実装しタッチ操作にも対応。矢印キーでも移動できる。

▶ 動かすクリック

コマンドパレット解説あり

Command Palette

ボタンまたは ⌘K／Ctrl+K でコマンド検索オーバーレイを開き、入力で絞り込み、↑↓キーまたはタップで実行できる。

▶ 動かすドラッグ

分割ビュー

Resizable Split View

中央の仕切りをドラッグして左右ペインの幅を自由に変えられる。Pointer Events で実装しタッチ操作にも対応。

▶ 動かすクリック

一括選択

Bulk Selection

行チェックボックスと「全選択」で複数行を選び、1件以上選択すると削除・複製の一括操作バーがスライドインする。

▶ 動かすクリック

変更差分ビュー

Diff View

変更前後のテキストを行単位で比較し、追加行を緑・削除行を朱でハイライト表示する。+/− 記号付きでひと目で差分を把握できる。

▶ 動かすクリック

通知センター

Notification Center

ベルアイコン（未読バッジ付き）をタップすると通知リストのパネルが開く。各通知をタップして既読化すると未読数が減る。

▶ 動かすクリック

ショートカット一覧

Keyboard Shortcut Overlay

「?」ボタン（または ? キー）でキーボードショートカット一覧のオーバーレイを表示。kbd 風のキー表示で見やすく整理する。

▶ 動かすホバー

アバターグループ

Avatar Group

共同編集者のアイコンが少しずつ重なって並び、末尾に「+N」で残数を表示。ホバー/タップで扇状に広がって全員が見える。

▶ 動かすクリック

生成中オーラ枠

AI Generating Glow Border

AIが応答を生成している間、カードの外周を虹色グラデーションの光がゆっくり回る。完了すると光が静まり、回答が現れる。

▶ 動かすクリック

思考ステップ開示

Chain-of-Thought Disclosure

「4秒 思考しました」の折りたたみをタップすると、AIの推論ステップが1つずつチェックされながら展開する。ChatGPT/Claude系の定番。

▶ 動かすクリック

プロンプト候補チップ

Prompt Suggestion Chips

空のチャット画面に候補チップを並べ、タップすると入力欄に流し込まれ、AIの返答が1文字ずつストリーミング表示される。空白画面の離脱対策。

▶ 動かす入力

チャットUI

Chat UI

メッセンジャー風の吹き出し。相手は左（淡色）、自分は右（藍）に並ぶ。入力欄に打って送るとJSで自分の吹き出しが増え、タイピング中を示す3点アニメの後に返信が届く。

▶ 動かすクリック

コメントスレッド

Comment Thread

アバター付きのコメント一覧。返信は1段ネストして表示。ハートの「いいね」はタップで数が増減し、返信ボタンで簡易入力欄が開いて返信を追加できる。

▶ 動かすクリック

フィードカード

Feed Card

SNSの投稿カード。アバター・名前・時刻のヘッダー、本文、グラデーションのメディア、いいね／コメント／シェアのアクション行。いいねはタップで切り替わり、件数も更新される。

▶ 動かす入力

メンション入力

@Mention Input

「@」を打つとユーザー候補のドロップダウンが絞り込み表示され、選ぶと藍色のメンションchipとして本文に挿入される。候補は矢印キーで移動、Enterで確定、Escで閉じられる。

▶ 動かすクリック

ストーリーズ

Stories

Instagram風のストーリーのリング一覧。タップで全画面ビューが開き、上部の分割プログレスバーが自動で進む。画面の右をタップで次、左で前、×で閉じられる。

▶ 動かすクリック

ウォークスルー

Walkthrough (Coach Marks)

初回ガイド（コーチマーク）。暗転した画面で1つのUI要素だけをスポットライトで照らし、吹き出しの「次へ／スキップ」で3ステップ進むたびにハイライトが移動する。ドットで現在地を示す。

▶ 動かす静的

ウェルカム画面

Welcome Screen

初回起動のウェルカム画面。アプリマーク・あいさつの見出し・ひと言の価値提案に、主要アクション「はじめる」と副次「ログイン」を中央に配した第一印象の型。

▶ 動かすクリック

プログレスチェックリスト

Progress Checklist

初期設定を促すチェックリスト。項目をクリックすると打ち消し線とチェックのアニメーションで完了扱いになり、上部のプログレスバーと「3/5 完了」カウンターが進む。

▶ 動かす静的

404ページ解説あり

404 Page

ページが見つからないときの案内。大きな「404」とやさしい文言、ホームへ戻る導線を中央に据える。上空を漂うイラストがゆっくり浮遊する。

▶ 動かすクリック

エラー状態解説あり

Error State

読み込み失敗をその場で伝えるエラーパネル。「再試行」を押すと一瞬スピナーが回り、成功状態へ切り替わる。

▶ 動かす静的

メンテナンス画面

Maintenance Page

サービス停止中を知らせるメンテナンス画面。歯車がゆっくり回るイラストと、再開予定時刻を中央にまとめて表示する。

▶ 動かすクリック

クッキーバナー解説あり

Cookie Banner

画面下部に現れる Cookie 同意バー。「同意する」で受け入れ、「設定」で分析 Cookie の可否を選んで保存。いずれも下へスライドして消える。

▶ 動かす静的

エンプティステート解説あり

Empty State

まだ項目がない一覧のためのプレースホルダー。空の箱のイラストと案内文、最初の一歩を促す「新規作成」ボタンを中央に置く。押すと1件できて一覧に切り替わる。