【2022年最新版】参考にしたいサイドバーデザイン集

この記事のレベル
初心者
(4.0)
重要度
(3.0)
難しさ
(2.0)

こんにちは、編集長のカワウソです!

「サイドバーデザインのイメージが湧かない……」とお悩みではありませんか?

そこで今回は、企業のホームページから、参考にしたいサイドバーのデザインをご紹介します。

カワウソ

この記事は次のような人におすすめ!

  • はじめてホームページを作る人
  • サイドバーのデザインを探している人
  • サイドバーに設置する機能について検討中の人

この記事を読めば、機能ごとにサイドバーのデザインを参考にできますよ。

また、パソコンサイトに設置したサイドバーを、スマホサイトでどのように表示すればよいのかも分かります。

それではどうぞ!

サイドバーとは

サイドバーとは、コンテンツエリアの左右に設置する、ホームページのパーツ(ブロック)のこと。「サイドカラム」や「サイドメニュー」と呼ばれることもあります。

サイドバーが1つあるレイアウトを「2カラム」、2つのレイアウトを「3カラム」と呼ぶので、一緒に覚えておきましょう。

2カラム
3カラム

また上部に掲載することが多い「ロゴ」や「グローバルナビゲーション」などを、サイドバーに設置するケースもあります。

サイドバーに企業ロゴやグローバルナビゲーションが掲載されている例
グローバルナビゲーションとは

ホームページ内の他のページに案内するリンクがナビゲーション。そのなかでも、全ページに共通して表示されるものを、グルーバルナビゲーションと言います。

なお近年は、ホームページのレイアウトも多様化しており、サイトバーかどうかの判定が難しいホームページも少なくありません。

この記事では、レイアウトについてより柔軟に考えるためにも、サイドバーの位置や設置方法ではなく、「機能」に注目して紹介します。

なおレイアウトについては、以下の記事で解説しています。

ホームページレイアウトの基本!目的別の選び方をわかりやすく解説

サイドバーのデザイン例

ここでは、サイドバーデザインを以下の機能ごとに分けて解説します。

サイドバーが「どのような機能を果たしているのか」に注目しながら、それぞれ参考にしてください。

グローバルナビゲーションを設置したサイドバーデザイン

NIKIGOLF

▲出典:NIKIGOLF

『NIKIGOLF』は、ゴルフ用品の販売を主とする株式会社二木ゴルフのホームページです。

サイドバーにグローバルナビゲーションが含まれているため、ユーザーはすぐに目的のページを見つけられます。

また、サイドバーが固定化されているのもポイント。
他のページにアクセスしたり、ページの下部までスクロールしたりしても、常にサイドバーが表示されます。

ユーザーにとって、目的のページを探しやすいホームページと言えるでしょう。

検索窓を設置したサイドバーデザイン

au

▲出典:au

『au』のサービスサイトは、サイドバーに検索窓を設置しています。

虫眼鏡アイコンはもちろん、あらかじめ入力欄に「検索」と書かれているため、より検索窓を認識しやすいです。

『au』のホームページには、幅広い世代の人々が訪問しますよね。このように、誰でも分かりやすいようにしておけば、ユーザーが迷う可能性を減らせます。

カテゴリを設置したサイドバーデザイン

買取大吉

▲出典:買取大吉

全国480店舗以上を展開している買取店の『買取大吉』。サイドバーには、買い取れる品目の一覧(カテゴリー)が並んでいます。

カテゴリがあるため、「どのような品物を買い取ってもらえるのか」が明確です。
サイドメニュー特有の縦に長い表示領域を有効活用していますよね。

興味を持ったユーザーは、すぐに目的のカテゴリーにアクセスできるでしょう。

バナーを設置したサイドバーデザイン

Chiyo-pet

▲出典:Chiyo-pet

『Chiyo-pet(チヨペット)』は、ペット用品のECサイト。
サイドバーにキャンペーンのバナーを設置しています。

