Web制作で知っておくべきFigmaの学習 #Day19「StateとAnimation」

前回、Interaction（インタラクション）とOverlay（オーバーレイ）を学び、ボタンをクリックすると確認ダイアログを表示する仕組みを学習しました。 でも、実際のWebサイトやアプリでは、操作に応じて画面が切り替わるだけでなく、ボタンの見た目が変わったり、メニューが滑らかに開いたりすることがあります。 例えば、次のような動き。

- ボタンにマウスを乗せると色が変わる - メニューが横からスライドして表示される - タブを切り替えると、選択中の項目が変わる - アコーディオンを開くと、説明文が表示される - 画面遷移のときに、要素がフェードインする

こうしたUIの変化を考えるうえで重要なのが、State（状態） と Animation（アニメーション） です。 今回は、状態とアニメーションの基本を理解し、 Figmaでボタンの状態変化と画面遷移の動きを設定してみましょう。

State（状態）とは

Stateは、UIが現在どのような状態にあるかを表す考え方です。 例えば、ボタンには次のような状態があります。

状態	意味
Default	通常の状態
Hover/td>	マウスカーソルが乗っている状態
Pressed/td>	押している状態
Disabled/td>	操作できない状態
Selected/td>	選択されている状態

同じボタンでも、状態によって色や形、表示内容などが変わることがあります。 例えば、

通常時は青色のボタンが、 マウスを乗せると少し濃い青色になり、 操作できないときはグレーになる、

といった表現です。 このように、状態を区別することで、ユーザーに操作可能かどうかや、現在何が選択されているかを伝えられます。

見た目だけじゃない

この状態とおいうのはは、単に色を変えるためのものではありません。 実際のWebアプリでは、

ログイン済み・未ログイン 送信前・送信中・送信完了

など、処理やデータに関する状態もあります。 Figmaでは、こうした状態の一部をデザインやプロトタイプとして表現し、操作の流れを確認できます。 ただし、実際の認証やデータ処理までFigmaが実行するわけではありません。

Animation（アニメーション）とは

Animationは、UIの変化を時間の経過に沿って表現する仕組みです。 例えば、メニューを表示するとき、突然表示するのではなく、画面の端から滑らかに移動させることができます。 FigmaのPrototypeでは、画面遷移やオーバーレイなどにアニメーションを設定できます。 代表的な表現には、次のようなものがあります。

アニメーション	表現
Instant	動きを付けずに切り替える
Dissolve	徐々に透明度を変化させる
Smart Animate	対応する要素の差分を利用して変化させる
Move In	画面に要素が移動して入ってくる
Move Out	要素が移動して画面外へ出ていく

利用できる選択肢や表示名は、設定するアクションによって異なります。 また、アニメーションの種類を選ぶだけでなく、Duration（時間）やEasing（動きの加速・減速）を調整できる場合があります。 ここで重要なのは、アニメーションは装飾だけではないということです。 画面の変化を理解しやすくしたり、操作の結果を伝えたりする役割もあります。

StateとAnimationの違い

この2つは関連していますが、同じものではありません。 例えば、メニューが閉じている状態と、開いている状態があるとします。

State：メニューが閉じている／開いている Animation：閉じた状態から開いた状態へ、どのように変化するか

つまり、

Stateは変化の前後にある状態 Animationはその間の動き

と考えると理解しやすくなります。 ただし、すべての状態変化にアニメーションが必要なわけではありません。 即座に切り替えたほうがわかりやすいUIもあります。 こうした状況に応じて対応できる事もデザイン力と言えるかもしれませんね。

実習1：ボタンの状態を作る

まず、ボタンの通常状態と無効状態を作成します。 以前学習したVariants（バリアント）を利用して、状態によって見た目が変わるボタンを作ってみましょう。

手順1：ボタンの作成

1. Figmaのキャンバスを開きます。 2. 長方形とテキストでボタンを作成します。 3. 長方形とテキストをまとめて、ボタン全体をFrameにします。 4. Frameの名前を 「Button」に変更します。 5. ボタンのテキストは「送信」とします。

通常状態のボタンは、次のようにします。

背景：青色 文字：白色 表示テキスト：送信

手順2：Componentを設定する

ボタン全体のFrameを選択し、Componentに変換します。

1. Frameを選択した状態で、右クリックして「コンポーネントを作成」を選択。 2. 右パネルのプロパティで、「+（プロパティを作成）」をクリックして、追加。 3. 名前を「ボタン」、値を「通常」にセット。

このとき、テキストだけではなく、背景の長方形も含めたボタン全体をComponentにしてください。 この状態を基準として、別の状態を追加します。

手順3：Disabled状態を追加する

1. コンポーネントを選択した状態で、右パネルでバリアントを追加します。 2. 追加したプロパティの値を「無効」に変更。 3. 無効 のバリアントを選択し、背景をグレーに変更します。

