top of page
Rectangle 1711.png
Group-39215.jpg

最新Wixコラム

Wix Studioで料金表を作る方法とは?プラン変更に強い「テーブル+CMS」で価格表を運用しやすく作る手順

Shop Now

Wix Studioのテーブルが空のまま表示されない?CMSコレクション(データセット)に接続してカラムを紐づける方法

Shop Now

Wix Studioでブログを投稿するとトップに自動表示される「お知らせ機能」とは?リピーター×データセットで作る自動連携の手順を解説

Shop Now

Wixでリピーターにブログが接続先として出てこない原因は?「Wixアプリコレクション」をオンにする一手間で解決

Shop Now

Wix Studioで表を作る方法とは?リピーターで自作せずテーブル要素+CMSで作る基本手順をご紹介

Shop Now

クリニックの集客がうまくいかない原因と、Webで患者を増やす方法【2026年版】

Shop Now
Pink Poppy Flowers
Group 163232.jpg

お気軽にご相談ください

お問い合わせはこちら
Group 163231 (1).png

詳細はコチラからご確認ください

資料ダウンロード

YouTubeやってます!

人気動画

他の動画はこちら

YouTube

やってます!

人気動画

他の動画はこちら

【WiX豆知識】ライトボックスの設定方法

  • 2023年12月20日
  • 読了時間: 4分

みなさん、こんにちは!

株式会社ラジャのやよいです。

今回は、キャンペーンや注意喚起表記をする際に使う機能のライトボックの設置方法についてご説明いたします。

詳しくはYouTube 動画でもご説明しているので、こちらもご参考ください。






ライトボックスとは

みなさんはライトボックスが何かご存知ですか?

短く言うと、このようにwebサイトでポップアップ表示させる機能です!


ライトボックスの例
ライトボックスの例

ユーザーがwebサイトを訪問した際に画面に自動的に表示され、必要がなければ「×」印から削除することができます。(ポップアップと言ったりもします)

ライトボックスの使用例は、

・期間限定キャンペーン情報表記

・注意喚起表記

・ボタンクリックで小窓として表示

が主な仕様用途かと思います。

ECサイトやサービスサイトを運用されていて、「期間限定」「安売りキャンペーン」「おすすめ商品」等を特に強調して訴求したい際に効果的な機能ですので、是非、Wix サイトで制作する際はお試しください。



ライトボックスの作り方

1. Wix エディターにライトボックスを追加

ライトボックスの設置方法はとても簡単で、まずはエディターの追加「+」から「インタラクティブ」を選択します。


「ライトボックス」セクションにWix のテンプレで作られたライトボックスのデザインが様々あるので、一番レイアウトが近いのもを選択します。




2. ライトボックスのデザインを構築する

どのレイアウト(画面右端/中央/左端)かを選んだあとは、デザインを調整していきます。

ライトボックスは、決められた枠内に必要なパーツ(テキストボックス/ボックス/ボタン/写真 等)を追加するだけで、簡単に完成します。

主には下記のような機能を調整するとよりプロらしく綺麗なライトボックスを制作できるのでおすすめです。

・オーバーレイ設定

枠外をタップした際の機能設定で、こちらはオンにしたほうがユーザーさんにとって使いやすいです。

と言うのも、非表示にしたいと思った際に消す手間が削減されます。

オーバーレイ設定
オーバーレイ設定

・オーバーレイの背景を透過する

ライトボックスで背景を透過させるのも、一つプロのアドバイスです!

背景が透けて見えることで、ページが変わっていないことや、すぐに元のページに戻れることを視覚的にユーザーに訴求することができます。

その方が、背景が一瞬で変わってしまうようりも安心感がありますよね。

オーバーレイ背景を投下する 【手順1】
オーバーレイ背景を投下する 【手順1】
オーバーレイ背景を投下する 【手順2】
オーバーレイ背景を投下する 【手順2】



3. ライトボックスの表示設定をする

レイアウト・デザインも整えたら、最後に表示設定を調整します。

ライトボックスは自動的にページ内に表示される機能になりますが、Wix ではどのページで自動表示させるか、表示させるまでの時間(秒数) 、また表示させる際のアニメーション等を設定することができます。

まずは、ライトボックス自体の表示設定を決めましょう。


ライトボックスの表示設定 【手順1】
ライトボックスの表示設定 【手順1】
ライトボックスの表示設定 【手順2】
ライトボックスの表示設定 【手順2】

「オフ」にする場合

Webサイト上では、自動的に表示されません。

ボタンのリンク先に設定し、クリックした際にライトボックスを表示させたい際に使いやすい機能です。

「オン」にする場合

Webサイト上で自動的に表示させます。

この際、どのページに訪問した先に表示させたいかを選択できます。

複数ページの選択もカスタマイズ可能なので、ライトボックスの内容に合わせて選びましょう。


まとめ

いかがだったでしょうか?

ライトボックス自体は構築がとても簡単で、強調したいコンテンツを効率的に視覚訴求できるので是非ご利用ください。

最後までご覧いただきありがとうございました。



ーーーーーーーーーーーーーーーーーーーー


Wixで制作したサイトを見たい方はhttps://www.wix.creative-raja.com/works

日本 Wix 研究所は、Wix の機能面から運用方法まで、Wix の全てをまとめているメディアサイトです。

実施にエディターを用いて説明するから誰でもわかりやすいコンテンツが盛りだくさん!

お仕事のご依頼やご相談は日本 Wix 研究所のお問い合わせページからお願いいたします。

お問い合わせ・資料DLはこちら

お問い合わせ

・HP制作に関するお悩み
・Wixサイトに関するお悩み

資料DL

・弊社のサービス内容について
分かりやすくまとめた資料をお送りします

Group 163232.jpg

\簡単30秒!強引な営業などは一切行いません/

関連記事

Wixを使いたい

2025年11月3日

【2026年最新版】Wix退会方法忘れがちな閉鎖後の処理をご紹介

Send
Wixを使いたい

2025年9月29日

「Wixはおすすめしない」は本当?おすすめできるケースとそうでないケースを徹底検証【プロが解説】

Send
Wixを使いたい

2025年6月9日

2026年最新!【プロが伝える】Wixの使い方と機能を解説!ここだけは抑えてほしい「初心者」にもおすすめ完全ガイド

Send
bottom of page