「サンプル」や「プレゼント」などのワードがあるためか、思わずバナーに注目してしまいますよね。

「詳しくはこちら>」と、ユーザーの行動を促すボタンをバナーの中に設置しているのもポイント。これにより、リンクがあると判断できます。

バナーのクリック率を高めるための工夫と言えるでしょう。

同一ページ内の目次(見出し)を設置したサイドバーデザイン

RELOCA

▲出典:RELOCA

『RELOCA(リロカ)』は、日本の地域の魅力を発信するホームページです。
サイドバーの「目次(見出し)」が特徴で、ページをスクロールするとテキストカラーが変化したり、マークがついたりします。

「今どのコンテンツを読んでいるのか」が明確になれば、ページの中で迷子になることもありませんよね。

また、サイドバーの目次をクリックすれば、該当する見出しまでジャンプすることが可能。

LP(ランディングページ)など、縦に長いページであれば、参考にしたいサイドバーです。

LPについては、以下の記事で解説しています。

LP(ランディングページ)とは?ホームページとの違いを解説!

CTAボタンを設置したサイドバーデザイン

株式会社東亜不動産

▲出典:株式会社東亜不動産

『株式会社東亜不動産』のホームページのサイドバーには、「メールでのお問い合わせ」「無料査定」などのCTAボタンが設置されています。

CTAとは

Call To Action(コール トゥ アクション)の略で、「行動喚起」と訳されます。コンテンツを閲覧したユーザーを、コンバージョンへと誘導する役割があります。

固定化されたサイドバーにCTAボタンがあれば、ホームページを見て興味を持ったユーザーは、いつでもアクション(行動)できます。

コンバージョンの獲得を目指す場合は、参考になるでしょう。

コンバージョンについては、以下の記事で解説しています。

コンバージョン(CV)とは?意味・種類・選び方など解説

問い合わせフォームを設置したサイドバーデザイン

AI analyst

▲出典:AI analyst

『AI analyst』は、ホームページのアクセス解析ツールです。

『AI analyst』のサイドバーの特徴は、問い合わせフォームを設置していること
グローバルナビゲーションを上部に設置しているため、サイドバーはコンバージョンの獲得に特化させています。

これなら、わざわざ「問い合わせページ」へアクセスする手間が必要ありません。

近年このようにサイドバーに問い合わせフォームを設置するホームページが増えています。

というのも、初回訪問で問い合わせするユーザーは、限られるためです。
多くのユーザーは比較検討するために、再訪問を繰り返して問い合わせをします。

再訪問したときに、すぐに問い合わせフォームに入力できれば、ユーザーにとって便利ですよね。

コンバージョンを多く獲得したい場合は、参考にしましょう。

なおアクセス解析については、以下の記事で解説しています。

アクセス解析の基礎知識 【初級】アクセス解析とは?ホームページの改善に必要な基礎知識

サイドバーをスマホサイトで扱う方法

パソコンサイトで設置したサイドバーは、同じレイアウトのままスマホサイトに設置することができません。

スマホは縦長のデバイスであるため、2列ないしは3列のレイアウトは、かえって見づらくなるためです。

ここでは、パソコンサイトで設置したサイドバーを、スマホサイトで表示させる方法について、2つ解説します。

サイドバーをスマホサイトで扱う方法

ページ下部に入れる

パソコンサイトでは、サイドバーをコンテンツエリアの左右に設置しますよね。
そのサイドバーをスマホサイトでは、コンテンツエリアの下に設置する方法です。

ページ下部に入れる方法も、主に以下の2通りがありますので、それぞれ事例を紹介します。

  1. サイドバーの内容をすべて表示する
  2. アコーディオンメニューで表示する

サイドバーの内容をすべて表示する

パソコンで設置したサイドバーをそのままの形で掲載する方法です。

以下参考サイトです。

株式会社クレハのパソコンサイト

▲出典:株式会社クレハのパソコンサイト

機能製品事業や化学製品事業などを手がける株式会社クレハのスマホサイトは、サイドバーをパソコンサイトと同じ形で、スマホサイトのページ下部に設置しています。

