全技法一覧（394件）

Web Design Lab の全394技法をカテゴリ別に一覧。CSS・JavaScript・Canvas・SVG・WebGL・Python の表現技法を、ライブデモとコピーできるコード付きで。

レイアウト & グリッド (17)

Flexbox ホーリーグレイル — ヘッダー・フッターと固定幅の両サイド＋伸縮する中央カラムを Flexbox で構成する定番の3カラム管理画面レイアウト。
aspect-ratio メディアグリッド — aspect-ratio をCSS変数で制御し、1:1/4:3/16:9などの比率を保ったままタイルを敷き詰める画像ギャラリー。比率切替も滑らかに。
CSS multi-column テキスト — column-width・column-rule・column-span で新聞風の段組み本文を組む。ドロップキャップや見出しの段ぶち抜きも実演。
スプリットスクリーン 50/50 — 画面を左右50/50に分割し、それぞれ異なるトーンのコンテンツを配置するランディングページの定番構成。狭い画面では自動的に縦積みへ切り替わる。
オートフィット・カードグリッド — grid-template-columns の repeat(auto-fit, minmax()) で列数が自動増減するカードグリッド。幅ボタンで折返しの変化を確認できる。
フルブリード交互セクション — 全幅の帯セクションが明るい配色と暗い配色で交互に並ぶランディングページ構成。帯の中身は中央のmax-widthに収まり、スクロールで順にふわりと現れる。
読みやすい本文レイアウト — 本文をmax-width: 65chの読みやすい行長に収め、写真や図版だけをグリッドで全幅にはみ出させるブレイクアウト構成の記事レイアウト。読了プログレスバー付き。
CSS Grid マガジンレイアウト — grid-template-areas で名前付きエリアを定義し、雑誌の誌面のようにヒーロー・索引・ヘッダーを組む。複雑な誌面構成を宣言的に表現できる。
CSS-only Masonry風グリッド — column-count と break-inside: avoid だけで、高さの異なるタイルを石積み状に並べる Masonry 風ギャラリー。JSのライブラリ不要。
Container Queries 適応カード — container-type と @container で、置かれたコンテナの幅に応じて同じカードが縦積み↔横並びへ切り替わる。スライダーで挙動を体感できる。
ベントグリッド — grid-column / grid-row の span で大小のタイルを組み合わせる、近年流行のベント風ダッシュボードレイアウト。クリックで発光パルス。
Sticky スタックスクロール — position: sticky と top のずらしで、スクロールするとカードが重なり積み上がるストーリーテリング向けレイアウト。進捗バーをJSで連動。
アプリシェル（サイドバー＋ヘッダー） — 管理画面の定番構成。左サイドバー・上ヘッダー・メインを CSS Grid の grid-template-areas で組み、ボタンでサイドバーを畳んで表示領域を広げられる。
スティッキー目次サイドバー — 本文の隣に置いた目次サイドバーが position:sticky で追従し、スクロールしても画面内に留まり続ける。長文記事や技術ドキュメントの目次に最適な構成。
ウィジェット・ダッシュボード — grid-auto-flow: dense と可変スパンで大小のウィジェットを隙間なく敷き詰めるダッシュボード。並び替えやクリック拡大で密集アルゴリズムの動きを体感できる。
マスター/詳細2ペイン — 左に一覧、右に詳細を並べるマスター/詳細レイアウト。項目クリックで右ペインが切替わり、狭い画面では1ペイン表示に自動で切替わり戻るボタンで一覧へ戻れる。
Subgrid カード整列 — grid-template-rows: subgrid で各カードが親グリッドの行ラインを継承し、本文の長さが違っても見出し・価格・ボタンの高さがピタリと揃う料金表。

ヒーロー & タイトル (21)

スプリット・ヒーロー — 左にキャッチコピーと2つのCTA、右に浮遊するダッシュボードのUIカードとブロブ背景を配置したスプリット構成。SaaSやプロダクトLPの導入直後に置く定番ヒーローです。
中央グラデ・ヒーロー — 中央に大見出し（グラデーション文字）とCTAを置き、背景に揺れるメッシュグラデと点滅する微粒子を敷いた構成。プロダクトのトップやローンチLPの一枚目に向きます。
画像オーバーレイ・ヒーロー — 背景写真に暗幕グラデを重ね、左下にコピーと2つのCTAを置いた構成。背景はゆっくりズーム（Ken Burns）します。旅行・不動産・ブランドサイトの一枚目に向きます。
中央集約ヒーロー＋スクロール誘導 — 小ラベル・特大見出し・サブ・2つのボタンを中央に積み、下部に弾むスクロール誘導を添えた構成。見出しは語ごとに浮かび上がります。ブランドやキャンペーンの強い第一印象づくりに。
セクション見出しキット — 連番・小ラベル・大見出し・装飾下線・リード文が、画面に入ると順に組み上がる「セクションの顔」のひな形。ページ内の区切りに一貫したリズムを与えます。見出し設計のテンプレとして使えます。
下層ページヘッダー（パンくず付き） — パンくず・ページタイトル・要約・メタ情報をまとめた下層ページの見出し帯。背景のグラデーションがゆっくり流れます。記事・一覧・サービス詳細など第2階層以下の冒頭に使える定型です。
メッシュグラデ背景ヒーロー — やわらかく溶け合うメッシュ状グラデーションを背景に敷いた、写真不要で高級感のあるヒーロー。色面がゆっくり動き、抽象的で洗練された第一印象を作ります。SaaSやブランドのトップに。
インライン登録ヒーロー — 見出しのすぐ下にメール登録フォームを置き、第一画面で行動まで完結させるヒーロー。リード獲得を最優先するSaaSやニュースレターのトップに最適な、CV直結型の構成です。
セクション間CTAバナー帯 — ページの途中に挟む、横長のCTAバナー帯。見出し＋一言＋ボタンで「次の行動」へ橋渡しします。長いLPの中だるみを防ぎ、要所で申込やお問い合わせへ誘導できる定番パーツです。
入力フォーム付きヒーロー — 中央のキャッチコピーにメール入力欄と登録ボタンを一体化させたウェイトリスト向けヒーロー。背景は揺れるメッシュグラデ、送信すると注記テキストが成功表示に切り替わります。
ミニマル・タイポ・ヒーロー — 特大見出しだけを主役にし、余白をたっぷり取った上品なヒーロー。下に小さなサブコピーと控えめなテキストCTAを添え、背景はごく淡く息づく光のみで構成しています。
ダーク発光ヒーロー — 漆黒の背景に発光する見出しとオーロラ状のグラデーションを重ねた先進的なヒーロー。淡い格子とテキストの発光パルスが未来的な雰囲気を演出します。
ベント・ヒーロー — 見出しブロックの周囲に統計・写真・CTA・導入企業ロゴのタイルを非対称グリッドで配置したベント構成。情報を1画面に凝縮したいSaaSのトップページに使えます。
2分割ヒーロー（見出しせり上がり） — 左に見出し・サブ・CTA、右にビジュアルを置く2分割のファーストビュー。見出しは行マスクから順にせり上がり、ビジュアルはふわりと浮遊します。SaaSやサービスサイトの王道構成です。
スポットライト見出しヒーロー — 暗い画面の上を光のスポットが移動し、通過した部分だけ見出しが色づくドラマチックなヒーロー。マウスにも追従します。プロダクトのローンチやポートフォリオの表紙に映えます。
背景画像リビール・ヒーロー — 背景写真がゆっくりズーム（Ken Burns）し、その上で見出しがクリップで切り開かれるように現れる没入型ヒーロー。暗幕オーバーレイで可読性を確保。旅行・飲食・イベント系に好相性です。
Bento構成ヒーロー — 見出しの大カードを中心に、画像・数値・CTAの小カードを敷き詰めたBento（弁当箱）型ヒーロー。情報を区画で見せられるため、機能の多いSaaSやプロダクトの第一画面で人気の構成です。
実績・数字ヒーロー（カウントアップ） — 大見出しの下に、導入社数・稼働率・満足度などの数字がカウントアップして信頼を訴えるヒーロー。BtoBやサービスの実績アピールに効きます。数値が0から目標値まで増えていきます。
タイプ風見出しヒーロー — 見出しの一部が次々に打ち変わる（タイプライター＋ワード差し替え）ヒーロー。「○○のための△△」の△△が切り替わり、複数の価値提案をテンポよく見せられます。サービスの幅を伝えたいトップに。
製品ティルト・ヒーロー — 左にコピー、右に製品プレビューのUIモックカードを配置。カードはマウス位置に応じてperspectiveで傾き、無操作時はゆっくり揺らぎ続けるSaaS向けヒーローです。
統計バンド・ヒーロー — コピーとCTAの下に4つの指標を並べたバンドを配置したヒーロー。バンドが画面に入ると数値が0からカウントアップし、導入実績を印象づけます。

ヘッダー & ナビ (18)

