サイドバー
Web ページの本文の左右(主に右側)に配置される、縦長の補助エリアのことです。ブログやオウンドメディアでよく使われ、カテゴリ一覧、人気記事、検索窓、バナーなどを並べます(共通テンプレートで管理されるのが一般的)。
実務の鉄則：スマホ時代は「回遊の補助」に徹する
サイドバーはあくまで主役(本文)をサポートするものです。特に現代のスマホ閲覧(レスポンシブデザイン(レスポンシブ))では、サイドバーの内容は「本文の一番下」に回り込んで表示されるため、PC 時代ほど読者の目に入りません。本当に CV(目的達成)や回遊に効く要素だけを厳選して置くのが基本姿勢です。近年は読者を本文に集中させるため、あえてサイドバーを置かない「1 カラム設計」(カラム)も主流になっています。
初心者が陥りやすい罠(落とし穴)
共通テンプレートで全ページに表示されることが多いため、一度エラーが起きるとサイト全体に悪影響が出ます。
- スマホでの「スクロール地獄」：PC 画面の感覚でサイドバーに情報を詰め込みすぎた結果、スマホで見たときに本文の下に長大な要素が連なり、フッター(最下部)にたどり着けない。
- 広告だらけの印象悪化：バナーを貼りすぎた結果、ユーザーに「宣伝ばかりのサイト」という印象を与え、かえって離脱を招く。
- 負の遺産の放置：終わったキャンペーンのバナーが残り続けたり、リンク切れが発生したまま放置されている。
言葉をよく利用する人
- Web 担当者(発注側)
- デザイナー
- コーダー / フロントエンドエンジニア
- ディレクター
- SEO 担当者
会話上での使用例
ブログのサイドバーに何を載せるか、デザイナーに相談する場面
-
Web担当者
ブログのサイドバーには、何を載せるのがいいでしょうか。
-
デザイナー
回遊とCVに効くものだけに絞りましょう。人気記事とカテゴリ、それに問い合わせ導線の3つで十分です。バナーを並べすぎると広告に見えて、かえって逆効果になります。
-
Web担当者
なるほど、欲張らずに厳選します。その3つでお願いします。
スマホでサイドバーが長く続いて読みづらいと相談する場面
-
Web担当者
スマホで見るとサイドバーが本文の下に長く続いて、読みづらく感じます。
-
コーダー
モバイルでは主要な要素だけ残して折りたたむか、思い切って1カラムにしてしまうのがおすすめです。本文への集中を優先しましょう。
-
Web担当者
では1カラムで検討してみたいです。見え方を一度確認させてください。