サイドバーとは?Webサイトでの役割と置く情報、スマホでの扱い方を解説

サイドバーの基本

まずは、サイドバーとは何を指すのか、どんな役割があるのか、左右どちらに置くのかを押さえましょう。

サイドバーとは

サイドバーとは、Webページのメインコンテンツ(そのページでいちばん読んでほしい本文や商品の情報)の横に置かれる、補助的な情報をまとめた細長い領域のことです。

カテゴリの一覧、人気記事、運営者のプロフィール、検索窓などが置かれることがよくあります。

サイドバーのあるページは、画面を縦に2つの列に分けた「2カラム」のレイアウトになります(カラムとは、画面を縦に区切った列のことです)。
サイドバーがなく、列が1つだけのレイアウトは「1カラム」と呼びます。

どちらのパターンでも、メインコンテンツの列を広く、サイドバーの列を狭くしているのがポイントです。

ページの主役はあくまでメインコンテンツで、サイドバーはそれを支える脇役だからです(主役と脇役の考え方は主役と脇役とは?で解説しています)。

サイドバーの役割

サイドバーの役割は、本文の流れを邪魔せずに、補助的な情報やほかのページへの道筋を用意することです。

カテゴリ一覧や人気記事を本文の途中に何度も挟むと、読んでいる流れが途切れてしまいますが、横の列に分けておけば、必要な人だけが見に行けます。

• サイト内を回ってもらう
  人気記事やカテゴリの一覧を置き、読み終えた人がほかのページへ移りやすくします。
  このように、サイトの中でページからページへ移動してもらうことを「回遊」と呼びます。
  ほかのページも読んでもらうと、サイトのことをより深く知ってもらえ、また訪れてもらうきっかけにもなります。
• 探す道具を置く
  検索窓や、ECサイトの価格・色などの絞り込み条件を置き、目的のページや商品を探しやすくします。
• 補足情報を見せる
  運営者のプロフィールやお知らせなど、本文とは別に知っておいてほしい情報を見せます。

左右どちらに置くか

サイドバーを左右どちらに置くかは、サイドバーを「本文の後に見るもの」にするか、「本文より先に使うもの」にするかで決めます。

横書きのページは左から右へ読み進めることが多いため、左に置いたものほど先に目に入りやすいからです(視線の動き方は視線誘導とは?で解説しています)。

ブログやニュースサイトのように本文を読んでもらうことが目的なら、本文を左に置き、サイドバーは右に置く形がよく見られます。

一方、ECサイトの商品一覧や、ソフトウェアの説明書のように、まず条件を選んだり目次から項目を探したりするサイトでは、サイドバーを左に置く形もよく見られます。

どちらが正解というものではないので、サイドバーの中身が「先に使うもの」か「後で見るもの」かで選びましょう。

サイドバーに置く情報と作り方

ここからは、サイドバーに何を置き、どう見せればよいかを見ていきます。

ポイントは「サイトに合った情報を選ぶ」「本文より目立たせない」「上から順に優先順位をつける」の3つです。

サイトの種類に合った情報を選ぶ

サイドバーに置く情報は、そのサイトを見る人が「本文の次に何をしたいか」から選びます。

サイトの種類によって、見る人の目的が違うためです。

サイトの種類	見る人の次の行動	サイドバーに置く情報の例
ブログ・メディア	ほかの記事も読みたい	カテゴリ一覧、人気記事、検索窓、運営者のプロフィール
ECサイト(ネットショップ)	条件に合う商品を探したい	価格帯・カテゴリ・色などの絞り込み条件
説明書・ヘルプのサイト	知りたい項目へ移りたい	全体の目次、ページ内の見出しの一覧
管理画面・Webアプリ	別の機能の画面へ移りたい	機能ごとのメニュー

「よそのサイトにあるから」と何となく置くのではなく、見る人の次の行動に役立つものだけを選びましょう。