告知バー付きヘッダー — ヘッダー上部にキャンペーン告知バー（カウントダウン＋閉じる）を重ねた構成。閉じるとバーがスッと畳まれ本体が上へ詰まります。セール・新機能・期間限定訴求の常套手段です。
中央ロゴ・振り分けナビ — 中央にロゴを置き、ナビを左右へ振り分けるクラシックで上品なヘッダー。下線がスッと伸びるホバーと、スクロールで現れる影が特徴。ファッション・ホテル・レストラン等のブランドサイトに合います。
パンくずリスト — 「›」区切りで階層をたどるパンくずリスト。画面が狭いときは中間の階層を「…」にまとめ、クリックすると展開。リンクはホバーで下線がすっと伸びます。
ページネーション — 数字とページ送りボタンで構成するページネーション。現在地から離れた番号は「…」に省略され、クリックすると即座にページが切り替わります。
小型ドロップダウンナビ — メガメニューほど大きくない、項目ごとの小さなドロップダウン。ホバー／フォーカスで数件のサブリンクをふわっと出します。情報量が中程度のサイトでちょうどよい、扱いやすいナビです。
ニュースティッカー付きヘッダー — ヘッダー上部に、お知らせが自動で切り替わる（または流れる）ティッカー帯を備えた構成。新着・在庫・速報などを途切れず伝えられます。メディアやEC、コミュニティサイトで便利です。
スクロール追従・縮小ヘッダー — ヒーロー上では背の高い透明ヘッダー、読み進めるとコンパクトな白帯へ縮小＋ロゴ縮小＋影付き。スクロール量で is-stuck を切替える定番の追従ヘッダーで、LPやコーポレートサイトに使えます。
下スクロールで隠れるヘッダー — 下方向スクロールでヘッダーを隠し、上方向に戻すと即座に再表示。読書領域を最大化しつつ操作性を保つ手法で、記事・ドキュメント・モバイルサイトに向きます。スクロール方向の差分で translateY を制御します。
メガメニュー — ナビ項目にホバー／フォーカスすると、複数カラムのリンクと説明を一度に見せる大型ドロップダウン。情報量の多いECやサービスサイトの回遊性を高めます。focus-within とJSの自動デモ開閉で動きを確認できます。
全画面オーバーレイメニュー — ハンバーガーをタップすると全画面メニューが開き、リンクが時間差で迫り上がる演出。アイコンはX字へモーフ。ポートフォリオやブランドサイトのモバイル導線に効く没入型ナビです。
レスポンシブ・ナビバー — ロゴ・メニュー・CTAを横並びに表示するナビバー。画面が狭くなるとハンバーガーボタンに切り替わり、タップで全幅ドロワーメニューがふわりと展開します。
折りたたみサイドナビ — アイコンとラベルを並べた管理画面向けサイドナビ。トグルでアイコンだけの細いレールへ折りたたみ、その状態でもホバーするとラベルがツールチップで表示されます。
下部タブバー — モバイルアプリ風の下部固定タブバー。選択したタブへ丸いインジケーターがなめらかにスライドし、アイコンが浮き上がるように強調表示されます。通知バッジ付き。
検索バー展開ヘッダー — 虫めがねアイコンをクリックすると、ナビの上をスライドして検索入力欄が伸びてくるヘッダー。普段はすっきり、必要なときだけ検索を前面に出せます。ECやメディアの回遊性を保ちつつ省スペースにできます。
サイドバー・ドロワーナビ — ハンバーガーで左から滑り込むドロワー型サイドナビ。背景は暗幕で覆い、項目は時間差で現れます。階層の深いサイトや管理画面、モバイル導線に向く定番のスライドメニューです。
タブ型ナビ（下線追従） — ナビをタブのように扱い、選択中の項目へ下線インジケーターがスライド移動するヘッダー。現在地が一目で分かるため、セクションの多いLPやアプリ風サイトに合います。
浮遊ピル型ヘッダー — 画面上端から少し浮かせた、角丸＋影のカプセル状ヘッダー。スクロールすると幅が締まって中央に寄ります。モダンなブランドサイトやポートフォリオで人気の“浮いている”ナビです。
メガメニュー — トップ項目をクリックまたはホバーすると、複数カラムのリンクとおすすめ枠が並ぶ大型パネルが開くメガメニュー。Escや外側クリックでも閉じられます。

フッター (12)

大型CTAフッター — グラデーション帯に特大の見出しとメール登録フォームを置き、その下にリンク列と著作権バーを重ねた「最後のひと押し」型フッター。SaaSやLPで離脱直前の行動喚起に効きます。
多段サイトマップ・フッター — 製品・会社・リソース・法務などを複数カラムで整理した情報量の多いダークフッター。右にニュースレター、下部に言語切替・SNS・著作権。大規模サイトやコーポレートの定番レイアウトです。
流れる文字のフッターバナー — 「LET'S WORK TOGETHER」などの大文字が左へ流れ続けるマーキー型のお問い合わせ誘導。下にメール・SNSを添えた、制作会社やクリエイター系で人気の Animated フッターです。
カード重ね・ニュースレターフッター — フッター上辺に浮かせた登録カードでニュースレターへ誘導し、下にリンク列と「トップへ戻る」を配置。カード型で視線を集める Cards 系フッターで、メディアやブログに向きます。
ミニマル1行フッター — ロゴ・最小限のリンク・著作権を1行に収めた、引き算の効いたフッター。情報量を絞りたいポートフォリオやランディングページに。視覚的ノイズを減らし、本文の余韻を保ちます。
地図＋店舗情報フッター — 左に地図、右に住所・営業時間・電話を並べた実店舗向けフッター。カフェ・クリニック・ショップなどローカルビジネスのサイトで、来店導線をまとめて見せられます。
アプリDLフッター（バッジ＋QR） — App Store / Google Play のバッジとQRコードを添えた、アプリ訴求フッター。PCではQRでスマホへ誘導、モバイルではバッジで直接ストアへ。アプリを持つサービスの定番です。
巨大タイポ・フッター — 下端いっぱいに置いた特大ブランドロゴが主役のフッター。ホバーでグラデーションが流れ、文字が塗り変わります。ポートフォリオやブランドサイトで強い余韻を残す Large Type 表現です。
せり上がり・リビールフッター — 本文を最後までスクロールすると、白いコンテンツがめくれ上がり、背後に隠れていたダークフッターがせり出します。奥行きを感じさせる演出で、近年のデザインサイトで多用される手法です。
モバイル折りたたみフッター — リンク群を見出しごとにアコーディオン化し、タップで開閉するフッター。リンクの多いサイトでも縦長になりすぎず、スマホで快適に畳めます。狭い画面のサイトマップに最適です。
言語・地域セレクタ付きフッター — 言語・地域・通貨を選べるセレクタを備えたフッター。グローバル展開のECやSaaSで、訪問者に合わせた表示へ切り替える導線を最下部に置けます。ドロップダウンで省スペースにまとめます。
波形イラスト装飾フッター — 上辺をなめらかな波で区切り、ゆったり揺れるSVGの波を重ねた装飾的なフッター。やわらかい世界観のブランドや子ども向け・自然派サービスで、親しみのある締めくくりになります。

追従ウィジェット (12)

出現する下端CTAバー — 少しスクロールすると画面下からスッと現れる追従CTAバー。価格や訴求と申し込みボタンを常に手の届く位置に置けます。ECやサービス、予約導線で離脱を防ぐ常套手段。閉じることも可能です。
戻る↑ボタン（進捗リング付き） — 一定量スクロールすると現れる「トップへ戻る」ボタン。周囲のリングが読み進み度を示し、押すと最上部へ滑らかに戻ります。長いページの定番ユーティリティをひとつにまとめました。
縦型SNSシェアレール — 画面左端に縦並びで固定したSNSシェアの帯。ホバーでアイコンが横に伸び、ラベルが現れます。記事やキャンペーンページで拡散導線を常時見せておきたいときに有効です。
Cookie同意バー — 画面下に固定し、Cookie利用への同意・設定・拒否を促すバナー。GDPR等への配慮で多くのサイトに必須の要素です。同意で畳まれ、設定で詳細選択へ。控えめな出現で本文を邪魔しません。
下部シェア＆いいねバー — 記事下部に固定した、いいね・ブックマーク・コメント・シェアのアクションバー。数値カウンタ付きで反応を可視化します。クリックでハートが弾み、数が増える楽しい手応えを返します。
追従目次（現在地ハイライト） — 本文の横に固定した目次が、スクロール位置に応じて現在の見出しを自動でハイライトします。長文記事やドキュメントの回遊性を高める scrollspy の定番。クリックで該当位置へジャンプもできます。
フローティングアクションボタン — 右下に固定した丸ボタンを押すと、関連アクションが扇状に開くフローティングメニュー（FAB）。問い合わせ・電話・トップへ等をまとめられます。モバイルサイトやアプリ風UIで重宝します。
セクションドットナビ — 画面右に縦並びのドットを固定し、表示中のセクションを示す1ページナビ。ホバーでセクション名が現れ、クリックで移動します。フルスクリーン構成のLPやポートフォリオに似合います。
サポートチャット吹き出し — 右下に常駐するチャットボタンをクリックすると、ミニチャット窓が開く問い合わせウィジェット。よくある質問や有人サポートへの入口として、コンバージョンや満足度の向上に使われます。
商品追従購入バー — 商品ページをスクロールすると下から現れる、サムネ・商品名・価格・数量・カート投入をまとめた追従バー。長い商品説明の途中でも、いつでも購入に進めます。ECの定番コンバージョン施策です。
追従セクションタブ — ページ内セクションへのタブが、スクロールで上部に貼り付き、表示中の区画をハイライトします。商品詳細の「概要／仕様／レビュー」のような長いページの章内ナビとして定番です。
追従ミニプレーヤー — 画面下に固定された小型のメディアプレーヤー。カバー画像・タイトル・再生／一時停止・進捗バー・波形イコライザを備えます。ポッドキャストや音楽、音声記事のサイトで継続再生を支えます。

料金・FAQ・証言 (10)

3プラン料金表（おすすめ強調） — Free・Pro・Team の3枚を横並びにし、中央のおすすめプランを一段持ち上げて強調する定番の料金表。各プランの価格・機能・CTAを揃え、比較しやすく見せます。SaaSやサービスサイトの王道です。
機能比較テーブル — プランごとの機能対応を ✓／− で一覧する比較テーブル。項目数が多いサービスで、どのプランに何が含まれるかを明確に示せます。行ホバーで視線を案内し、上部にプラン名を固定して見やすく。
単一プラン・ハイライト — プランが1つのサービス向けの、価格とベネフィットを大きく見せる単独料金カード。チェックリストと強いCTA、保証バッジで「これ1つでOK」の安心感を作ります。買い切りや単一サブスクに最適です。
アコーディオンFAQ（解決導線付き） — 質問をクリックで開閉するFAQ。最下部に「解決しませんか？」のお問い合わせ導線を添えて、自己解決と有人サポートを両立します。サポートページやサービスサイトの定番レイアウトです。
2カラムFAQ（カテゴリ見出し付き） — よくある質問をカテゴリごとに2カラムで並べた一覧型FAQ。スクロールで全体を見渡せるため、質問数が多くても探しやすいのが利点。料金・利用方法など見出しで整理して見せます。
証言カードグリッド（星評価付き） — アイコン・名前・肩書き・コメント・星評価をまとめた証言カードを並べたグリッド。複数の声を一望でき、サービスへの信頼を多面的に伝えます。LPの社会的証明セクションの定番です。
月額／年額トグル切替の料金表 — 月額と年額をスイッチで切り替え、価格が切り替わる料金表。年額に「2ヶ月分お得」などの割引バッジを添えて年間契約へ誘導します。価格の動きで選びやすさと割安感を演出します。
検索フィルタ付きFAQ — 上部の検索ボックスに入力すると、質問がリアルタイムで絞り込まれるFAQ。該当語をハイライトし、件数も表示します。質問数が多いヘルプセンターで、目的の答えに素早く辿り着けます。
流れる証言＆ロゴマーキー — 短い推薦コメントや導入企業ロゴが横に流れ続けるマーキー型の社会的証明。省スペースで多数の声を見せられ、止まらない動きが活気を演出します。BtoBサイトの実績帯に向きます。
大型引用・証言スライド — 大きな引用符とともに1件の声を主役級に見せ、複数の証言を自動で切り替えるスライド。インパクト重視で、導入事例の象徴的な一言を強く印象づけたいときに効果的です。

