SEO対策なら株式会社ペコプラ > Webサイト制作 > サイドバーとは？サイドバーを設置するメリットと書き方

サイドバーとは？サイドバーを設置するメリットと書き方

Webサイト制作

2021.08.23

「サイドバーはWEBサイトにとって本当に必要なのか」、最近、サイトの運営者には今まで疑問を感じなかったこの点に問題提起をする人がでてきました。全てのサイトになくてはならないものという訳ではないですが、自社のサイトに期待する効果を得るにはサイドバーが必要な存在になる場合があります。

であればどのようなサイドバーが有効に活用されるのか。今回は有益なサイドバーの設置や運営の方法をご紹介します。

サイドバーとは

サイドバーとはサイトの画面の横に設置されたメニューや広告のことを言います。多くの情報を扱っているサイトを訪れるユーザーにとっては情報迷子にならずに知りたい内容にたどりつくことができる便利なツールです。それではサイドバーを設置することでサイト運営者、ユーザー双方にどのような効果が生まれるのでしょうか。

ユーザーにとってのサイドバーとは

サイドバーはユーザーにとって知りたい情報を手早く得ることができるありがたいツールです。見たいサイトにすぐに移動できるだけでなく、例えば通販サイトを利用する際にサイドバーを利用して「サイズ」「色」「材質」などを絞り込むことで膨大な商品の中から欲しい商品を絞り込むことができます。

サイト運営者にとってのサイドバーとは

サイトの運営者にとってはどうなのでしょう。自身が運営しているサイトが何を目的にしているのか、ユーザー目線を重視するのかによってサイドバーの必要性は変わってきます。

また現在、サイドバーの存在を疑問視するサイト運営者もおり、ブログなどではサイドバーを無くしたサイトを作成している運営者もいます。実際にあれもこれもとサイドバーを設置すればサイトが煩雑で重要なポイントがわかりにくい画面となり逆効果になる可能性あります。

サイドバーは絞りましょう

それでは必要なサイドバーとはどのようなものでしょうか。ユーザーが必要なページに辿り着くというユーザー目線も必要ですが、サイト運営者にとって実際の収益につながることが大切です。通販サイトでサイズなどが絞れるというのはその典型ですが、その他にはメルマガや会員登録フォームへの誘導などユーザーが何度でも訪れるサイトにするためのサイドバーの設置はサイト運営者にとって発展的なものと言えます。

サイドバーを設置するメリットデメリット

まずはサイドバーのメリット、デメリットを検証してまいりましょう。

サイドバーを設置するメリット

サイドバーを設置するとユーザーはサイドバーから知りたい情報に簡単に辿り着くことができます。ユーザーは一目で何のためのサイトかわからなければすぐに離れてしまいます。１つの画面でユーザーの次の興味を引くことができ、長く自社のサイトに滞在してもらうためにもサイドバーは大切なものです。

また問い合わせのフォームなどと合わせることによってコンバージョン率（閲覧したユーザーが商品購入、資料請求など収益に結び付く行動をすること）を上げることができます。

サイドバーを設置するデメリット

デメリットの起こる原因は簡単に言ってしまえば「乱発しすぎ」。あのページもこのページもと訪問してもらいたいあまりにサイドバーを貼りすぎて画面が見にくく煩雑になってしまうこともあります。

またサイドバーの枠が画面で主張をすればするほどメインの画面に目がいかなくなるなり、何をアピールしたいのかわからないまま次のページに移動してしまうこともあります。

サイドバーのデザイン例

サイドバーとは言っても色々な例があります。それぞれ自社のサイトがどのような目的をもっているかによってサイドバーの設置の理由も変わってまいります。ここではデザインの一例を案内いたします。

ショッピングサイト

サイドバーを利用してユーザーが情報を絞り込み、膨大な欲しい商品にいち早く辿り着くための重要なツールになります。ショッピングサイトではあまりにも多くの商品が出てくるので利用するユーザーも多いはずです。

ショッピングサイトのサイドバー例(楽天)

YOUTUBE

YOUTUBEでは選んだ動画のページの右に関連の動画と広告が配置されるようになっており、ユーザーが続けて興味のある動画を視聴しやすく、滞在時間をより長くすることができます。

ユーチューブのサイドバーの例

ニュースサイト

一例としてYahoo!のニュースサイトでは「経済」「エンタメ」「スポーツ」トップ画面で興味を持った話題のページを訪れたユーザーに対してのサイドバーは広告と興味のあるカテゴリを設置しています。またその話題を話題を閲覧やコメントの多いランキングなどの方法で設置するということで新たな価値を提供しています。

ニュースサイトのサイドバーの例(yahoo)

企業サイト

小売りをする企業のサイトは様々な人が訪れます。商品の情報が欲しい人はもちろん、キャンペーンに興味のある人、株主、就活とそれぞれ目的が大きく違うユーザーが訪れます。ある特定の情報をじっくりと閲覧したい人が情報迷子にならないためにもサイドバーで誘導をすることが必要です。

またページの邪魔にならないよう通常は小さく表示し、マウスをあてるとサイドバーが見られるような仕組みを取り入れるサイトもあります。

企業サイトのサイドバーの例(グリコの例)

サイドバーの書き方

それではサイドバーにはどのような書き方があるのでしょうか。htmlとcssでの書き方をご紹介します。

見本のサイトの画面は、下記のテキストからできいます。

htmlでの書き方

HtmlはWEBサイトの基礎を作るものとなります。ここではhtmlの書き方のサンプルをご紹介いたします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
	<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
	<meta name="generator" content="HeTeMuLu Creator Ver.1.10a">
	<title></title>
</head>

<body bgcolor="#ffffcc" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080" style="text-align: center;">

<div style="background-color: #ffffff; padding-top: 20px; margin-left: auto; margin-right: auto; padding-bottom: 20px; width: 600px;">

<div style="margin-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;text-shadow: 10px 10px 10px #80FF52;">
<h1>楽しい休日</h1></div>

<div style="border-left-width: 1px; border-left-style: solid; border-left-color: #000000; margin-bottom: 20px; width: 400px; float: right;">
こんにちは<br>
●●●のブログにようこそ<br>

<img src="無題.png" alt="" width="300" height="406"></div>

<div style="text-align: left; margin-left: 20px; margin-right: 20px;">

<h2>プロフィール</h2>

<p><a href="html2.html">アクセス</a></p>

私は<br>
●●●と申します。<br></div>

<div style="border-top-width: 1px; border-top-style: solid; border-top-color: #000000;margin-left:20px;margin-right:20px; clear: both;">
よろしくね♪

</div>

</div>

</body>

</html>

cssでの書き方

Cssはhtmlで作成されたものにデザインをつけていくものです。Htmlでもフォントのサイズや色は変えることができますが、cssを使用するとさらに魅力的なサイトを作ることができます。それではcssの書き方のサンプルをご紹介いたします。

SNSも同時に活用する

TwitterやInstagramなどのSNSに誘導してさらに深くユーザーと接点を求めるサイドバーもあります。サイトを見て、興味を持ったからと言ってわざわざSNSで該当のアカウントを探して登録をするユーザーは多くありませんが、運営者にとってはユーザーを逃がさないためにもSNSの登録は促したいものです。サイドバーで登録を促すことにより、常時、ユーザーに知らせたい情報を送ることができます。