今回は、ノーコードツールSTUDIOでアニメーションの使い方を紹介します。
「STUDIOでアニメーションを使いたい！」
「でも自分にはセンスがないし、うまく作れないよね。。。」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する方法を真似して頂くと、デザインのセンスが全くない方でも、クオリティーが高いアニメーションを簡単に作ることができますので、ぜひ一緒に作っていきましょう。
ちなみに、この記事を書いている私は、STUDIO関連の案件を30個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでアニメーションの使い方を紹介
それでは、ノーコードツールSTUDIOでアニメーションの使い方を紹介します。
今回は、以下のような2つのアニメーションを作っていきたいと思います。
■文字をふんわりと表示するアニメーション
■文字の上でマウスオーバーすると色が変わるアニメーション
以下の4STEPで解説していきます。
① 管理画面にアクセス
② テンプレートの確認
③ 文字の編集
④ アニメーションの設定
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
① 管理画面にアクセス
それでは早速ご説明します。
まずは、サイトを作るための管理画面にアクセスしたいので、「新しいプロジェクト」をクリックします。
そして、「テンプレート」を使って解説していきたいと思います。
今回は、「Mary Jones|Minimal Portfolio」のポートフォリオサイトを使っていきたいと思います。
「このテンプレートを選択」を押しましょう。
そして、プロジェクト名を入力します。
プロジェクト名は、お好きな名前で問題ありません。
私は、「animation」と名前を付けて、「作成」をクリックします。
これで管理画面にアクセスすることができました。
②テンプレートの確認
次に、編集前に、このテンプレートのサイトがどんなサイトかを事前に確認しておきましょう。
テンプレートのサイトは、右上にある「ライフプレビュー」ボタンから確認できます。
「ライフプレビュー」をクリックしましょう。
「スタート」も押します。
そして、URLをクリックしましょう。
すると、テンプレートのサイトを実際に確認することができます。
この状態でもかなりシンプルでオシャレなサイトになっているので、このまま文字だけ変更しても良いかと思いますが、アニメーションを使って、さらにクオリティーを高めていきたいと思います。
一旦、テンプレートのサイトのプレビュー画面は閉じて、管理画面に戻ります。
管理画面に戻りました。
③ 文字の編集
さて、これからアニメーションの設定方法をお伝えする前に、アニメーションを利用する文字を編集していきます。
１つ目の「Don`t be into trends.」の文字から変更していきましょう。
まず、「Don`t be into trends.」のレイヤーを確認するため、レイヤーパネルを開きましょう。
このレイヤーパネルは、編集をしていく上で、各要素のレイヤーを把握する際にとても重要です。
初めは慣れないかもしれませんが、積極的に利用していきましょう。
まず、何も選択されていない状態で「Don`t be into trends.」の上で2回クリックしましょう。
するとレイヤーパネルの一部分がグレーアウトされるのがわかると思います。
「Don`t be into trends.」の文字は、divタグの中にあることがわかります。
さらに詳細を確認するために、「矢印」のボタンを押します。
すると、3つの「Text」のタグを見つけることができます。
3つのタグと文字は、以下のように対応しております。
| ＜h1＞ ※上 | Don’t be into trends. |
|---|---|
| ＜p＞ ※真ん中 | Freelance / Graphic Designer |
| ＜p＞ ※下 | Mary Jones |
たとえば、１番上の＜h1＞タグを選択することで、「Don’t be into trends.」の文字を自由に変更できますので、＜h1＞タグから変更していきます。
一度、レイヤーパネルを閉じて、文字の上でダブルクリックしましょう。
今回は、「STUDIO DESIGN」と変更しておきましょう。
続いて、１番下の＜p＞タグの「Mary Jones」の文字も変更します。
先ほどと同じように、レイヤーパネルを開き、上から3番目の<p>タグを選択します。
そして、レイヤーパネルを閉じてから、文字の上でダブルクリックをして、「YUTA」と変更しておきます。
これで文字の編集が完了しました。
④ アニメーションの設定
それでは、以下2つのアニメーションを設定していきます。
④-1 文字をふんわりと表示するアニメーション
④-2 文字の上でマウスオーバーすると色が変わるアニメーション
早速ご説明します。
④-1 文字をふんわりと表示させるアニメーション
まずは、「文字をふんわりと表示させるアニメーション」からご説明します。
今回、このアニメーションは、3つの文字にかけていきます。
レイヤーパネルからこちらの3つの文字の箱となっている「div」タグを選択します。
そして、レイヤーパネルを閉じて、右上にある「コンディション」をクリックし、「&appear」を選択します。
この「&appear」を選択した状態で編集をすると、サイトに表示された際のアニメーションを設定することができます。
移動
まずは、「移動」の設定です。
「スタイルバー」から「モーション」を選択し、「移動」のY軸を150pxに設定します。
この設定をすることで、サイトが表示された瞬間は、元の位置から下方向に150px移動した位置に文字が表示されますが、そこから元の位置に戻るアニメーションになります。
言葉だけだとわかりづらいので、実際にどのようなアニメーションかを確認してみましょう。
以下のピンクの矢印を押すと、アニメーションが確認できます。
このように、サイトを表示した際に、文字が下から上に移動するようになります。
時間
続いて、文字の移動スピードをもう少しゆっくりしたいと思います。
先ほどと同様に、「レイヤーパネル」を開き、「div」タグを選択します。
そして、「コンディション」から「&appear」をクリックします。
今回は、移動スペードを調整したいので、「モーション」から「時間」を選択し、調整していきます。
時間を「300」→「2,000」に変更しましょう。
そして、「ピンクの矢印」を押して、アニメーションを確認してみましょう。
すると、先ほどよりもゆっくりと文字が移動するのがわかると思います。
遅延
また、「遅延」の設定もよく行います。
この「遅延」を使うことで、文字を動かすまでの「時間」を設定することができます。
実際に「遅延」を使ってみましょう。
先ほどと同様に、「レイヤーパネル」から「div」タグを選択します。
そして、「コンディション」から「&appear」をクリックします。
「モーション」から「遅延」を設定します。
「遅延」の数値を「1,000」に変更しましょう。
そして、「ピンクの矢印」をクリックを押して確認してみましょう。
すると、先ほどよりクリックしてから文字が動き始めるまでの時間が長くなったことがわかると思います。
透明度
最後に、「透明度」を調整するとさらにクオリティーを上げることができます。
その方法をご説明します。
先ほどと同様に、「レイヤーパネル」を開き、「div」タグを選択します。
そして、「コンディション」から「&appear」をクリックします。
そして「ボックス」タブから「透明度」を設定できます。
今回は、「透明度」を「０」に設定します。
そして、ピンクの矢印を押して確認してみましょう。
すると先ほどよりもかなり自然なアニメーションになったかと思います。
今回ご紹介した「移動」、「時間」、「遅延」、「透明度」はセットで使うことが多いですので、必ずこの組み合わせを覚えておきましょう。
この4つを使うだけで、簡単にアニメーションのクオリティーを上げることができますので、おすすめです。
④-2 文字の上でマウスオーバーすると色が変わるアニメーション
次に、「文字の上でマウスオーバすると、文字の色が変わるるアニメーション」を紹介します。
今回は「STUIDIO DESIGN」の文言だけにアニメーションをかけるので、レイヤーパネルを開き、1番上の＜h1＞タグを選択します。
そして、レイヤパネルを閉じて、今回は「コンディション」から「hover」を選択します。
この「hover」を選択してから編集することで、マウスオーバーした際のアニメーションを設定ができます。
今回は、「スタイルバー」の「テキスト」タブから色を編集します。
そして、色コードで「#E81D1D」を設定しましょう。これでマウスオーバすると、色が赤色に変化します。
ライフプレビューで確認してみましょう。
すると、以下のようにマウスオーバーすることで色が変化するようになったことがわかるかと思います。
これで2つ目のアニメーションも完成しました。
まとめ
今回は、以下のような2つのアニメーションを作り方をご紹介しました。
■文字をふんわりと表示するアニメーション
■文字の上でマウスオーバーすると色が変わるアニメーション
アニメーションを設定することで、サイトのクオリティーが一気に上がりますので、ぜひ積極的に利用していきましょう。
他にもSTUDIOの色んな機能の使い方をまとめておりますので、気になる方はどうぞ。
