.png)
Wix Studioのアニメーションの付け方とは？稲妻マークが見つからない・どこで設定するのか分からない悩みをまるっと解決
- 1 日前
- 読了時間: 9分
Wix Studioで作ったサイトに動きをつけたい。
文字がふわっと出てきたり、画像がスライドして入ってきたり、そんな演出を加えるだけで、ページの完成度は一気に上がります。
実際、アニメーションがあるかないかだけで体感の完成度は約30%変わるとも言われるほど、印象を左右する要素です。
ところが、いざ設定しようとすると「アニメーションの入口がどこにあるのか分からない」「パーツを選んだのに稲妻マークが出てこない」とつまずく方が少なくありません。
しかも、コードを書かないといけないのではと身構えてしまう方もいます。
結論から言うと、Wix Studioのアニメーションはコーディング一切なしで、ボタン操作だけで付けられます。
この記事では、稲妻マークの場所から種類の選び方、実際の付け方、そしてプレビューで仕上げるコツまで、順を追って解説します。
結論：Wix Studioのアニメーションは「稲妻マーク」から付ける
Wix Studioのアニメーションは、パーツを選ぶと出る「稲妻マーク」から、コーディングなしで付けられます。
これがこの記事で一番お伝えしたいことです。
エディター上でアニメーションをつけたいパーツ（タイトルや画像など）をクリックして選択すると、そのパーツのそばや右サイドに稲妻の形をしたアイコンが表示されます。
これがアニメーション設定への入口です。
稲妻マークをクリックすると、そのパーツに使えるアニメーションの種類が一覧で並びます。
あとは好みのものを選ぶだけ。
専門知識やコードは必要ありません。
「コードを書かないと動きはつけられない」というイメージを持っている方こそ、この稲妻マークの存在を知っておくと世界が変わります。
ボタンをポチポチ押していくだけで、プロが作ったような表示演出が実現できるからです。
凝りだすと1セクションの調整だけで1時間かかることもあるほど奥は深いですが、入口はとてもシンプルです。
まずは「パーツを選ぶ → 稲妻マークをクリック → 種類を選ぶ」という3ステップだけ覚えてください。
この記事の残りは、そのステップをつまずかずに進めるための補足だと思っていただければ大丈夫です。
パーツを選んでも稲妻マークが出ない・見つからないときの確認ポイント
「言われた通りパーツを選んだのに、肝心の稲妻マークが見つからない」。
この状態で手が止まってしまう方は多いです。
落ち着いて次のポイントを確認していくと、たいてい原因が見つかります。
まず、パーツがきちんと選択された状態になっているかを確認します。
目的の要素を1回クリックし、その要素だけが枠で囲まれて選択されている状態にしてください。
何も選んでいない状態や、別の場所をクリックしてしまっている状態では、稲妻マークは表示されません。
次に、稲妻マークが出る位置を見直します。
稲妻マークはパーツを選んだときに、そのパーツの近くや右サイドのメニュー内に現れます。
画面が狭かったり、ツールバーが隠れていたりすると気づきにくいので、選択したパーツの周辺と右側のパネルの両方に目を向けてみてください。
それでも見当たらない場合は、選んでいる対象そのものを疑ってみましょう。
よくあるのが、目的のパーツではなくグループや別の要素を選んでしまっているケースです。
たとえば画像とギャラリーはパーツの種別が異なり、選び方によって表示されるメニューも変わります。
動きをつけたい要素そのものが選べているか、一度確認してみてください。
Wix StudioとWixの通常エディターでは、アニメーションの中身は基本的に同じですが、一部の演出はStudioにしかありません。
特にスクロール系のアニメーションはWix Studioで増えているので、「エディターでは見かけなかった項目がStudioにある」というのはむしろ正常な状態です。
エントランス・ホバー・クリックなどアニメーション種類一覧と選び方
稲妻マークをクリックすると、アニメーションの種類がカテゴリごとに並びます。
ここで大切なのは「いつ動くか（きっかけ）」で選ぶことです。
主なカテゴリを表にまとめました。
カテゴリ | どんなときに動くか | 主な使いどころ |
エントランス | パーツが画面に表示されるとき | 文字や画像が最初に現れる演出。種類が非常に豊富 |
ホバー | マウスカーソルが乗ったとき | ボタンやカードに反応を持たせる |
クリック | クリックしたとき | 押した瞬間の手応えを出す |
スクロール | スクロールしたとき | スクロールに連動した動き。Studioで種類が増えている |
ループ | 繰り返し再生され続ける | GIFのように動き続ける演出 |
マウスエフェクト | マウスの動きに合わせて | カーソルに反応するインタラクティブな演出 |
まず押さえたいのは「エントランス」です。
パーツが表示される瞬間の動きで、種類が最も多く、サイトの第一印象を作ります。
グライド（指定した方向からスライドして入る）やシェイプ（正方形や星型で画像が開く）、スピン（ロゴや円をくるくる回す）など、演出の幅が広いのが特徴です。
選び方のコツはシンプルで、要素の種類ごとにアニメーションを統一することです。
タイトルはこの動き、段落はこの動き、画像はこの動き、とサイト全体でルールを決めておくと、まとまりのある洗練された印象になります。
逆に、いろいろな種類を盛りすぎると画面がガチャガチャして見えてしまい、せっかくの演出が逆効果になります。
使う種類はあえて絞る、が仕上がりを左右するポイントです。
サイト全体の設計や、どのアニメーションが自社の雰囲気に合うか迷ったときは、プロの視点を借りるのも早道です。
コーディングなしでアニメーションを付ける手順（配置→選択→種類選択）
ここまでの内容を、実際の操作の流れとしてまとめます。
コードは一切書きません。
ボタン操作だけで完結します。
アニメーションをつけたいパーツ（タイトルや画像など）をエディター上に配置する。
そのパーツをクリックして選択する。
表示された稲妻マークをクリックする。
アニメーションの種類一覧が開くので、目的に合ったものを選ぶ。
この4ステップで、基本のアニメーションは完成です。
ここからワンランク上に見せたいときは、「遅延（ディレイ）」を使って表示のタイミングをずらします。
遅延とは、アニメーションが始まるまでの待ち時間（秒）のこと。
パーツごとに値を変えると、表示される順番と時間差を作れます。
たとえば、画像が出てからタイトルを見せたい場合はこう設定します。
画像にエントランスアニメーション（例：右から来る「グライド」）を設定し、遅延を「0」にする。
タイトルにも同系のアニメーションを設定し、遅延を「1.3」（=1.3秒後）にする。
プレビューで確認すると、まず画像が表示され、その1.3秒後にタイトルが現れる。
複数のパーツを同時に出すと、どうしても野暮ったく見えてしまいます。
画像 → タイトル → 段落 → ボタンの順に時間差で見せると、視線が自然に流れ、ぐっと洗練されます。
なお、複数の要素をグループ化してまとめて動かすと、グループ全体が一気に現れてしまい、これも野暮ったく見える原因になります。
動きは要素ごとに個別につけて、時間差で見せるほうがきれいに仕上がります。
ひと手間ですが、ここが差のつくところです。
プレビューで再生確認しながら仕上げるコツ
アニメーションは、設定して終わりではありません。
実際にどう動くかは、プレビューで再生してみないと分からないからです。
特にマウスエフェクトやスクロール系は、頭でイメージするより動かして見たほうが早く、「思っていたのと違う」もよく起こります。
仕上げのコツは、プレビューで何度も再生し、少しずつ調整していくことです。
遅延の秒数を0.2秒変えるだけでも印象は変わります。
「画像が出てからタイトルが遅れて出る」その間の呼吸を、自分の目で確かめながら詰めていきましょう。
凝りだすと1セクションだけで1時間かかることもありますが、その分だけ完成度に返ってきます。
もう一つ大切なのが、ユーザビリティの視点です。
すべてを一気に表示して一気に読ませるより、徐々に表示して読み手が自然に読み進められる流れを作るほうが、結果として完成度は高くなります。
アニメーションは見た目を飾るためだけのものではなく、読み手の視線を導くための道具でもある、という感覚を持っておくと選ぶ演出が変わってきます。
とはいえ、動きの付け方には正解がひとつではなく、業種やブランドの雰囲気によって最適解は変わります。
「動きはつけたいけれど、どこまでやるべきか」「自社サイトに合う見せ方が分からない」といったときは、専門家に相談しながら進めると失敗がありません。
よくある質問（FAQ）
Q. Wix Studioのアニメーションはコードを書かないと付けられませんか？
A. いいえ。
コーディングは一切不要です。
パーツを選択して稲妻マークをクリックし、種類を選ぶだけで設定できます。
ボタン操作だけで完結します。
Q. パーツを選んでも稲妻マークが見当たりません。
A. まずパーツが1つだけ選択された状態になっているか確認してください。
稲妻マークは選択したパーツの近くや右サイドのパネルに表示されます。
グループや別の要素を選んでいると出ないことがあるため、動きをつけたい要素そのものを選び直してみてください。
Q. エントランスとホバーはどう違いますか？
A. エントランスはパーツが画面に表示されるときに動くアニメーション、ホバーはマウスカーソルが乗ったときに動くアニメーションです。
きっかけ（トリガー）が異なります。
ほかにクリック・スクロール・ループ・マウスエフェクトのカテゴリがあります。
Q. 複数のパーツを順番に表示させるにはどうすればいいですか？
A. 「遅延（ディレイ）」を使います。
たとえば画像の遅延を0秒、タイトルの遅延を1.3秒に設定すると、画像が表示された1.3秒後にタイトルが現れます。
パーツごとに秒数を変えて時間差を作ります。
Q. アニメーションを付けたのに野暮ったく見えます。
A. 複数のパーツを同時に出していないか確認してください。
遅延で画像 → タイトル → 段落 → ボタンの順に時間差で見せると洗練されます。
また、種類を盛りすぎず、要素ごとに使う演出を統一するとまとまります。
Q. Wixの通常エディターとWix Studioでアニメーションは違いますか？
A. 基本的な中身は同じですが、一部の演出はWix Studioにしかありません。
特にスクロール系のアニメーションはStudioで増えています。
Q. 設定したアニメーションはどこで確認できますか？
A. プレビューで再生して確認します。
特にマウスエフェクトやスクロール系はイメージしづらいため、プレビューで何度も再生しながら遅延やエフェクトを調整していくのがおすすめです。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
