ウェブサイトのサイドバーは、訪問者がサイト内を移動する際に補足的な情報を提供する重要なエリアです。特に、サイドバーには人気のある記事やカテゴリ、広告、プロモーション、検索ボックスなどが配置されており、これらは訪問者の興味を引き、ウェブサイトでの滞在時間を延ばしたり、コンバージョンを促進したりする役割を果たします。
その中でも、固定表示（追尾型サイドバー）は、サイドバーがスクロールに合わせて画面上に固定され、ユーザーがページをスクロールしても常に表示される機能です。この方法を取り入れることで、重要なウィジェットを常に目に触れる位置に保ち、クリック率やコンバージョン率を高めることができます。
今回は、「Cocoon」テーマを使用して、サイドバーを固定表示（追尾型サイドバー）にする方法とそのメリットについて解説します。
固定表示（追尾型サイドバー）の概要
追尾型サイドバーとは、ユーザーがページをスクロールした際に、サイドバーのウィジェットが画面上で常に表示されるようにする機能です。通常のサイドバーは、ページを下にスクロールすると一緒に画面外に隠れてしまいますが、追尾型サイドバーは画面内に固定され、スクロールしても常に表示されます。
これにより、ユーザーはページのコンテンツを読み進めながらも、サイドバー内の重要な情報やウィジェット（例えば、人気記事や広告、CTAボタンなど）にアクセスしやすくなります。
サイドバー固定表示のメリット
- 視認性の向上
固定表示されたサイドバーは、常に画面に表示されるため、訪問者はサイドバーのウィジェットを常に目にすることができます。これにより、重要な情報や広告、リンクなどが目立ち、クリックされる可能性が高くなります。 - クリック率（CTR）の向上
サイドバーに配置したウィジェット、特にCTA（Call to Action）ボタンや広告リンクなどは、固定表示によって繰り返し目に触れるため、クリック率を高める効果があります。訪問者がスクロールしても、常にアクションを促す要素が目に入る状態にできます。 - コンバージョン率の向上
サイドバーにプロモーション情報や商品、サービスの紹介を固定表示することで、訪問者がそれらにアクセスしやすくなります。特に、サイドバーにCTAボタン（「今すぐ購入」「詳細はこちら」など）を設置しておくと、コンバージョン（購入や会員登録など）を促進することができます。 - ユーザー体験（UX）の向上
サイト内の重要なリンクやウィジェットが常に目に見える状態で表示されるため、ユーザーはページを移動するたびに探し回る必要がなく、スムーズにサイトを利用できます。特にモバイルユーザーにとっては、スクロール操作中にアクセス可能な位置に情報があると、より便利です。 - モバイル対応
サイドバーの固定表示は、デスクトップだけでなくモバイルにも対応させることが可能です。モバイル端末でスクロールしている際も、サイドバーが固定されることで、ユーザーにとって使いやすいインターフェースを提供できます。
Cocoonテーマでサイドバーの固定表示（追尾型サイドバー）を設定する方法
「Cocoon」テーマでは、サイドバーの固定表示（追尾型サイドバー）を簡単に設定できます。以下の手順で、サイドバーを固定表示させる方法を解説します。
1. サイドバーを有効化する
まず、サイドバーを表示するためには、Cocoonテーマの設定でサイドバーを有効にしておく必要があります。
- WordPressダッシュボードにログイン
ダッシュボードにログインし、「外観」→「ウィジェット」をクリックします。 - サイドバーのウィジェットを配置
「サイドバー」エリアにウィジェットを追加します。例えば、人気記事、アーカイブ、カスタムHTMLウィジェット、広告バナー、検索フォームなどを追加します。
2. サイドバー固定表示を有効にする
次に、Cocoonテーマでサイドバーを固定表示するための設定を行います。
- Cocoon設定を開く
ダッシュボードの「Cocoon設定」→「デザイン設定」を開きます。 - サイドバー設定を確認
「サイドバー設定」内に、「サイドバー固定表示」の項目があります。ここで、「サイドバーを固定表示する」というオプションを有効にします。 - 設定を保存
オプションを有効にしたら、「変更を保存」ボタンをクリックして設定を保存します。
これで、サイドバーがスクロールに合わせて固定表示されるようになります。
3. 固定表示されるサイドバーのデザインを調整する
サイドバーの固定表示を有効にした後、デザインや見た目を調整することもできます。
- Cocoon設定の「デザイン設定」から調整
「Cocoon設定」→「デザイン設定」→「サイドバー」の項目で、サイドバーの幅や背景色、文字色などを変更できます。固定表示がより目立つように、デザインを調整しましょう。 - CSSで微調整
より詳細なデザインや挙動を調整したい場合、カスタムCSSを使って、サイドバーが画面上部や下部で止まる位置やアニメーション効果を追加することができます。
例えば、サイドバーがスクロールするときに滑らかに追従するように、以下のようなCSSコードを追加できます：
#sidebar {
position: -webkit-sticky; /* Safari用 */
position: sticky;
top: 20px; /* スクロールしてきたときに固定される位置 */
}
4. モバイル対応の調整
モバイル端末での表示も重要です。サイドバーを固定表示する場合、モバイル端末でも正しく表示されるように調整を行います。
- モバイル向けの固定表示を無効にする
モバイル端末では、サイドバーが画面を圧迫しないように、固定表示を無効にする場合があります。この設定は「Cocoon設定」→「モバイル設定」から変更できます。 - タッチスクリーンに配慮したデザイン
モバイルデバイスでは、サイドバーのウィジェットがタッチ操作に最適化されているか確認しましょう。ボタンやリンクのサイズ、間隔が十分に大きいことを確認します。
追尾型サイドバーを活用するためのポイント
- 重要なウィジェットを優先表示
サイドバーに表示するウィジェットは、重要な情報やCTA（行動を促すボタン）を優先して配置しましょう。例えば、特別なキャンペーン、人気記事、サービス紹介、購読フォームなどです。 - 適切なサイズと位置に調整
サイドバーがあまりに大きすぎたり、画面を圧迫しすぎると、ユーザーの体験を損なうことがあります。適切な幅に設定し、内容が整理された状態を保ちましょう。 - モバイル対応を考慮する
モバイル端末での表示にも注意を払い、サイドバーの内容が視覚的に圧迫されないように、柔軟に調整することが大切です。