生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由

生成AIに作らせたサイトには、クリックで開閉するアコーディオン（FAQなど）や、画像が横に流れるスライダーといった、JavaScriptで動きを制御する部品がよく含まれています。

これらをStudioに持ち込むと、見た目のレイアウトは再現できても、クリックしても開かない・スライドしないなど、動きの部分だけが失われることがあります。この記事では、その理由と、Studio側での代わりの作り方を整理します。

理由：見た目と、動きを制御する仕組みは別物

生成AIが書くアコーディオンやスライダーは、HTML/CSSで見た目を作り、JavaScriptのコードで「クリックされたら高さを変える」「一定時間ごとに画像を切り替える」といった動きを制御しています。

デザインを中心に据えたStudioのようなツールに持ち込むときは、見た目の部分（箱の形、文字、画像の配置）は再現できても、外部から持ち込んだJavaScriptの処理がそのまま「編集可能な部品の動き」として引き継がれるとは限りません。CSSアニメーションが持ち込めない理由と同じく、「仕組みが違う」ことが原因です。

代表的な対応：Studio純正の部品に置き換える

多くの場合、JavaScriptで作られていた動きには、Studio純正の部品で代用できるものがあります。

純正部品に無い動きは、Embed・カスタムコードという選択肢もある

Studio純正の部品では再現しきれない、凝った動きが必要な場合は、カスタムコードやEmbedボックスを使って元のコードごと埋め込む方法もあります。

ただし、この方法で持ち込んだ部分は、Studioのデザイン画面上で見た目を直接編集することができなくなります。あとから色やレイアウトを調整したくなったときは、コードを書き直す必要がある点は理解しておきましょう。

迷ったら「今後も編集するか」で判断する

公開後も文章やデザインを自分でこまめに調整していきたい部分は、多少手間がかかってもStudio純正の部品で作り直しておくほうが、長い目で見て扱いやすくなります。

一方、一度作ったら基本的に触らない装飾的な演出であれば、カスタムコードで持ち込んでしまうという判断も現実的です。

まとめ

生成AIが書いたJavaScript製の部品がStudioで動かないのは、見た目と動きの仕組みが別物だからです。アコーディオンやスライダーのような定番の動きは、Studio純正の部品に置き換えるのが基本の対応になります。CSSアニメーションが持ち込めない理由は生成AIが書いたCSSアニメーションが、Studioにそのまま持ち込めない理由、Studio側のアニメーションの仕組みはStudioのアニメーション入門でも扱っているので、あわせてご覧ください。