本文より目立たせない

サイドバーは、色や大きさを本文より控えめにし、本文より目立たないようにします。

サイドバーに派手な色の広告や大きな画像を並べると、視線が横に引っぱられ、本文を落ち着いて読めなくなるためです。

NGの見本では、サイドバーの赤・黄・青の枠が本文よりも強く目を引くため、記事のタイトルより先にそちらを見てしまいます。

OKの見本では、サイドバーを淡い背景と控えめな文字にまとめたので、まず本文に目が行き、読み終えてから人気記事やカテゴリに気づける順番になっています。

どうしてもサイドバーで目立たせたいものがある場合も、強い色を使うのは1か所だけに絞りましょう(目立たせたい要素の周りを空ける考え方は要素を目立たせる余白とは?で解説しています)。

上から順に優先順位をつけて詰め込まない

サイドバーの中身は、いちばん見てほしいものを上に置き、数も絞ります。

サイドバーは縦に長く伸びるので、下のほうに置いたものほど見られにくく、項目を増やすほど一つひとつが埋もれていくためです。

たとえばブログなら、「検索窓→人気記事→カテゴリ」のように、見る人がよく使うものから並べ、ほとんど使われない項目は思い切って外します。

個人のブログなら、どんな人が書いているかが分かるプロフィールを上のほうに置くと、読む人が安心して読み進められます。

項目と項目の間は、項目の中の行同士の間隔より広く空けると、どこからどこまでが1つのまとまりか分かりやすくなります(この考え方は近接の原則とは?で解説しています)。

幅はメインコンテンツより狭くする

サイドバーの幅は、メインコンテンツの列よりはっきり狭くします。

サイドバーが広すぎると本文の列が狭くなり、1行に入る文字数が減って読みにくくなるうえ、主役と脇役の差もあいまいになるためです。

決まった比率はありませんが、たとえば画面を12等分した12カラムグリッド(方眼紙の目盛りのように、レイアウトの基準になる縦の線)を使う場合、メインに8つ分・サイドバーに4つ分、あるいは9つ分と3つ分を割り当てる、といった分け方があります(グリッドの基本はグリッドと余白の関係とは?で解説しています)。

スマホでのサイドバーの扱い方

スマートフォンの画面は横幅が狭く、本文の横にサイドバーを並べる余裕がありません。

そのため、スマホではサイドバーの中身をどこへ移すかを、デザインの段階で決めておきます。

パソコンで横に並んでいた本文とサイドバーは、スマホでは縦1列に並べ直すのが基本です(ページ全体の並べ直し方はWebページの基本構造とは?で解説しています)。

この並べ直しは自動で起きるのではなく、作る人がCSSやツールの設定で指定するので、サイドバーの中身ごとにどこへ移すかを先に決めておきましょう。

中身ごとに移す先を決める

スマホでは、サイドバーをまるごと同じ場所に移すのではなく、中身ごとに「本文の下に移す」「メニューの中にしまう」「ボタンにまとめる」のどれにするかを決めます。

サイドバーの中身には、本文を読み終えてから見るものと、先に使いたいものが混ざっているためです。

見本Aは、ブログの人気記事やカテゴリのように「読み終えてから見るもの」を、本文の下にまとめて移した形です。

見本Bは、説明書のサイトの目次のように「読んでいる途中でもすぐ開きたいもの」を、ヘッダーのメニューボタンの中にしまった形です。

見本Cは、ECサイトの絞り込み条件のように「先に使いたいが、場所を取るもの」を、「絞り込み」ボタンにまとめ、押したときだけ条件の一覧を開く形です。

先に使いたいものを本文の下に移してしまうと、長い一覧をスクロールし終えるまで見つからなくなるので注意しましょう。

コーディングでサイドバーを作る

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る場合は、「PCでは横に並べ、スマホでは本文の下に積む」という切り替えをデザインで決めておけば十分です。

