hover / tap
ライトスイープCSS gradient
金属の反射のように光が走ります。ロゴや見出しに高級感を。
EFFECTS CATALOG
お客様のサイトに組み込める「動き」の見本市です。すべて外部ライブラリなし——CSS・SVG・JavaScriptというWeb標準の技術だけで動いています。タイルに触れて試して、気に入った演出は名前でご指定ください。そのまま組み込めます。
※ お使いの端末が「視差効果を減らす」設定のため、動きのある実演は停止しています。
高級感・未来感・一瞬のインパクトを出す光の演出
金属の反射のように光が走ります。ロゴや見出しに高級感を。
カメラのレンズに差し込む光。動かすとゴーストが追従します。
毎回違う形の稲妻をその場で生成。キャンペーンの一撃に。
バチバチッと点灯する看板。飲食店・バーのサイトに。
ゆらめく色の膜が流れ続ける背景。ヒーローの雰囲気づくりに。
クリックした場所へ打ち上がって開く。夏祭り・記念企画に。
瞬く星空に流れ星。夜景・プラネタリウム的な世界観に。
映画のプレミアのような光の柱が左右から交差します。
カードの縁を光が走り続ける。注目させたい特典枠などに。
なぞった軌跡が8方向に鏡映しされて模様になる万華鏡。
押した場所から円形に次の画面が広がるページ遷移。
墨が紙に染みるように画像が現れる。displacement mapで縁が有機的ににじみます。
見出し・キャッチコピー・数字を主役にする動き
映像ノイズのように文字が乱れます。テック系・ゲーム系に。
触れると文字が弾け、バネの動きで元に戻ります。
価格や実績数値がスロットのように回る。数字が主役の時に。
蛍光ペンがシュッと引かれる強調。ブログ・LPの本文に。
一筆書きでサインが描かれていく。和風・美容・工房系に。
キャッチコピーを打っては消して次へ。複数の売りを1行で回せます。
ランダムな文字が左から順に「解読」されて確定します。
実績数値が勢いよく増えて止まる。信頼を数字で見せる定番。
文字が波のように踊る。ポップ・キッズ・イベント系に。
緑の文字が降り注ぐあの演出。ハッカー・SF的世界観に。
挨拶が世界の言葉でパタパタ切り替わる。多言語サイトの顔に。
触った人だけが体験できる、記憶に残る仕掛け
カーソルに吸い付き、クリックで波紋。押したくなるボタンに。
暗闇を懐中電灯で照らすように見せます。ティザーサイトに。
カードが裏返って続きが現れる。料金表・紹介カードに。
トレカのような虹色の反射がマウスを追いかけ、カードが傾きます。スマホは端末の傾きでも動きます。
月と山が別々の速さで動き、奥行きが生まれます。
レンズ部分だけ2倍に拡大。商品写真の質感を見せるECに。
近づくと点が逃げ、離れるとバネで戻る。触って気持ちいい背景に。
マスコットの目がカーソルを追う。キャラクターサイトの遊び心に。
ぬるぬると形を変え続ける有機的な図形。装飾・写真の背景に。
短冊が時間差で開いて中身が現れる。新商品発表の幕開けに。
50本の針がカーソルの方角を一斉に向く。磁力のような気持ちよさ。
カーソル＝光源。影が物理的に正しい方向へ動きます。
太陽が沈み、月と星が昇る。時間帯で変わるサイトの部品に。
曇ったガラスを指でこすると景色が見える。冬・カフェ・住宅に。
スクロールで映像が進み、戻すと巻き戻る。連番フレームを事前生成して再生する方式です。
スクロールに合わせて部品が集まり、建物が完成する。建設・製造業の実績紹介に。
ライブラリなしの自作シェーダー＆自作物理エンジン。技術力の見せ札
触れた場所から画像が水面のように歪む。GPUが毎フレーム計算する本物のシェーダーです。
重力・衝突・反発を自前計算。掴んで投げると弾き合います。タップで追加。
JSもGPUコードも使わず、CSSの透視変形だけで回る立体。マウスで視点も傾きます。
数式が描く一点物の模様。タップするたび、二度と同じ柄は出ません。
商品をつかんで一回転。裏面のラベルまで見せられます。EC・工芸品・パッケージに。
製品が層に分かれて構造が見える3D分解表示。部品を選ぶと説明が出ます。製造業・精密機器に。
触れるとインクが渦を巻いて流れる本物の流体計算。※実験的機能：WebGPU対応環境ではGPU描画、非対応でもCanvasで動きます。
重い計算を別スレッドへ逃がす技術。「メインで計算」は画面が固まり、「ワーカーで計算」は動きが滑らかなままです。
キャンペーンや季節企画を盛り上げる演出
当選発表・キャンペーン開始の「おめでとう」を派手に。
花びらが舞い落ちる。雪・紅葉に差し替えて季節企画に。
ライブ配信のようにハートが舞い上がる。ファンサイト・SNS連動に。
ふわふわ昇って弾ける。ベビー・スパ・クリーニング系に。
雨が降り、時折稲光が走る。天気・季節連動の演出に。
CSSだけでロケットが曲線コースを周回。マスコットの遊覧飛行に。
音や端末のセンサーを使った、一歩先の体験（すべてユーザー操作で開始）
音を解析して波形が踊る。音はその場で自動生成、再生を押した時だけ鳴ります。
スマホを振ると抽選が回る。おみくじ・その場くじ引きに。
当店自慢の一皿は、瀬戸内の朝どれ鮮魚を使ったカルパッチョです。旬の野菜と一緒に、どうぞごゆっくりお召し上がりください。
文章を端末の音声で読み上げます。目の不自由な方や運転中の方にも届くサイトに。
話した言葉が文字になります。このページ上部の🎤から、声で演出を検索できます。
ボタンを押した手応えを振動で返します。フォーム送信やエラー通知の確実性が上がります。
見た目だけでなく、問い合わせ・購入につながる演出
つまみを左右に動かすとリニューアル前後が比較できます。制作実績の見せ方として最強です。
「いま誰かが申し込んだ」を見せる社会的証明。ECやLPの成約率対策に。
銀色をこするとクーポンが出ます。来店・成約特典の演出に。
締切までの残り時間がパタパタとめくれる。期間限定セールに。
満足度や達成率がグイッと伸びる。実績アピールの説得力に。
回して止まった色が当たり。来店特典・キャンペーン抽選に。
枠が埋まっていく緊張感で「今のうちに」を後押しします。
プラン札がバネの動きで入れ替わる。料金の見せ方に遊びを。
条件を選ぶと概算がその場で動く。見積り依頼の心理的ハードルをぐっと下げます。
同じページが人によってどう見えるかを疑似体験（※簡易的な再現です）。配慮あるデザインの大切さが伝わります。
URLを入れて「AI診断」を押すとデモが動きます
※ モックデータによるUIデモです（実際のAI診断は行っていません）URLを入れるとスコアが伸びるUIデモ。診断結果はモックです。本物のAI連携は開発のご相談から。
※ すべての演出は、OSの「視差効果を減らす」設定で自動的に停止します。実装はご要望に合わせて色・速さ・タイミングを調整できます。
気になった演出は、ありましたか？
「あの演出を入れたい」と名前を伝えるだけでお見積りできます。組み合わせのご相談も無料です。
無料で相談する →上の実演は、そのまま触って動かせます