インタラクションデザイン辞典

リップル波紋ボタン

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 の円形グラデで“穴”を開けて実装。

フェードイン出現

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())。

トグルスイッチ

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点バウンス・バーのシマー。読み込み中を静かに伝える定番の見本。

生成中オーラ枠

AI Generating Glow Border

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

思考ステップ開示

Chain-of-Thought Disclosure

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

プロンプト候補チップ

Prompt Suggestion Chips

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

フローティングラベル

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に描画する仮想スクロール。スクロールに応じて表示スライスを差し替え、総量ぶんの高さはスペーサーで確保する。

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() だけで作るモダンなベント。

モーフ遷移（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は不要。

バーチャート描画

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」で残数を表示。ホバー/タップで扇状に広がって全員が見える。

横スクロールギャラリー

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

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

カルーセル

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

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

モーダル

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で閉じる。

タイプライター

Typewriter Effect

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

文字スクランブル

Text Scramble

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

グリッチ

Glitch Text

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

グラデ流れ文字

Animated Gradient Text

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

キネティック分割

Kinetic Typography

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

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本へ分岐するか、先端に花を咲かせて止まる再帰的な生成表現。

グリッドレイアウト

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の定番ブロックです。

チャット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 同意バー。「同意する」で受け入れ、「設定」で詳細へ。いずれの操作でも下へスライドして消える。

エンプティステート

Empty State

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