📌 この記事のポイント

• Studio スクロールエフェクトは2026年4月リリースの新機能。カスタムコード不要でパララックスが作れる

• 設定できるスタイルは「移動・回転・スケール・不透明度・フィルター」の5種類

• トリガーは4種類（入る時／出る時／内包／デフォルト）。基本はデフォルトでOK

• 「原点」機能を使うと、これまで実現できなかった一方向スケールが可能になる

• ハマりやすい4つの罠（スケール子要素影響・ブレンドモード白背景制約・移動ピクセル問題・独自クラス未対応）を回避法とセットで解説

2026年6月7日更新

Studio スクロールエフェクトは「カスタムコード時代」を終わらせる新機能

Studio スクロールエフェクトは、2026年4月9日にリリースされた、スクロール位置に応じて要素の動きをコントロールできる機能です。これまでStudioで実現するにはカスタムコード（CSS/JavaScript）が必要だったパララックスやスクロール連動アニメが、エディター上のGUI操作だけで作れるようになりました。

ノーコードWebデザインで「動きのあるサイト」を作りたい駆け出しデザイナーにとって、これは大きな転換点。これまで「Studioではここまでしかできない」と諦めていた表現が、標準機能で実装できるようになったからです。

本記事ではStudio公式のリリース情報と公式ヘルプ、実際に触って発見したコツとハマりポイントを、駆け出しデザイナー向けに体系化しました。

参考動画：【ライブ配信】Studio新機能「スクロールエフェクト」最速レビュー配信（1時間17分）

Studio スクロールエフェクトでできること｜3つの設定×5つのスタイル

Studio スクロールエフェクトとは、スクロール位置や画面内に入るタイミングに応じて、要素のアニメーションをコントロールする機能のことです。設定は「スクロール位置」「スタイル」「トリガー」の3つの組み合わせで構成されます。

設定できるスタイル5種類

これら5つのスタイルを単独でも、組み合わせでも適用できます。たとえば「スケール+不透明度」を組み合わせるとフェードしながら拡大、「移動+フィルター」を組み合わせると後退しながらぼけていく、といった表現が可能です。

3つのアニメーション設定

Studio公式は「スクロール位置」「位置の移動や不透明度などのスタイル」「アニメーションのトリガー」の3つを設定できると公表しています。読み解くと、いつ・どこで・どう動くかを3軸で制御する仕組みです。

• いつ：スクロール位置の何％時点でアニメーションを発動させるか

• どこで：トリガー（要素が画面に入るタイミング・出るタイミング等）

• どう動くか：5つのスタイル（移動・回転・スケール・不透明度・フィルター）

この3軸を組み合わせることで、Framerなど他のノーコードツールに引けを取らない動きのあるWebサイトをStudioだけで完成させられます。

設定画面の見方｜ビュータイムラインとスクロールプレビューモード

Studio スクロールエフェクトの設定画面は、エディター右側のスタイルパネルにある「スクロール」項目から開きます。要素を選択して「条件スタイル → スクロール」と進むと、設定UIが表示されます。

2つのタイムラインの違い

設定UIには「ビュータイムライン」と「スクロールタイムライン」の2つが用意されています。両者の違いを整理すると次の通り。

基本的にはビュータイムラインでの設定がおすすめです。要素ごとに動きが見えるので直感的で、駆け出しデザイナーが最初に触るならこちらが分かりやすいです。スクロールタイムラインの「直近の親ボックス」の挙動はまだ検証が進んでいない領域なので、まずビュータイムラインで慣れていくのが現実的です。

スクロールプレビューモードが優秀

設定中、エディター中央のキャンバスが「スクロールプレビューモード」に切り替わります。このモード中はキャンバス上でスクロールができ、設定したアニメーションをリアルタイムで確認できます。

右側には現在のスクロール位置が「何%」と表示されるので、「48%の時にこの値にしたい」というピンポイントの調整がしやすい。Figmaのプロトタイピングとは違い、いちいち別タブで確認しなくていいのが大きなメリットです。

4つのトリガー｜「入る時／出る時／内包／デフォルト」の違いと使い分け

Studio スクロールエフェクトには、アニメーションの発動タイミングを決める4つのトリガーが用意されています。それぞれ動き出しと止まりのタイミングが異なるため、表現したい挙動に合わせて選びます。

