理想的なサイドバーのデザインとは？設置の作り方や注意点を解説

サイドバーとは？

サイドバーとは、webサイトの右端や左端に配置された操作メニューを指します。メインのページに掲載されている情報とは別に、補助的に操作効率を上げる目的で使われます。

サイドバーの使用目的はwebサイトごとに異なりますが、メニューの選択項目の一覧やコンテンツカテゴリーなどが一般的です。

サイドバーがあることで、ユーザーがwebサイト上を大きく移動することなく目的のページに到達できます。

サイドバーデザインの種類

サイドバーをどこに設置するかは、サイドバーにどのような機能を含めるかにより異なります。設置場所の選択肢は、以下の3つです。

右サイドバー

右サイドバーは、画面全体に向かって右側に位置するサイドバーです。右サイドバーには、優先度は高くないがユーザーの回遊性を高めるためにアピールしたい内容を組み込むとよいでしょう。

webサイトを閲覧するユーザーは無意識かつ決まった法則で視線を移動しています。一般的には左から右に視線が動くため、左側のコンテンツに比べると優先度が低くなります。

左サイドバー

左サイドバーは、右サイドバーよりもユーザーの視線が速く到達する可能性があります。ユーザーを誘導したい内容を含めるとクリック誘発に効果的です。

とくにECサイトではユーザーに商品群を効率的に伝えるため、左側に商品カテゴリのリストを表示する傾向にあります。

両側サイドバー

両側サイドバーは、右と左の両側にサイドバーを設置することを指します。右サイドバーと左サイドバーのそれぞれの特徴を活かし、目的別にバーを活用できます。

両側サイドバーは1画面でユーザーに与えられる情報が増える一方で、メイン画面へのアイキャッチが散乱する可能性があります。設置の際は情報量のコントロールとデザインのバランスに注意が必要です。

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

サイドバー設置は、目的と種類によって見た目や効果に差が出る要素です。効果的に設置できれば、以下の4つのメリットをもたらします。

Webサイトの中で迷子にならない

サイドバーにカテゴリを設置しておけば、他のページに飛んでしまったあとでもすぐに元の場所に戻れます。

サイドバーはwebサイトの回遊率を上げ、離脱を防ぐ効果があります。メインページのみのwebサイトでは、さまざまなページに興味を持って見ているうちにほしかった情報を見失ってしまい、離脱につながるためです。

目を惹きやすい

サイドバーがあると、 知りたいと思っていた情報が常に目視範囲にあり、安心感につながります。ECサイトでは、商品に興味を惹かれたユーザーが購入に至るためには自身に必要な商材にたどり着く必要があります。

サイドバーは、商品カテゴリや販売情報など購入に直結する情報を常にユーザーの目につく場所に設置できる仕組みです。購入までのアクセスを簡易化することで、コンバージョン率向上が期待できます。

問い合わせを受けやすい

サイドバーで問い合わせフォームを表示させておけば、聞きたいことがあったときに簡単に問い合わせ画面にアクセス可能です。利用しているユーザーにも安心感を与え、コンバージョン率向上につながります。

webサイト上で問い合わせフォームが見つからないと、その時点でユーザーが離脱する可能性があります。わからないことがあればすぐ聞ける環境を作り、ユーザーとの距離を縮めてくれるのがサイドバー設置のメリットです。

見た目のデザイン性が高まる

サイドバーはメイン画面の次に大きく目を引く要素です。webサイト全体のデザインにあわせて作成することで、おしゃれな印象を与えられます。

ボックスのリスト式のデザインでサイドバーを作る場合、まじめで信頼感のある印象を与えます。装飾を用いたポップなデザインにすることで親しみやすい印象になるでしょう。このように、サイドバーのデザインを通してwebサイト全体のデザイン性を高めることができます。

おしゃれなサイドバーデザインを作るポイント

おしゃれなサイドバーデザインを作るのは、簡単ではありません。サイドバーはあくまでメインコンテンツを補助する役割であり、バランスが整っていなければ不自然な見た目になってしまうためです。

おしゃれなサイドバーデザインを作るために、以下の3つのポイントに注意しましょう。

設置する位置に注意する

どちらか片側だけサイドバーを設置する場合、左右どちらにするかでwebサイトの印象が変わります。全体的なアイキャッチボリュームやデザインが左側によっているwebサイトの場合、さらに左側に情報を増やすとアンバランスに感じる可能性が高いです。

webサイト制作においては、実用性（サイドバーに含むコンテンツの内容）の他にデザイン性も大切です。サイドバーを設置する際は仕上がりの見栄えを確認しながら、設置個所を決めましょう。

メインコンテンツとのバランスをとる

サイドバーを設置する際は、メインコンテンツとのバランスを大切にしましょう。サイドバーの役割は、メインコンテンツを補助することです。サイドバーの主張が強すぎる場合、全体のバランスが不自然になりメインコンテンツのインパクトが薄れてしまいます。

webサイトのデザインにもよりますが、片側サイドバーであれば1/4程度、最大でも全体幅の1/3を超えないようにしましょう。両側にサイドバーを設置する場合は、それぞれ1/4以下が理想です。

スマホユーザーに配慮する

サイドバーは基本的にはPCユーザーのために設定するもので、スマホユーザーには同じデザインで表示されません。PC上で表示される画面は横長ですが、スマホは縦長のケースが多く、サイドバーを表示するスペースがないためです。

スマホからの閲覧では、サイドバーは以下のように変化します。