タイムライン & 404 (10)

縦タイムライン — 左に伸びる縦線とノードで年表をたどるタイムライン。日付・見出し・説明を並べ、スクロールに合わせて各項目が順にふわっと現れます。
アクティビティフィード — アバター付きの操作履歴を表示するアクティビティフィード。数秒ごとに新しい操作が一覧の先頭にスライドインし、常に最新の状態を保ちます。
進捗ステップ — 受付から配達完了までを追う注文追跡ステップ。時間の経過とともに現在地が自動で進み、完了した区間の連結線が満ちていきます。
ポップな404（浮遊する図形） — 大きな「404」と親しみのあるメッセージ、ホームへ戻る導線を、ふわふわ浮かぶ図形とともに見せる陽気なエラーページ。離脱しがちな404を、ブランドの遊び心で和ませて回遊につなげます。
検索付き404 — 迷い込んだユーザーを助ける、検索ボックスと人気リンクを備えた実用的な404ページ。「お探しのページは見つかりません」で終わらせず、目的地へ再誘導します。メディアやECに向きます。
左右交互タイムライン — 中央の縦線を挟んでカードが左右交互に並ぶ沿革タイムライン。それぞれが逆方向からふわっと現れ、狭い画面では片側寄せの1列表示に切り替わります。
横タイムライン — 横方向にスクロールする年表タイムライン。年ごとの節目を線でつなぎ、現在地のノードだけ光の輪でパルスさせて強調表示します。
ロードマップ — Now・Next・Laterの3列に分けたカンバン風ロードマップ。ステータスごとに色分けし、進行中タスクには達成率を示す進捗バーが伸びます。
イラスト404（はぐれ宇宙飛行士） — CSSだけで描いた宇宙飛行士が宙を漂うイラスト系404。世界観のあるビジュアルで「迷子」を表現し、ブランドの個性を出します。ポートフォリオやプロダクトサイトに似合います。
グリッチ404 — 「404」がノイズとともに揺れ、RGBがずれるサイバーなグリッチ404。テック系やゲーム、音楽系サイトの世界観に合う、強い印象を残すエラーページです。動きで“壊れた感”を演出します。

アニメーション & 遷移 (21)

staggered リスト出現 — リスト各行を時間差でフェード＆スライドインさせる演出。タスク一覧や検索結果の登場アニメーションに使えます。
無限マーキー — トラックを複製しtranslateX(-50%)で継ぎ目のない横スクロールループを実現。お知らせ帯やロゴ流しに使えます。
グラデ見出し＆光沢 — background-clip: text と背景アニメで文字を発光させ、各文字を浮遊させる見出し演出。ヒーローのキャッチに。
タブ下線スライド遷移 — アクティブタブの実寸を計測し、下線インジケーターを transform で滑走させるタブ切替。内容のフェードと同期し、文字数が違っても正確に追従します。
3Dカードフリップ遷移 — CSS 3D Transforms の preserve-3d と backface-visibility で表裏をY軸回転。クリックやキー操作でめくれるプロフィールカードの立体トランジションです。
コマ送りステップアニメ — CSSのsteps()だけで、なめらかさを意図的に捨てた12fps風のコマ送り質感を作ります。商品紹介をストップモーション動画風に見せたいときや、操作感をコミカルにしたい場面に。3匹が飛び飛びに横断します。
ふわふわ浮遊キャラ群 — パステル色のキャラクターたちが各々の周期でふわふわ漂い、順番にシュッと弾みます。ゆるふわ系のギャラリーやランディングの賑わいに。サイン波だけで作る軽量な群体アニメーションです。
ブラーイン出現 — 見出しや要素を blur(12px)+scale+opacity 0 の状態から、鮮明・等倍へ連続して立ち上げる登場演出。要素ごとに時間差を付けてフォーカスが合う瞬間を演出します。ヒーローや見出しの初動に。
イージング比較デモ — linearからback・anticipateまで複数のtiming-functionを同時に走らせて違いを体感できます。モーション設計の学習に。
パルス通知バッジ — アイコン右上のカウントを波紋とポップで強調する通知バッジ。更新時のアテンション喚起に使えます。
スケルトン→表示遷移 — シマー付きスケルトンから実コンテンツへなめらかに切り替えるロード演出。体感速度の向上に役立ちます。
3Dフリップカード — ホバーで反転しつつポインタ追従で傾く立体カード。preserve-3dとCSS変数で会員証やプロフィールカードに。
View Transitions API 一覧⇔詳細 — ネイティブの View Transitions API で一覧と詳細の切替を自動モーフ。共有サムネに view-transition-name を割り当て、SPA風の滑らかな画面遷移を実現します。
FLIPアニメ並べ替え — FLIP（First-Last-Invert-Play）技法で並べ替え時の位置差分だけをGPUアニメ。シャッフル・ソート・カードクリックで滑らかにリオーダーするリスト遷移です。
カーテン遷移スライダー — 上下のパネルが中央で閉じ切る瞬間に裏でコンテンツを差し替えるカーテン演出。シーン切替やページ遷移のつなぎに使える劇的なトランジションです。
モーフィングナビ — ハンバーガーアイコンが×へモーフし、角の円が全面へ広がるメニュー遷移。clip-path とSVGの変形で、ヘッダーの開閉インタラクションを上質に演出します。
クリップパス画像リビール — 前面に次の画像を載せ clip-path の斜めワイプで切替えるギャラリー遷移。完了後に背面へ確定する二層構成で、無段差にスライドし続けます。
額縁ズームトンネル — 奥の額縁が次々と手前に迫り、最後の一枚の絵の中へ吸い込まれるように進むオープニング演出です。美術館・アーカイブ系サイトの作品世界への導入を、CSS 3Dだけで作ります。
数字ロール（オドメーター） — 各桁が 0-9 の縦ストリップを translateY で回転させ、機械式オドメーターのように数値を更新する演出。桁ごとに僅かな遅延を付けて転がる質感を出します。カウンターやKPI表示のアクセントに。
モーフィングローダー — SVGパスの点群をイージング補間して滑らかに形を変えるローディング表現。待機画面のアクセントに最適です。
クリップパス円ワイプ — clip-path: circle() を補間し、クリック地点を起点に円が広がってパネルを切り替えるトランジション。

マイクロインタラクション (14)

リップル波紋ボタン — クリック位置を起点に波紋が全面へ広がるマテリアルデザイン風の押下フィードバック。あらゆるボタンに汎用的に組み込めます。
アニメ下線リンク — 純CSSの疑似要素だけで作る4種のホバー下線（左伸び・中央展開・スワップ・枠線）。ナビゲーションやテキストリンクの質感を高めます。
ハンバーガー→×モーフ — 3本線がtransformで滑らかに×へ変形するメニュートグル。aria-expandedも同期し、モバイルナビの開閉ボタンにそのまま使えます。
マグネティックボタン — カーソルの位置に応じてボタンが磁石のように引き寄せられ、内部要素も視差で追従します。ヒーローのCTAやナビに使うと注目を集められます。
3Dティルトカード — マウス位置を回転角に変換し、CSSのperspectiveでカードが立体的に傾き光沢が走ります。商品カードやプロフィールカードの演出に最適です。
いいねハートバースト — クリックでハートが弾み、放射状に色とりどりの粒子が飛び散る「いいね」ボタン。SNSやレビューのリアクションUIに使えます。
昼夜トグルスイッチ — 太陽が月に変わり、空が夜になって星が現れるアニメ付きスイッチ。ほぼ純CSSで動き、ダークモード切替などの設定UIに向きます。
スターレーティング — ホバーでプレビュー、クリックで確定し、矢印キー操作にも対応した5段階の星評価。レビュー投稿やアンケートの入力UIに使えます。
磁力グリッド — ドットの格子がカーソルの磁場で引き寄せ・反発し、近づくほど大きく波打って歪みます。待機中は仮想カーソルが巡回して常に動き、pointermoveで本物に追従。ヒーロー背景やインタラクティブな装飾に使えます。
ハンバーガー組み上げメニュー — 3本線のハンバーガーアイコンを開くと、バンズ・レタス・パティが上から落ちてきて本物のハンバーガーが組み上がります。閉じると逆再生。ただの3本線に遊び心を加える、ナビゲーションの一捻りです。
マーカー注釈ツールチップ — 本文中の赤いマーカー語にカーソルを当てると、その語の真上に画像つきの注釈カードがふわっと現れます。記事を読みながら補足情報へ自然に誘導でき、編集系メディアで効く仕掛けです。
テキストスクランブル — 文字をランダムに揺らしながら正しい単語へ収束させるレトロな演出。requestAnimationFrameで実装し、ヒーロー見出しのアイキャッチに最適です。
紙吹雪サクセスボタン — 押すとボタンが完了状態へ変化し、canvasで紙吹雪が物理落下する達成感の演出。購入完了やフォーム送信成功のフィードバックに使えます。
フッター掃除マスコット — フッター帯に散らばったゴミを、黄色いローラーがコロコロ転がりながら掃除していきます。メニューボタンはゴミと違って飛び越える。実用UIに1匹だけ住まわせる、動きのあるマスコットの実装パターンです。

遊べるUI (11)

