モーショングラフィックス＆エフェクト215選
— 心理効果とライブデモ付き完全カタログ

テキストが1文字ずつタイピングされるように表示。カーソルの点滅を伴う

ヒーローセクション / チャットUI / ターミナル風演出 / AI応答表示

期待感を生み、読み手の注意を一文字一文字に引きつける。「今まさに書かれている」臨場感

テキストがopacity 0→1で徐々に現れる。単語・行・文字単位で制御可能

セクション見出し / スクロール時のコンテンツ表示 / ストーリーテリング

穏やかで上品な印象。視覚的ストレスが低く、自然に情報を受け入れさせる

テキストを文字・単語・行に分割し、個別にアニメーションさせる

ポートフォリオのタイトル / ブランドサイトのヒーロー / 映画風演出

劇的でシネマティックな印象。一つ一つの文字に意味を感じさせる

ランダムな文字がシャッフルされた後、正しいテキストに収束する

テクノロジー系サイト / SF風演出 / パスワード解読風 / プロダクトローンチ

未来的・ハッカー的な印象。好奇心を刺激し「何が現れるか」の期待感

clip-pathやmaskで隠されたテキストが、スライドやワイプで徐々に露出する

見出しの登場 / ブランドメッセージの強調 / スクロール連動の演出

「覆いを取る」行為が秘密の開示を暗示し、特別感を演出する

テキストが画面外から水平・垂直方向にスライドして所定位置に入る

ナビゲーション表示 / カード内テキスト / セクション見出し

動きの方向性が「進行」「到着」を暗示。エネルギッシュな印象

テキストが弾むように登場し、オーバーシュート後に定位置に収まる

通知メッセージ / ゲームUI / 子ども向けサイト / アラート

楽しさ・親しみやすさ。注意を強く引きつけるが、やりすぎると安っぽい

数値が0から目標値まで高速でカウントアップされる

統計データ表示 / 実績数 / ダッシュボード / LPの数値アピール

数字の大きさを体感させ、達成感・インパクトを増幅する

テキストに適用されたグラデーションカラーが時間経過で移動・変化する

ブランドロゴ / CTAテキスト / ヒーローキャッチコピー

高級感とモダンさ。視線を引きつけ続ける動的な美しさ

テキストのアウトラインがSVGのstroke-dashoffsetでドローイングされる

ロゴアニメーション / タイトルシーケンス / アート系サイト

手描き感、クラフトマンシップを暗示。ブランドの個性を強調

テキストがデジタルノイズのように歪み、RGBチャンネルがずれる

サイバーパンク風デザイン / エラー画面演出 / テック系ブランド

不安定さ・反骨精神。デジタルカルチャーへの共感を呼ぶ

各文字が波のように上下にうねりながらアニメーションする

ローディング中のテキスト / 遊び心のある見出し / 音楽系サイト

リズム感・流動性。待ち時間のストレスを軽減する

文字が回転しながら登場。X軸・Y軸・Z軸の回転を組み合わせ可能

インパクト重視の見出し / ゲームタイトル / イベントサイト

ダイナミックさ。注目を集めるが、読みやすさとのバランスが重要

テキストがぼやけた状態からシャープにフォーカスされる

映画のタイトルシーケンス / フォーカス演出 / ドリーミーな雰囲気

「ピントが合う」＝注目すべき情報であることを暗示

複数の要素が時間差で順番にアニメーションする

リスト表示 / メニュー展開 / カードグリッドの登場

秩序感・リズム感。情報の階層構造を視覚的に伝える

テキストが粒子に分解されて散乱、または粒子が集合してテキストを形成

ページ遷移 / ドラマチックなタイトル登場 / インタラクティブアート

驚き・感動。物質の変容を連想させ、変革やイノベーションを暗示

テキストが水平方向に連続スクロール。ニュースティッカー風

ニュース速報 / 告知バナー / ブランドスローガンの反復表示

緊急性・即時性。常に更新されている感覚を与える

テキストの背景にハイライトが描画、またはアンダーラインが伸びる

重要フレーズの強調 / スクロール連動の注目誘導 / 教育コンテンツ

「ここが重要」という明確なシグナル。マーカーペンで引く行為の模倣

単語が回転・フリップして別の単語に切り替わる。ループ可能

「We are [creative/innovative/bold]」のような可変テキスト、LP

多面性・多様性を表現。ブランドの幅広さを伝える

テキストがゴムのように伸縮・変形する

インタラクティブな見出し / ゲームUI / ユーモラスな演出

柔軟性・遊び心。堅苦しさを取り除き親しみを生む

テキストの影が脈打つように拡大・縮小を繰り返す

CTA強調 / ネオンサイン風演出 / ホラー系の不穏な雰囲気

生命感・存在感の強調。心臓の鼓動を連想させる

テキストが縦方向にスライドして次のテキストに切り替わる（スロットマシン風）

日付表示 / カウントダウン / 動的なステータス表示

変化・更新の印象。機械的な正確さを感じさせる

テキスト自体がマスクとなり、背景の映像や画像がテキスト形状で見える

ヒーローセクション / ブランディング / 映像との融合演出

テキストと映像の一体感。メッセージと視覚体験を融合させる

文字がランダムに散らばった状態から、正しい配置に集合する

クリエイティブ系ポートフォリオ / パズル風演出 / アート系サイト

カオスから秩序への変化。創造プロセスを可視化する

文字間隔が広い状態から狭まる、または逆方向にアニメーション

タイトルシーケンス / ブランドロゴの登場 / 映画風エンドクレジット

集中・収束の印象。間隔が広がる場合は開放感・解放感

要素がopacityの変化で消え、次の要素が現れる

ページ遷移 / 画像スライダー / タブ切り替え / モーダル表示

