第4章　インタラクティブアニメーション

第4節　アニメーションをサイトに取り入れる

この節では、Webサイト内でよく使用されるアニメーションを作成します。

第1項　ボタンをホバーアニメーションさせる

この項の学習目標

• ホバーアニメーションについて理解する
• ボタンのホバーアニメーションを作成する

インタラクティブコンポーネントを追加してホバーアニメーションを作成する

色が変化するアニメーションは第2節で学習しましたが、本項ではマウスカーソルがボタンに重なった（ホバーした）時に表示が変化するアニメーションを作成します。

（１）素材フォルダ [Figma-04] - [comp] の中にあるファイル「4-4-1-comp.fig」を開きます。

（２）[デスクトッププレビュー] をクリックしてプレビューを表示します。

（３）オブジェクトにマウスカーソルを乗せると色と文字が変化することを確認しましょう。
ユーザーはボタンをクリックすることでリンク先に飛ぶ、商品を購入するなど次の動きを予想することができます。

この後の流れ

これから、インタラクティブコンポーネントを作成しますが、まずは流れを確認します。
１．オブジェクトをコンポーネント化する。
２．コンポーネントにバリアントを追加する。
３．バリアントを追加したコンポーネントでインタラクションを設定してインタラクティブコンポーネント化する。
４．インタラクティブコンポーネントからインスタンスをフレームに追加する。
という流れになります。カタカナ英語が多いですが、まずは下図でそれぞれの用語を解説します。コンポーネントについては後の章でも改めて学習します。

用語の解説図

まず、できあがりのオブジェクトのことをインスタンスと呼びます。
インスタンスを作るための設計図や型枠にあたるものがコンポーネントです。
実際にはオブジェクトをコンポーネント化するので、たい焼きをもとにたい焼き器を作る流れになります。
コンポーネントができたら、そこからインスタンスをたくさん作るイメージです。次に、

たい焼きの色などが変わった”状態”を追加します。これをバリアントと呼びます。
図の例ではもともとの状態をバリアント①、色などを変更した状態をバリアント②としています。
（バリアント②の状態でインスタンスを作る使い方もありますが、ここでは使いません。）
バリアントが追加できたら、マウスオーバーでバリアント①からバリアント②に変化するインタラクションを追加します。
このように、インタラクションを追加したコンポーネントをインタラクティブコンポーネントと呼びます。
インタラクティブコンポーネントができたらそこから変化のあるインスタンスをたくさん作ることができます。

（５）それでは実際にホバーアニメーションを作成してみましょう。まずはオブジェクトをコンポーネント化します。
素材フォルダ [Figma04] の中にあるファイル「4-4-1.fig」を開きます。

（６）フレーム［MacBook Air - 1］内のフレーム［btn_hover］内のフレーム［login-btn］を複製して、フレームの外に配置します。

（７）複製した方のフレーム[login-btn] を選択して、上部［コンポーネントの作成］アイコンをクリックします。

（８）フレームがコンポーネントに変わります。
アイコンの形が変わり、コンポーネントの名称が紫色で表示されているのを確認します。

（９）さきほどコンポーネントの作成をクリックした場所のアイコンが［バリアントの追加］に変わるのでクリックします。

（１０）コンポーネントが複製されます。
レイヤーパネルに、「バリアント２」と「デフォルト」が表示されること、ボタンが２つに複製されること、［デザインタブ］に［現在のバリアント］という項目が増えていることを確認します。

（１１）［デザインタブ］の［現在のバリアント］で[プロパティ１] を［a］に、［バリアント２］を［hover］に変更します。
レイヤーパネルのバリアント名が連動してhoverに変わります。レイヤーパネル側でも名称変更が可能ですが、デフォルトのプロパティが連動して変わらず後で手間がかかるのでデザインタブで操作しましょう。

（１２）さらにバリアントを追加し、名称を［active］にします。他のフレームと重なってしまった場合は移動しておきましょう。

（１３）レイヤーパネルからバリアント［hover］を選択し、塗りの透明度を50%にします。

（１４）続けて、レイヤーパネルからバリアント［active］を選択し、塗りを選択、［線形］を［単色］に、［Hex］を［HSB］に変更して、3つ目の数値（Brightness：明度）を80に変更します。元のボタンから、明るさを下げた色合いにできました。

（１５）インタラクションを設定しますが、インタラクションの流れを設定する前に、レイヤーパネルでの並び順とオブジェクトの並び順が逆になっているとわかりにくいのでプラグインで並び替えを行います。
作成した３つのバリアントを選択し、プラグイン［Sorter］を実行して、［Sort Position］を選択します。オブジェクトが配置されている順にレイヤーを並べ替えてくれます。

（１６）続けてインタラクションを設定します。［プロトタイプタブ］に切り替え、デフォルト（一番上）から、hover（上から2番目）に［マウスオーバー］のインタラクション、hoverからactive（上から3番目）に［押下中］のインタラクションを設定します。インタラクティブコンポーネントの完成です。

（１７）インタラクティブコンポーネントができたら、既存のオブジェクトと置き換えます。
レイヤーパネルから［デフォルト］を選択して【Ctrl+C】などでコピーします。続けて、
レイヤーパネルからフレーム［login-btn］を選択した状態で、右クリックから［張り付けて置換］を選択します。

（１８）以上で完成です。レイヤーパネルでフレーム［login-btn］のアイコンと文字色が変わってインタラクティブコンポーネントに置き換わっているのを確認します。確認できたら［プレゼンテーションを実行］をクリックして動作を確認してみてください。ボタンにマウスオーバーすると色が薄くなり、クリックしている間、色が暗くなれば成功です。

この項のまとめ

• マウスカーソルを合わせた状態を[ホバー]という。
• ボタンのホバーアニメーションを作成するにはインタラクティブコンポーネントを利用すると管理しやすい。

以上でこの項の学習は終了です。
次の項へ進んでください。