Velo by WixとClaudeでアニメーション表現を追求。木村浩康（Flowplateaux）が語るWix Studioの可能性（後編）

Wix Studioを使い、招き猫型のお酒のボトルケースを販売する個性的なECサイトを制作中の、木村浩康（Flowplateaux）さん。前編ではブランディングやデザインのこだわりについてうかがいました。

後編では、Wix Studioの開発環境「Velo by Wix（以下、Velo）」とClaudeを組み合わせてつくり込んだアニメーション表現について、Wix.com Japan株式会社のフロントエンドエンジニア・山下圭祐さんとともに迫ります。

Claudeとつくる多様なアニメーション表現

–––––前編で、Claudeを活用しながらアニメーションをつけたとお話されていましたが、具体的にどのように動かしていますか。

木村浩康（以下、木村）　トップ画面の千社札が舞い降りてくるアニメーションなどは、Claude Codeで生成したJavaScriptを、Wix StudioのサイトにJavaScriptを挿入できるVelo by Wix (以下、Velo)という機能で実装して制御しています。

「おもてなし」の文字やイラスト画像などはSVG化しており、それらを連番で管理。JavaScriptからSVGのpath情報を操作して、表示の切り替えや変形を行いました。また、乱数で表示パターンを切り替えることで、動きにランダム性を持たせています。背景については、iFrameを用いて読み込みました。

木村　なかには、複数の方法を組み合わせてアニメーションをつけているものもあります。たとえばトップ画面にある火の玉は、FigmaのAIで生成しました。それをClaudeを用いて8コマのアニメーション用フレームにし、動きはVelo上で制御しています。一方、その上にある「LIMITED 100 BUY NOW」の文字については、Wix Studioにプリセットのループアニメーションをつけました。

その下のページでは、スクロールするごとに写真が重なっていく表現をつけています。ここでは、Veloで出現時のアニメーションを入れて、その後にディレイをつけて次の1枚が出現するという、複数の動きを合わせました。また、スマートフォンサイトだけ、別のアニメーションをつけてあります。この動きはWix Studioで設定しました。

※取材時点での制作内容です。公開版では、全体の体験に合わせてこのセクションの演出や実装方法を一部変更しています。

–––––そうやってさまざまな方法で実装できると、かなり幅広いアニメーション表現が可能になりそうですね。

木村　そうですね。ただ仕様上、Wix Studioでは実現できない表現もあります。例えば、z-indexによる重ね順の指定に制約があり、当初想定していたデザインと変えました。

あと、文字を回転させる動きを、Wix Studioにある回転ループのアニメーションで実装しようとしたのですが、一定速度で回るのではなく、イージングでバウンスを入れることで、グルンと回って少し戻る動きをつけたかったんです。しかし、複数アニメーションのタイミングを正確に合わせられず、ランダムにジリジリ動く別のアニメーションとタイミングが噛み合わなくて。

それで、今度はVeloで回転させたら、イージングでバウンスを入れる表現がうまくできませんでした。どうやら、回転値が360度を超えるとリセットされるようです。ただ、出現タイミングが決まっている演出だと、回転ループとVelo側の制御をうまく組み合わせられます。それで、トリガーのタイミングを合わせて、写真がふわっと開くようなアルファチャネルの演出にしたらきれいにハマりました。

山下　つまり、Wix StudioのプリセットのアニメーションにVeloで作ったアニメーションを重ねるという方法をとったということですか？

木村　そうです。「なんてニッチな発見をしているんだろう」と、自分でも思いました（笑）。まだVeloを使い始めたばかりで、完全には使いこなせていなかったので、もう一度試してみたら、別の方法で実現できるかもしれません。

Claude×Veloで広がる無限の可能性

–––––AIと組み合わせると、Wix Studioの可能性はこんなに広がるんですね。

山下　我々としても、「Wix Studio × Claude × Figma」でここまでつくり込んでくださった方のお話を聞くのは初めてで、勉強になります。

木村　かなりニッチな試行錯誤をしているので、AIを活用しながらWix Studioでここまで細かくつくり込んでいる人の中では、だいぶ経験値が溜まっているほうかもしれません（笑）。もちろんWix Studioにある機能だけでもWebサイトはつくれますが、もっと突き詰めたいと思うといくらでも追求できるので、満足度が高いです。Claudeを使うことでJavaScriptだけでなくCSSも書けますし、Veloと組み合わせることで試せることが一気に広がる感覚がありました。

今回のアニメーションは全部Veloで実装してもよかったのですが、Wix Studioのウェビナーイベントが控えていたので、あえてWix Studioでのアニメーションとかけ合わせることにトライしました。そうしたら、自分でも予期しないおもしろい動きができたので結果的によかったです。

