Wix Studioに高度な拡張機能を。Wixエンジニア直伝の「Velo by Wix」のおすすめ活用術

2025年8月6日

「Wixはノーコードだから、複雑なカスタマイズには向いていない」と思っていませんか？　実はそのイメージ、今日からアップデートできるかもしれません。本記事では、Wixの開発者向け機能「Velo by Wix」の魅力について、Wix.com Japan株式会社のデベロッパーアドボケイト・福田京平さんに伺いました。ノーコードとコーディングの“いいとこ取り”ができるこの注目機能の実力を、3つの活用例とともにご紹介します。Wix Studioをさらに拡張したい方にとって、きっと役立つヒントが見つかるはずです。

教えてくれたのは……

福田京平さん

広島県出身、東京在住のWebエンジニア。Wix.com Japan株式会社デベロッパーアドボケイト。国内IT企業数社でフロントエンド開発に従事した後、現在はWix.com Japan株式会社でSolution Engineer兼Developer Advocateを務めている。個人ではOSSのPDF生成ライブラリ「pdfme」を開発し、関連する書類作成サービスなどの個人開発も行っている。JavaScript/TypeScriptを中心としたフロントエンド技術に深い知見を持ち、PDFやブラウザ技術分野のOSSコミュニティにも積極的に貢献している。

「Velo by Wix」とは何なのか？

Wix Studioは、ノーコードで洗練されたWebサイトを構築できるツールとして、多くのクリエイターに支持されています。しかし、より高度な表現や複雑な機能が求められる場面では、「ノーコードだけでは限界があるのでは？」と感じることもあるでしょう。

そんなニーズに応えるのが、開発者向けの機能「Velo by Wix（以下、Velo）」です。

Veloは、Wixのプラットフォーム上でJavaScriptによるコーディングを可能にする開発環境です。アニメーションやフォーム処理といったフロントエンドの制御はもちろん、データベースとの連携やバックエンド処理、外部サービスとの通信（API連携）なども実装できるため、本格的なWebアプリケーションの構築が可能になります。

Wix.com Japanのエンジニア・福田京平さんは、Veloの魅力について次のように語ります。

「Webサイトで少し凝ったことをしたいとき、ノーコードだけでは対応しきれない場面があります。その点、Veloを使えばJavaScriptベースでさまざまな機能を実現できます。たとえば、毎日0時にアクセスランキングを自動集計したり、会員制サイトの登録機能を作成したりといったことも簡単にできます」（福田さん）

Veloは、Google Apps Scriptに触れたことがある方や、一般的なWeb制作の経験がある方であれば、比較的スムーズに活用できるはずです。さらに、Node.jsやnpm（便利な機能をまとめた外部ライブラリ）も使えるため、実現できることの幅が一気に広がります。

また、Wixが提供するECや予約、イベントなどのビジネス向けアプリケーションとも連携できるため、既存機能の一部だけにカスタマイズを加えるといった柔軟な使い方ができるのも大きな魅力です。

「Wixを氷山に例えるなら、Veloはその水面下に広がる巨大な構造のようなもの。見た目のデザインだけでは気づけない、Wixの“真のポテンシャル”を引き出せるのがVeloの価値だと感じています」（福田さん）

Veloの使い方は非常にシンプルです。Wix Studioのエディター上で「コード」ボタンをクリックすると、専用のコードエディターが起動します。このエディターには、GitHubとの連携機能やコード補完、AIアシスタントなども統合されており、エンジニアにとって快適な開発環境が整っています。

Veloを使うには、Wix Studioのエディター上で「コード」ボタンをクリックして開始しましょう

「ノーコード＝自由度が低い」と感じていた方にこそ、Veloは“もう一歩踏み込んだ”開発を実現するための強力な選択肢になるはずです。

Veloおすすめ活用方法 1｜インタラクション

ここからは、福田さんが特におすすめする「Velo」の活用方法を3つご紹介します。まず1つ目は、Webサイトに動きを加える「インタラクション」です。

Wix Studioでは、ノーコードで要素の配置やデザインが行えますが、Veloを組み合わせることで、マウスホバーやスクロールに応じたアニメーションなど、動きのある表現を簡単に追加できます。

今回紹介するのは、複数の画像が重なったエリアにマウスを乗せると、それぞれの画像がアニメーションする演出です。ブランドサイトなどでよく見られる表現ですが、実際のコードは比較的コンパクトで扱いやすくなっています。

Wixでは、画像やテキストをPowerPointのような感覚で自由に配置することが可能です。各要素には自動的にIDと座標が割り当てられており、Veloからそれらを指定することで、細やかな動作や複雑なアニメーションも簡単に再現できます。

さらに、Veloのコードエディターにはオートコンプリート（入力補完）機能が搭載されており、コード入力中に適切な構文を自動で提案してくれるため、スムーズな開発が可能です。

「動きを加えるだけで、Webサイトの印象は大きく変わります。ブランディングサイトや商品訴求のページなど、よりリッチな表現を求める場面では、Veloのインタラクション機能が大きな力になるはずです」（福田さん）

インタラクション｜サンプルコード

ページコード:参考

import { timeline } from 'wix-animations'
import wixWindow from 'wix-window';