WordPressのテーマや、STUDIO・Wixのようなノーコードツール(コードを書かずにサイトを作れるサービス)では、管理画面の設定(WordPressなら「ウィジェット」)でサイドバーの中身を選べ、スマホでは本文の下に移るように作られているものもよくあります。

HTMLでは、サイドバーにはaside要素を使うのが一般的で、MDNでも「文書のメインコンテンツと間接的な関係しか持っていない部分」を表し、サイドバーによく使われると説明されています(MDN: aside要素)。

次の例は、スマホでは本文とサイドバーを縦に積み、画面の幅が768px以上のときだけ横に並べる指定です。

/* HTMLは <div class="layout"><main>…</main><aside>…</aside></div> */
.layout {
  display: grid;                     /* グリッドにする(列を指定しないスマホでは縦に積まれる) */
  gap: 32px;                         /* 本文とサイドバーの間のすき間 */
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 2fr 1fr;  /* PC:横幅を本文2:サイドバー1に分けて横に並べる */
  }
}

frは、使える横幅を分け合う割合を表す単位で、2fr 1frなら横幅を2対1に分けます。

768pxや2対1という数値は一例なので、デザインで決めた画面幅と比率に合わせて書き換えてください。

なお、スクロールしてもサイドバーの一部を画面に残したいときは、CSSのposition: stickyを使う方法があります(MDN: position)。
Webサイトのヘッダーとは?で紹介した固定ヘッダーと同じ指定で、スクロールしてもその部分が画面に貼り付いたまま表示されます。

実践のポイント

サイドバーを作るときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 思いつく情報をすべてサイドバーに詰め込んでしまうことがあります。
  項目が多いほど一つひとつが見られなくなるので、見る人の次の行動に役立つものだけに絞りましょう。
• サイドバーの広告や画像が派手で、本文より目立ってしまうことがあります。
  主役と脇役が逆転しないよう、色や大きさを控えめにしましょう。
• スマホでの扱いを決めないままPCのデザインだけを作り、実装の段階で慌てて配置を考えることがあります。
  デザインの段階で、サイドバーの中身ごとにスマホでの移し先を決めておきましょう。
• サイドバーを広く取りすぎて、本文の列が狭くなってしまうことがあります。
  本文の1行が短くなりすぎていないか、実際の文章を入れて確かめましょう(読みやすい横幅はコンテンツ幅とは?で解説しています)。

よくある質問

• Q. サイドバーは必ず作ったほうがいい?
  A. 必ずではありません。
  本文に集中してほしい記事や、1つの行動に絞りたいLP(ランディングページ:広告などから訪れた人に1つの行動を促す縦長のページ)では、サイドバーを置かない1カラムのレイアウトもよく使われます。
  サイドバーに置きたい情報があるかどうかから考えましょう。
• Q. サイドバーとヘッダーのメニューは、何が違う?
  A. ヘッダーのメニュー(グローバルナビ)は、サイト全体の主要なページへの入り口で、どのページでも同じものを置くのが基本です。
  サイドバーは、そのページやカテゴリに関係する補助的な情報を置く場所で、ページの種類によって中身を変えることもあります。
• Q. サイドバーに広告を置いてもいい?
  A. 置いてもかまいません。
  ただし、広告が本文より目立つと読む人の邪魔になるので、数を絞り、本文を読むときに視界の邪魔にならない位置や大きさにしましょう。

まとめ

サイドバーとは、メインコンテンツの横に置く補助的な情報の領域で、本文の流れを邪魔せずに、ほかのページへの道筋や探す道具を用意する役割があります。

サイトに合った情報だけを選び、本文より控えめに見せ、スマホでは中身ごとに「本文の下」「メニューの中」「ボタン」のどこへ移すかを決めることがポイントです。

まずはよく見るブログやネットショップを開き、サイドバーに何が置かれているか、スマホではそれがどこへ移っているかを見比べてみましょう。