展開する検索 — 丸い検索アイコンがクリックで横長バーへ弾性展開し、入力欄がスライドイン。もう一度押すかフォーカスを外すと丸に戻ります。ヘッダーの検索UIに。
コピー成功 — コードをコピーすると「Copied!」の吹き出しがポンと弾んで現れチェックマークに切り替わり、数秒でふわっと消えるコピーボタン。
モーフィング・メニュー — ≡アイコンが弾性変形して×になり、メニュー項目が下から時間差でポップ表示されるハンバーガーメニュー。モバイルナビの開閉に使えます。
はじけるハート — クリックのたびにハートが弾性スケールで弾み、ハートや粒が放射状に飛び散ってフェードするいいねボタン。連打しても崩れません。
弾むチェック — クリックでチェックマークが跳ねながら描かれ、ボックスが弾性スケールし背景色がふわっと波及するチェックボックス。同意フォームなどに使えます。
ゼリーボタン — クリックした位置に向かって押しつぶされ、ゼリーのようにぷるんと弾性で揺れ戻るボタン。押す場所によって歪む向きが変わり、連打しても弾みが破綻しません。
インク・タブ — タブを切り替えると下線が液体のように伸び縮みしながらスライド移動し、クリックした地点からインクの波紋が広がるタブUI。ヘッダーの表示切替に使えます。
絵文字リアクション — ボタンを長押しかクリックすると絵文字パレットが弧を描いてポップアップし、選んだ絵文字が跳ねて確定・カウントされるリアクションボタン。
昼夜トグル — クリックすると太陽と月が弧を描いて移動し、空の背景色が昼と夜のあいだをなめらかに遷移するトグル。雲の漂いや星の瞬きも添えました。
伸びるスライダー — ドラッグするとノブが動かした方向へ弾性で伸び、現在値のバブルが追従表示されるスライダー。指を離すとぷるんと弾んで元の形に戻ります。
グーイ・トグル — ノブが移動する瞬間、SVGフィルターで液体のようにトラックとつながって伸び縮みするトグルスイッチ。設定画面のON/OFF切替に使えます。

スクロール演出 (17)

スクロールリビール — IntersectionObserverで画面に入った要素を順番にフェードアップ表示します。LPやカードリストの登場演出に最適。
scroll-snapギャラリー — CSS scroll-snapで各スライドにピタッと吸着する横スワイプギャラリー。ドット連動で現在位置も表示します。
スクロール進捗バー — ページの読み進み度を上部バーと円形リングで可視化します。長文記事やブログの定番UX。
数字カウントアップ — 要素が画面に入った瞬間、実績数値を0からアニメーションで加算表示します。サービス紹介の統計に。
ソフソフポップイン出現 — ページをスクロールすると、丸い写真や図形がソフソフっと弾みながら順番に現れます。ポップなブランドサイトのような陽気な雰囲気づくりに効く、スプリング系の出現演出です。
純CSS読書進捗バー（animation-timeline: scroll()） — animation-timeline: scroll() で上部の進捗バーがスクロールに連動して伸びます。JavaScript無しで実装でき、長文記事の読了率表示に最適。
パララックス背景 — 複数レイヤーをスクロール速度差で動かし奥行きを演出します。ヒーローセクションのビジュアルに。
stickyスクロールストーリー — position:stickyでビジュアルを固定したまま、スクロールに連動して中身を切り替えるストーリーテリングUI。
スクロール文章ハイライト — スクロール進捗に合わせて文章を単語ごとに点灯させ、読み手の視線を導きます。引用や物語の見せ場に。
スクロール3D回転カード — スクロール量をrotateYに割り当て、カードを立体的に回転させます。CSS 3D transformの応用デモ。
スプリットスクリーン（左右逆スクロール） — 内部スクロールに連動して左パネルは上へ、右パネルは下へと逆方向に動く分割画面。中央の境界線を境に視差が生まれ、対比のあるヒーローやストーリー導入に映えます。
ナラティブ・スクロール — スクロール進行で章（シーン）が切り替わり、背景色と見出しテキストがフェードで入れ替わる没入演出。3〜4シーンで物語のように読み進めるストーリーテリングUIです。
高速スクロール・スピードライン — ゆっくり進んでいたページが突然ヒュンと高速移動し、流線とブラーの残像を残してバウンドしながら停止します。クリスマス特設サイトのような、移動そのものを楽しませるスクロール演出です。
純CSSスクロール出現（animation-timeline: view()） — animation-timeline: view() を使い、JavaScript無しで複数カードをビューポート進入時にopacity+translateYで出現させます。@supportsでガードし非対応ブラウザでは普通に表示。
スクロール速度スキュー — rAFでスクロール速度を算出し、速くスクロールするほど要素をskewY/scaleYで歪ませます。手を止めると線形補間でなめらかに元へ戻る慣性演出。
横スクロールセクション — 縦スクロール量をtransformで横移動に変換するピン留めセクション。ポートフォリオや工程紹介に映えます。
スクロールで画像が全画面に拡大 — スクロール進行で中央の画像が小さなカードから全画面へとなめらかに拡大し、キャプションが浮かび上がるシネマティック演出。プロダクトやポートフォリオの見せ場に。

カスタムカーソル (9)

追従カスタムカーソル — 即時追従のドットと遅延追従のリングを線形補間(lerp)で重ねた2層カーソル。サイトのブランド演出やインタラクティブなナビに使えます。
ブレンドモードカーソル — mix-blend-mode:difference でカーソル下の色を反転させる円。カラフルな作品集やポートフォリオの印象的なアクセントになります。
ホバー拡大カーソル — 要素ホバーで円が拡大し、data-labelの文字をカーソル内に表示。カードギャラリーやリンク集の操作ヒント提示に最適です。
カーソルトレイル — canvasにマウスの軌跡を残光として描く虹色トレイル。ヒーローセクションやランディングページの遊び心ある背景演出に向いています。
マグネティックカーソル — 一定半径内でボタンをカーソル方向へ引き寄せ、ラベルに弾力を持たせる磁石風インタラクション。CTAボタンの注目度を高めます。
スポットライトカーソル — CSSの radial-gradient マスクをカーソルで動かし、暗い画面の周辺だけを照らして隠れた層を見せる演出。謎解きや段階的開示の表現に使えます。
フラッシュライト追従 — 暗いヒーローをカーソル追従の radial-gradient マスクで懐中電灯のように照らし、隠しテキストや画像を浮かび上がらせる演出。離れた周辺は闇に沈みます。謎解きや段階的開示の表現に使えます。
弾力ジェリーカーソル — 移動速度から伸び量と角度を計算し、進行方向へ伸縮する粘性カーソル。体積保存風のscaleで“びよん”とした有機的な動きを表現します。
画像トレイル — マウス移動の軌跡に沿って画像が次々に出現し、短時間でフェード消滅する Codrops 定番のイメージトレイル。移動量が閾値を超えるたびに次の画像を循環表示します。ポートフォリオやヒーローの没入演出に最適です。

タイポグラフィ (14)

グラデーションテキスト — background-clip: text で文字をグラデーションに切り抜き、背景位置のアニメで色を流します。ヒーロー見出しやロゴに最適です。
テキストアウトライン（中抜き文字） — -webkit-text-stroke で塗りのない輪郭文字を作り、塗りレイヤーと重ねてホバーで色が流れ込みます。バナーやポップな見出しに使えます。
縦書きレイアウト — writing-mode: vertical-rl で日本語を縦組みにし、和風の段組みを表現します。詩・俳句・和テイストのサイトに最適です。
ネオンサイン文字 — 多重 text-shadow で発光する管を再現し、不規則な点滅アニメで本物のネオンらしさを出します。ナイトライフ系やレトロなサイトに。
ビッグタイプ交互パネル — 画面を3段に割り、ハミ出すサイズの極太文字を段ごとに逆方向へゆったり往復させます。数秒ごとに1段だけ色が反転。少ない動きで大きなインパクトを出す、アーティスト系サイトの定番手法です。
文字ごと出現アニメ — JSでテキストを1文字ずつspan化し、遅延を付けて波打つように出現させます。ページロード時の見出し演出に向いています。
タイプライター効果 — ターミナル風UIで複数のフレーズを1文字ずつ打って消すループ。点滅カーソル付きで、ヒーローの動的キャッチコピーに使えます。
グリッチテキスト — 疑似要素でRGBをずらした2枚のコピーを clip-path で切り抜き、デジタルノイズ風のグリッチを作ります。サイバー／テック系の見出しに。
擬似3D押し出し文字 — 多層 text-shadow で立体的に押し出した文字を作り、マウス追従でわずかに傾けます。レトロでインパクトのある見出しに使えます。
キネティックタイポグラフィ — 大きな単語が拡大・回転・スライドしながら次々と飛び込み、躍動的に入れ替わるループ演出をJSで実装します。語ごとにアニメ種別を切り替えて単調さを抑え、入場と退場をなめらかに繋ぎます。ヒーローやオープニングの強いキャッチに最適です。
画像で塗った文字 — 見出しテキストを background-clip: text で写真やアニメグラデにくり抜き、背景をゆっくり動かして文字の中で景色が流れて見える表現です。picsum画像とCSSグラデを重ね、文字の輪郭の中だけに動く絵を閉じ込めます。インパクトのあるヒーロー見出しに向いています。
スクロールで一語ずつ着色 — 段落をword単位に分割し、内部スクロールの進行に合わせて薄い文字色から明るいブランド色へ一語ずつ変化させる読み進めハイライト。IntersectionObserverで各wordの着色を制御します。記事やストーリー系のリードに最適です。
可変フォント風ウェイトアニメ — JSで文字ごとに font-weight をsin波で連続変化させ、可変フォントのような波打つ太さ変化を再現します。動的なロゴやヘッダーに。
テキスト解読（スクランブル） — ランダムな記号から正しい文字へ左から順に解読されていく演出をJSで実装。ハッカー風・読み込み完了の表現に向いています。

背景・グラス (19)