$w.onReady(function () {

    const target1 = $w('#image3');
    const target2 = $w('#image2');
    const target3 = $w('#image1');
    const target4 = $w('#title');

    $w("#hoverArea").onMouseIn(async () => {
        const windowSizeInfo = await wixWindow.getBoundingRect()
        const windowWidth = windowSizeInfo.window.width;
        const toMoveX = windowWidth / 5

        timeline()
            .add(target1, { y: 40, x: -toMoveX, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .add(target3, { y: -40, x: toMoveX, scale: 1, duration: 600, easing: 'easeOutCirc' }, "-=550")
            .add(target2, { y: 0, x: 0, scale: 1.15, duration: 600, easing: 'easeOutCirc' }, "-=550")
            .add(target4, { y: -60, x: 0, scale: 1.15, duration: 400, easing: 'easeOutCirc' }, "-=550")
            .play()
    })
    $w("#hoverArea").onMouseOut(() => {
        const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target1, reset)
            .add(target2, reset, 0)
            .add(target3, reset, 0)
            .add(target4, reset, 0)
            .play()
    })
});

Veloおすすめ活用方法 2｜カスタムCSS

2つ目は、カスタムCSSによる繊細なデザイン表現です。Wix Studioはノーコードでスタイル設定ができる設計ですが、フォントの字詰めや行間など、細部にまでこだわりたいときには、VeloによるカスタムCSSが大きな力を発揮します。

たとえば、文字詰め（カーニング）を調整して左揃えの見た目を整えたり、括弧の前後スペースを自然に見せたりといった微調整も可能です。

こうした調整は、Veloのコードエディターで任意のCSSクラスを定義し、対象の要素に割り当てることで実現できます。文字間、行間、フォントのウェイトなど、スタイルの細かい指定が可能になります。

さらに、Veloを活用すれば、Wixデフォルトでは使用できないGoogle Fontsの読み込みも可能です。たとえば「Noto Sans」や一部のモリサワフォントを使いたい場合は、スクリプトタグをページのヘッダーに記述することで、外部フォントを自由に適用できます。

「特に日本語のWebサイトでは、文字の見た目に対するこだわりが重要です。Veloを使えば、詰まりすぎた文字を0.05em単位で調整することもできますし、ブランドの世界観に合ったタイポグラフィを実現できます」（福田さん）

このように、VeloのカスタムCSS機能は、ノーコードでは難しい細やかなデザインニーズに応える強力な手段です。コードを取り入れることで、Wix Studioの表現力は格段に広がります。

カスタムCSS｜サンプルコード

カスタムコード:参考

HTML
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
</style>

global.css:参考

CSS
* {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.05em;
}

Veloおすすめ活用方法 3｜CMSによる検索機能

3つ目の活用方法として福田さんが紹介してくれたのは、「CMSと連携した検索機能の構築」です。Veloを活用すれば、ECサイトや不動産サイト、ブログなど、情報量の多いWebサイトに柔軟な検索機能を組み込むことができます。

今回のサンプルでは、物件情報を対象にした検索機能をCMSと組み合わせて実装しています。ユーザーは都道府県やエリア、キーワードなどの条件を指定して検索を行うことができ、ニーズに合った情報を素早く見つけられる仕組みです。通常、こうした機能をゼロから開発すると数百行ものコードが必要になりますが、Veloではおよそ20行程度で実装可能です。

この検索機能は、CMSで管理されているデータベースとJavaScriptの処理を組み合わせて構築されています。WixのCMSは、Excelのような直感的なUIで編集・更新できるため、エンジニアでなくても簡単に運用できるのが特長です。

また、検索処理はすべてのデータをページ上に読み込んでから絞り込む方式に加えて、データベースに対して直接クエリを実行する方法にも対応しています。これにより、データ量が増えても高速なレスポンスを維持でき、スケーラブルなサイト運営が可能になります。

「たとえば『この物件を販売済みにしたい』という場合でも、CMSのステータスを切り替えるだけで公開・非公開を簡単に制御できます。CSVでの一括インポートやエクスポートにも対応しており、数百件〜数千件のデータも問題なく扱えます」（福田さん）

このように、Veloを使えば専門的なバックエンドの知識がなくても、高機能な検索システムを備えたWebサイトを構築できます。特に、商品や物件など多くの情報を掲載するサイトでは、大きな強みとなるでしょう。

多彩なAPIを目的ごとに柔軟に使いこなせる

Veloの魅力は、単にJavaScriptが使えるという点にとどまりません。Wixのさまざまな機能と連携できる、多彩なAPIが標準で用意されていることも、Veloの大きな特長です。

ページ上の要素操作やアニメーションの制御はもちろん、位置情報やURLパラメータの取得といったブラウザとの連携、さらにはWixの会員情報やオンラインストア、予約アプリなどとの接続も可能です。

例えばメールフォームでは「送信と同時に送信者をWixのコンタクトリストに登録し、自動で確認メールを送信する」といった処理も、APIを使えば簡単に実装できます。

これらのAPIはすべて公式ドキュメントで公開されており、用途や機能ごとに検索も可能です。Wix DevelopersのAPIリファレンスページにはコード例も豊富に掲載されており、実装時の参考になります。プロジェクトの目的に応じて、必要なAPIを柔軟に選び、効果的に活用できること。これこそが、Veloならではの大きな強みです。

APIのリファレンスは、Wix Studioのコードエディタ画面からワンクリックで参照できます。

柔軟性×直感操作。Veloが広げるWixプラットフォームの可能性

Veloを活用することで、Wix Studioの可能性はさらに大きく広がります。インタラクションによる動的な演出、細部にこだわったカスタムCSS、本格的な検索機能の実装──これらは、従来のノーコードでは実現が難しかった領域を補完する強力な手段となります。

Wixでは、Veloに関するドキュメントやサンプルコードが豊富に公開されており、初めての方でも安心して学びながら取り組むことができます。

「ノーコードで誰でも使える」という点はWixの大きな魅力ですが、「コードも使える」という自由度は、エンジニアをはじめとするWeb制作のプロにとって非常に大きな価値を持ちます。直感的で効率的、かつ高度なカスタマイズも可能なWix StudioとVeloの組み合わせは、これからのWeb制作において、確かな選択肢となるはずです。