.png)
Wix Studioのデザインキットとは？アニメーション付きセクションを置いて文言を差し替えるだけの時短ワザをご紹介
- 7月10日
- 読了時間: 8分
「アニメーションが動くかっこいいサイトを作りたいけれど、動きを一から設定するのは大変そう」。
Wix Studioでサイトを作っていると、そう感じる場面は少なくありません。
スクロールに合わせて要素がふわっと現れる、そんな動きを自分で組もうとすると、位置や再生タイミングの調整に手間取ってしまいます。
そこで頼りになるのが「デザインキット」です。
この記事では、Wix Studioのデザインキットの使い方を、どこにあるのかという入口から、アニメーション付きパーツの配置、プレビューでの動きの確認、文言の差し替えまで順番に解説します。
動きのあるサイトを短時間で形にしたい方は、ぜひ最後までご覧ください。
結論：Wix Studioのデザインキットとは？どこにある？（要素を追加の場所）
結論から言うと、Wix Studioのデザインキットは、アニメーションがあらかじめ付いた完成済みのセクションを置いて、あとは文言を差し替えるだけでデザインを時短できる機能です。
動きを一から自作する必要がなく、テンプレートのように使えるのが最大の魅力です。
デザインキットは、エディタ左側の「要素を追加」の中にあります。
場所は次の手順で開けます。
Wix Studioのエディタを開く。
画面左のツールバーから「要素を追加」をクリックする。
表示されたメニューの中から「デザインキット」を選ぶ。
ここには、アニメーションが最初から付与されたセクションやヘッダーなどのパーツが揃っています。
要素を追加の中には「セクション」という似た名前のメニューもありますが、こちらはアニメーションが付いていません。
動きのあるパーツを使いたいときは「デザインキット」を選ぶ、と覚えておくと迷いません。
対策キーワードである「Wix Studio デザインキット 使い方」の出発点は、この「要素を追加」の場所を押さえることです。
まずは入口を確認しておきましょう。
アニメーション付きパーツをキャンバスに配置する手順
入口がわかったら、実際にパーツをキャンバスへ置いてみます。
デザインキットの使い方の中心となる操作です。
手順はとてもシンプルです。
「要素を追加」から「デザインキット」を開く。
一覧の中から、使いたいパーツ（セクションやヘッダーなど）を選ぶ。
選んだパーツをキャンバスにそのまま配置する。
これだけで、アニメーションが付いたセクションがページ上に置かれます。
動きの設定を自分で作る必要はありません。
パーツにはあらかじめアニメーションが組み込まれているため、置いた時点で動く準備が整っています。
複数のパーツを組み合わせて、ページ全体を構成していくこともできます。
ファーストビューにヘッダーのパーツ、その下に紹介セクションのパーツ、というように積み重ねていくイメージです。
動きのあるサイトを、パズルのピースを並べる感覚で組み立てられるのがデザインキットの便利なところです。
なお、デザインキットに似た「セクション」メニューのパーツはアニメーションが付いていないため、動きを出したい箇所ではデザインキット側を選ぶようにしてください。
プレビューでスクロールアニメーションを確認する
パーツを置いただけでは、編集画面上ではアニメーションの動きは分かりにくいことがあります。
デザインキットのアニメーションは、スクロールに反応して動くように設定されているためです。
実際の動きは「プレビュー」で確認します。
エディタ右上の「プレビュー」を押す。
プレビュー画面でページを上下にスクロールする。
スクロールに合わせてパーツのアニメーションが動くのを確認する。
プレビューでスクロールしていくと、配置したセクションが表示されるタイミングで動きが再生されます。
要素がふわっと現れたり、スライドインしたりと、パーツごとに用意された動きを確かめられます。
ここで大切なのは、置いた直後に「動いていないのでは」と不安にならないことです。
スクロールして初めて動くタイプのアニメーションが多いため、プレビューでページを動かしながら確認するのが正解です。
イメージと違う動きだった場合は、別のデザインキットのパーツに差し替えて比較してみるのもおすすめです。
コンテンツ編集モードで文言だけを差し替える方法
パーツの見た目と動きが決まったら、あとは中身のテキストを自分のサイトの内容に合わせて書き換えます。
ここで使うのが「コンテンツ編集モード」です。
デザインキットのパーツはテンプレートのように使えるため、デザインには手を入れず、文言だけを差し替えるだけで自分のサイトに仕上がります。
配置したパーツを選択し、「コンテンツ編集モード」に入る。
パーツ内の見出しや本文のテキストを、自分のサイトの文言に書き換える。
差し替えが終わったら、編集モードを抜けてプレビューで仕上がりを確認する。
コンテンツ編集モードのよいところは、レイアウトやアニメーションの設定はそのまま保ったまま、テキストの中身だけを入れ替えられる点です。
デザインを崩す心配をせずに、必要な言葉を流し込んでいけます。
サンプルの文言が入ったパーツを置いて、そこに自社の見出しやキャッチコピーを入れていく。
この流れが、デザインキットで時短できる理由の核心です。
ゼロからデザインとアニメーションを組むのに比べて、作業のスタート地点がぐっと前に進んだ状態から始められます。
デザインキットは万能じゃない？案件のWF・デザインに合わせて使うコツ
ここまでデザインキットの手軽さを紹介してきましたが、注意しておきたい点もあります。
デザインキットは、貼って終わりの魔法のツールではありません。
使いこなすには、案件のワイヤーフレームやデザインの方針に合わせて調整するという視点が欠かせません。
デザインキットのパーツは、あくまで既製の部品です。
そのまま並べただけでは、サイト全体の意図やブランドの世界観と噛み合わないことがあります。
パーツを選ぶときも、文言を差し替えるときも、「このページで伝えたいことは何か」「この案件のデザインの方向性に合っているか」を意識して組み合わせることが大切です。
一方で、アニメーションを一から自作するのは難易度が高い作業です。
要素の位置に合わせて動きのタイミングや軌道を設定していくのは、慣れていないと時間がかかります。
だからこそ、動きのあるサイトを作りたいときには、アニメーションが用意されたデザインキットが力を発揮します。
手作業の負担が大きい部分を任せられるのが、この機能の本当の価値です。
上手な使い方をまとめると、次のように整理できます。
場面 | デザインキットの向き・不向き |
アニメーションのあるサイトを作りたい | 向いている。既製の動きを活かして時短できる |
ワイヤーフレームやデザイン方針に沿わせたい | パーツをそのまま使うのではなく、選定と調整が必要 |
動きを一から細かく自作したい | 自作は難易度が高いので、まずデザインキットを起点にすると効率的 |
ブランドの世界観を厳密に表現したい | パーツを土台に、文言や組み合わせで寄せていく工夫が必要 |
デザインキットは、時短と品質を両立させるための道具です。
案件のゴールを見据えながら使えば、動きのあるサイト制作の頼れる味方になります。
もし「自社サイトにアニメーションを取り入れたいけれど進め方に迷う」という場合は、制作のプロに相談してみるのも近道です。
よくある質問（FAQ）
Q1. Wix Studioのデザインキットはどこにありますか？
A. エディタ左側の「要素を追加」をクリックし、表示されるメニューの中の「デザインキット」から開けます。
アニメーションが付いたセクションやヘッダーなどのパーツが並んでいます。
Q2. デザインキットと「セクション」メニューは何が違いますか？
A. どちらも要素を追加の中にありますが、デザインキットのパーツにはアニメーションが標準で付いているのに対し、「セクション」のパーツにはアニメーションが付いていません。
動きを出したいときはデザインキットを選びます。
Q3. 配置したパーツのアニメーションが動きません。故障ですか？
A. 故障ではありません。
デザインキットのアニメーションはスクロールに反応して動くタイプが多いため、編集画面では動きが見えにくいことがあります。
プレビューに切り替えてページをスクロールすると動きを確認できます。
Q4. デザインは変えずに文言だけ差し替えられますか？
A. できます。
パーツを選んで「コンテンツ編集モード」に入ると、レイアウトやアニメーションの設定はそのままに、見出しや本文のテキストだけを書き換えられます。
Q5. デザインキットを使えば、アニメーションの知識がなくてもサイトが作れますか？
A. 基本的な動きのあるページは、アニメーションを自作しなくても作れます。
ただしパーツをそのまま並べるだけでは案件のデザイン方針と合わないことがあるため、選定と文言の調整は必要です。
Q6. デザインキットは1つのパーツしか置けないのですか？
A. いいえ、複数のパーツを組み合わせて1ページを構成できます。
ヘッダーのパーツと紹介セクションのパーツを積み重ねるように配置し、ページ全体を作り込めます。
Q7. アニメーションを自分で一から作るのとデザインキットは、どう使い分ければよいですか？
A. 要素の位置に合わせて動きを自作するのは難易度が高いため、動きのあるサイトを効率よく作りたいときはデザインキットを起点にするのがおすすめです。
細かなこだわりがある部分だけ、あとから個別に調整するとバランスよく仕上がります。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