アニメーショングラデーション — background-position をアニメーションさせ、4色のグラデーションが無限にループする背景。ヒーローセクションやランディングページの土台に使えます。
ニューモーフィックボタン — 背景と同色＋二方向シャドウで浮き沈みするニューモーフィズムのボタン群。押すと凹む立体感で、トグルやアイコン操作に向きます。
メッシュグラデーション — 複数の radial-gradient を重ねて有機的な色面を作り、JSで各色溜まりを漂わせるメッシュ背景。SaaSやポートフォリオのヒーローに最適です。
SVGノイズ質感 — feTurbulence で生成した粒状ノイズをグラデーションに重ね、上質なマット質感を演出。ボタンでノイズの粗さを切り替えられます。
オーロラ光背景 — ぼかした光の帯をゆっくり揺らし、星空とともに夜空のオーロラを再現するCSS背景。ダークテーマのヒーローに映えます。
ドット/グリッド背景 — CSSのドット格子にマウス追従のスポットライトを重ねた背景。マスクで照らした部分だけドットを濃く見せます。ダッシュボード向け。
回転グラデーションボーダー — @property で角度を回転させた conic-gradient のボーダーがカードの縁を発光させる演出。価格表やバッジカードに使えます。
レトロ・パースグリッド — 夕焼け空に沈む太陽とパースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結します。
ガラスカード（backdrop-filter） — backdrop-filter で背景をぼかした半透明のガラスカード。マウスに追従する光沢で、料金プランや特集カードの主役に使えます。
ニューモーフィックカード — 凹凸のパネルや進捗バーを組み合わせたニューモーフィズムのプロフィールカード。やわらかなダッシュボードUIに最適です。
フロストナビバー — スクロールするコンテンツの上で背後が透けるフロストガラスのナビバー。スクロール量に応じて濃さが変わり、ヘッダーに活用できます。
クレイモーフィズム — 内外の二重シャドウでぷっくり膨らんだ粘土風カード。やわらかく親しみやすいUIやSNS系コンポーネントに向きます。
ニューモーフィック・トグル＆スイッチ — スライドトグルとセグメントスイッチを備えたニューモーフィズムの設定パネル。状態を文章で反映する設定UIのサンプルです。
浮遊する幾何オブジェクト — 半透明の円・三角・リング・カプセルがゆっくり漂い、マウス位置に応じて視差で奥行きが動く没入感のある背景。前景に短いコピーを置けばヒーロー風に。SANKOU!系の「背景が動く」トレンドを自己完結のCSS/SVGで再現します。
プログレッシブブラー — 下端に向かって段階的に強くぼかす backdrop-filter 層を mask グラデで重ね、写真の上に置いた固定ナビと見出しの可読性を高める手法。Apple/iOS 風の上品なフェードブラーで、ヒーローやアプリUIに使えます。
動く幾何学パターン — canvas で三角格子を描き、サイン波に沿って各点を明滅させる動的背景。テック系のLPやダッシュボードの背景に使えます。
blobモーフィング — JSで制御点の半径を補間し、SVGパスを滑らかに変形させる有機的な背景。遊び心のあるLPの主役背景になります。
シルクウェーブ — 半透明のサイン波リボンを canvas で加算合成し、しなやかに流れる絹のような発光背景を描きます。高級感あるヒーローに。
3Dチルト・ガラスログイン — マウス位置に合わせて立体的に傾くガラス調のログインパネル。perspective と backdrop-filter を組み合わせた没入感のあるフォームです。

画像 & ギャラリー (17)

before/after 比較スライダー — 透明な range と clip-path で2枚の画像を境界線で切り替えるビフォーアフター比較。加工前後やリフォーム事例の紹介に。
ホバーでカラー化ギャラリー — grayscale フィルターで全画像をモノクロ表示し、ホバー中の1枚だけをカラー&拡大。CSSのみで動くフォトギャラリーに使えます。
メイソンリー・ギャラリー — 高さがバラバラな写真を石積みのように詰めるメイソンリーグリッド。ホバーやフォーカスで各カードにキャプションが浮かび上がり、軽くズームして写真集のような余韻を演出します。
clip-path ホバーリビール — clip-path の circle() をマウス位置から広げ、下の画像を円形に切り抜いて見せるホバー演出。商品やビフォーアフターの差分提示に使えます。
デュオトーン (mix-blend-mode) — モノクロ画像に2色のレイヤーを mix-blend-mode で重ね、雑誌風の2色グラフィックを生成。配色プリセットをワンクリックで切り替えられます。
Ken Burns スライドショー — 静止画をゆっくりズーム&パンしながらクロスフェードさせる映画的スライドショー。ヒーローバナーや背景演出に最適です。
mix-blend-mode テキスト — difference ブレンドで背景色を反転して切り抜く大型タイポ。マウス追従の光スポットで色が躍動します。LP のキービジュアルに。
ライトボックス — サムネイルをクリックすると暗幕オーバーレイに写真を拡大表示。前後送りの矢印、Escキーや×ボタンでの終了、キャプション表示まで揃えた定番のライトボックスUIです。
ビフォーアフター比較 — 中央のハンドルをドラッグして2枚の写真を左右に比較できるスライダー。矢印キーにも対応し、施工事例やレタッチ前後の違いを直感的に伝えられます。
サムネ付きカルーセル — 大きなメイン画像と下段のサムネイル列を組み合わせたカルーセル。サムネや矢印キーで切り替わり、現在位置のサムネだけが縁取りで強調される作品紹介向けUIです。
画像ズーム — 商品写真にマウスを乗せて動かすと、その位置を中心に拡大した部分が滑らかに追従するパン&ズーム演出。ECサイトの商品画像を確認する体験を軽量なCSS/JSだけで再現します。
CRT・VHSレトロ画面 — 画像にスキャンライン・色収差（RGBずれ）・微振動・ノイズを重ね、ブラウン管/ビデオ風のレトロ画面に変換します。走査グローやVHS風OSD（REC表示）も入り、エモい・サイバーパンク系のヒーローや作品アーカイブの演出に最適。canvasノイズは取得失敗時もCSSグラデにフォールバックします。
RGBずれグリッチ — ホバー/マウス移動で R・G・B チャンネルが左右にずれるアナグリフ風グリッチ。mix-blend-mode:screen で重ねた3レイヤーをマウス速度に応じて分離し、サイバー/音楽系のアクセントに最適です。
RGBずらしグリッチ — 同一画像を3枚重ねてチャンネルごとに着色・ずらし、走査線を被せたグリッチ風ホバーエフェクト。サイバー/音楽系サイトのアクセントに。
スポットライトマスク — radial-gradient のマスクで暗転した画像をマウス位置だけ明るく照らすスポットライト演出。インタラクティブな探索体験を演出できます。
ハーフトーン網点 — 画像を canvas で解析し、各セルの明度をドット径に変換した印刷風ハーフトーン網点を描画。斜めに進む波でドット径が脈打ち、マウス近傍では網点が膨らんで反応します。雑誌/レコードジャケット風のグラフィックや没入系ビジュアルに。CORS失敗時は放射状グラデの網点へフォールバック。
ホバー・ディストーション — 画像にマウスを乗せると、その位置を中心に sin 波の歪み（ディストーション）が走る canvas エフェクト。ピクセル変位で水面や陽炎のような揺らぎを表現し、フォトギャラリーやヒーローに没入感を与えます。

Canvas エフェクト (13)

降雪・雨エフェクト切替 — ゆらゆら舞う雪と斜めに降る雨をボタンで切り替えられる天候エフェクト。季節のランディングページやヒーロー背景に重ねて使えます。
マトリックスレイン — カタカナや数字が緑の軌跡で流れ落ちる映画風デジタルレイン。残像合成と先頭の発光で雰囲気を出します。テック系の演出やイントロに。
パーティクル接続（星座） — 近い粒子同士を線で結び星座のように見せる定番表現。マウス付近の粒子も結線します。ヒーロー背景やローディング演出に最適です。
マウス追従粒子トレイル — ポインタの軌跡に沿って虹色の粒子を放出し、加算合成で発光させるインタラクティブ演出。カーソル装飾やゲームUIに使えます。
花火アニメーション — 打ち上げ弾が頂点で爆発し放射状に火花が飛ぶ物理風の花火。自動打ち上げに加えクリックでも発射できます。お祝い・達成演出に。
多層サイン波アニメ — 振幅と周波数の異なる正弦波を加算合成しネオン状に発光させる波形ビジュアル。音楽・オーディオ系のヘッダー背景に向いています。
お絵描きキャンバス — ポインタ操作で線を描き、色パレットと太さスライダー、クリア機能を備えた簡易ペイント。署名入力やメモ、落書き機能の土台になります。
万華鏡コラージュ — カラフルな図形の破片が万華鏡のように鏡像対称で回り続ける背景です。1セクターだけ描いて12回フォーミラーするだけで、キャンペーンサイトのような華やかな漫然模様が生まれます。
オーディオビジュアライザー（Web Audio） — 合成オシレータの和音を AnalyserNode で解析し、周波数バーと波形を同時に描く音響ビジュアル。マイク不要で再生ボタンから開始でき、音楽系UIやヒーロー演出に使えます。
メタボール（リキッド） — 動き回る複数の円が近づくと滑らかに融合して見えるメタボール表現。距離場のしきい値で輪郭を描き、粘性のある液体のような有機的ビジュアルを生成します。
重力で集まる粒子フィールド — マウスへの引力で粒子が集まり、クリックや右クリックで弾け飛ぶインタラクティブな重力シミュレーション。遊び心のある背景やヒーローに。
フローフィールド（流れ場） — 三角関数で作った疑似ノイズの流れ場に沿って大量の粒子が漂い、繊細な流線アートを描く生成的ビジュアル。アンビエントな背景に最適です。
パーティクル文字 — テキストのピクセルをサンプリングし、その座標へ無数の粒子が集まって文字を形成。マウスを近づけると弾け、離れると吸い寄せられて戻るインタラクティブ表現です。

SVG エフェクト (9)