最も自然で目立たないトランジション。スムーズな連続性を感じさせる

現在の画面が横にスライドしながら次の画面が押し出されるように入ってくる

カルーセル / ページ遷移 / ウィザード形式のステップ進行

空間的な連続性。「隣のページに移動した」という直感的理解

一方の端から「拭き取る」ように次のコンテンツが露出する

映像制作のカット切り替え / Before/After比較 / プレゼンテーション

明確な方向性。時間の経過や場面転換を強調する

要素が拡大・縮小しながら次のビューに遷移する

画像ギャラリーの拡大 / 地図のズームイン / 詳細ページへの遷移

「近づく」「離れる」の空間感覚。フォーカスの移動を直感的に伝える

2つのビュー間で共通要素がスムーズに変形・移動して遷移する

カード→詳細画面 / サムネイル→フルスクリーン / ナビゲーション変化

要素の同一性を保証し、空間的な一貫性を感じさせる

カーテンが開くように左右または上下から分割して次の画面が現れる

劇的なページ遷移 / イベントサイト / 高級ブランドサイト

舞台の幕開け感。これから何か重要なものが現れる期待感

CSS clip-pathで円形・多角形のマスクが拡大/縮小して遷移する

クリエイティブなページ遷移 / ポートフォリオ / 実験的デザイン

独創性・アート性。テンプレート感のないユニークな体験

カードをめくるように3D回転して裏面が現れる

カードUI / FAQ展開 / ゲームカード / 情報の表裏切り替え

物理的な「裏返し」の模倣。情報に裏表がある感覚

画面がピクセル単位やノイズパターンで崩壊し、次の画面に置き換わる

映像作品のシーン切り替え / レトロゲーム風演出 / 夢のシーン

曖昧な境界。現実と非現実、過去と現在の境目を表現

ユーザーのジェスチャーに連動してコンテンツがめくれる

モバイルUI / Tinder風カード / フォトギャラリー

直接操作感。ユーザーが自分の手で動かしている実感

画面中央から円形に広がって（または収縮して）遷移する

映像制作のクラシック演出 / 集中効果 / キャラクター登場

古典的な映画手法。注目ポイントへの誘導、レトロ感

画面がガラスのように割れて破片が散乱し、次の画面が現れる

アクション映画風 / ゲームUI / インパクト重視の場面転換

破壊・変革。旧い状態が壊れて新しいものが生まれる象徴

現在の画面がぼやけて、次の画面にシャープに切り替わる

回想シーン / フォーカス変更 / 夢のような場面切り替え

意識の切り替え。ソフトな感覚で場面の変化を受け入れさせる

画面全体が回転しながら次のビューに切り替わる

ゲームUI / エンタメ系サイト / ダイナミックなプレゼン

エネルギーとダイナミズム。使いすぎると目が回る

画面がデジタルグリッチのように歪み、次の画面に切り替わる

テック系コンテンツ / 音楽MV / サイバーパンク的演出

不安定さの中のスタイリッシュさ。現代のデジタル文化を反映

前景・背景が異なる速度でスライドし、奥行きを伴って遷移する

ストーリーテリング / 没入型ページ遷移 / プレミアムサイト

空間の深み。2Dの画面に3Dの世界が広がる感覚

液体のようにうねりながら画面が溶けて次の画面に変化する

クリエイティブエージェンシー / アートサイト / 実験的デザイン

有機的・自然な変化。デジタルなのに生命感がある

ブラウザネイティブのページ遷移API。DOMスナップショット間をアニメーション

SPA/MPAのページ遷移 / モダンWebアプリのナビゲーション

アプリのようなスムーズなナビゲーション。Web特有の「ちらつき」を排除

SVGや幾何学形状のマスクが変形しながら次のコンテンツを露出する

ブランドサイト / ポートフォリオの作品切り替え / プレゼン

ブランドシェイプとの関連付け。ロゴ形状のマスクで統一感を強化

カードが積み重なった状態から、前のカードが飛び去り次のカードが現れる

カルーセル / ポートフォリオ / 商品一覧 / Tinder風UI

「選ぶ」「めくる」行為の模倣。コレクション感を演出

カラフルな小さな紙片が画面上に舞い散る

購入完了 / レベルアップ / 目標達成 / お祝い画面

祝福感・達成感。ポジティブなフィードバックを強烈に伝える

点が上昇し、頂点で放射状に拡散して消える

新年カウントダウン / キャンペーン成功 / ゲームのスコア達成

華やかさ・祝祭感。一瞬の美しさが印象に残る

小さな白い粒子が重力に従いゆっくりと降り注ぐ

冬季キャンペーン / 季節演出 / 環境表現

静寂・穏やかさ。季節感を強く喚起する

細い線状のパーティクルが高速で縦方向に降下する

天気アプリ / ムードのある背景 / ストーリーの雰囲気作り

メランコリー・ドラマチック。情緒的な深みを加える

微小な粒子がゆっくりと漂い、ランダムに移動する

背景の雰囲気作り / 宇宙空間表現 / ファンタジー系サイト

空間の広がり・神秘性。微細な世界を感じさせる

円形のパーティクルが下から上へ浮上し、弾ける

水中表現 / 清涼感のある演出 / 子ども向けコンテンツ

軽やかさ・清涼感。親しみやすい印象

半透明のぼんやりとした粒子が上方に拡散しながら薄れていく

ミステリアスな演出 / 焚き火 / 雰囲気作り

神秘性・曖昧さ。境界をぼかし幻想的な雰囲気を作る

明るい小さな点が弧を描きながら飛び散り、フェードアウトする

魔法のエフェクト / 製品のハイライト / キャンプファイア

