サイトにアクセスすると、大抵のサイトではサイドバーを設置しています。トップページからカテゴリーページへアクセスしたり、問い合わせフォームから気軽に問い合わせたりなどユーザーにとって利点が多くあります。

ユーザーが使いやすいサイト、見やすいサイトはアクセス数の増加や信頼性の向上につながります。また問い合わせフォームや営業日などをサイドバーに表示させておくことで、クレーム件数の減少やCVRが上がることも期待できます。

ただし、サイドバーはスマートフォンサイトでは見にくくなるため工夫が必要です。

この記事ではサイドバーのメリットとデメリット、スマートフォンサイトに設置する方法について述べています。あわせてサイトの目的ごとに最適なサイドバーの位置と、設置するときの注意にも触れています。

サイドバーとは

サイドバーとはサイトを表示したとき、メインコンテンツの左右どちらかに設置されているナビゲーションを指します。ブログサイトでは主に新着記事やカテゴリー、人気記事などが表示されています。

サイドバーを設置する理由

サイドバーは情報量の多いサイトで特に活躍します。サイトを閲覧しているユーザーにとっては知りたい情報、見たいコンテンツに手軽にアクセスできます。サイトの管理、運営している側にとっては、問い合わせフォームや資料請求など重要な情報にすぐにアクセスできることからクレーム件数の減少が見込めます。

サイドバーのメリット

サイドバーを設置することで得られるメリットは主に3つあります。

これらのことからサイドバーの設置は間接的なSEO効果も期待できます。

ユーザビリティの向上

ユーザーが知りたい情報や見たいコンテンツにアクセスしたいとき、トップページから何度もリンクをたどっていくのは面倒で手間が掛かります。サイドバーがあれば、閲覧しているページを問わず、好きなときに好きなページへアクセスできて便利です。

このように、サイドバーはユーザーがサイトを閲覧するうえでの利便性を向上させることができます。特に扱っているコンテンツの幅が広い、または情報量の多いサイトではサイドバーの有効性が際立ちます。

サイト滞在時間の延長

サイドバーを設置してユーザーが知りたい情報に関連したページやコンテンツにアクセスできるようになると、自然とサイトに滞在する時間は延びていきます。むろんコンテンツの内容が充実していることを前提としていますが、サイドバーもユーザーのニーズを満たすサイトを作るのに役立ちます。

CVRの向上

資料請求や契約、見積もりなどビジネス系のサイトにサイドバーを設置するとCVRの向上が見込めます。

自社のサービスや製品を紹介するサイトを作り、すばらしい仕上がりだとしても問い合わせフォームへのアクセスが複雑だったり、資料請求するための連絡先がわからなかったりすると、ユーザーは関心を失います。

サイドバーに問い合わせフォームを設ける、または資料請求や見積もりページなどへのリンクを貼っておくことでユーザーの関心を損なわずにすみます。

サイドバーのデメリット

サイドバーを設置するデメリットは主に3つあります。

サイドバーを設置する前にサイトデザインとのバランスを検討してください。

サイドバーの主張が強くなる

サイドバーを設置すると、どうしてもメインコンテンツを表示する領域が圧迫されます。これによってテキストや画像の幅が狭まり、非常に見にくくなってしまいます。これはサイドバーの幅や色をサイトデザインと合わせることで対応できます。

画面が煩雑になり見にくくなる

便利でアクセスしやすくなるからといって、サイドバーにあらゆるコンテンツへのリンクやプラグインを表示させればよいというわけではありません。かえって画面が煩雑になり、ユーザーにとって見にくくなります。

また、メインコンテンツを閲覧しているときも内容に集中できなくなり、結果としてユーザビリティの低下につながります。見せるべきはあくまでメインコンテンツであり、サイドバーは情報にアクセスしやすくすることが目的だということを覚えておいてください。

スマートフォンサイトでは見えにくい

サイドバーはパソコンでサイトを閲覧するときには便利ですが、スマートフォンは画面のサイズ上サイドバーが見えにくいデメリットがあります。