あと、アニメーションって実際に動かしてみないと速度感などがわからないところがあって。ClaudeでバイブコーディングしたものをWix上ですぐに動きを確認できるので、どんどん試しながらつくっていけるのが便利でした。

山下　そう言っていただけると嬉しいです。Claudeによって、Veloの価値は一気に上がったと思います。ちなみに、「ここまでつくり込むなら、フルスクラッチのほうが楽」という線引きはありますか？

木村　正直、慣れるまでは学習コストもあったので、フルスクラッチでつくる感覚のほうが早いと感じた場面はありました。ただ、僕は玄人視点でつくり込むことが多いので、運用などを誰かに引き継ぐ場合には自分と同じだけの知識や経験値が求められてしまい、どうしても属人的なものになりがちです。

その点、Wix Studioでは、かなり細かくつくり込んでも、最終的にはダッシュボードで管理・運用できます。特に今回はECサイトなので、一度完成したら他の人が運用したり、招き猫が100個完売したあとも運用が続いていきますし、招き猫が100個完売したら、また別の商品を追加していくこともあるかもしれません。そういう意味でも、つくったあとに自分だけのものになりすぎないのは大きなメリットだと思います。

運用者の裾野を広げるWix Studio

–––––Velo以外に、Wix Studioでつくってみて、メリットを感じた点はありますか。

木村　スマホやタブレット用サイトのブレイクポイントの調整がしやすかったです。

–––––Wix StudioのAI機能を使って変換されたのですか？

木村　いや、AI機能では思った通りにいかない部分もあって、全部マニュアルでつくりました。ただ、Wix Studioではひとつのデザインをベースにブレイクポイントを調整していけるので、デバイスごとのデザインをそれぞれつくらなくてもいいのが楽でした。

–––––逆に、デメリットに感じた部分はありましたか。

木村　やはり、思った通りに動かないことがあった点ですね。慣れるまでは、Wix Studioならではの特性や仕様を理解するための学習コストがどうしてもかかります。ただ、それはWix Studioに限った話ではなく、他のサービスでも同じことです。加えて、僕自身かなり細かいところまで実現したいタイプなので、そのぶん難しさを感じる場面もありました。

うまく動かなかったときや、いわゆる回避方法やバッドノウハウは、Claudeにマークダウン形式で記録しています。同じところでまた詰まったときに、Claudeに確認できるようにしているんです。

–––––今後もWix Studioを使うとしたら、どんな案件があっていると思いますか。

木村　プログラミングはわからないけれど、デザインはできるスタッフの方が更新するようなWebサイトとは、とても相性がよいと思います。一度ベースをつくって納品すれば、その後は直感的に運用できますから。

Webサイト更新に慣れていない方だと、CMSのフィールドに入力すること自体に不安を感じるケースもあります。ただ、Wix Studioのダッシュボードは視覚的にわかりやすいので、そうした方でも抵抗感なく触れるのではないでしょうか。

–––––今回のECサイトは、完成までにあとどのような作業がありますか。

木村　まずは、先ほどお話ししたWebサイト冒頭のスプラッシュページを仕上げていきます。加えて、どこかに少しマジメなコンテンツも入れて、全体にメリハリをつけられたらと考えています。

–––––ほかにチャレンジしてみたいことはありますか。

木村　Wix Studioの概念もだいぶ掴めてきましたし、AIも日進月歩で進化しています。これからは、さらにできることが増えていくと思います。今後も、Wix StudioのプリセットアニメーションやVeloでのカスタマイズなどを行き来しながら、どこまで表現を掘れるのか試していきたいですね。

Wix Studioの真価に迫る、無料ウェビナーを開催！

プロフェッショナル向けのノーコードツール「Wix Studio」を展開するWix.comとオンラインメディア「Web Designing」が、Flowplateauxの木村浩康さん、tote incの谷井麻美さん・山口国博さん、ium incの小玉千陽さんをゲストに迎え、Wix Studioを使ったWebサイト制作の実践に迫るウェビナーを開催します。

本ウェビナーでは、ECサイト、音楽体験サイト、ポートフォリオサイトという3つのテーマで、実際にWix Studioを使ったサイト制作のプロセスを公開。UX設計の発想や制作フローの変化など、制作の試行錯誤を振り返りながら、プロのクリエイターが感じたWix Studioの手応えや工夫、そして制作の現場で活きるポイントを紹介します。

実制作だからこそ見えてきたリアルな知見を、ぜひご覧ください。

取材・文：平田順子、写真：秋山枝穂、企画協力：Wix.com Japan株式会社
※本記事はWix.com Japan株式会社とのタイアップ企画です。