エネルギー・情熱。一瞬のきらめきが魔法的な印象を与える

多数の光点が奥行き方向に流れ、ワープ速度を模倣する

宇宙テーマ / テクノロジーサイトの背景 / ハイパースピード演出

無限の広がり・速度感。未来へ向かっている感覚

複数の粒子が線で接続され、マウスの動きに反応してネットワーク構造を形成

テクノロジー企業のヒーロー / AI/データサイエンス / ブロックチェーン

接続性・知性。データやネットワークの可視化を暗示する

大量の粒子がテキストや画像の形を構成し、マウスで崩れ・再構成される

インタラクティブなヒーロー / ロゴアニメーション / アート表現

驚嘆・創造性。物質の根源から形が生まれる感覚

マウスの軌跡やオブジェクトの移動経路に沿って粒子が発生する

カーソルエフェクト / 軌道の可視化 / 魔法のワンド風演出

動きの軌跡の美化。操作が「特別な行為」に感じられる

一点から放射状に大量の粒子が瞬間的に放出される

クリックフィードバック / ボタン押下時 / ゲームのダメージ表現

インパクト・力強さ。アクションの結果が劇的に可視化される

柔らかく発光する粒子がゆっくりとランダムに漂い、明滅する

夜のシーン / ファンタジー風演出 / リラックス系サイト

幻想的・ロマンチック。自然の中の小さな光を連想させる

粒子がマウスカーソルに引き寄せられる/反発する物理的な振る舞い

インタラクティブな背景 / 物理学の可視化 / プレイフルな体験

直接操作感。自分の存在が画面に影響を与えている実感

マウスの位置に応じてカードが3D的に傾く（perspective + rotateX/Y）

プロダクトカード / チームメンバー紹介 / ギャラリー

触れている感覚。物理的な存在感を強化し、平面的でない印象

カードが3D空間でY軸回転し、裏面のコンテンツが表示される

FAQ / 商品情報の表裏 / ゲームカード / 教育カード

「裏側を見る」行為の模倣。隠された情報への好奇心

6面のキューブが回転し、各面に異なるコンテンツを表示する

ページ遷移 / プレゼンテーション / 3Dナビゲーション

空間の広がり。コンテンツが「周囲に存在する」感覚

複数のアイテムが3D空間に弧状に配置され、回転してブラウズ可能

メディアギャラリー / アルバムカバー / 商品一覧 / ゲームセレクト

実在感・触れられそうな距離感。選択の楽しさを増幅

複数レイヤーがマウスやスクロールに応じて異なる速度で移動し奥行きを表現

ヒーローセクション / ゲームの背景 / 没入型ランディングページ

2D画面に3Dの深みを感じさせる。没入感の大幅向上

テキストにZ方向の厚みを持たせ、3Dオブジェクトとして表示する

ロゴ / ヒーロータイトル / ブランディング

力強さ・存在感。文字が「物体」として空間に存在する重みを感じる

WebGLで描画された地球儀がインタラクティブに回転可能

国際企業のサイト / データの地理的可視化 / ネットワーク表示

グローバル感。世界規模のスケールと接続性を伝える

3Dモデルの商品をドラッグで360度回転、ズーム操作可能

ECサイト / カーコンフィギュレーター / 家具販売

手に取っている感覚。購買意欲を高め、返品率を下げる

等角投影視点で3D風のイラストがアニメーション

テクノロジー説明図 / インフォグラフィック / SaaS LPのイラスト

技術的な専門性と親しみやすさの両立

Three.jsやWebGLで構築された完全な3D空間をブラウザ内に描画

バーチャルツアー / ゲーム / インタラクティブストーリー

完全な没入感。Webサイトではなく「場所に行った」感覚

注目要素にフォーカスし、前景・背景をぼかして奥行きを表現する

写真風演出 / モーダルの背景ぼかし / 注目誘導

カメラ越しに見ている感覚。注目ポイントへの視線誘導

スクロールに連動して3Dのトンネルやパスを進んでいく

ストーリーテリング / プロダクトの歴史紹介 / 没入型ポートフォリオ

旅・冒険の感覚。「先に進む」モチベーションを刺激

要素が紙を折るように3D回転して展開・収納される

アコーディオンUI / メニュー展開 / 情報の段階的開示

紙の折りたたみの触感。コンパクトさと展開可能性を暗示

3Dオブジェクトが空中に浮かび、ゆっくり回転・上下に揺れる

ヒーローセクションの装飾 / プロダクトのハイライト

軽やかさ・浮遊感。重力から解放された特別感

GLSLシェーダーによる画像の波紋・歪み・ノイズ変形

ポートフォリオの画像ホバー / アート系サイト / 実験的デザイン

有機的な歪みが「生きている」感覚。デジタルアートの美学

要素がビューポートに入った時にフェードインで登場する

コンテンツセクションの登場 / 記事のセクション表示

情報の段階的開示。スクロールする動機付けになる

前景と背景が異なる速度でスクロールし、奥行きの錯覚を作る

ランディングページ / ストーリーテリング / プロダクト紹介

深み・没入感。2Dの画面に空間性を付与する

スクロール中にセクションが固定され、内部のコンテンツが変化する

ステップ説明 / Before/After / プロダクト機能紹介

注目の固定。重要なセクションから目を離させない

縦スクロールの入力を水平方向のスクロールに変換する

ポートフォリオ / タイムライン / パノラマ表示

新鮮な体験。通常と異なる動きが探索欲を刺激する

ページ上部にスクロール量に比例するプログレスバーを表示

長い記事 / ブログ投稿 / ドキュメント

進捗の可視化。あとどれくらいかが分かり安心感を与える

スクロール位置に応じて背景色やテーマカラーが変化する