webサイトのPCによる閲覧が多い場合、サイドバーデザインを凝るのは有効です。閲覧者のほとんどがスマホユーザーのwebサイトでは、サイドバーは効果をあまり発揮できないと理解しておきましょう。

サイドバーの参考デザイン例

サイドバーを活用しているwebサイトは多数ありますが、設置内容やデザインはwebサイトによって異なります。サイドバーデザインはwebサイトの個性が出る部分のため、ここで紹介する5つの例を参考にしてください。

三菱自動車

引用：三菱自動車

三菱自動車のwebサイトでは、左サイドバーを採用しています。落ち着いたサイドバーデザインで、取り扱う商材の種類や購入サポートなど、ユーザーニーズの高い要素をサイドバーに設置しています。

三菱自動車のwebサイトメインコンテンツでは新商品の紹介や宣伝素材が展開されています。サイドバーに実用的な情報に到達できる仕組みがありメインコンテンツを広々と使える結果です。

早稲田大学

引用：早稲田大学

早稲田大学のwebサイトでは、左サイドバーを採用しています。大学情報やアカデミック情報など、webサイトを初めて訪れた人が必要とするであろう情報を中心に掲載しています。

サイドバーはwebサイト全体と色味をあわせており、目立ちすぎず自然にサイトに馴染んでいます。サイドバーの幅がやや細めで主張が少ないものの、使いやすく簡潔なデザインが印象的です。

コメダ珈琲店

引用：コメダ珈琲店

コメダ珈琲店のサイドバーは白地に文字だけのシンプルな構造が特徴です。カラフルでポップなメインコンテンツに比べると落ち着きがあります。アイキャッチを大切にするメインコンテンツと、実用性を重視するサイドバーの使い分けがはっきりしている例です。

サイドバーは左側に設置されており、サイトの全体的なコンテンツ内容がわかる構造です。他のページに飛んでもサイドバーがあるおかげでトップページやメニューページにすぐに戻れます。

YouTube

引用：YouTube

YouTubeは全体的に白背景を基調とし、サイドバーもさっぱりしたデザインです。サイドバーの内容はYouTube動画の管理や検索に関する内容で、自分が目的としている見たい動画を、ひと目で探すことができます。

サイドバーが左に配置されていて、自分が操作したいものを見つけやすくなっています。 左側はECサイトでもよく利用されているため、違和感なくチェックできるユーザーも多いでしょう。

配置だけではなくデザインもスッキリとさせていて、ユーザーがYouTubeの中で調べたいと思うような項目を並べています。今見ている動画のほかに関連した動画やユーザーが好みそうな動画を表示させているのも特徴です。

ZOZOTOWN

引用：ZOZOTOWN

ZOZOTOWNはサイドバーを左側に設置しています。ECサイトの売れ行きがあるショップでは、ほとんどが左側に置いてユーザーが迷わないような作りにしているのが特徴です。

ランキングからお気に入りの服を選べるようになっていて、ショップニュースやSNSボタンまで付いています。 左を見れば、自分が調べたいと思っていた情報を一度に調べられる仕組みにしています。

この服がほしいと思って購入の手続きへと進んでいくと、サイドバーが表示されなくなる点も特徴的です。 購入段階でさまざまな情報を表示させてしまうと迷いを生んでしまうため、あえて表示させずそのままコンバージョンに導く構造とわかります。

ユーザーニーズにあわせてサイドバーを用意し、不必要なページでは表示させない構造がZOZOTOWNのwebサイトの特徴です。

サイドバーに含むデザイン

サイドバーに含む内容の例は、以下のとおりです。

重要度が高く、ユーザーに特にチェックしてほしいページはサイドバーの上部に、SNSなどは下部に設置しましょう。

まとめ

サイドバーデザインはユーザーのwebサイト内回遊率を向上する上、必要なページへすぐに到達できる便利な機能です。webサイト全体のデザイン性に大きく影響するため、設置の際はバランスや内容を厳選する必要があります。

おしゃれで使いやすいwebサイトを作成するのは簡単ではありません。デザイン性を重視するのであれば、サイドバー設置はwebサイト制作会社に依頼するのがおすすめです。

比較ビズでは、複数の業者の中から一括で無料見積もりが取得できます。条件を比較できるので、最適な業者の選定が可能です。まずはお気軽にご相談ください。

監修者のコメント

tenicom合同会社

代表者　新井田　禎治

鎌倉・藤沢を拠点にWEBに関わる支援を行っているtenicom合同会社の代表。WEBプログラマー、WEBディレクターを経て5年前に起業。現在は神奈川県の中小企業様を中心にWEBまわりを支援中。tenicomでは、「コンテンツの力で、Businessを支援」というキャッチコピーをもとにメディア事業の他、WEBサイト制作を安価に試せるサービスを展開中。

詳しく見る

最近はPCでのサイト訪問よりも、スマホでのサイト訪問やECへの訪問が多くなっているため、そこまでサイドバーの重要性は高くありません。それよりも、ハンバーガーメニューと言われる、よくある三本線のメニューが重要になってきています。

スマートフォンでは表示される情報が限られたものになるため、このハンバーガーメニューの中を上手く使うことで、ユーザーにストレスを与える事なく使ってもらう事が出来ます。

このハンバーガーメニューも右上、右下、左上など様々な配置があり、よく考える必要があります。ショッピングカートの配置やトップ画面に行けるロゴなどの配置などとの兼ね合いで考えると良さそうです。

ちなみに、スマホの場合にはタップ操作になるので、このメニューを押しやすい大きさに調整する事もとても重要です。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。