パスドローイング(手書きアニメ) — stroke-dasharrayとdashoffsetでSVGの線が描かれていく演出。グラフやロゴ、署名の登場アニメに使えます。
波形セパレーター — 速度の異なる波SVGを重ねて横スクロールさせ、セクションの境界を動的に区切ります。LPのヒーロー下端に好適。
グラデーションテキスト(流動) — linearGradientをSVGのanimateで横移動させ、見出しに流れる色とアウトライン描画を与えます。タイトルの主役に。
グーフィルター(粘性融合) — feGaussianBlurとfeColorMatrixで要素同士が溶け合うメタボール表現。ローダーやメニュー展開の演出に最適です。
円形プログレスゲージ — 円のstroke-dashoffsetで進捗を可視化し、中央の数値をカウントアップ。ダッシュボードやスキル表示に使えます。
アニメーションアイコン — ホバーやクリックで状態が切り替わるSVGアイコン集(メニュー/いいね/完了/通知)。マイクロインタラクションに。
イラストマップ・パン巡回 — 1枚の大きなイラストマップの中を、カメラが滑らかにパンして名所を順番に巡ります。到着するとスポット名がポンと現れる。観光・地域サイトのナビゲーションを、viewBox操作だけで実現する手法です。
SVGモーフィング(形状変形) — pathのd属性の頂点を線形補間して形を滑らかに変える技術。ライブラリ無しでブロブやハートへ連続変形します。
液体ディストーション — feTurbulenceとfeDisplacementMapでノイズ歪みを与え、有機的にうねる液体表現を作るSVGフィルター。背景演出に。

WebGL & 3D (18)

回転3Dトーラスノット — Three.jsの標準マテリアルと三点照明で質感を出した回転オブジェクト。製品紹介やヒーローセクションの主役要素に使えます。
グラデーション球 — 頂点カラーで上下2色を補間し、継ぎ目のないグラデーションをまとった球体。ブランドカラーの象徴やヒーローのアクセントに使えます。
3Dカードフリップ — transform-style: preserve-3d と backface-visibility を使い、クリックで表裏が回転するカード。会員証や商品カードの詳細表示に使えます。
パーティクルフィールド — 数千の点をTHREE.Pointsで一括描画し、マウスで視点が緩やかに動く粒子空間。背景演出やランディングの没入感づくりに向きます。
ワイヤーフレーム地形 — 平面メッシュの頂点を正弦波で変位させて波打たせるレトロな立体地形。シンセウェーブ調のビジュアルやダッシュボード背景に最適です。
インタラクティブ立方体 — ポインタのドラッグで回転し、離すと慣性で滑らかに減速する6色立方体。製品の3Dプレビューや操作デモのUI部品として活用できます。
DNA二重らせん — らせん上に球を並べ横棒で対を結んだ回転する二重らせんモデル。科学・医療・バイオ系サイトのキービジュアルに向きます。
3D回転キューブ — 6面を3D空間に配置したキューブが自動回転し、ドラッグで手動回転もできます。ローディングやヒーロー演出のアクセントに最適です。
マウス連動パララックス層 — 複数レイヤーをマウス位置に応じて異なる量だけ動かし、奥行きを演出します。ヒーローセクションの没入感を高める手法です。
3Dカルーセル — パネルを円柱状に配置し前後ボタンと自動送りで回転する3Dカルーセル。ギャラリーやプロダクト紹介の回遊導線に使えます。
perspectiveホバーグリッド — マウス位置に追従してカードが3D傾斜し、光沢が動くインタラクティブなグリッド。サービス紹介やメニューカードを印象的に見せます。
奥行きレイヤースタック — 同じ図形をZ軸方向に積層し、マウスで覗き込むように傾けて立体感を出すデモ。ロゴやキービジュアルの演出に応用できます。
3Dページめくり — CSS perspective と rotateY で本のページがめくれる演出。ボタンで前後にめくれ、自動ループにも対応。ページの裏表と影で立体感を出します。電子書籍やポートフォリオの導入演出に向きます。
アニメーション・シェーダー背景 — フルスクリーンの板ポリにフラグメントシェーダーで描く、時間で流れるグラデと簡易ノイズの背景。マウスで色相が微妙に変化します。ヒーローや背景演出に最適です。
脈動する二十面体 — 頂点を法線方向に呼吸させたワイヤー二十面体を、加算合成の光の粒で包んだ幻想的な造形。テック系やAIプロダクトの象徴ビジュアルに最適です。
3Dドットグローブ — canvasに球面分布した点を透視投影で回転描画する地球儀風アニメーション。ドラッグ操作対応で、データ可視化やテック系の背景に向きます。
パステル3Dルーム俯瞰 — パステル色のミニチュアな部屋を、カメラがゆったり弧を描いて眺めます。家具がときどきシュッと弾む。ポートフォリオで人気の作り込んだ3D空間の最小構成を、プリミティブな形状だけで作るデモです。
フレネル発光の球 — フレネル項で縁だけが光るシェーダーマテリアルの球が回転。内側は暗く縁が明るいリムライト風で、暗い背景に映えます。テック系の象徴ビジュアルに向きます。

データ & Python (14)

conic円グラフ — CSS conic-gradientだけで作るドーナツ円グラフ。回転マスクで出現させ、割合の内訳表示に最適です。
スパークライン — data属性の値からSVGの極小グラフを生成。前回比バッジ付きで、KPIカードやダッシュボードの省スペース指標に向きます。
Python素数の篩ビジュアライザ — Pythonでエラトステネスの篩を計算し、1〜150の格子上で素数を順次点灯アニメーション。アルゴリズム学習用の可視化デモ。
Canvas棒グラフ — Canvas 2D APIで描く棒グラフ。高DPI対応・出現アニメ・ホバーで値ラベルを表示し、ダッシュボードの数値比較に使えます。
SVG折れ線グラフ — Catmull-Rom補間で滑らかにしたSVG折れ線と面グラデ。stroke-dashによる描画アニメで時系列データの推移を魅せます。
アニメ円形ゲージ — SVG円弧のstroke-dashoffsetと数値カウントアップを連動させた円形ゲージ。スコアやパフォーマンス指標の表示に使えます。
ヒートマップカレンダー — CSS Gridで組む貢献度カレンダー。日別の活動量を5段階の色で示し、コントリビューショングラフ風の活動量可視化に使えます。
レーダーチャート — SVGポリゴンで描く多角形レーダーチャート。2系列を重ねて中心から広がるアニメで表示し、スキルや評価の多軸比較に向きます。
Pyodide 対話型 REPL — Pyodideでブラウザ内にPythonランタイムを読み込み、入力した式や文をその場で評価・表示する対話シェル。print出力やエラー、入力履歴(↑↓)にも対応。
Pythonで計算しcanvas描画 (リサージュ曲線) — Python(math)でリサージュ曲線の座標列を計算し、canvasへネオン風にアニメーション描画。スライダーで周波数と位相をリアルタイム操作できる。
Pythonデータ集計ダッシュボード — Python標準のstatisticsでランダム売上データを集計し、合計・平均・中央値・標準偏差をカード表示しつつバーチャート化。データ分析UIの雛形に使える。
リアルタイム波形 — Canvasで合成正弦波を毎フレーム描画するオシロスコープ風モニタ。グロー発光と一時停止操作で、信号やストリーミングデータの可視化に。
Pythonフラクタル生成 (マンデルブロ集合) — Pythonでピクセルごとにマンデルブロ集合を計算し、ImageDataとしてcanvasに着色描画。ボタンで見どころへズーム巡回でき、重い数値計算のブラウザ実行例になる。
Python数式リアルタイム評価グラフ — 入力した数式をPython側で許可関数に限定して安全評価し、f(x)の曲線をcanvasに即時描画。マウス追従でx・f(x)を読み取れる関数プロッタ。

UIコンポーネント (16)

アコーディオン — 見出しのクリックで本文を滑らかに開閉するアコーディオン。max-heightアニメとaria属性で、FAQやヘルプの折りたたみ表示に使えます。
タブ切替（下線インジケーター付き） — 選択タブへ下線インジケーターがスライド移動するタブUI。offsetLeft/Widthでの位置計算により、商品情報や設定画面の切替に使えます。
ツールチップ — 上下左右の方向別に出る吹き出し型ツールチップ。CSSの擬似要素とdata属性が中心で、補足説明や用語解説に使えます。
トグルスイッチ＆セグメント切替 — チェックボックスを土台にしたON/OFFスイッチと、インジケーターが動くピル型セグメント。設定画面や表示期間の切替に使えます。
サムネ自動スクロールプレビュー — カードにカーソルを乗せると、サムネイルの中でページ全体がするすると下までスクロールして見せてくれます。ギャラリーサイトやポートフォリオ一覧で、クリック前に中身を伝える定番の魅せUIです。
モーダルダイアログ — ネイティブ<dialog>要素を使ったモーダル。フォーカストラップやESC閉じがブラウザ標準で動作し、確認や課金導線に使えます。
トースト通知 — 成功・警告など種類別の通知を右下にスタック表示し、残り時間バーとともに自動消滅。操作後のフィードバック表示に使えます。
ドラッグ並べ替え — HTML5 Drag and Dropでリスト項目の順序を入れ替え。挿入位置のヒント線付きで、タスクの優先順位付けや並び替えUIに使えます。
カルーセル / スライダー — 自動再生・矢印・ドット・スワイプに対応した軽量カルーセル。translateXによる横移動で、バナーや特集の回遊表示に使えます。
レンジスライダー（単一・価格帯） — 進捗グラデ付きの単一スライダーと、2ハンドルの価格帯スライダー。input[type=range]の装飾で、フィルターや絞り込みに使えます。
無限スクロール — IntersectionObserverで末尾到達を検知し追加読み込みするフィード。スピナーと上限制御付きで、タイムラインや一覧表示に使えます。
ステップ進捗（ステッパー） — 完了・現在・未到達を色分けし前後に移動できるマルチステップUI。接続線とチェック表示で、購入手続きやオンボーディングに使えます。
コマンドパレット（⌘K / Ctrl+K） — ⌘K/Ctrl+Kで開く検索ボックス付きモーダル。入力でフィルタ、↑↓で候補移動、Enterで実行、Escで閉じます。アプリの素早い操作導線に使えます。
:has()で純CSS連動 — JS無しで:has()を使い、ラジオ選択でカードがハイライト＆詳細パネルが開き、同意チェックでボタンが活性風に変化。状態連動UIをCSSだけで実現します。
ドラッグ探索ギャラリー — 画像タイルの帯をPointer Eventsで横にドラッグして探索するギャラリー。待機中はゆっくり自動で流れ、離すと慣性で滑り、端ではゆるく戻ります。作品集や横長の回遊コンテンツに使えます。
スワイプカード（Tinder風） — 重なったカードをPointer Eventsでドラッグし、左右に振り切ると回転しながら飛んで消え次が前面に。しきい値未満は元に戻ります。マッチングや選別UIに使えます。

