Velo初心者向け｜ページ読み込み時に“それっぽい”ローディング演出をつける方法
- 篠原 誠
- 6月5日
- 読了時間: 3分
✅ はじめに
Wix Studioでサイトを作っていて、「ちょっと表示が遅いな…」と思ったことはありませんか？
とくに画像が多いページや、リピーターを使っているページでは、一瞬“間”が空いたような感じが出てしまいがちです。
そんなときに便利なのが、「ローディングっぽい演出」。
今回は、Velo初心者でも簡単にできる、“それっぽい”ローディング表示の作り方をご紹介します。
🎯 今回つくる演出
ページ読み込み時に「Loading...」が表示される
数秒かけて「0% → 25% → … → 100%」とカウントアップする
終わったら本文がフェードインして表示される
🧰 まずはエディターで準備しましょう
「ローディング表示用テキスト」をページ中央に配置（例：#loadingText）
→ テキストにはあらかじめ「Loading...」と入れておく
→ 非表示設定はしなくてOK（見えても違和感がないため）
本文全体を囲むボックスを作成（例：#mainContent）
→ 初期状態で「非表示」にしておく（プロパティパネルで）
💻 Veloコードを設定します
$w.onReady(function () {
let progress = 0;
const interval = setInterval(() => {
progress += 25;
$w("#loadingText").text = `Loading... ${progress}%`;
if (progress >= 100) {
clearInterval(interval);
$w("#loadingText").hide("fade");
$w("#mainContent").show("fade");
}
}, 500); // 0.5秒ごとに進行
});
✨ 実際の動作を確認してみましょう
下のGIFアニメでは、今回紹介したローディング演出の動作を確認できます。
🟢 ページを開くと「Loading...」が表示され、0% → 100%まで進行し、その後ふわっと本文が表示される流れです。
📷 実際の動作例（GIF）
初心者でもすぐ再現できる、“それっぽさ”と安心感が両立する演出として、ぜひお試しください。
🎨 デザインのコツ
#loadingText を中央に配置し、やや大きめの文字サイズにするとプロっぽく見えます
フォント色や背景にコントラストをつけるとより自然
テキストだけでは物足りない場合は、背景にボックスを加えるのも効果的です（後述）
📝 補足：これは“演出”です。全画面にすることもできます
今回ご紹介したローディング表示は、実際の読み込み進捗とは連動していない“それっぽい演出”です。
つまり、「Loading... 100%」と表示されても、裏で100%読み込まれたというわけではありません。
それでも、何も表示されずに待たされるより安心感があり、ユーザーの離脱防止にも効果的です。
特にWixでは表示に“間”ができることがあるため、ちょっとしたローディング表示を入れておくと体感的な印象が大きく変わります。
また、ローディング演出には、ページ全体を覆うスタイルもあります。
たとえば背景ボックスで画面全体を暗くして、「Loading...」の文字を中央に配置し、読み込み後にボックスごとフェードアウトする演出などです。
世界観を印象づけたいブランドサイトや、切り替え演出を強調したいキャンペーンページでは、こうした全画面型の演出も有効です。
ただし、今回のような初心者向けの実装では、テキスト1つでも十分に“それっぽさ”を出せます。
必要に応じて、まずはシンプルに、慣れてきたら少しずつ演出を足していくのがおすすめです。
✅ まとめ
Veloを使えば、難しいアニメーションを使わなくても、**“それっぽくて安心感のある演出”**を簡単に追加できます。
特にページ表示に一瞬の間が生まれがちなWixサイトにおいて、「Loading...」のような演出があるだけで、ユーザーの離脱を防ぐ効果も期待できます。
まずはシンプルに。
そして、慣れてきたら全画面演出やカウントアニメーションにもチャレンジしてみてください！
Comments