top of page

たった数クリックでアニメーションが作れる!Wixで簡単に本格HP作成



Wixはノーコードで簡単に、無料でHPが制作できるプラットフォームとして、個人から企業まで幅広く利用されています。


しかし中には「無料のツールで集客できるレベルのホームページは無理でしょ?」と考え、Wixの導入をためらっている人も一定数いるようです。


特に「アニメーションで躍動的なHPを作りたいけど、無料のWixではそこまでは無理そう」と考えている人は多いのではないでしょうか?


実はWixを使って多彩なアニメーションも無料で挿入することが可能なんです。今回は「Wixを使ってどんなアニメーションが加えられるのか」と「アニメーションの加え方」について詳しく解説します。


Wixで表現できるアニメーションのパターン


任意のパーツを選択しアニメーションのアイコンを選択することでパーツに動きを加えられます。



アニメーションのバリエーションはなんと14種類。



フェードインやズームインはもう皆さんおなじみのエフェクトですよね。

バフィンというのは画面の手前から巨大なアイコンが入って来て、サイト内に収まるというエフェクトです。





                  ↓


 他にも回転しながら指定した位置に入ってくるターンイン。横からスッと入ってくるフロートインなど、さまざまなアニメーションが用意されているんです。


テキストにももちろんアニメーションがかけられるので、強調したい文や、タイミングを遅らせて表示した文字など、工夫次第でユニークなサイトの制作が可能です。


みなさんは、文字の後ろでオシャレな動画が流れているサイトを見たことがありますか?

そういったサイトを見ると洗練された印象をうけますよね。


Wixも文字や見出しの背景に動画を挿入することが可能です。これらの機能を使うことで、有料のHP制作プラットフォームとそん色ないレベルの本格的なWebサイトが制作できちゃいます。


しかもノーコードなので「プログラミングが苦手」という人でも安心。

やり方さえわかれば子どもでも本格的なHPが作れちゃうんです。



子どもでもできる!Wixでアニメーションを追加する方法

それではWixでアニメーションをサイトに追加する方法を解説します。


まずはダッシュボードの画面を出してください。すると右上に「サイト編集」というメニューが見えると思いますのでそこをクリックしましょう。


次に、アニメーションさせるための素材をサイトに追加する必要があります。

左上の「パーツを追加」ボタンをクリックしましょう。


すると「ボタン」「ストリップ」「装飾」など多彩なパーツの種類が表示されます。


もし自分のもっている画像やアイコンを使用したい時は、お好きな画像をアップロードしましょう。




今回は「装飾」の中からパーツを選んでみます。



お好きなパーツをクリック&ドラッグすることで、パーツを好きな場所に配置できます。

配置されたパーツをクリックすると情報にいくつかのアイコンが表示されます。

その真ん中にあるアニメーションアイコンをクリックしましょう。


すると先ほど説明した14種類のアニメーション一覧が表示されます。気になるアニメーションをクリックすることで、実際にパーツがどう動くのかプレビューできます。




パーツの動きを吟味したうえで好みのアニメーションを追加したら作業終了。びっくりするほど簡単ですよね。

また、「カスタマイズ」を選択することでより詳細なアニメーションの設定も可能です。




スピンインの場合は回転数、回転方向、エフェクト時間、待機時間など細かい設定ができます。

エフェクト時間とはどれくらいの時間エフェクトが継続するか、待機時間はページが表示されたから何秒後にアニメーションが始まるか、などを設定できます。


時間差で急にアイコンを登場させて驚かせたり、疑問をなげかける文章を書いて、答えを時間差で表示したり、工夫次第でいろいろな効果を演出できますよ。


背景に動画を追加する


次は背景に動画を追加する方法を解説します。こちらも一見すると難しそうですが、Wixならノーコードでとても簡単に追加できます。


まずは変更したい背景をダブルクリック、または右クリックします。

すると背景に関するメニューが表示されます背景色を変えたり、画像を挿入したりなどもできますが、今回は動画をクリックします。



Wix内にも豊富な動画素材が用意されています。もちろん「アップロード」から自分のオリジナル動画を追加することも可能です。



ここではクールなイメージのある外国人女性の動画を挿入してみましょう。



このように編集画面には女性の静止画が挿入されました。編集画面では静止画ですが、プレビューで確認すると文字の後ろで動画が流れるのでご安心ください。







まとめ

「専門知識がないからHP制作なんて無理」「作れたとしても簡易的なサイトが限界」と作る前からあきらめていた人も、これならできそうだと思いませんか?


コーディングで作っていたら何週間もかかっていたような本格的なホームページがWixならたった数日で作れてしまうんです。


「Wixは無料のツールだから集客向きではない」という先入観を持っていた方も、これを機に一度Wixを試してみてはいかがでしょうか?

最後までお読みいただき、ありがとうございました。


閲覧数:9回0件のコメント

Comments


bottom of page