バリアントを追加した後は、それぞれのプロパティ値が区別できるように設定します。 これで、通常状態と無効状態という2種類の見た目を用意できました。 ここで作成した 無効 は、見た目として無効状態を表現したものです。 実際にクリックを禁止する処理まで自動的に実装されるわけではありません。

実習2：Smart Animateで変化を付ける

上記のボタン 2つのFrame間で要素が変化するアニメーションを設定します。

手順1：1つ目のFrameを作る

1. F キーでFrameを作成します。 2. Frame名を 01_Default にします。 3. 青いボタンを配置します。 4. ボタンの名前を Button にします。

手順2：2つ目のFrameを作る

1. 01_Default を複製します。 2. 複製したFrame名を 02_Changed にします。 3. ボタンの色を変更します。

このとき、2つのFrameで、対応するオブジェクトの名前や階層をできるだけ揃えておきます。 Smart Animateは、対応する要素の位置やサイズ、色などの変化を利用して動きを作るため、構造が揃っているほうが結果を確認しやすくなります。

手順3：Prototypeを設定する

1. 01_Default のボタンを選択します。 2. 右側パネルの プロトタイプ（Prototype） タブを開きます。 3. インタラクションを追加します。 4. トリガー（Trigger）をクリックに設定します。 5. アクション（Action）を 次に移動（Navigate to） に設定します。 6. 遷移先を 02_Changed にします。 7. アニメーションの設定で スマートアニメート（Smart Animate） を選択します。

必要に応じてDurationも調整します。最初は、変化が確認しやすい時間に設定してください。

手順4：プレビューで動作を確認する

プロトタイプを再生し、ボタンをクリックします。 設定が適切であれば、ボタンの位置や色が変化する様子を確認できます。 ただし、Smart Animateは、対応する要素をFigmaが認識して差分を補間する仕組みです。 すべての変更が期待どおりにアニメーション化されるわけではありません。 変化が見えない場合は、次の点を確認してください。

- 2つのFrameに対応するボタンが存在するか - ボタンのレイヤー名や階層が大きく異なっていないか - PrototypeのアニメーションがSmart Animateになっているか - 位置や色など、実際に変化するプロパティがあるか

Animationを使うときの注意点

アニメーションを多用すれば、必ず使いやすくなるわけではありません。 例えば、すべてのボタンに長いアニメーションを設定すると、操作に時間がかかり、かえってストレスになることがあります。 設計時には、次の点を意識しましょう。

動きの目的を明確にする

アニメーションを付ける理由を考えます。

- 画面が切り替わったことを伝える - メニューがどこから現れたかを示す - 操作に対する反応を明確にする - UIの状態変化を理解しやすくする

目的がない動きは、無理に追加する必要はありません。

時間を長くしすぎない

ボタンの反応や小さな表示の変化に、長い時間をかける必要はありません。 アニメーションの速度は、対象となるUIや動作の意味に合わせて調整します。

状態を見た目だけで表現しない

例えば、無効状態をグレーにする場合でも、文字のコントラストが低すぎると読みにくくなることがあります。 また、選択状態を色だけで示すのではなく、アイコンや枠線なども使うと、状態を認識しやすくなります。

StateとAnimationが実際のWeb制作でどう使われるか

Web制作では、UIの状態とアニメーションは、CSSやJavaScriptなどを使って実装されます。 例えば、CSSでは :hover や :disabled などを利用して状態ごとの見た目を設定できます。 transition を使えば、色や位置などの変化を滑らかにできます。 一方、JavaScriptを使うと、メニューの開閉やフォーム送信の進行状態など、操作や処理に応じた状態管理ができます。 Figmaは、これらを実装する前に、どの状態が必要なのか、どのような動きを付けるべきかを検討するために役立ちます。 ただし、Figmaのプロトタイプ設定と、CSSやJavaScriptの実装コードがそのまま同じになるわけではありません。Figmaで設計した意図を、実装時に適切な方法へ置き換えることが必要です。 ちなみに、インターネットブラウザの負荷を考えると、JavascriptよりもCSSの方が高速で安定した動作になることの方が多いです。

あとがき

ユーザーが画面を操作したとき、何が起きたのかを理解できることは、使いやすいUIを作るうえで重要です。 ボタンの色が変わる、メニューが開く、画面が滑らかに切り替わる。こうした小さな変化が、操作に対する反応を伝えてくれます。 Figmaでは、実際にコードを書く前に、状態と動きを試しながら設計できます。 見た目を作るだけでなく、「操作するとどうなるのか」「その変化はユーザーに伝わるのか」という視点を持って、UIを考えていきましょう。 個人的には、WebサイトのデザイナーでアニメーションまでしっかりとFigmaで作り込んでいるデータはほとんど見たことがありません。 こまかな動きまでしっかりとデザイン構築できると、クオリティの高いデザイン構築ができるとも言えますね。