SWELLの追尾サイドバーの使い方｜固定表示におすすめのウィジェット例も紹介

SWELLの追尾サイドバーの使い方をわかりやすく紹介します。

それではご覧ください。

追尾サイドバーとは？初心者でもわかる基本仕組み

「追尾サイドバーって何？」という初心者の疑問に答えると、スクロールしても画面の横に固定されたまま動かないサイドバーのこと です。

通常のサイドバーは、ページを下に進むと途中で消えてしまいますが、追尾サイドバーは読者の視界にずっと残り続けます。そのため、以下のようなメリットがあります。

追尾サイドバーのメリット

① 読者の目に触れやすくなる

画面の端に固定されるため、プロフィールや広告を置くとクリックされやすくなります。

② 回遊率アップにつながる

おすすめ記事や人気記事を置くことで、別記事への移動が増えます。

③ 収益化にも効果的

アフィリエイトバナーやCTA（資料請求やメルマガ登録など）を設置すると、見られる回数が増え、そのまま成果につながりやすい配置です。

通常サイドバーとの違い

種類	特徴
通常サイドバー	スクロールすると途中で消える
追尾サイドバー	スクロールしても画面に固定されたまま

読者にとって「重要な情報」を見せ続けたい場合、追尾サイドバーのほうが圧倒的に有利です。

よく見かける具体例

書類	意図
ブログサイト	人気記事やカテゴリーメニューを固定表示して回遊を促進
ECサイト	カートボタンや割引情報を常時表示してコンバージョンを向上
ニュースサイト	広告枠やおすすめ記事のリンクを固定して収益化を促進

追尾サイドバーは効果的に活用することで、訪問者の満足度を高めつつ、サイト運営者にとっても大きなメリットをもたらします！

SWELLでは、追尾サイドバーを設置できるウィジェット機能が標準装備されており、プラグインやCSS・JSなどで実装することなく、簡単に直感的に追尾サイドバーにコンテンツを設置できます。

SWELLで追尾サイドバーを設定する方法

SWELLで追尾サイドバーを設定する方法はとても簡単です。
追尾サイドバーのウィジェットエリアに利用できるウィジェットの項目を設置するだけです。

それでは順番に見ていきましょう。

Menu『WordPress管理＞ダッシュボード＞外観＞ウィジェット』をクリックします。

ウィジェット画面で、左側の「利用できるウィジェット」から追尾させたい項目を選び、ウィジェットエリアの『追尾サイドバー』へ追加します。（ドラッグ＆ドロップでも追加できます）

追尾サイドバーに置くならコレ！おすすめウィジェット6選

追尾サイドバーにおすすめのコンテンツ

追尾サイドバーにおすすめのコンテンツをご紹介します。サイトに合わせてチョイスしてみてください。

誘導しやすいリンクやボタン

個人ブログで多い設置コンテンツです。（一般的）

• 人気記事一覧
• 新着記事一覧
• サイト内カテゴリーリンク

ユーザーアクションを促す要素

アフィリエイトサイトに多いコンテンツです。

• 購入・申し込みボタン
• 問い合わせフォーム

エンゲージメントを高める情報

全般的にサイドバーに多く設置しているコンテンツですが、追尾（固定）サイドバーにはあまり見かけません。（参考まで…）

• SNSフォローボタン
• プロフィール・自己紹介

追尾サイドバーを効果的に使うコツ

サイドバーだけではありませんが、一般的にサイト上部と下部に誘導コンテンツがあるとクリック率が上がる傾向にあります。また、注意を引く工夫も重要です。
この2つを踏まえてサイドバーの追尾部に設置するコンテンツを設置しましょう。

コンテンツ配置の優先順位

重要な情報はサイドバーの上部に配置し、スクロールしても読者の目に入りやすい位置に設置しましょう。
プロフィールやCTA、人気記事など“見てもらいたい内容”ほど上に置くことで、固定表示のメリットを最大限に活かせます。
サイドバーは上から順に見られるため、優先度の高い要素から並べることがポイントです。

視覚的に目立たせるデザイン

色やアイコンを上手に使って、サイドバーが埋もれないようにデザインすると効果的です。
ただ目立たせるのではなく、サイト全体のトーンに合わせたアクセントカラーやわかりやすいアイコンを使うことで、重要な情報に視線が届きやすくなります。
過度な装飾は避けつつ、「ひと目で何のブロックか分かる」デザインを意識しましょう。

スクロールを邪魔しない工夫（動きの調整）

モーション効果は控えめに設定し、読者の閲覧を妨げない自然な動きに調整することが大切です。
アニメーションが強すぎたり動きが多すぎると、内容よりも動きに目が奪われてしまいます。
視線誘導として“そっと補助する”程度の軽いフェードインやスライドなど、シンプルな動きを選ぶのが効果的です。

モバイル対応の注意点

モバイルでは追尾サイドバーが適さない場合があるため、必要に応じて非表示設定や軽量化を検討しましょう。
スマホ画面は表示領域が狭く、追尾要素があると読みづらくなることがあります。
SWELLではデバイスごとに表示・非表示を切り替えられるため、PCでは追尾、スマホでは通常表示など、環境に合わせた最適化を行うことが大切です。

---

まとめ！SWELLの追尾サイドバーで回遊率・収益を最大化しよう

SWELLの追尾サイドバーは、スクロールしても画面横に固定される便利な機能です。

プロフィールや人気記事、広告バナーなど「見てもらいたい情報」を常に表示できるため、回遊率アップや収益改善に大きく役立ちます。

設定はとても簡単で、追尾サイドバー用ウィジェットエリアに好きなウィジェットを追加するだけ。
モーション効果や色使いを工夫することで、自然に視線を誘導できます。

ただし、モバイルでは追尾が邪魔になることもあるため、デバイスごとの表示設定を見直すことも大切です。

効果的な配置・適度な装飾・最適な表示設定 を意識すれば、読者に優しく、かつ成果につながるサイドバーを作れます。ぜひ今回の内容を参考に、あなたのブログでも追尾サイドバーを活用してみてください。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／