top of page
Rectangle 1711.png

Wixの今を掴む

資料請求
Group-39215.jpg
Pink Poppy Flowers

最新Wixコラム

Wixを使った簡単ホームページ制作

Shop Now

保育業界の採用サイトで成果を出す設計とは?

Shop Now

Wixエディターを使ってアコーディオンを追加する方法

Shop Now

年末年始休業のお知らせ

Shop Now

Wix画像が切れる問題の原因と最適な解決方法!画像挿入と編集方法 まで画像切れを防ぐテクニックをご紹介

Shop Now

【2025年最新版】Wix退会方法と注意点まとめ|サイトの削除する際に行う手順を1つづつご紹介

Shop Now
Group 163232.jpg

お気軽にご相談ください

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

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

資料ダウンロード

関連記事

Wix コラム

2025年9月29日

Wixで作った「プロ並み」のホームページ事例をご紹介!【企業サイト〜個人サイト】まで

Send
Wix コラム

2025年6月19日

【Wix2025年最新版】Webサイトにニュース機能を設置する方法を徹底解説!

Send
Wix コラム

2023年12月20日

Wixエディターを使ってアコーディオンを追加する方法

Send

【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 研究所のお問い合わせページからお願いいたします。

bottom of page