4トリガーの違い早見表

迷ったらデフォルトでOK

4つもあると最初は混乱しますが、実務の8割以上はデフォルトで対応できると感じています。理由はシンプルで、デフォルトは「要素が見えはじめてから完全に消えるまで」の自然な動きを再現するから。

「入る時」「出る時」「内包」は、デフォルトでは表現しきれない特殊な動きをしたい時の応用編。具体的には：

• 「入る時」：要素が見えはじめた瞬間にパッと現れて欲しい時

• 「出る時」：スクロールアウトと同時に消えていく退場演出

• 「内包」：要素が画面内にいる間ずっと回り続けるような、終わりに余裕を持たせたい時

まずはデフォルトで作って、表現しきれない時に他のトリガーを試す順序が、駆け出しが最短で慣れる道です。

【記事の山場】原点トリック｜一方向スケールを実現する隠れた主役

Studio スクロールエフェクトを触っていて、「これは知らないと損する」と感じる発見が「原点」設定の活用です。普段ほとんど使わない機能ですが、スクロールエフェクトでは隠れた主役になります。

スケールが両サイドに広がる問題

スケール機能を使うと、デフォルトでは要素が真ん中を起点に両サイドに広がります。たとえば「テキストの左から右へ塗りが滑り込む」演出をしたい場合、ボックスを横方向にスケールさせると左右両方向に広がってしまい、思った動きにならないことが多いです。

これを「絶対位置で左寄せ」「マイナス移動で位置調整」など力技で解決しようとすると、レイヤー構造が複雑になり、レスポンシブ対応も難しくなります。

原点を左に変えるだけで一方向スケールに

解決法はシンプルで、ボックスの「原点」設定を左に変えるだけ。Studioのスタイルパネルにある「変形 → 原点」を「中央」から「左中央」に変えると、スケール時の起点が左端に固定され、右方向にだけ伸びるようになります。

このTipsは、ライブ配信で視聴者の「ゆうごさん」がコメントで提案して発見されたもの。配信中の中島さんとパートナーがその場で試して「原点はここで生きてくるか！」と驚いた経緯が動画に残っています。

原点を変えると変わる挙動の比較

これを応用すると「窓が開いていく」「シャッターが上下に分かれていく」といった凝った演出も、4つのボックスをそれぞれ別方向の原点に設定するだけで実現できます。

実装パターン7選｜パララックス・スティッキー・背景色変化まで

ここからは、Studio スクロールエフェクトを使った具体的な実装パターンを7つ紹介します。どれも実務で使う頻度が高い表現です。

パターン1：基本のスケール拡大

最もシンプルな入門パターン。要素のスケール値を「0%地点で100%、48%地点で500%」のように設定すると、スクロールに合わせて要素が拡大していきます。

パターン2：パララックス（背景画像の遅延スクロール）

奥行き感を出す定番表現。画像のボックスに親ボックスを被せて「はみ出し非表示」設定にし、中の画像を移動スタイルでマイナス値（例：-600px）に動かすと、背景が前景より遅れて動くパララックスが完成します。

パターン3：スティッキー×リスト×背景色変化

スティッキー（追従）機能とリスト機能を組み合わせると、写真ギャラリーが固定背景の上で切り替わるリッチな表現が作れます。さらにCMS連携も可能なので、ポートフォリオサイトに最適。

実装のコツは、リストアイテムにスティッキー設定を付与し、リスト全体のスクロール進行に応じて背景色を変化させる構成。1つのアニメーション設定がリスト全アイテムに適用されるため、要素数が増えても工数は変わりません。

パターン4：一方向スケール（原点トリック）

前述の原点を左中央に変えるパターン。テキストへの「塗りが滑り込む」演出や、画像が右からスライドインする演出が、レイヤーを増やさず実現できます。

パターン5：ブレンドモードでの色変化

フィルター内のブレンドモード（比較明・スクリーン等）を使うと、下のレイヤーの色がテキストに反映される演出が可能。ただし下のレイヤーが白か黒の単色背景でないと正しく動作しないため、グラデーション背景では使えません。

その他にも色々な使い方ができるので、試行錯誤してお気に入りの表現を見つけてみてくださいね！

ハマりやすい罠と回避法

