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

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

この項では、スクロール位置の固定方法を学習します。

第3項　スクロール位置を固定する

この項の学習目標

ページをスクロールしていると、要素が固定表示される動きをするサイトをよく見かけます。
ナビゲーションやバナーなど、目立たせたい場合やユーザビリティを高める目的で実装されることが多いです。

要素のスクロール位置を固定する

（１）第2項で保存したファイル「4-4-2.fig」を開きます。
※途中ファイルがない場合は、ファイル「4-4-3.fig」で進めます。



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

ページ右側の［↑］ボタンはスクロールしても位置が固定されています。
また、ヘッダーのナビゲーションボタンは固定されていないのを確認します。



（３）動作が確認できたら、タブを切り替えて編集画面に切り替えます。
これから何度も確認を行うのでタブは閉じなくてかまいません。


よくある失敗

まずは2023年1月現在うまくいかないケースを確認します。
FigmaをHTMLと同じ階層構造で作っていた場合、HTMLでは問題なく固定されるのにFigmaでは固定されないケースなので気をつけてください。

（１）［レイヤーパネル］からオートレイアウト［headerNav］を選択し、［プロトタイプ］タブの［スクロールの動作］の［位置］を［固定(同じ場所にとどまる)］に設定します。

（２）プレビューします。
レイヤーパネルでは、オートレイアウト［headerNav］は「固定」というグループに入っていますが、
プレビュー画面でスクロールした時に［headerNav］のナビゲーションボタンが固定されていないことが確認できます。


固定されない問題を解決

問題を解決して［headerNav］の表示を画面の上部に固定します。

（１）［レイヤー］パネルでオートレイアウト［headerNav］をリストの一番下に移動します。



（２）［デザインタブ］で［絶対位置］をクリックし、［Y］を［60］に変更します。

スクロール位置を固定のチェックとレイヤーの並び順に注意

レイヤーを移動させると［スクロール位置を固定］のチェックが外れるので、チェックが外れているのに気づいたらチェックを付けなおしてください。
また、［スクロール位置を固定］のチェックを入れると、レイヤーパネルでの並び順が変わります。
レイヤーの並び順が変わってしまったのでレイヤーの並び順を戻そうとして、スクロール位置を固定のチェックが外れる。というループになりやすいので気をつけましょう。



（３）［プロトタイプ］タブの［スクロールの動作］の［位置］を［固定(同じ場所にとどまる)］に設定します。


（４）プレビューします。
プレビュー画面でスクロールした時に［headerNav］のナビゲーションボタンが固定されていることが確認できます。



position属性の切り替え（CSSでposition属性をマスターしている方向けの解説）

「オートレイアウト」は display:flex; を再現しています。
この時、position属性は position:static; のような動きになります。

「スクロール位置を固定」は position:fixed; を再現しています。

では、［絶対位置］にチェックを入れるのが、 position:absolute; なのか？という疑問があるかもしれませんが、
［絶対位置］のチェックを入れる／入れないというよりも、オートレイアウトにしない場合はすべてのオブジェクト配置が
標準で position:absolute; のような動きになるものと思っていただくと良いでしょう。

実際に操作をすると複製を多用することになりますが、オブジェクトは同じ位置に複製されるので、特別な意識をせず position:absolute; のように好きな位置に配置することが可能です。

オートレイアウト内でオブジェクトを重ねたい時に、position属性がstaticに変化する［絶対位置］を使用すると便利です。

この項のまとめ

この節ではFigmaを使用したインタラクションの作成について学習しました。
Figmaは他にもアコーディオンメニューやスライドアニメーションなど、様々なアニメーションを作成することができます。
この後はいよいよ実際のWebサイト制作に入りますが、サイト内でも様々なアニメーションを作成します。

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