セクションごとに雰囲気を変えるLP / ストーリーテリング

場面転換の明確化。異なるセクション＝異なるトピックという直感

スクロール位置が自動的に最寄りのセクション境界にスナップする

フルスクリーンスライド / ギャラリー / モバイルUI

整然さ・制御感。中途半端な位置で止まらない安心感

CSS Scroll-Driven Animations APIでJSなしのスクロール連動アニメーション

要素の拡大、回転、色変化をスクロールにマッピング

滑らかな連動感。ユーザーの操作に直結したレスポンス

スクロールに応じてテキストや画像がマスクから徐々に露出する

ストーリーテリング / LPの段階的情報開示 / プレミアムサイト

発見の喜び。「自分のスクロールで発見した」主体的体験

スクロールに応じて要素が拡大・縮小する

ヒーロー画像の拡大 / フォーカス演出 / 映画的ズームイン

対象への接近感。詳細に入り込んでいく体験

スクロール位置に応じてテキストが順番にハイライトされる

長文コンテンツの読みやすさ向上 / 音声同期字幕風演出

ガイド感。「今ここを読んでいる」位置の明示

スクロール速度に応じてエフェクトの強度が変わる

ダイナミックな背景 / スピード感の演出

物理世界の模倣。速く動くとブラーが起きる自然な感覚

セクションが表示領域に入った時に数値のカウントアップが開始する

統計データセクション / 実績数の表示

数値の大きさへの驚き。スクロールによる「発見」の喜び

スクロールに連動して画像や映像がマスクから徐々に全体表示される

映画的演出 / プロダクト発表 / アート系ポートフォリオ

シネマティックな期待感。「もう少しで全貌が見える」

ネイティブスクロールを慣性のあるスムーズなスクロールに置換する

プレミアムサイト全体 / シネマティックな体験の基盤

高級感・滑らかさ。サイト全体のクオリティ感が底上げされる

ホバー時に要素が拡大する。画像カードやサムネイルに多用

ギャラリー / 商品カード / ポートフォリオサムネイル

「注目している」フィードバック。クリック可能であることを暗示

カーソルの接近に応じて要素が吸い寄せられるように移動する

CTAボタン / ナビゲーションリンク / インタラクティブ要素

磁力的な引力感。クリックしたくなる衝動を強化

マウス位置に応じてカードが3D的に傾く

プロフィールカード / 商品カード / ポートフォリオ作品

物理的な存在感。平面が「実体を持つもの」に変わる

ホバー時にアンダーラインやボーダーがアニメーション描画される

ナビゲーションリンク / テキストリンク / メニュー項目

洗練さ・エレガンス。控えめだが確かなフィードバック

ホバー時に背景色が一方向からスライドして塗りつぶされる

ボタン / リスト項目 / カード全体のホバー

エネルギーの充填感。「準備が整った」印象

WebGLシェーダーでホバー時に画像が波紋・ゆがみ効果を受ける

ポートフォリオ / 写真ギャラリー / アート系サイト

液体のような有機感。デジタルなのに自然界の物理を感じる

ホバー時に隠れていた情報（テキスト、オーバーレイ）が表示される

チームメンバーカード / ギャラリーのキャプション表示

発見・探索の楽しさ。「触れたらもっと知れる」好奇心

ホバー時に画像やテキストがグリッチ効果を受ける

テック系ポートフォリオ / ゲームサイト / サイバーパンク風

エッジの効いた印象。普通のホバーとの差別化

clip-pathの形状変化でホバー時に別のコンテンツを露出する

Before/Afterの比較 / 画像の切り替え / クリエイティブカード

覗き見のような好奇心。隠されたものを発見する快感

クリックやタップ位置から同心円の波紋が広がる（Material Design）

ボタン / カード / リスト項目のタッチフィードバック

波紋が広がる水面の模倣。アクションの「影響」を可視化

ホバー時に発光するbox-shadow、text-shadowが付与される

CTAボタン / 重要な要素の強調 / ダークテーマUI

電源が入った感覚。要素が「アクティブ」になったことを伝える

カーソルの周囲だけが明るくなるスポットライト効果

ダークテーマの探索的UI / ゲーム的演出 / 隠しコンテンツ

探索・発見のワクワク感。懐中電灯で暗闇を照らす感覚

ホバー時に要素内の複数レイヤーがマウス位置に連動して微妙にずれる

カードUI / プロモーションバナー / ゲームのキャラ選択

奥行き感。2Dのカードが小さな3D世界になる

ナビゲーション項目間を液体のようなブロブが移動する

タブナビゲーション / メニューバー / セグメントコントロール

流動性・滑らかさ。選択が「流れるように」移動する感覚

ホバー時に要素の形状がSVGモーフィングで別の形に変化する

アイコン変化（ハンバーガー→X）/ 装飾的ボーダー変形

変容の驚き。一つのものが別のものになるメタモルフォーゼ

円形の軌道上で部分的なストロークが回転する

データ取得中 / フォーム送信中 / ページ読み込み（2-10秒）

「処理中」の最も一般的なシグナル。待機を促す

実際のUIレイアウトのプレースホルダーをグレーのブロックで表示

フィード読み込み / カードリスト / ダッシュボード

コンテンツが「もうすぐ来る」安心感。体感待ち時間の短縮

スケルトン上を光沢のあるグラデーションが流れる

スケルトンスクリーンの強化 / カードの読み込み表示

動きがあることで「止まっていない」安心感

水平バーが左から右に伸びて進捗率を表示する

ファイルアップロード / 長いプロセス（10秒以上）/ インストール

進捗の定量的把握。ゴールが見えている安心感

要素が拡大・縮小を繰り返す

接続待ち / バックグラウンド処理中の表示

