Studioの新機能徹底解説！追従バナー＆メニューの作成ステップ

はじめに

はじめまして、メンバーズルーツノーコード推進員の木下です。

メンバーズルーツでは、ノーコードでWebサイトを構築・運用できるツール「Studio」を活用した開発支援を行っております。

今回は2024年12月4日に登場したStudioの「追従（Sticky）」機能の活用方法についてご紹介したいと思います。

追従（Sticky）とは

Webデザインにおける「追従（Sticky）」とは、スクロールしてもそのコンテンツが固定されており、追いかけてくるような動きのことを指します。たとえば、バナーやメニューをずっと表示させておきたい時や、スクロール中に動きをつけたい時などに追従を活用します。

従来のStudioでは、「相対位置」「絶対位置」のみの配置設定だったのですが、新しく「追従位置」が登場したことにより、さらにサイトに動きをつけることが可能になりました。

今回の記事では、Studioの新機能を活用した追従バナーや追従メニュー、スクロール中の動きの実装方法をご紹介いたします！

追従（Sticky）の使い方

まずはじめに、新機能「追従（Sticky）」の使い方をご紹介いたします。

①画像またはボックスを追加する

② ①で追加したオブジェクトの「配置」を「追従」に変更する(追加したオブジェクトは画像追加またはカラー変更をおこなっておくと、プレビューで分かりやすいです)

たったこれだけで、スクロール途中で背景(ボックス)を固定することができました！簡単ですね。

上記方法を活用して、テキストや画像が入ったボックスを追従させることも可能です。

①ボックスを追加

② ①の中にボックスを追加しテキストまたは画像をその中に追加する

③ ②の配置を追従にする(任意でカラー変更や余白の調整をおこなってください)

ぜひテキストや画像を入れて試してみてください！

追従（Sticky）機能の活用例

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

追従バナー

①ボックスを追加する
②その中に、追従用バナーを配置する
③ ①のボックスの「配置」を「追従」にする
④重ね順を5にする(他のオブジェクトより前にする)

⑤余白を調整して完成

追従メニュー

①ボックスを追加する
②その中に、メニュー部分のボックスを追加する
③ ①のボックスの「配置」を「追従」にする
④重ね順を5にする(他のオブジェクトより前にする)

⑤メニューのデザインを整えれば完成

カラムレイアウトの際、特定のカラムだけ固定

①ボックスを追加する
②その中に、ボックスまたは画像を追加する(固定する側)
③その隣に、ボックスまたは画像を追加する(追従させる側)
④ ①のボックスの「配置」を「追従」にする

⑤余白を調整して完成

最後に

今回の記事では、Studioの新機能「追従（Sticky）」の使い方や活用方法について解説いたしました。
この記事があなたの素敵なサイト制作の手助けになれば幸いです。
ご一読いただきありがとうございました！