【新登場】Studioの新しい配置『追従（Sticky）』をご紹介！

ノーコードWeb制作ツール「Studio」は、簡単な操作でデザイン性の高いWebサイトを制作できるクラウド上のサービスです。クオリティの高いデザイン性と直感的な操作感が評価され、多くのデザイナーや企業が活用しています。

そんなStudio内の配置機能に、2024年12月4日から新しく『追従（Sticky）』が追加されたので、詳しく紹介していこうと思います。

新しく追加された『追従』って？

Studioのデザインエディタで使用する配置機能には、これまで

• 相対位置（Relative）

• 固定位置（Fixed）

• 絶対位置（Absolute）

の3種類があり、今回新しい選択肢として「追従（Sticky）」がリリースされました。

これら4種類を組み合わせることで様々な表現が可能になり、洗練されたクオリティの高いレイアウトを実現できます。

まずはそれぞれの機能について簡単にご紹介します。

相対位置（Relative）

Studioでは、ボックスを配置した際にデフォルトで相対位置に設定されています。

相対位置に設定されたボックスは、周りの要素との関係性を保ちながら配置が決まるので、画面サイズが変わっても要素の配置が自動的に調整されます。
レスポンシブデザインを簡単に実現することが可能です。

固定位置（Fixed）

固定位置に設定したボックスは画面上の特定の位置に固定され、スクロールに影響されず常に同じ位置に表示されます。
ヘッダーを上部に固定したり、サイドバーやボタンなど常に画面上に表示させたいコンテンツがある場合に使用します。

固定位置が設定出来るのは、ベースボックス（<div>Base）直下に配置したボックスのみです。

絶対位置（Absolute）

入れ子構造になっている親子ボックス内で、親ボックスを基準にして子ボックスの位置を固定表示させたい場合に使用します。
写真や要素の上に文字を重ねたり、ラベルや新着アイコンを加えたりすることができます。

追従位置（Sticky）

ボックスを追従位置に設定することで、指定した位置に応じてスクロールの途中でボックスが固定され、親ボックスのスクロールが終了すると自動的に解除されます。

引用：Studio Help

できること

これまでは、「固定位置」を設定することで常に同じ場所にボックスを固定することができましたが、新しい「追従位置」を使うことで、「スクロールの途中で要素を固定し、さらにスクロールしていくと固定を解除する」という表現ができるようになりました！

以下のような場合に活用できます。

• 縦や横に長い表のタイトルを固定表示にする

• ブログ記事にサイドナビゲーションを固定する　など

設定方法

他の配置と同様、簡単に設定することが可能です。

1.画像またはボックスを追加します（必要に応じてテキストの追加や色変更も行っておく）

2.①で追加したオブジェクトの配置を「追従」に変更します

3.プレビューで確認すると、これだけで追従機能の設定が完了していることが確認できます！

『追従位置』を使った動きのサンプル

先ほど紹介した方法を活用すれば、以下のような動きを実装することができます。

ヘッダーやサイドメニューを追従させるサンプル

横スクロール、縦スクロールで要素を重ねるサンプル

画面下部に要素を追従させるサンプル

引用：Studio Help

追従位置の動きを活用したサイトイメージ

実際に「追従位置」を活用することでつけられる動きが取り入れらているサイトをいくつかご紹介します。

※動きのイメージ例として紹介しているので、実際にStudioの「追従位置」を活用して実装されたサイトでないものを含んでいます。ご了承ください。

1.画面下部でコンテンツの内容に合わせてバナーを追従

WWDBEAUTYの特設サイトです。
スクロールしてFV下に差し掛かると、画面右下に「GIFT CAMPAIGN」とキャンペーンについてのコンテンツへ飛ぶ導線バナーが表示されます。
スクロールを続けキャンペーンコンテンツに差し掛かるとバナーの固定は解除され、キャンペーンコンテンツを過ぎると、再度表示される仕様となっており、「追従位置」を活用することで同様の動きを実装することが可能です。

2.特定のコンテンツでのみタイトルを固定

株式会社GA technologies様の採用サイトです。
ページ中盤、「境界を越えていく先輩たち」というコンテンツに差し掛かると左のタイトル部分を固定、コンテンツ内の内容をスクロールし終わると同時に固定を解除しています。
こちらも「追従位置」を活用することで同様の動きを実装することが可能です。

3.スクロールで要素を重ねる

移動式シネマ・サウナバス「JOURNEY」のLPです。
「FUNCTION」のコンテンツに、スクロールすると画面は固定のまま要素が重なっていくような動きが付いています。
こちらのアニメーションも「追従位置」を活用することで実装することが可能です。

注意点

表現の幅がさらに広がり便利な追従位置ですが、いくつか注意点もあります。

1.設定状況をエディタ上で確認できない

追従位置の設定状況は、デザインエディタ上では確認出来ません。確認する際は、ライブプレビューのURLで行う必要があります。

2.はみ出し設定が「表示」の場合のみ有効

追従位置は、親要素のはみ出し設定が「表示」の場合のみ設定が有効となっていて、「非表示」または「スクロール」の状態で設定した場合にはスクロールが優先されてしまうので、追従設定が無効となります。

まとめ

いかがでしたか？
サンプルでもわかるように、新機能が追加されたことで今まで以上に表現の幅が広がりますね！

今までの配置の設定と同じように簡単に設定できる機能なので、ぜひこの記事を参考に実践してみてください！
最後までご覧いただきありがとうございました！

※このブログに掲載させていただいているサイトの掲載取り消しをご希望の場合はご一報ください。迅速に対応いたします。