生命感。システムが「生きている」＝動いているサイン

3つ程度のドットが順番にバウンスまたはフェードする

チャットの「入力中...」/ 軽いデータ取得待ち

カジュアルな待機表示。重大さを感じさせないライトな印象

バーやドットが波形を描くようにタイミングをずらして上下する

音声処理中 / 音楽プレイヤーの読み込み

リズム感・音波の連想。音響系UIに自然にフィット

円周上のストロークが進捗率に応じて伸びる

ファイルアップロード / スキルレベル表示 / タイマー

達成までのビジュアル化。100%に向かう期待感

ブランドのロゴがSVGドローイングやモーフィングでアニメーション

アプリ起動画面 / ブランドサイトの初回読み込み

ブランド認知の強化。待ち時間をブランド体験に変換

幾何学形状が円→三角→四角と連続的に変形し続ける

クリエイティブサイトの読み込み / デザインツールの起動

変化し続ける＝「処理が進行している」表現。飽きさせない

0%→100%の数値が表示され、プログレスバー等と組み合わせる

重いアセットの読み込み / ゲームのローディング画面

数字による正確な進捗把握。最も具体的な待ち時間の見積もり

容器の中を液体が波打ちながら満たしていく

バッテリー残量 / データ使用量 / 達成率の表示

充填される満足感。自然現象の模倣による直感的理解

複数色のグラデーションがゆっくりと位置・角度を変えながら変化する

ヒーロー背景 / LP全体の背景 / ダークモードの雰囲気作り

穏やかな動き。静的でありながら「生きている」印象

緑・青・紫のグラデーションが波のように揺らめく

プレミアムサイトの背景 / ダークテーマのアクセント

神秘性・高級感。自然界の壮大な現象を連想させる

複数のグラデーションポイントが不定形に混ざり合う

モダンなUI背景 / カード背景 / アプリのスプラッシュスクリーン

柔らかさ・現代的な美。Apple風のプレミアム感

有機的な形状のカラーブロブがゆっくりと変形・移動する

SaaSのLP / テック系サイトの背景 / ダッシュボード

有機性と技術の融合。堅くないテクノロジーの印象

SVGまたはCSSで描画された波形がゆっくりアニメーション

セクション区切り / 海・水をテーマにしたサイト / フッター

流れ・動きの自然さ。穏やかで心地よい印象

暗い背景に多数の星がきらめく。奥行き方向への移動も

テクノロジー系 / 宇宙テーマ / 深夜向けコンテンツ

無限の広がり。壮大さと静寂

緑色の文字列が上から下へ滝のように流れ落ちる

テック/ハッカー系サイト / Easterエッグ / ローディング画面

デジタル世界・サイバー空間を直接的に連想させる

フィルムグレインのような微細なノイズをオーバーレイする

レトロ感の演出 / フラットな背景の質感向上

アナログ感・レトロ感。デジタルの無機質さを緩和する

幾何学的なパターンがゆっくり変化する

テック系の背景 / 数学/科学サイト / 抽象的な装飾

秩序・知性の印象。テクノロジーへの信頼感

ミュートされた動画がセクションの背景として再生される

ヒーローセクション / ホテル/レストラン / 企業サイト

没入感・臨場感。静止画とは比べ物にならないインパクト

Canvas APIで描画されるプロシージャルなアート

アート系サイト / クリエイティブエージェンシー / 実験的背景

独自性・一回性。毎回異なるパターンが「唯一無二」感を演出

SVG図形がモーフィングや回転でアニメーションし続ける

軽量な動的背景 / 図形的な装飾

軽快さ。重いリソースなしにリッチな動きを提供

マウスの位置に応じて背景の色、光、パターンが変化する

インタラクティブなヒーロー / 実験的デザイン / アート

「自分が影響を与えている」直接的なフィードバック

三角形メッシュで構成されたポリゴン風の背景がゆっくり変化する

モダンなテック系サイト / ゲーム系 / 幾何学的デザイン

技術的・数学的な美しさ。3Dとフラットの中間的存在

半透明の白い層が漂い、背景に奥行きと神秘感を加える

ファンタジー系 / ホラー系 / 山岳風景の演出

神秘性・視界の制限。見えないものへの好奇心を刺激

棒が0からターゲット値まで伸びるアニメーション

売上データ / 比較表示 / レポートのグラフ

データの「成長」を視覚化。値の大小を劇的に伝える

時間経過とともに棒グラフの順位が入れ替わるアニメーション

年次ランキングの推移 / 国別GDP比較 / 人気度の変遷

競争感・ドラマ性。データに「物語」を与える

パイチャートの各セグメントが時計回りに描画される

構成比の表示 / 予算配分 / アンケート結果

全体と部分の関係を段階的に理解させる

折れ線グラフが左から右に描画されていく

トレンド表示 / 株価推移 / 時系列データ

時間の流れとデータの変化を一体化。ストーリー性

数字が高速回転した後ターゲット値で停止する（スロットマシン風）

KPI表示 / 統計データ / ダッシュボード

数値へのドラマチックな注目。「最終値は何だ」という期待

棒→折れ線→散布図のようにチャート形式間をスムーズに変形

データの複数ビュー表示 / プレゼンテーション

同じデータの多面的理解。変換の滑らかさがプロ感を演出

地図上のデータポイントが時間経過で出現・拡大・色変化する

感染拡大の可視化 / 店舗展開 / 人口動態

地理的広がりの実感。データに「場所」という文脈を付与

矩形が分割・リサイズされてデータの階層構造を表示する

ファイルシステム可視化 / 予算構成 / カテゴリ別シェア

全体の中での各要素の比率を面積で直感的に理解