ここまで紹介した実装パターンを作る中で、実際にハマりやすいポイントを整理しました。事前に知っておくと無駄な検証時間を節約できます。

罠1：スケールが子要素まで伸ばしてしまう

症状：親ボックスをスケールさせると、中の画像やテキストまで一緒に引き伸ばされる。 回避法：原点設定を活用（左中央等に変更）。もしくは、伸ばしたい要素と中身のレイヤーを完全に分ける構成にする。

罠2：移動はピクセル指定のみで％指定不可

症状：移動スタイルは「移動pxピクセル」のみで、Framerにあるような「スクロールスピード96%」のような％指定ができない。
回避法：レスポンシブ前提でピクセル値を逆算する。具体的には、デザインカンプ上の動き幅をピクセル換算して入れる。スマホ表示時には別の値を設定する必要が出ることもあります。

罠3：独自クラスを振れない（IDのみ対応）

症状：カスタムコードと連携したい時、要素に独自CSSクラスを振れない（StudioはID指定のみ対応）。
回避法：現状はカスタムコード連携の自由度が低いので、スクロールエフェクト標準機能で表現できる範囲に留める。独自クラス対応は今後のアップデート待ち。

補足：一部ブラウザの不具合は改善済み

リリース直後、2026年4月10日に一部ブラウザで正常に動作しない事象が発生していましたが、公式リリース記事では改善完了済みと案内されています。Studio公式の推奨閲覧環境では、問題なく動作することが確認されています。

よくある質問（FAQ）

Q. Studio スクロールエフェクトはどのプランで使える？

2026年6月時点で、公式ヘルプ・料金ページ上ではScroll Effectのプラン別利用制限は確認できませんでした。利用可否は変更される可能性があるため、詳細はStudio公式の料金ページやヘルプで最新情報を確認してください。

Q. スマホ表示でも動作する？

動作します。設定したパーセント値（48%地点でこの値、など）はPC・タブレット・モバイル全て共通で適用され、スタイル値（スケール量・移動ピクセル等）のみブレイクポイントごとに調整できます。ただし移動スタイルはピクセル単位なので、ブレイクポイントごとの値調整が必要になるケースが多いです。

Q. 4つのトリガーの違いがどうしても分からない

実務の8割はデフォルト（入る時〜出る時）で十分です。最初はデフォルトだけ使って慣れて、「もう少し早く動かしたい」「出ていく時だけ動かしたい」と思った時に他のトリガーを試す順序がおすすめ。

Q. 以前出ていたFirefoxの不具合はもう大丈夫？

2026年5月11日に公式がパッチをリリース済みで、現在は解消されています。最新のFirefoxで問題なく動作します。公式リリース記事では、2026年4月10日に一部ブラウザで正常に動作しない事象が発生したものの、改善完了済みと案内されています。

Q. Framerのスクロールアニメと比べてどう？

機能の網羅性はFramerが一歩進んでいますが、Studioも基本的なパララックスやスクロール連動アニメは過不足なく実装できる状態になりました。詳しい比較はFramer×Figma×Studio徹底比較を参照してください。

Q. AI ワークフローと組み合わせるとどう変わる？

レイアウトの叩きをAIで作成し、Studio上でスクロール演出を加える流れがおすすめ。具体的なAI連携はStudio制作×AIワークフロー実験レポートで公開しています。

まずは1セクション触って手を動かす

Studio スクロールエフェクトは、説明を読むより1回触る方が早く理解できる機能です。本記事の内容を全部理解しようとせず、まずはエディターを開いて以下の手順を試してみてください。

1. ボックスを1つ追加して背景色をつける

2. スタイルパネルの「スクロール」を開く

3. ビュータイムラインを選び、「100%地点でスケールX200」を設定

4. スクロールプレビューモードでパーセントを動かして挙動を確認

これだけで「スクロールに連動して動く」感覚がつかめます。あとはこの記事の実装パターンを上から順に再現していけば、1〜2時間でひと通りの表現が手に入る。

NOT DESIGN SCHOOLでは、Studio制作の実務スキル全般を体系的に学べるパーソナルコースを開講しています。スクロールエフェクトを含む新機能の活用法や、AI連携を組み込んだ効率的なStudio制作フローも扱っています。