【STUDIOの使い方③】ボックス・テキストの装飾とアニメーションの付け方

【STUDIOの使い方③】ボックス・テキストの装飾とアニメーションの付け方

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

STUDIOの使い方第3弾は、ボックス・テキストの装飾とアニメーションの付け方についてです。

装飾やアニメーションを付けることで、Webサイトのデザイン性が一気に高まります。特に、アニメーションはWebサイトに躍動感を与えることができるので、非常に効果的です。

また、後半では実際にロゴを動かす方法もご紹介しています。一緒に制作して、STUDIOの操作に慣れてみてくださいね。

前回の画像に関する記事も合わせてご参照ください!

STUDIOでのボックス・テキストの装飾

ボックスとテキストの装飾方法について、それぞれ見ていきましょう。

ボックスの装飾

ボックスは、ボックスメニューから以下の装飾を行います。

Image from Gyazo

透明度:ボックスを徐々に透過していくことができます。1が最大値で、0.1ずつ数値を下げるごとに透明度が増していきます。

塗り:ボックスに色をつけることができます。グラデーションや、カラーパレットから自分の好きな色を指定することも可能です。よく使用する色は、+ボタンで登録しておきましょう

枠線:ボックスの枠線を装飾します。四辺に同じ装飾を施すことで線を付けたり、一辺ずつ装飾を付けることもできます。

シャドウ:ボックスの外側や内側に影を付けることができます。XとYがそれぞれ横と縦軸、Blurがぼかしの数値で、Spreadはシャドウの幅の広さを指します。

どれもよく使用する装飾なので、使用しながら装飾の効果を確認してみてくださいね。

テキストの装飾

テキストもボックスと同じく、テキストメニューから以下の装飾が可能です。

Image from Gyazo

  • ・文字間
  • ・行高
  • ・サイズ
  • ・フォント
  • ・太さ
  • ・イタリック
  • ・下線
  • ・色
  • ・シャドウ
  • ・配置
  • ・文字組

普段、ワードやエクセルなどでも見るような基本的な装飾は一通りできます。また、フォントに関しては、Google FontsやTypeSquareといったWebフォントサービスを導入しているため、使えるフォントが非常に豊富です。ぜひ、いろんなフォントを使ってみてください。

アニメーションの付け方

アニメーションでは、ボックスやテキストに動きを付けることができます。基本は、以下の流れに沿って、アニメーションを付けていきます。

①コンディションを選ぶ

アニメーションを付けるときは、「どういう状態の時に動きをつけるか」を初めに選ぶ必要があります。STUDIOでは2種類あり、「:hover」「&appear」です。hoverは、マウスのカーソルを要素に載せたとき、appearはWebサイトが表示されたときです。

↓hover

Image from Gyazo

↓appear

Image from Gyazo

②モーションメニューで調整

コンディションを選んだあとは、モーションメニューで動きを調整します。

hoverでは「アニメーションが実行された後の状態」、appearでは「アニメーションが実行される前の状態」をそれぞれ再現します。

モーションメニューでは、主に次の2つの設定を行います。


【アニメーションの動きと時間】

Image from Gyazo

モーションメニューの左側で設定します。「時間」でアニメーションが作動する時間、「遅延」でアニメーションが開始するまでの時間を選択することが可能です。時間の表示がややこしいですが、「300」は0.3秒のことを表しています

Image from Gyazo

また、イージングはアニメーションの緩急や速さを指定できるものです。それぞれ動き方が変わってくるので、下記サイトを参考にしてください!

STUDIOモーション機能一覧


【アニメーション時の変形】

Image from Gyazo

モーションメニュー右側にある、下記4つで設定します。

移動:X軸(横)Y軸(縦)に動かすことができます。

回転:時計回りに要素を回転させます。

スケール:X軸Y軸にそれぞれ大きく拡大できます。

傾き:X軸Y軸にそれぞれ斜めに動かすことができます。

Image from Gyazo

それぞれを組み合わせながら、アニメーションを付けていきましょう。

装飾の使い方~アニメーションを作る~

それでは、実際にアニメーションをメインビジュアルのロゴに付けていきましょう!作成するのは、クリ★スタのコーディング課題①です。

また、ヘッダーとメインビジュアルは前回までの記事で作成したものになります。

【完成図】
コチラをご覧ください!

素材はこちらで配布しています↓

①コンディションをappearにする

Webサイトを開くと同時にロゴが表示されるようにしたいので、今回はコンディションをappearにします。

Image from Gyazo

②透明度を0にする

appearの場合、「アニメーションが実行される前の状態」に設定しておく必要があるので、透明度を0にします。

Image from Gyazo

③イージング、時間、遅延を設定する

今回は、イージングを用いてロゴが浮いてくるようなアニメーションにします。モーションメニューから次の設定を行ってください。

イージング:cubic-bezier(0.445, 0.05, 0.55, 0.95)
時間:1600
遅延:100

Image from Gyazo

④移動をY40pxにする

③までで、アニメーションの動きと時間を設定できました。ただ、ロゴ自体は下から上への移動も行っているので、Y軸の移動を40pxにしてロゴに動きを付けます。

Image from Gyazo

⑤ボックスの右上ボタンを押して、動きに問題がなければ完成!

ボックス右上にある「→ボタン」で動きを確認します。アニメーションに問題がなければ無事完成です!

Image from Gyazo

まとめ

今回は、ボックス・テキストの装飾とアニメーションの付け方についてご紹介しました。
装飾やアニメーションを活用して、素敵なWebサイトを作ってくださいね。

次回は、レスポンシブ対応についてご説明しますので、お楽しみに!