ノードとエッジがフォースレイアウトで自動配置され、弾力的に安定する

ソーシャルネットワーク / 組織図 / 関連性の可視化

関係性の直感的理解。「つながり」が物理的に見える

車のスピードメーター風にゲージの針が回転して値を示す

パフォーマンススコア / 健康指標 / 達成率

現在の「状態」の即座の把握。良い/悪いの判断が容易

データポイントがアニメーションで新しい位置に移動する

リアルタイムデータ更新 / フィルタ切り替え / 時間推移

データの「個」が追跡可能。各ポイントのアイデンティティの保持

レーダーチャートの頂点が0から各値まで伸びて形を成す

スキル評価 / 製品スペック比較 / キャラクターステータス

多次元データの「形」による直感的理解。バランスの可視化

静止画にゆっくりとしたズームインとパンを加えて動画的に見せる

写真スライドショー / ドキュメンタリー風 / 歴史的コンテンツ

静止画に命を吹き込む。ドキュメンタリーの信頼感

ズームインしながらカメラを引く（またはその逆）で遠近感が歪む

不安感の演出 / 重要な瞬間の強調 / 心理的表現

認知の歪み。不安・覚醒・重大さを強く感じさせる

カメラが水平方向に回転して広い空間を見渡す

背景の全体把握 / キャラクター間の視線移動 / 環境紹介

空間の広がり。「この世界にはもっと多くのものがある」

カメラが垂直方向に回転。建物を下から上、人物を頭からつま先に映す

建築物の紹介 / キャラクターの全体像 / スケール感の表現

垂直方向のスケール。見上げる＝畏怖、見下ろす＝俯瞰

フォーカスを前景から背景（またはその逆）に移動する

注目要素の切り替え / 会話シーンの視点変更

注意の誘導。「今度はこちらを見て」というガイダンス

高速移動する物体に残像のブラーを加える

スピード感の表現 / 遷移効果 / アクションシーン

速度の体感。動きの激しさを増幅する

RGBチャンネルをわずかにずらして色のフリンジを発生させる

レトロカメラ風 / グリッチ的演出 / ホラー / SF

レンズ越しの現実感。生々しさ、または不安定さ

明るい部分が周囲に光を滲ませるポストプロセス効果

夢のシーン / 魔法効果 / ネオン表現 / HDR感

眩しさ・神聖さ。光が溢れ出す非日常感

画面の周縁部を暗くして中央に注目を集める

写真風演出 / レトロ感 / 集中効果

トンネルビジョン。中央のコンテンツへの没入を強化

アナログフィルムの粒状感をデジタルにシミュレーション

レトロ演出 / 映画風 / 写真風 / 質感の追加

アナログの温かみ。デジタルの「冷たさ」を中和する

レンズの光漏れをシミュレーション。カラフルな光が画面に差し込む

レトロ風 / 夏の日差し感 / ノスタルジック演出

懐かしさ・暖かさ。古いフィルム写真を見るような感覚

画面上下に黒いバーを表示してシネマスコープ風のアスペクト比にする

映画的演出 / ストーリーテリング / ドラマチックなシーン

「映画を観ている」フレーミング。日常から切り離された体験

映像やアニメーションの速度を急激に変化させる

アクションのハイライト / 製品の動きの詳細表示

時間の伸縮感。重要な瞬間を「引き延ばして」味わわせる

画面を2分割以上にして同時に複数のビューを表示する

比較表示 / 同時進行の表現 / Before/After

対比・並列。複数の視点を同時に提供する

画面全体が不規則に揺れる手持ちカメラ風の効果

衝撃表現 / 緊張感 / ドキュメンタリー風 / ホラー

不安定さ・緊迫感。「その場にいる」臨場感

ボタンクリック時にスケール縮小→戻り、影の変化で押下感を表現

あらゆるインタラクティブボタン

物理的な「押した」感覚。アクションが受理されたことの確認

ON/OFFの切り替え時にハンドルがスライドし、背景色が変化する

設定画面 / ダークモード切り替え / 機能のON/OFF

明確な状態変化。「切り替えた」実感を物理的に伝える

三本線のアイコンがX印やアロー矢印にスムーズに変形する

モバイルナビゲーションの開閉

状態の可視化。メニューの開閉状態を直感的に把握

入力の正否に応じてアイコン表示、ボーダー色変化、シェイクを行う

ログインフォーム / サインアップ / お問い合わせ

即座のフィードバック。エラーの明確な伝達と修正の動機付け

円が描画された後、チェックマークがストロークで描かれる

フォーム送信完了 / タスク完了 / 支払い成功

達成感・安心。「正しくできた」ポジティブなフィードバック

新しい通知がある時にバッジが脈打つようにアニメーション

通知アイコン / メッセージカウント / 新着表示

注意の喚起。「何か新しいものがある」ことへの気づき

画面端からスライドして一時的なメッセージを表示、自動で消える

操作完了通知 / エラーメッセージ / 情報表示

非侵入的な通知。メインフローを妨げずに情報を伝える

コンテンツがスムーズに高さアニメーションで展開・収納される

FAQ / 設定メニュー / カテゴリ内コンテンツ

整理整頓感。必要な情報だけを表示するコントロール感

モーダルがスケール・フェード・スライド等で登場し、背景が暗転する

確認ダイアログ / 詳細表示 / 画像ライトボックス

注目の集中。「これは重要な内容です」という明確なシグナル

画面の端からスライドしてナビゲーションパネルが出現する

モバイルナビゲーション / フィルターパネル / 設定画面

空間の効率的利用。「隠れていたものが出てくる」操作感

アクティブタブのインジケーターがスライドし、コンテンツが切り替わる

コンテンツの分類表示 / 設定カテゴリ / 情報のグループ化