株式会社クレハのスマホサイト

▲出典:株式会社クレハのスマホサイト

アコーディオンメニューで表示する

サイドバーに設置したリンクが多い場合は、アコーディオンメニューが有効です。

アコーディオンメニューとは

クリックすると、アコーディオンのように展開するメニューのこと。クリックするまで、一部の要素を隠しておけるため、邪魔になりにくいのが特徴。パソコンサイトに比べて、表示領域が狭いスマホサイトで実装されるケースが多いです。

アコーディオンメニューには、見た目をスッキリできるメリットがあるものの、タップしないと一部のリンクが見えなくなってしまうデメリットもあります。

以下参考サイトです。

八百彦本店のパソコンサイト

▲出典:八百彦本店のパソコンサイト

江戸時代・享保年間から経営されている、仕出し料理店『八百彦本店』のホームページです。

たとえばパソコンサイトでは、慶事や仏事などの「ご利用シーン」がすべて表示されています。

八百彦本店のスマホサイト

▲出典:八百彦本店のスマホサイト

しかしスマホサイトでは、ご利用シーンの内容が隠されていますよね。
アコーディオンメニューを採用しているので、ご利用シーンをタップすれば、中身を確認することが可能です。

見た目と機能性の両方を備えたい場合は、参考にするとよいでしょう。

ハンバーガーメニューに入れる

サイドバーにグローバルナビゲーションを設置している場合は、スマホサイトだと、「ハンバーガーメニュー」に設置するのがおすすめです。

ハンバーガーメニューとは

ナビゲーション(メニュー)の表示形式の一つ。 横線3本のアイコンデザイン「≡」がハンバーガーに似ていることから名付けられました。近年は横線2本のメニューも多くなっています。

岩手銀行のパソコンサイト

▲出典:岩手銀行のパソコンサイト

『岩手銀行』のホームページでは、パソコンサイトのサイドバーの内容は、スマホサイトだとハンバーガーメニューに設置されています。

岩手銀行のスマホサイト

▲出典:岩手銀行のスマホサイト

サイドバーのデザインをもっと探したい方へ

サイドバーのデザインをもっと探したい方は、ギャラリーサイトがおすすめです。

ギャラリーサイトなら、他社のホームページのデザインを一覧にして確認できるため、効率的に探せます。

ホームぺージデザインの参考になるギャラリー・企業サイト計20選

ここでは、サイドバーのデザインを探しやすいギャラリーサイトを2つ紹介します。

SANKOU!

SANKOU!

▲出典:SANKOU!

SANKOU!には、レイアウト別のカテゴリがあります。

「2カラム」のカテゴリから、サイドバーを設置したホームページを見つけることが可能です。

WebDesignClip

WebDesignClip

▲出典:WebDesignClip

WebDesignClipにも、レイアウト別のカテゴリがあります。

▲出典:WebDesignClip

「TYPE_E」や「TYPE_F」のレイアウトから、サイドバーを設置したホームページを見つけることが可能です。

まとめ

今回は、サイドバーのデザインを機能別に紹介しました。

まとめ
  • サイドバーは、コンテンツエリアの左右に設置するホームページのパーツ
  • サイドバーのデザインは、求める機能に沿ったものを参考にする
  • ギャラリーサイトなら、効率的に参考のサイドバーデザインを探せる

ホームページにサイドバーを設置するときは、まず「必要な機能が何か」を検討してから、他社のデザインを参考にするといでしょう。

それでは、素敵なホームページの完成を願っております。

以上、最後まで読んでいただきありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、16万社の導入実績があります。

12月9日12時まで利用料金最大30%OFFキャンペーン開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

さらに12月5日18時まで秋のスタートキャンペーンも開催中!
Amazonギフト券10,000円分が当たるビッグチャンスです。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2022年10月時点、hostadvice.com調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

【初心者向け】会社ホームページの作り方を基礎から解説

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!