スマートフォン用サイトでサイドバーを設置するときは、ユーザーにとって閲覧の邪魔にならないよう配慮したうえで設置する場所を検討してください。スマートフォン用サイトでサイドバーを設置する方法は後述します。

サイドバーをスマートフォンサイトに合わせて設置する方法

サイドバーをスマートフォンサイトに合わせて設置するときは、4つの方法が検討できます。

実際に設置するサイトとのバランスを見て、最適な位置をテストしてください。

ハンバーガーメニューを使う

スマートフォンサイトではハンバーガーメニューを使うことをおすすめします。ボタンをクリックするとサイドバーの内容が表示されるため、小さな画面の端末でも問題なくサイトを閲覧できます。

またユーザーの意思で表示と非表示を切り替えられるため、テキストを読むときに邪魔になりません。

さらにハンバーガーメニュー以外にも複数の種類があります。

これらに動きをつけて遊び心のあるデザインを作ることもできます。

表示する内容を変える

サイトとスマートフォンサイトで、サイドバーに表示する内容を変えて対応します。例えばサイトでサイドバーに表示する内容が4つあるとして、スマートフォンサイトでは3つか2つに絞って表示させます。

このとき重要な情報を省略しては意味がありません。特にビジネス系のサイトではCVRを重視するため、サイドバーに表示する内容を吟味してください。

こうすることで必要な情報にのみアクセスできる導線が作れるほか、スマートフォンから手軽に問い合わせや資料請求ができるとしてCVRの向上が見込めます。

ヘッダーまたはフッターに固定する

サイドバーの内容をヘッダーかフッターに固定する方法です。こうすることでメインコンテンツの邪魔にならず、なおかつサイドバーの内容をユーザーに認識させることができます。

ただしサイドバーの内容をすべてヘッダーやフッターに集中させると、かえってメインコンテンツを圧迫したりCVR向上につながらなくなったりします。CVRの向上を期待するなら、cssを使ってスクロールに合わせてサイドバーが追従するようにしてください。

またサイドバーに画像を表示させているときスマートフォンで閲覧すると画像が見にくくなったり、間延びした印象になったりします。画像をリサイズするか複数列に並べて表示させるかして対策してください。

もしくはヘッダーとフッターそれぞれで、サイドバーの内容を分散して表示させることも可能です。

スライドインを使う

ボタンをクリックするとサイドバーがアニメーションにより、スライドして表示されます。イメージとしては障子を開閉する動きです。サイドバーを表示させるときにちょっとした仕掛けとしてサイトに動きをつけることもできます。

またスライドするときのアニメーションも任意でデザインできるため、クリエイティブまたはスタイリッシュなサイトを演出したいときにも活用できます。

サイドバーはサイトの目的に合わせて設置する

サイドバーはどんなサイトにも設置できますが、設置の仕方はサイトで扱っているコンテンツやテーマによって異なります。ここでは2つに分けて説明します。

ビジネス系とクリエイティブ系では扱っているものと目的が違います。

ビジネス系

ビジネス系のサイトでは自社製品やサービスの認知や利用、CVが目的です。サイドバーの内容としては宿泊施設、飲食店のサイトなら予約ページへのリンクを貼ればユーザーもスムーズに手続きできます。この場合は休業日や定休日を表示させておくとより親切です。

もしSNSの企業アカウントがあるなら、利用しているSNSアイコンを使ってリンクを貼っておくこともできます。

サイドバーを設置する場所はコンテンツの邪魔にならないように、画面上部やスライドインを使うことをおすすめします。

クリエイティブ系

クリエイティブ系のサイトでは、映像や画像、人物などの作品を見せて商品としています。そのためサイドバーはそれらの邪魔にならないように、画面下部に表示させたほうが無難です。

ユーザーにとって、画廊や展示会に訪れたときに近いサイト作りを意識してください。

また制作を依頼したいクライアントやファンからのメッセージを受け取れるよう、メールフォームを設置できます。クリエイターや作品をより広く認知してもらうために、SNSのシェアリンクを表示させるのも1つの手です。

サイドバーを活用している具体例

大手企業のサイトではサイドバーを有効に活用しています。具体的な例を3つ挙げます。

YouTube