空間の連続性。タブの移動＝コンテンツの移動という直感

ホバー時に小さな情報パネルがフェード・スケールで表示される

アイコンの説明 / 省略されたテキストの全文表示

邪魔にならない情報提供。必要な時だけ現れる控えめさ

クリック時にメニューがスケール・フェード・スライドで展開される

ナビゲーションメニュー / セレクトボックス / 設定メニュー

選択肢の段階的開示。圧倒されずに選べる感覚

一定量スクロール後に表示され、クリックでスムーズにトップに戻る

長いページ / ブログ記事 / ECサイト

ナビゲーションの安心感。「いつでも戻れる」保険

タップ時にハートが拡大・回転しながら色が変わる

SNSの「いいね」/ お気に入り登録 / レビュー

感情の可視化。ポジティブなフィードバックの増幅

下に引っ張るジェスチャーでローダーが現れ、データが更新される

モバイルアプリのフィード更新 / リスト更新

直接操作感。物理世界の「引っ張る」行為との対応

リスト項目を横にスワイプすると削除ボタンが露出する

メールクライアント / タスク管理 / 通知管理

効率的な操作感。物を「払いのける」直感的ジェスチャー

画面角に浮遊するボタンがタップで展開し、複数のアクションを表示

主要アクションへのアクセス / 新規作成 / 共有メニュー

常にアクセス可能な安心感。主要アクションの明確な強調

バネの物理法則に基づき、ターゲット値を超えて振動しながら収束する

UI要素の配置変更 / ドラッグ&ドロップ後のスナップ

自然な「着地」感。機械的でない有機的な動き

物体が床に当たって跳ね返る動きのシミュレーション

落下するオブジェクト / 通知の登場 / ボール系アニメーション

重力と弾力の実感。エネルギーが目に見える

ゴムバンドのように引っ張られて跳ね返る動き

モバイルのオーバースクロール / 引っ張って離す操作

素材の弾力を感じる。物理的制約の存在を暗示

オブジェクトが重力に従い加速しながら落下する

ゲームの物理 / パーティクルの落下 / ドロップアニメーション

物理世界の再現。自然で予測可能な動き

複数のオブジェクトが衝突時に反発・変形する

ゲーム / インタラクティブなアート / 物理実験

インタラクション感。オブジェクトが「実在する」感覚

液体の流れ・渦・波紋をリアルタイムにシミュレーション

インタラクティブ背景 / マウス追従の流体 / アート表現

有機的な美。触れたくなる・かき混ぜたくなる衝動

布の垂れ下がり、風になびく動き、ドラッグ操作への反応

旗・カーテン表現 / 服の動き / インタラクティブなキャンバス

素材感の再現。デジタルなのに「布」が見える驚き

一点から吊り下がったオブジェクトが振り子運動する

装飾的アニメーション / 時計 / 物理の可視化

リズミカルな安心感。規則的な運動による催眠効果

慣性スクロールが摩擦によって減速・停止する

スワイプカルーセル / 慣性スクロール / フリック操作

物理世界の模倣。操作に「重み」と「現実感」

複数のポイントを接続した紐がたわみ・振動する

装飾的なつなぎ目 / ゲーム要素 / 物理パズル

柔軟性・接続性の可視化。物が「繋がっている」表現

オブジェクトが特定の点に向かって引き寄せられるまたは反発する

マグネティックボタン / パーティクル / UI要素の整列

目に見えない力の存在。「引きつけられる」体験

操作を止めた後も速度に応じてしばらく動き続ける

スクロール / カルーセル / ドラッグ操作後の惰性移動

動きのリアリティ。デジタル操作に物理的な「質量」を感じる

2つの異なるSVGパス間をスムーズに補間して変形する

アイコンの状態変化（再生→停止）/ ロゴアニメーション / 有機的変形

変容の驚き。1つのものが別のものに「なる」魅力

SVGのstroke-dashoffsetを操作して線が描かれる動きを表現

ロゴ描画 / イラスト登場 / 図解のステップ表示

手描き感・クラフトマンシップ。丁寧に作られた印象

円・三角・四角等の基本図形が回転・変形・移動する

ローダー / 背景装飾 / 抽象的なブランド表現

秩序・数学的美。シンプルさの中の複雑さ

パターンが回転しながら対称的に反復・反転される

装飾的背景 / 音楽ビジュアライザー / サイケデリックな演出

催眠的・瞑想的。パターンの無限の変化に引き込まれる

自己相似的なパターンがズームまたは展開で無限に詳細化される

数学/科学コンテンツ / アート背景 / ズーム演出

無限の複雑さへの畏怖。自然界の法則の美しさ

要素が渦巻き状に回転しながら中心に収束または発散する

ローディング / ポータル効果 / 吸い込み表現

吸引力・推進力。中心に引き込まれる感覚

平面を隙間なく図形で敷き詰め、そのパターンが変形・変化する

背景パターン / 建築的デザイン / イスラム幾何学風

秩序と調和。完璧にフィットする心地よさ

不定形の有機的な形状がゆっくりと変形し続ける

背景装飾 / 区切り線の代替 / モダンなUI要素

柔らかさ・親しみ。幾何学の堅さを和らげる

格子状に配置された点がマウスの影響で波紋のように変形する

テック系背景 / インタラクティブなヒーロー

秩序と反応性。整然としたものが有機的に反応する面白さ

アルゴリズムで生成されるパターンがリアルタイムに成長・変化する

アート表現 / 背景 / ジェネラティブデザイン

創発性。単純なルールから複雑な美が生まれる驚き

多角形の頂点数や配置が変化して別の形状に変わる

アイコンの変形 / ロゴアニメーション / 形の遷移