ボタン (11)

グラデーション光沢 — 紫〜青のグラデーションボタン。ホバーで斜めの光沢が左から右へ走り抜け、待機中も影がゆっくり呼吸します。ECの購入ボタンや主要CTAに最適です。
アウトライン→塗り — 枠線だけのボタンが、ホバーで下から色がせり上がり塗りつぶされ、文字色も同時に白へ反転します。控えめな副次アクションのボタンに向きます。
ネオン発光 — 漆黒の背景に浮かぶ枠と文字がシアンに多重発光。待機中は淡く呼吸し、ホバーで発光が強まり、押すと沈み込みます。配信やゲーム系サイトのCTAに。
3Dプッシュ — 下に厚みの影を持つ立体ボタン。ホバーで浮き上がり、クリックすると沈み込んで厚みが減る物理的な押下感を再現します。予約や決済の後押しに。
アイコンスライド — シンプルな遷移ボタン。ホバーで矢印アイコンが右からスライドインしながらラベルがわずかに左へ寄り、クリックすると矢印が前へ弾んで進む感覚を演出します。次へ進む導線に。
グラスボタン — 背景の光る玉がゆっくり漂う上でガラス質のボタンが半透明に輝きます。上部のハイライトとぼかしが素材感を強調し、カラフルな背景に映える主要アクションに向きます。
ローディング→完了 — クリックでラベルが消えスピナーが回転し、約1.2秒後に✓へ切替わり色も緑に変化します。フォーム送信や保存操作の結果を分かりやすく伝えます。
枠線ドロー — 枠線だけのシンプルなボタン。ホバーすると上辺→右辺→下辺→左辺の順で枠線が一筆書きのように描かれ輪郭が浮かび上がります。控えめな副次アクションに向く上品な演出です。
放射フィル — 白地に縁取りだけのボタン。ホバーするとカーソルのある位置を起点に円状の塗りが広がり、文字色も同時に反転します。カーソルを追いかける動きが目を引くCTAに使えます。
セグメント切替 — 週・月・年のようなピル状の3択切替。クリックすると白い選択インジケータが滑らかにスライドして移動し、aria-pressedも排他的に更新されます。矢印キーでも操作できます。
FAB展開メニュー — ＋のFABをクリックすると共有・編集・削除の3アクションが縦方向へ時間差で展開し、アイコンは×へ回転します。もう一度押す・外側クリック・Escapeで畳めます。

カード & テーブル (12)

プロフィールカード — アバターと名前、肩書、一言コメント、SNSリンクとフォローボタンをまとめた定番のプロフィールカード。ホバーでふわりと浮き上がり、アバター周りの光が呼吸するように瞬きます。
商品カード — 商品写真と名称、星評価、価格、割引バッジをまとめたECサイト向けの商品カード。ホバーで写真がゆっくりズームし、カート追加ボタンは押すと完了表示に切り替わります。
統計カード — 指標名と大きな数値、前期比バッジ、簡易スパークラインを備えたダッシュボード用の統計カード。読み込み時に数値がカウントアップし、折れ線が滑らかに描画されます。
記事カード — サムネイル画像とカテゴリタグ、タイトル、抜粋文、著者と日付をまとめたブログ記事カード。ホバーでサムネイルが拡大し、タイトルの色がアクセントカラーに変わります。
基本スタイルテーブル — 営業チームの実績データを見やすく整理した基本テーブル。ヘッダー強調・行区切り・数値の右寄せ・ステータスバッジで、日々のレポート表示にそのまま使えます。
ゼブラ＋ホバー — 在庫リスト向けの縞模様テーブル。行ホバーで色が変わり、チェックボックスで行を選択すると背景色が変化して、選んだ商品がひと目で分かります。
比較テーブル — エントリーからエンタープライズまで4プランの機能を比較する表。おすすめプランの列を強調し、✓と×の記号で対応可否がひと目で分かります。
フリップカード — ホバーまたはクリックで3Dに回転し、裏面に詳細情報と申し込みボタンが現れるフリップカード。カード全体がゆっくり浮遊し、縁取りの光彩が回転し続けます。
グラスカード — カラフルに揺らめく背景の上に、backdrop-filterで透け感を出したグラスカード。薄い枠と斜めの光沢が時間差でゆっくり流れ、上品な質感を演出します。
ソート可能テーブル — 列見出しをクリックすると昇順・降順で並び替わるソート機能付きテーブル。数値・文字列・日付のどの列でも矢印インジケータで並び順が確認できます。
固定ヘッダーテーブル — 社員名簿のような縦に長い表向けの固定ヘッダーテーブル。スクロールしてもヘッダー行と先頭列が画面に残り続け、どの行かすぐ把握できます。
レスポンシブ・カード化 — 注文一覧を画面幅に応じて表示切替するテーブル。広い画面は通常の表、スマホ幅では各行がラベル付きカードに変わり、狭い画面でも崩れません。

バッジ & アバター (11)

ステータスバッジ — 成功・進行中・警告・エラー・情報を色とドットで表す5種のステータスバッジ一覧。進行中とエラーはドットが脈動し、稼働中や要対応であることを直感的に伝えます。
通知バッジ — ベルアイコンに未読数を示す数値バブルを重ねた通知バッジ。ボタンで件数が増減するたびにポップして変化を伝え、9件を超えると「9+」と表記します。
コーナーリボン — カードの右上角に「NEW」「SALE」「限定」の斜めリボンを重ねたコーナーバッジ。リボンには定期的に光が走り、商品一覧の目印として自然に目を引きます。
アバター状態 — アバターの右下にオンライン・離席中・取り込み中を示す小さな光のインジケータを添えたステータス表示。オンラインのみ光が脈動し、稼働中であることを伝えます。
サイズと形の見本 — XSからXLまで5段階のサイズと、円・角丸・四角の3つの形状バリエーションを一枚のカードにまとめた見本帳。カーソルを乗せると軽く浮き上がり、影が濃くなります。
アバターグループ — 重なり合って並ぶメンバーのアバター群と、隠れた人数を示す「+3」バッジ。カーソルを乗せると各アバターが扇状にふわっと広がり、全員の顔が見えるようになります。
リング＋状態インジケータ — 虹色グラデーションのリングをまとったアバターに、右下でオンライン・離席中・取り込み中を伝える小さな状態ドットを添えました。オンラインだけが静かに脈動します。
ストーリーズ風リング — 未読のアバターだけ回転するグラデーションリングが輝き、既読になるとリングは静かなグレーへ変わります。クリックすると即座に既読状態へ切り替わります。
タグ入力 — 入力欄にEnterでタグを追加し、×ボタンで削除できるチップ式のタグ入力。大文字小文字を無視して重複を検知し、既存タグを軽く揺らして知らせます。
アバターアップロード — 丸いプロフィール画像にカーソルを乗せるとカメラアイコンが浮かび上がるアップロードUI。クリックしてファイルを選ぶと、FileReaderでその場に新しい画像がプレビューされます。
イニシャル自動生成アバター — 画像がなくても成立するアバター一覧。氏名からイニシャルを抜き出し、名前自体をハッシュ化して背景色を決めるため、同じ名前は常に同じ色になります。

ツールチップ & メニュー (10)

方向別ツールチップ — ボタンの上下左右に矢印付きの吹き出しが現れるCSSツールチップ集。hoverとfocusどちらでも表示され、待機中は1つが自動でそっとプレビューされます。
アクションメニュー — カード右上の⋮ボタンから編集・複製・共有・削除をまとめた操作メニューを展開します。矢印キーでの移動、Escや外側クリックでの終了にも対応した基本のドロップダウンです。
ユーザーメニュー — アバターをクリックすると、プロフィールや設定・テーマ切り替え・ログアウトをまとめたアカウントメニューが上向きに展開します。テーマはクリックのたびに切り替わります。
リッチポップオーバー — 文中の語句にカーソルを合わせてしばらく待つと、写真・見出し・説明・CTAを備えた大きめのカードがふわりと現れます。クリックで固定表示もできます。
クリックポップオーバー — 「⋮」ボタンをクリックすると矢印付きのメニューが開くポップオーバー。外側クリックやEscで閉じ、矢印キーで項目を選べます。
カーソル追従ツールチップ — 作品エリア内でカーソルの動きに滑らかに追従するラベルが現れるツールチップ。項目ごとに文言が変わり、フォーカス時は静的なヒントで補います。
ユーザーホバーカード — コメント欄の名前やアバターにカーソルを合わせると、肩書き・統計・フォローボタンを備えたプロフィールカードがふわっと現れます。
スプリットボタン — 主アクションボタンと▼ボタンを分離したスプリットボタンです。▼側でエクスポート形式を選ぶと既定の形式が切り替わり、主ボタンはワンクリックでその形式のまま実行します。
右クリックメニュー — 枠内を右クリックするとカーソル位置にコピーや削除などの操作メニューが開きます。画面端では自動的に位置を反転させ、はみ出さずに収まるようにしています。
ネストメニュー — 「ファイル」メニューからサブメニューが右へ多階層に展開します。ホバーでの自然な開閉に加え、矢印キーの→←での階層移動やEscでの一括終了にも対応しています。

チャット & メディア (11)