YouTubeではトップページでは左側、動画視聴ページでは右側にサイドバーを表示させています。

トップページのサイドバーでは動画のカテゴリーやユーザー別のおすすめの動画、履歴などを表示していて、視聴する動画を選びやすくしています。いわばカタログ的な役割といえます。

動画視聴ページのサイドバーでは、視聴している動画に関連している動画を表示させています。これでユーザーは動画を見ながら次に見たい動画を選べるようになっており、結果として滞在時間の延長に成功しています。

Yahoo!Japanニュース

Yahoo!Japanニュースではトップページのサイドバーにアクセスの多いニュース、コメントの多いニュースのほか動画や雑誌も同様の形式で表示しています。

特定のニュースのページにアクセスすると、そのニュースと同じカテゴリー内のニュースに変わるうえアクセスランキングも同カテゴリー内のものに変わります。

すべてのサイドバーに共通しているのは、サイドバー下部に「ページ上部へ戻る」ボタンが設置されていることです。ニュースを読み終わったあとにページ上部へスクロールする手間を省くことで、ユーザーの利便性を高めています。

Amazon

Amazonのサイドバーは商品を探すページでは左側に表示されていて、商品個別のページでは右側に表示されます。

Amazonのサイドバーは商品を探すうえであらゆる視点から探すことができ、ユーザーは商品を多角的に判断できます。また、商品個別のページでは右側に購入手続きに入るためのサイドバーが設置されています。

さらにこのサイドバーには通常購入とセール価格での購入（または定期購入）、中古品の購入といったように購入スタイルまでユーザーが選択できるようにしています。

同じ商品を持っているならマーケットプレイスに出品できることを知らせるボタンもあり、徹底的にユーザーの利便性向上を意識したECサイトといえます。

サイドバー設置の注意点

サイドバーを設置するときに気をつけたいポイントが2つあります。

サイトにサイドバーを設置するときは全体のバランスを見ながら、ベストな形を模索してください。

サイドバーはサイトによって最適な位置が変わる

サイドバーはサイトによって最適な位置が変わります。それはサイトが扱うテーマやコンセプトによって、ユーザーが求めるものが異なるためです。ここでは2つに分けて考えます。

一般的なサイトとはブログやWEBサイトを指します。こうしたサイトではユーザーがメインコンテンツに集中できるようにすることが大切です。そのためサイドバーも主張しすぎず、画面をうるさくしないようにする必要があります。

このように一般的なサイトでは、ユーザーが求める情報への案内としてサイドバーが使われるため右側に設置されています。

ECサイトでは商品を探しやすくするために左側に設置されています。例えば、手袋というカテゴリーのなかには男性用、女性用、子供用があります。さらに手袋の形や素材、価格帯などユーザーによって手袋に求めるものは異なります。

1つの商品カテゴリーのなかにある、さまざまなニーズに応えるためECサイトではサイドバーを左側に設置しています。

あえて設置しない選択もある

情報量が多くなく、なおかつナビゲーションバーですべてのコンテンツへアクセスできるようなサイトの場合、無理にサイドバーを設置する必要はありません。

このようなサイトにサイドバーを設置すると、かえって全体のバランスが崩れたりコンテンツが見にくくなったりします。さらにナビゲーションバーにあるメニューとサイドバーの内容が重複することもあり、本末転倒です。

まずは、自社サイトの情報量や目的を鑑みてからサイドバーの必要性を検討してください。

まとめ

サイドバーとはメインコンテンツの左右どちらかに設置されているナビゲーションです。ユーザーが知りたい情報に手軽にアクセスできるように、またはCVR向上のために重要な情報を表示させています。サイドバーはユーザビリティの向上や滞在時間の延長に役立ちますが、メインコンテンツを圧迫したり画面が見にくくなったりとデメリットもあります。サイドバーを設置するときはアピールしたいものが製品やサービスか、作品か人物かで設置する場所や表示する内容が異なります。ただし、情報が多くないサイトでは無理にサイドバーを設置する必要はありません。かえって全体のバランスが崩れ、せっかくのコンテンツが見にくくなります。

 

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る

 

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。