流動性。形に「固定」がないという自由さ

CSS clip-pathの多角形が変形してコンテンツの見え方が変化する

画像の表示領域変化 / クリエイティブな区切り / リビール

マスクの操作感。コンテンツの「窓」が変形する面白さ

要素の色が時間経過やインタラクションに応じてスムーズに変化する

状態変化のフィードバック / テーマ切り替え / 気分の表現

変化のグラデーション。急激でない穏やかな変容

色相環上を連続的に色が変化していく（虹色サイクル）

装飾的なアクセント / レインボーエフェクト / プライドカラー

多様性・包括性。すべての色を含むという象徴性

要素の周囲にネオンサインのような発光効果を付ける

サイバーパンク風デザイン / ダークテーマUI / ナイトクラブ風

夜の街のエネルギー。目を引く鮮やかさ

グラデーションの位置・角度・色が時間とともに変化する

ボタン / 背景 / テキストの装飾

高級感・未来感。静的な色よりもリッチな印象

円錐状グラデーションが回転し続ける

ローダー / ボーダーエフェクト / 装飾的な円形要素

回転するエネルギー。虹色の光輪のような神秘性

要素のボーダーが虹色に変化し続ける

注目要素の強調 / プレミアムカード / ゲームUI

特別感・プレミアム感。通常の要素との明確な差別化

暗い画面上でカーソル周辺だけが明るくなるスポットライト効果

探索的UI / ゲーム / ダークモードのインタラクション

発見・探索の興奮。暗闇の中の「見つける」体験

box-shadowやtext-shadowの大きさ・色・位置がアニメーション変化する

浮遊感の表現 / ネオモーフィズム / ボタンの状態変化

浮き上がり感。光源の存在を暗示し立体感を強化

光の帯が要素上を横切るように移動する

ボタンの注目誘導 / カードのプレミアム感 / 宝石や金属の質感

高級感・清潔感。光り輝くものへの本能的な注目

色が反転する。白→黒、明→暗のトグル

ダークモード切り替えの瞬間 / アート的演出 / 衝撃シーン

反転の驚き。世界観が「ひっくり返る」インパクト

角度に応じて虹色に変化するホログラム風の光沢効果

プレミアムカード / 認証バッジ / 高級感の演出

高価格帯・希少性の暗示。触れたくなる質感

限られた色数でドットパターンにより中間色を表現する

レトロゲーム風 / 8bit風演出 / グラデーションの代替

レトロ・ノスタルジー。初期デジタル時代の懐かしさ

画像や映像を文字（ASCII文字）で表現する

テック系の演出 / アート表現 / プログラマー文化

テキストの可能性の再発見。文字が「絵」になる面白さ

半透明のすりガラス風効果（backdrop-filter: blur + 透明度）

カード / ヘッダー / モーダル / オーバーレイパネル

奥行き感・上品さ。背景が透けて見える洗練された階層表現

サイト全体の配色がスムーズに切り替わる

テーマ切り替え / 時間帯による配色変化 / ブランドカラー変更

環境の変化。同じ空間が「別の雰囲気」になる新鮮さ

バリアブルフォントのweight・width・slant軸をアニメーションで変化させる

インタラクティブな見出し / ホバー時の太さ変化 / スクロール連動

文字自体が「生きている」感覚。タイポグラフィの新しい表現力

テキストが動き・回転・拡大縮小を伴って視覚的ストーリーを語る

音楽MV / プレゼン動画 / ブランドムービー / リリックビデオ

テキストがメッセージの「感情」を直接体現する。強い説得力

文字が液体のように流れ、変形する

アート系サイト / 実験的デザイン / クリエイティブポートフォリオ

型にはまらない自由さ。文字の「物質性」への新しい認識

clamp()やcalc()でビューポートサイズに応じてフォントサイズが滑らかに変化

あらゆるレスポンシブデザインの見出し・本文

どのデバイスでも最適な読み心地。シームレスな体験

テキスト内に画像や映像が表示される（background-clip: text）

ヒーローセクション / ブランドタイトル / アート表現

テキストと映像の融合。メッセージとビジュアルの一体化

段落の先頭文字が大きく装飾され、アニメーション付きで登場する

物語の冒頭 / ブログ記事 / エディトリアルデザイン

格式・伝統。書籍のような正統派の美しさ

テキストがSVGパスに沿って配置され、パスに沿って流れる

ロゴデザイン / 円形ラベル / 装飾的なヘッダー

動きの軌道とメッセージの一体化。直線では得られないリズム

テキストがゆっくりと拡大・縮小を繰り返す（呼吸のリズム）

瞑想アプリ / リラクゼーション / 待機画面

落ち着き・リラックス。生命のリズムとの同期

テキストに3D遠近法を適用し、奥行きのある角度で表示する

映画のオープニング（Star Wars風）/ インパクト見出し

空間の広がり。テキストが画面の「向こう側」に存在する感覚

テキストの上にマスクレイヤーがスライドして下のテキストを露出させる

高級ブランドのサイト / タイトルシーケンス / カウントダウン

高級感・期待感。「ベールを脱ぐ」瞬間のドラマ

文字間隔が波のように伝播して広がったり縮んだりする

インタラクティブなタイトル / 音楽ビジュアライザーとの連動

動的なリズム。テキストが「呼吸している」有機感

テキストが縦方向に配置され、上から下へ順番にリビールされる

日本語コンテンツ / 詩・和歌 / 伝統的なデザイン

伝統・格式。日本語の美しさを最大限に活かす

スクロール位置に応じてフォントのウェイトがthin→boldに変化する

実験的なタイポグラフィ / スクロール駆動のストーリーテリング

強調の可視化。スクロールするほど「力強くなる」テキスト