Wix Studioの「カスタム要素」とは？HTML埋め込みとの違い・使い方・注意点を解説
Wix Studioで独自のHTMLやJavaScriptを使いたいとき、まず思い浮かぶのは「HTML埋め込み」パーツではないでしょうか？
手軽に使える便利な機能ですが、コンテンツの高さが変わるような作り込みをすると、思いどおりに表示されないことがあります。
「HTML埋め込みで作ったパーツの中にスクロールバーが出てしまう」「開閉するコンテンツに合わせてセクションが伸び縮みしてほしい」。 このような悩みを持つ方に向けて、本記事ではWix Studioの「カスタム要素（Custom Element）」を紹介します。アクトワンが実際に制作したイベントサイトでの事例をもとに、仕組みや使い方、注意点を解説します。
きっかけは「開閉式タイムテーブル」
アクトワンでは、2026年11月に開催される「Japan Spatial Forum Osaka 2026」の公式サイト（https://www.jsf-osaka.com/ ）を制作しています。
その中に、各セッションの詳細を「詳しく見る」ボタンで開閉できるタイムテーブルを設置しました。
最初は、HTMLとCSSで作ったタイムテーブルを「HTML埋め込み」パーツで設置しました。
ところが、セッションの詳細を開くと、パーツの中にスクロールバーが表示されてしまいます。さらに、コンテンツの下部が切れて見えなくなりました。
目指していたのは、スクロールバーを出さず、コンテンツの開閉に合わせてセクション全体が自然に伸び縮みする動きです。この問題を解決したのが「カスタム要素」でした。
なぜHTML埋め込みではうまくいかないのか
原因は、HTML埋め込みパーツの仕組みにあります。
HTML埋め込みパーツは、ページの中に「iframe」という別の窓を開け、その中に別のページとして表示します。この窓の大きさは、Wixのエディタで設定した高さに固定されます。
そのため、窓の中でコンテンツが伸びても、窓の外にあるページ側はそれを知ることができません。結果として、窓の中にスクロールバーが出て、収まりきらない部分は切れてしまいます。
安全に独立して動く反面、ページの一部として自然に振る舞うことはできない。これがHTML埋め込みパーツの特徴です。
カスタム要素とは？
カスタム要素は、Wix独自の機能ではありません。Webブラウザに標準で備わっている「Web Components」という仕組みの一つです。
HTMLには、<div> や <p> のように、あらかじめ用意されたタグがあります。カスタム要素を使うと、<my-timetable> のような独自のタグを自分で作ることができます。
そのタグがどんな見た目で、どう動くかは、JavaScriptで定義します。
Wix Studioの「カスタム要素」パーツは、この自作タグをページに配置するための入り口です。HTML埋め込みとは違い、コンテンツは別の窓ではなく、ページの一部として直接表示されます。そのため、中身の高さが変われば、要素もセクションも自然に伸び縮みします。
HTML埋め込みとカスタム要素の比較
HTML埋め込み | カスタム要素 | |
表示のされ方 | iframe（別の窓）の中に別ページとして表示 | ページの一部として直接表示 |
高さ | エディタで設定した高さに固定 | 中身に合わせて自動で伸び縮み |
作り方 | HTMLをそのまま貼り付け | JavaScriptファイルとして作成 |
エディタ・プレビューでの表示 | 表示される | 表示されない（公開サイトのみ） |
利用条件 | 無料プランでも利用可能 | プレミアムプランと独自ドメインの接続が必要 |
カスタム要素の作り方
カスタム要素のコードは、基本的に次のような形で書きます。
js
class MyTimetable extends HTMLElement {
connectedCallback() {
// タグがページに置かれたときに、中身を作る
this.innerHTML = '<p>ここにコンテンツが入ります</p>';
}
}
customElements.define('my-timetable', MyTimetable);「<my-timetable> というタグがページに置かれたら、その中にコンテンツを作る」という定義です。
今回のタイムテーブルでは、HTML埋め込み用に書いていたHTMLとCSSを、この形に包み直しました。あわせて、シャドウDOMという仕組みでスタイルを閉じ込め、Wixのページのスタイルと干渉しないようにしています。
一般的なWebサイトでよく使われる「ページ内の特定の <div> を探して中身を書き込む」タイプのJavaScriptは、Wixにそのまま貼っても動きません。たとえば外部サービスの埋め込みコードなどがこれにあたります。カスタム要素の形に包み直すことで、はじめてWixのレイアウトの中に配置できます。
Wix Studioでの設置手順
コード編集をオンにする
左側の「{ }」（コード）アイコンから、Veloでのコーディングを開始します。
JavaScriptファイルを追加する
コードパネルの「Public」内にある「Custom Elements」に、JavaScriptファイル（例：jsf-timetable.js）を作成し、コードを貼り付けます。
カスタム要素を配置する
「追加」→「コードを埋め込む」→「カスタム要素」を選びます。設定で、ソースに「Veloファイル」を選んで作成したファイルを指定し、タグ名（例：jsf-timetable）を入力します。
高さを「自動」にする
カスタム要素の高さを固定値ではなく「自動」にします。配置するセクションも高さを固定しないようにします。
公開して確認する
カスタム要素はエディタやプレビューでは表示されないため、公開後のサイトで動作を確認します。
公開後のサイトでは、セッションを開くとセクションが伸び、閉じると元に戻るようになりました。スクロールバーも表示されません。
カスタム要素の注意点
便利なカスタム要素ですが、使う前に知っておきたい注意点もあります。
プレミアムプランと独自ドメインが必要
カスタム要素が公開サイトで表示されるのは、プレミアムプランを契約し、独自ドメインを接続したサイトだけです。
エディタ・プレビューで確認できない
エディタ上やプレビューでは表示されません。修正のたびに公開して確認する必要があるため、作業効率はやや落ちます。
更新にはコードの編集が必要
テキストを1文字変えるにも、JavaScriptファイルを編集する必要があります。コードに慣れていない担当者が更新する運用には向きません。
また、Wix Multilingualによる翻訳、サイト内検索、CMS（コレクション）といったWixの機能とは連携しません。
SEOは通常のテキストより弱い
カスタム要素の中身はJavaScriptで作られます。GoogleはJavaScriptを実行してからページを読み取るため、中身も認識される可能性は高いです。
ただし、通常のWixテキストと同じように評価されるとは限りません。
また、JavaScriptの実行が限られる検索エンジンやAI検索のクローラーは、中身を読み取れないことがあります。
重要なキーワードや情報は、Wixの通常のテキストでもページに載せておくことをおすすめします。
なお、HTML埋め込みの中身は別ページとして扱われるため、SEOの面ではカスタム要素の方が有利と考えられます。
カスタム要素が向いているケース
アコーディオンやタブなど、開閉や切り替えでコンテンツの高さが変わるもの
Wix標準のパーツでは再現できないデザインや動き
タイムテーブルや料金表など、更新頻度が低く、SEOの主役ではない情報
他のWebサイトで作った部品を、Wixでも再利用したい場合
反対に、頻繁に更新するテキストや、検索で上位表示させたい主要コンテンツは、Wix標準のパーツで作るのがおすすめです。
まとめ
HTML埋め込みはiframe（別の窓）で表示されるため、中身の高さの変化にページが追従できない
カスタム要素はWeb標準の仕組みで、ページの一部として表示され、高さも自動で伸び縮みする
一般的なJavaScriptのコンテンツも、カスタム要素の形に包み直せばWixのレイアウトに配置できる
利用にはプレミアムプランと独自ドメインが必要で、エディタやプレビューでは表示されない
SEOや更新のしやすさを考え、Wix標準のパーツとうまく使い分けることが大切
Wix Studioは、ノーコードで制作できる手軽さと、コードで拡張できる自由度をあわせ持つプラットフォームです。カスタム要素は、その自由度を活かす選択肢の一つと言えます。
アクトワンでは、Wix Studioを使用したWebサイト制作に加え、VeloやWixのAPIを活用した機能開発にも対応しています。Wixで実現したい機能や、現在のWebサイトでお困りのことがございましたら、お気軽にご相談ください。
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。
ご興味がある方はぜひ覗いてみてください!
コメント