Wix Studioで加速するWeb制作。tote inc.が語る音楽体験サイトの表現【後編】

プロ向け制作プラットフォーム「Wix Studio」は、柔軟なレイアウト設計やCMS機能、AIを活用した制作支援などを備え、Web制作の新たな選択肢として注目を集めています。今回は、第一線で活躍するWebデザイナーの方々に、実際にWix Studioを使ったWebサイト制作へ挑戦していただきました。

本記事で登場するのは、tote inc.の谷井麻美さんと山口国博さんです。アーティストの特設サイトやオフィシャルサイトを数多く手掛けるtote inc.。前編では、「プロジェクトの進み方やアイディア設計」をテーマに、作品世界へ没入させるUI／UX設計についてお話を伺いました。

後編では、浮かび上がったアイディアをWix Studio上でどのように形にしていったのかにフォーカス。実際の制作フローや、ChatGPT・Claude CodeといったAIツールを組み合わせた実装プロセスをひもときながら、試行錯誤のスピードと表現の拡張を両立する、これからのWeb制作のあり方を探ります。

アニメーション実装の初速が想像以上だった

–––––前編では、音楽とWebサイトを掛け合わせた独自の体験作りや、お二人の制作スタンスについて伺いました。後編では、そうしたアイディアをWix Studio上でどのように形にされているのか、具体的なお話をお聞きしたいと思います。

谷井麻美（以下、谷井）　　普段の私たちのスタイルと同様に、まずは手描きのスケッチで「どういう体験を作ろうか」という全体像や骨格をざっくりと考えます。そこから実装側へと渡し、Wix Studio上で実際に動かしながら具体的な表現を固めていきます。

山口国博（以下、山口）　　Wix Studioを実際に触ってみて感じたのは、要素の配置やアニメーション実装における「初速」が圧倒的なことです。通常、コードを書いてアニメーションを付ける場合、コードの変更を保存してからて初めてブラウザ上で動きを確認できます。しかしWix Studioなら、エディタ上でアニメーションのボタンを押すだけで、その場で要素が動いてくれます。

実際に触り込んでみると、一つの要素に対して用意されているアニメーションのプリセットが想像以上にたくさんあって、思わず「あれも試したい、これも試したい」と気持ちが広がりました。動きをすぐに確認できるので、「じゃあ次はどうしよう」と考えるまでのミクロな手間が省け、すぐに次の試行錯誤に移ることができたのです。

試行錯誤のコストが劇的に下がった

–––––今回の「PLANETOOOTE PLAYLIST」のaboutセクションでは、「スター・ウォーズ」のオープニングクロールのように遠近感をもってテキストを表示するアニメーションも取り入れられていますね。

山口　　文字情報自体は基本的に下から上へ自動でスクロールしていく構成とし、マウス位置に応じてパースがかかるように調整しています。特に、aboutのボタン位置が画面上部にあるため、ユーザーのマウスが画面上部にある状態で、奥行き感が出るように意識して実装しました。

–––––山口さんは普段からWebGLなどを用いて高度なビジュアルエフェクトを実装される中で、Wix Studioでの制作においてAIツールはどのように活用されていますか？

山口　　実装時の単純な記述を思い出す際などにChatGPTを活用して、作業に入るまでの準備時間を減らしています。Wix Studioでの制作においても、エディタを触りながら隣でChatGPTを開いて、「この要素に対して、Wix Studioの機能で何ができて、何ができないか」といったことを壁打ちしていました。これにより、実装の線引きが瞬時に判断できるようになり、1回1回の試行錯誤のコストが劇的に下がりました。

–––––音楽業界のWeb制作において、Wix Studioはどのような案件で特に力を発揮すると感じましたか？

谷井　　ホスティングやSSL、公開管理など、通常であれば個別に準備・確認が必要な要素を、Wix Studio上で一元的に扱える点は大きいですね。制作・確認・公開・運用までの流れをひとつの環境内で進めやすく、公開後も含めた管理のしやすさにつながります。

Wix Studioで効率を追求。限界までつくり込む、その先へ

–––––制作から運用までそれだけスピーディーに検証や更新ができるようになった分、逆に「どこまででもこだわれてしまう」という難しさはありますか？

谷井　　まさに「沼」ですね（笑）。AIの登場で調べものの時間が短縮された分、時間があればあるほど「もっとこうしたい」とアイディアが出てきてしまいます。今回のプロジェクトでも、各国の世界観を強く出そうとするとUIとしての分かりやすさが弱くなる場合があるため、演出と操作性のバランスを見ながら調整を進めました。制限時間内でどこまでベストを目指せるか、そして、偶然生まれたものを「これいいじゃん」と採用する柔軟さが求められていると思います。

山口　Wix Studioは、オブジェクトやコンテナ単位でアニメーションをスピーディーに組み立てられるため、静止画では判断しづらい「気持ちよさ」や「見え方」を、実際に動かしながら確認できます。その結果、試行回数を増やせる点が大きなメリットです。

一方で、複雑な条件分岐などにはWix Studioならではの設計の工夫が必要になる場面もありました。ただ、アニメーション周りなどは最終的な実装段階で可能かどうかが判明するため、その結果に伴ってデザインも柔軟に変えていきます。あえて制約の中で表現方法を探ることで、必要以上に複雑にしすぎない設計につながる面もあると感じています。

谷井　　私たちは基本的に、そうした技術的なそぎ落としを前提に制作を進めます。アニメーション周りは、最終的な実装の段階で可能かどうかが判明するため、その結果に伴ってデザインも大きく変える可能性があるからです。

最初にやりたいことが20個あったとして、技術的なハードルで10個に絞り、それで進めた結果、最後に余裕ができたらもう5個プラスする、といった具合です。Wix Studioの豊富なアニメーションプリセットや効率的なワークフローによって生まれた時間を、こうした「限界までの作り込み」に充てられるのは、クリエイターにとって非常にエキサイティングな環境だと感じています。

–––––お二人が作るWebサイトが、なぜこれほどまでに人を惹きつけるのか、その理由が分かった気がします。

山口　　表現すべきWebサイトのコア部分について、一つの明確な答えが出るまで二人で追求し続けているからだと思います。

谷井　　そうですね。私たちの持っている能力をできる限り注ぎ込んだものを、実際に触れて楽しんでいただきたいという思いで、これからも限界に挑戦し続けていきたいです。

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株式会社とのタイアップ企画です。