Wix パートナー様のクローズドセミナーに登壇しました！

先日、Wix パートナー様向けのクローズドセミナーに登壇し、最新の 「AI × Wix Velo」 による制作効率化テクニック をご紹介させていただきました。

普段からWixを使ってWeb制作をされているクリエイターの方々が集まり、AI活用方法についてお話しいただく機会であったため、私自身にとっても学びの多い会になりました。

セミナーで紹介したテーマ

今回のセミナーでは、特にお問い合わせの多い

「動的アイテムページごとのレイアウト変更を、AIを活用して最短で実装する方法」

について解説しました。

Wixで構築をしていると、

• 特定の要素を含む動的アイテムページだけデザインを変えたい

• 一部の項目が空の場合、スペースごと折り畳みたい

  
  

といった "アイテムごとに条件を変えてレイアウトを操作したい" というご相談をいただくことが多くあります。

こちらはVeloを使った要素の表示/非表示でカンタンに解決できます。

AIを使ってVeloコードを生成する過程も含め、お話しさせていただきました。

コーディングの壁をAIが解消。Veloは民主化する時代へ

そもそもVeloとは、Wixがノーコードでは対応しきれない部分をJavaScriptベースのコードで補い、独自の機能を構築するための開発環境です。

しかしこれまでは、

• 「やりたい動作があってもコードが書けないと実装できない」

• 非エンジニアにとっては "Velo＝専門領域"

• 書ける人でも、手書き → 検証 → エラー修正のループで時間がかかる

という、非常に高いハードルがありました。

実際、Velo学習の途中で挫折してしまう方は多かったと思います。

今は、"AIがコードを書く" 時代

ところが、今はまったく状況が違います。正しく指示を与えれば、AIがコードを書いてくれます。

コーディングの知識がゼロでも、ちょっとしたカスタムならすぐに実装できるようになりました。

重要なのは「コードを書く力」ではなくやりたい動作を言語化する力 です。

生成AIに対して、「何を」「どんな条件で」「どの要素に対して」動かしたいのか。これを正確に伝えるだけで、実際に動くコードを生成してくれます。

そして、この“伝える力”の土台になるのが、ページ上の"要素ID"を理解すること。

要素IDとは？

AIは、Wix上の要素をすべて「ID」で識別しています。このIDが分からなければ、

• どのボタンを動かすのか

• どのボックスを表示/非表示にするのか

AIは判断できません。

たとえば、ボタンに「#ctabutton」というIDがついているとします。

AIに指示する際は、

「#ctabutton をクリックしたら、#box1 を表示して」

というように、IDを含めて説明する必要があります。

IDが正確なら、AIは迷わず適切なコードを生成してくれます。

Veloで扱う4つのID

AIにVeloコードを書かせる際、最低限理解しておくべきIDは以下の4つです。

この4つを理解していると、AIに対してかなり高度な指示が出せるようになります。

実際にAIでコードを生成してみる

セミナーでは、expand / collapse という命令を使って要素を表示 / 非表示にする基本操作をデモしながら、

• タグごとにレイアウトを変える

• 特定のデータが空なら要素ごと非表示にする

• アイテムごとにセクション配置を切り替える

といった実用的なサンプルを紹介しました。

これらはそのまま、「動的アイテムページごとにレイアウトを変更する」というよくあるニーズに直結するテクニックです。

セミナーでは、実際のWixエディタ画面を操作しながらコード生成 → 実装 → 動作確認までをリアルタイムでお見せしました。

その様子は動画としてまとめていますので、気になる方はぜひこちらをご覧ください。

Wix Tech Salon

アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！

Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。

ご興味がある方はぜひ覗いてみてください!

Wix Tech Salon >>