チャットバブル — 送受信のメッセージ吹き出しを左右に並べたトーク画面。アバターや時刻、既読チェックまで揃い、最後の一通だけ少し遅れて既読色に変わります。
入力中インジケータ — 3つの点が順番に跳ねる「入力中…」バブルと、相手のオンライン表示を常時ループさせたステータス演出です。返信を待つ間の安心感を演出します。
プレイリスト — 6曲分の曲名・アーティスト・再生時間を一覧表示するプレイリスト。再生中の曲は番号がバーアニメーションに切り替わり、総再生時間もヘッダーに表示します。
メッセージ入力欄 — 入力内容に応じて高さが伸びるテキストエリアと、文字が入ると活性化する送信ボタン、絵文字と添付のアイコンを備えた入力欄です。
コメントスレッド — ネストした返信といいね・返信ボタンを備えたコメント欄。長く伸びた返信スレッドは折りたたんでおき、必要なときだけ矢印から展開できます。
メッセージリアクション — バブルにカーソルを乗せる（またはタップする）とリアクションパレットが浮かび上がり、選んだ絵文字が集計チップとして積み上がっていきます。
サポートチャット — 右下の起動ボタンから展開するミニチャット窓です。ヘッダー・履歴・入力欄がそろい、閉じるボタンでまた起動ボタンへ最小化します。
動画プレイヤー — ポスター画像にカスタムコントロールを重ねた動画プレイヤー。再生/一時停止・シークバー・音量調整・全画面ボタンを備え、時間経過とともに再生位置が進みます。
音楽プレイヤー — 回転するジャケット写真と曲名・アーティスト表示、シークバーと前後の曲送りを備えた音楽プレイヤー。再生中はイコライザー風のバーが小さく揺れて動きます。
ポッドキャスト — 番組名とエピソード情報を表示し、15秒の早戻し・早送りと再生速度切替(1.0x〜1.5x)に対応したポッドキャストプレイヤー。長尺コンテンツの視聴を想定しています。
波形プレイヤー — 棒状の波形をクリックした位置から再生できるプレイヤー。再生済みの部分はアンバー色に塗り分けられ、時間経過に応じて色分けの境界が右へ進みます。

フォーム & 入力 (16)

フローティングラベル — 入力時にラベルが上へ縮小移動する定番のフォームUI。:placeholder-shown とトランジションだけで実現し、ログインや登録画面に使えます。
数量ステッパー — 「−」「＋」ボタンで数量を増減できる入力欄。直接入力にも対応し、上限・下限に達するとボタンが自動的に無効化され、ECサイトのカート等で使えます。
トグル設定パネル — 通知・ダークモード・自動保存などをON/OFFで切り替える設定パネル。切り替えるたびに説明文が変化し、状態がひと目でわかります。
入力ステート見本 — default・focus・error・success・disabledの5状態を縦に並べた入力欄の見本。色とアイコン、ヘルプ文の違いを一覧で確認できます。
星評価入力 — ホバーで星がプレビュー表示され、クリックで評価が確定する5段階の星評価入力。選択後は「満足」などの評価ラベルが表示されます。
セグメント選択 — ラジオボタンをピル型のセグメントに置き換えたUI。選択に応じてインジケータが滑らかにスライドし、キーボード操作にも対応します。
リアルタイムバリデーション — 入力のたびに正規表現で氏名・メール・電話を即時検証し、枠色とメッセージで結果を表示。全項目が有効になると送信ボタンが解放されます。
パスワード強度メーター — 文字数・大小文字・数字・記号の条件を判定し、4段階のバーと色で強度を可視化。表示切替や条件チェックリスト付きで会員登録に最適です。
OTP（ワンタイムコード）入力 — 6桁の認証コードを1桁ずつ入力するUI。自動フォーカス移動・ペースト分配・Backspace戻り・照合とシェイク演出を備えた二段階認証向けです。
カスタムチェック / ラジオ — :has() を活用してチェックボックス・カードラジオ・トグルスイッチをCSSだけで装飾。アクセシブルな見た目のリッチな選択UIを構築できます。
ファイルドロップゾーン — ドラッグ＆ドロップとクリックでファイルを追加し、画像はサムネイル・他は拡張子バッジで一覧表示。個別削除やサイズ整形を備えたアップロードUIです。
吹き出し付きレンジスライダー — つまみの位置に金額の吹き出しが追従するレンジ入力。CSSカスタムプロパティで塗りと吹き出し位置を連動させ、価格や予算選択に使えます。
タグ入力フィールド — Enterやカンマでタグを追加し、Backspaceや×で削除できる複数入力UI。重複防止とチップ生成のアニメーション付きで、スキルやキーワード入力に便利です。
カスタムセレクト — ネイティブselectを装飾しなおしたドロップダウン。開閉アニメーションと選択反映に加え、矢印キーやEnterでの操作にも対応します。
マルチステップ・ウィザード — アカウント→プロフィール→確認の3ステップに分けた入力フォーム。上部の進捗インジケータと次へ/戻るボタンでスライド遷移し、最後に入力内容をまとめて確認できます。
オートコンプリート — 入力に応じて候補を絞り込み一致部分をハイライト表示。矢印キー・Enter・Escのキーボード操作に対応したアクセシブルなコンボボックスです。

カレンダー & ステップ (10)

ミニアジェンダ — 本日、2026年7月15日の予定を時刻順に並べ、カテゴリごとに色分けした帯とチェックで完了・未完了を切り替えられる、シンプルなミニアジェンダです。
進捗バー — 0%から100%まで一定速度で満ちる決定的な進捗バー。進捗のしきい値ごとに色が変化し、縞模様が流れ続けて完了までの見通しを伝えます。
ステップインジケータ — 1→2→3→4の水平ステップを完了・現在・未完で色分けし、接続線が進むごとに満ちていく進行状況の表示。次へ/戻るで手動操作もできます。
セグメント進捗 — インスタのストーリーズのように分割バーが1本ずつ自動で満ちて次のシーンへ進み、最後まで来ると最初からループする進捗表示です。
月間カレンダー — 2026年7月を起点に前月・翌月へ移動でき、今日を淡いリングで示しつつ日付をクリックして選択できる、標準的な7列グリッドの月間カレンダーです。
日付ピッカー — 入力欄をクリックするとカレンダーがふわりとポップし、日付を選ぶと入力欄に反映されて閉じます。外側クリックでも自然に閉じる予約フォーム向けの部品です。
イベントカレンダー — 日付の下に予定の色つきドットが並び、クリックすると下部にその日の予定一覧が時刻付きで表示される、仕事・プライベート・健康を色分けしたイベントカレンダーです。
円形プログレス — SVGのリングをstroke-dashoffsetで描画し、中央の数値が進捗と同期してカウントアップする円形プログレス。完了後は自動でループします。
アップロード進捗 — 複数ファイルの進捗を行ごとに表示し、擬似的な失敗が起きた行は自動と手動のどちらでも再試行できるアップロード進捗パネルです。
期間選択 — 開始日と終了日を2回クリックして選ぶと、範囲全体が帯状にハイライトされ、宿泊日数や期間の長さが自動で表示される上級者向けの日付選択部品です。

ローダー & スケルトン (10)

各種スピナー集 — リング・デュアル・オービット・バー・パルス・キューブの6種を純CSSで実装したスピナー詰め合わせ。用途に合うローディング表現をすぐ選べます。
シマー効果 — 光沢グラデーションが左から右へ流れるプレースホルダのリスト。行ごとに位相をずらし波打たせた、ライトテーマのローディング表現です。
ドットローダー集 — バウンド・チャット入力中・波の3パターンのドットアニメーションを純CSSで実装。軽量で省スペースな待機表現として汎用的に使えます。
スケルトンスクリーン — 読み込み中はプレースホルダを表示し、データ取得後に実コンテンツへフェードで差し替えるカードUI。商品リストやプロフィールの体感速度向上に使えます。
プログレスバー — 不規則に進む疑似アップロードをパーセントとMB表示で見せる進捗バー。グラデーションが流れ完了状態も色で表現します。fetch進捗の可視化に最適。
円形カウントダウン — SVGリングのstroke-dashoffsetを操作し残り秒を可視化する円形タイマー。完了でリングと数字が赤に変化します。リダイレクトや自動遷移の予告に。
無限ループローダー — SVGの∞パス上をグラデーションの発光線がstroke-dashで滑らかに周回するローダー。ブランド感のある待機演出として印象的に使えます。
オープニング演出（イントロ→本編表示） — 全画面のイントロ画面でブランド名とプログレスバーがカウントアップし、完了するとワイプ（clip-path）で本編コンテンツが現れる遷移演出。読み込みから本編へのつなぎを印象的に見せられます。「もう一度」ボタンでリプレイ可能。
打ち上げカウントダウン・ローダー — HUD風の3・2・1カウントダウンからロケットが発射し、星が流線になるワープで読み込み完了を告げるローダー演出です。待ち時間をミッション開始の高揚感に変える、体験型サイトの導入に。
円形パーセントローダー — conic-gradientとrequestAnimationFrameでなめらかにカウントアップする円形プログレス。イージングと完了時のグロー演出付き。初回ローディング画面に。

アラート & 空状態 (11)

インラインアラート — 成功・情報・警告・エラーの4種類を色とアイコンで区別できるインラインアラート。左ボーダーとアイコンで意味を伝え、閉じるボタンはCSSのみで開閉します。
告知バナー — ページ最上部に表示する全幅の告知/警告バナー。閉じるとスライドアップで消え、ページ内の「もう一度表示する」ボタンからいつでも復帰できます。
Cookie同意バー — 画面下部に固定表示されるCookie同意バー。読み込み後にスライドインし、「同意する」または設定パネルでの選択保存で自然に消えます。
検索結果なし — 虫眼鏡のイラストと「0件」バッジで検索結果が無いことを優しく伝える空状態。条件をクリアすると結果ありの表示に切り替わる小さな体験も内蔵しています。
空のカート — 空のカートイラストと車輪が回転するアイドルアニメーションを添えた空状態。CTAを押すとカートが弾み、買い物へ促す導線をやわらかく示します。
初回・データなし — 点線の枠とプラスアイコンで「まだ何もない」ことを伝えるオンボーディング型の空状態。作成ボタンを押すたびに最初のプロジェクトが増えていく体験付きです。
エラー状態 — 雲とアイコンで接続エラーを穏やかに表現する空状態。再読み込みを押すと読み込み中を経て一時的に復旧表示へ切り替わり、繰り返し試せます。
完了・受信箱ゼロ — チェックマークが描かれ、紙吹雪が漂う「すべて完了」の空状態。ボタンを押すたびに紙吹雪が弾け、達成感を演出します。受信箱ゼロの表示に最適です。
スナックバー — 操作の直後に画面下部へ一時表示されるスナックバー。「元に戻す」アクションと自動消滅の進捗バーを備え、連続操作で通知が積み重なります。
確認ダイアログ — 削除など破壊的な操作の前に表示する確認ダイアログ。オーバーレイの外側クリックやEscキーでも閉じられ、誤操作を防ぎます。
通知パネル — ベルアイコンと未読数バッジを備えた通知パネル。クリックで開く一覧は種別ごとに色分けされ、クリックで既読化、新着も自動で届きます。