【2023年1月27日更新】読みやすくなるよう、文章を調整しました。
こんにちは、編集長のカワウソです！
「サイドバーデザインのイメージが湧かない……」とお悩みではありませんか？
そこで今回は、企業のホームページから、参考にしたいサイドバーのデザインをご紹介します。
カワウソ
この記事は次のような人におすすめ！
- はじめてホームページを作る人
- サイドバーのデザインを探している人
- サイドバーに設置する機能について検討中の人
この記事を読めば、機能ごとにサイドバーのデザインを参考にできますよ。
また、パソコンサイトに設置したサイドバーを、スマホサイトでどのように表示すればよいのかも分かります。
それではどうぞ！
目次
サイドバーとは
サイドバーとは、コンテンツエリアの左右に設置する、ホームページのパーツ（ブロック）のこと。「サイドカラム」や「サイドメニュー」と呼ばれることもあります。
サイドバーが1つなら「2カラム」、2つなら「3カラム」と呼ぶので、一緒に覚えておきましょう。
また上部に掲載することが多い「ロゴ」や「グローバルナビゲーション」などを、サイドバーに設置するケースもあります。
ホームページ内の他のページに案内するリンクがナビゲーション。そのなかでも、全ページに共通して表示されるリンクをグローバルナビゲーションと言います。
グローバルナビゲーションとは？作り方のポイントやデザイン例を解説
なお近年は、ホームページのレイアウトが多様化しています。
そのため、サイトバーかどうかの判定が難しいホームページも少なくありません。
この記事では、よりレイアウトについて柔軟に考えるためにも、サイドバーの位置や設置方法ではなく、「機能」に注目して紹介します。
※ホームページのレイアウトについては、以下の記事をご覧ください。
ホームページレイアウトの基本！種類や選び方を分かりやすく解説
サイドバーのデザイン例
ここでは、サイドバーデザインを以下の機能ごとに分けて解説します。
サイドバーが「どのような機能を果たしているのか」に注目しながら、それぞれ参考にしてください。
グローバルナビゲーションを設置したサイドバーデザイン
▲出典：NIKIGOLF
『NIKIGOLF』は、ゴルフ用品の販売を主とする『株式会社二木ゴルフ』のホームページです。
サイドバーにグローバルナビゲーションが含まれているため、ユーザーはすぐに目的のページを見つけられます。
また、サイドバーが固定化されているのもポイント。
ページの下部までスクロールしたり、他のページにアクセスしたりしても、常にサイドバーが表示されます。
ユーザーにとって、目的のページを探しやすいホームページと言えるでしょう。
検索窓を設置したサイドバーデザイン
▲出典：au
『au』のサービスサイトは、サイドバーに検索窓が設置されています。
虫眼鏡アイコンはもちろん、あらかじめ入力欄に「検索」と書かれているため、より検索窓を認識しやすいです。
『au』のホームページには、幅広い世代の人々が訪問しますよね。
このように、誰でも分かりやすいようにしておけば、ユーザーが迷う可能性を減らせます。
カテゴリを設置したサイドバーデザイン
▲出典：買取大吉
全国に約500店舗を展開している買取店の『買取大吉』。サイドバーには、買取品目の一覧（カテゴリー）が並んでいます。
カテゴリがあるため、「どのような品物を買い取ってもらえるのか」が明確です。
サイドバー特有の縦に長い表示領域が有効活用されていますよね。
興味を持ったユーザーは、すぐに目的のカテゴリにアクセスできるでしょう。
バナーを設置したサイドバーデザイン
▲出典：Chiyo-pet
『Chiyo-pet（チヨペット）』は、ペット用品のECサイト。
サイドバーには、キャンペーンのバナーが設置されています。
「ワンコインサンプル」や「ポイントプレゼント」などのワードがあるためか、思わずバナーに注目してしまいますよね。
「詳しくはこちら >」と、ユーザーの行動を促すボタンがバナーのなかに設置されているのもポイント。これにより、ユーザーはリンクがあると判断できます。
バナーのクリック率が上がる工夫として効果的です。
同一ページ内の目次（見出し）を設置したサイドバーデザイン
▲出典：RELOCA
『RELOCA（リロカ）』は、日本の地域の魅力を発信するホームページです。
サイドバーの「目次（見出し）」が特徴で、ページをスクロールするとテキストカラーが変化したり、マークが付いたりします。
▲出典：RELOCA
「今どのコンテンツを読んでいるのか」が明確になれば、ページのなかで迷子になることもありませんよね。
また、サイドバーの目次をクリックすれば、該当の見出しまでジャンプすることが可能。
LP（ランディングページ）など、縦に長いページであれば、参考にしたいサイドバーです。
LPについては、以下の記事で解説しています。
LP（ランディングページ）とは？ホームページとの違いを解説！
CTAボタンを設置したサイドバーデザイン
▲出典：株式会社東亜不動産
『株式会社東亜不動産』のホームページのサイドバーには、「メールでのお問い合わせ」「無料査定」などのCTAボタンが設置されています。
Call To Action（コール・トゥ・アクション）の略で、日本語だと「行動喚起」です。コンテンツを閲覧したユーザーを、コンバージョンへと誘導する役割がありますよ。
固定化されたサイドバーにCTAボタンがあれば、ホームページを見て興味を持ったユーザーは、いつでもアクション（行動）できます。
コンバージョンの獲得を目指す場合は、参考になるでしょう。
コンバージョンについては、以下の記事で解説しています。
コンバージョン（CV）とは？意味・種類・選び方など解説
問い合わせフォームを設置したサイドバーデザイン
▲出典：AI analyst
『AI analyst』は、ホームページのアクセス解析ツールです。
『AI analyst』のサイドバーの特徴は、問い合わせフォームが設置されているところ。
グローバルナビゲーションは上部に設置されており、サイドバーはコンバージョン（問い合わせ）の獲得に特化したデザインになっています。
これなら、わざわざ「問い合わせページ」へアクセスする手間が生じませんよね。
近年、このようにサイドバーに問い合わせフォームを設置するホームページは珍しくありません。
サイトバーに問い合わせフォームがあれば、ユーザーは探さなくて済みます。
あと注目したいのは、すべてのユーザーが初回訪問で問い合わせるわけではないということ。
なかには比較検討するために、再訪問を繰り返して問い合わせるユーザーもいるでしょう。
再訪問したとき、すぐに問い合わせフォームに入力できれば、ユーザーにとって便利ですよね。
コンバージョンを多く獲得したい場合は、参考にしましょう。
なおアクセス解析については、以下の記事で解説しています。
【初級】アクセス解析とは？ホームページの改善に必要な基礎知識
サイドバーをスマホサイトで扱う方法2つ
パソコンサイトで設置したサイドバーは、同じレイアウトのままスマホサイトに表示できません。
スマホは縦長のデバイスであるため、2列ないし3列のレイアウトは、かえって見づらくなるためです。
ここでは、パソコンサイトで設置したサイドバーを、スマホサイトで表示させる方法について、2つ解説します。
ページ下部に入れる
パソコンサイトでは、サイドバーをコンテンツエリアの左右に設置しますよね。
そのサイドバーをスマホサイトでは、コンテンツエリアの下に設置する方法です。
ページ下部に入れる方法も、主に以下の2とおりがありますので、それぞれ事例を紹介します。
- サイドバーの内容をすべて表示する
- アコーディオンメニューで表示する
サイドバーの内容をすべて表示する
パソコンで設置したサイドバーをそのままの形で掲載する方法です。
それでは、参考サイトを見てみましょう。
▲出典：株式会社クレハのパソコンサイト
「機能製品事業」や「化学製品事業」などを手がける『株式会社クレハ』のスマホサイトでは、パソコンサイトと同じ形のサイドバーがページ下部に設置されています。
▲出典：株式会社クレハのスマホサイト
アコーディオンメニューで表示する
サイドバーに設置したリンクが多い場合は、アコーディオンメニューが有効です。
クリックすると、アコーディオンのように展開するメニューのこと。クリックするまで、一部の要素を隠しておけるため、邪魔になりにくいのが特徴。パソコンサイトに比べて、表示領域が狭いスマホサイトで実装されるケースが多いです。
アコーディオンメニューの企業事例10選！メリット・デメリットなど
以下、参考サイトを見てみましょう。
▲出典：八百彦本店のパソコンサイト
江戸時代の享保年間から経営されている、仕出し料理店『八百彦本店』のホームページです。
たとえばパソコンサイトでは、慶事や仏事などの「ご利用シーン」がすべて表示されています。
▲出典：八百彦本店のスマホサイト
しかしスマホサイトでは、ご利用シーンの内容が隠れていますよね。
アコーディオンメニューが採用されているので、ご利用シーンをタップすれば、中身を確認できます。
見た目と機能性の両方を備えたい場合は、参考にするとよいでしょう。
アコーディオンメニューには、見た目をスッキリできるメリットがあるものの、タップしないと一部のリンクが見えなくなってしまうデメリットもあるので、注意が必要です。
ハンバーガーメニューに入れる
サイドバーにグローバルナビゲーションを設置している場合は、スマホサイトだと、「ハンバーガーメニュー」に含めるのがおすすめです。
ナビゲーション（メニュー）の表示形式の一つ。 横線3本のアイコンデザイン「≡」がハンバーガーに似ていることから名付けられました。近年は横線2本のメニューもあります。
ハンバーガーメニューの事例8選！最適化するコツも解説
以下、参考サイトを見てみましょう。
▲出典：岩手銀行のパソコンサイト
『岩手銀行』のホームページでは、パソコンサイトのサイドバーの内容は、スマホサイトだとハンバーガーメニューに設置されています。
▲出典：岩手銀行のスマホサイト
サイドバーのデザインをもっと探したい方へ
サイドバーのデザインをもっと探したい方は、ギャラリーサイトがおすすめです。
ギャラリーサイトなら、他社のホームページのデザインを一覧にして確認できるため、効率的に探せます。
【2023年最新版】ホームページデザインの参考になるギャラリーサイト12選
ここでは、サイドバーのデザインを探しやすいギャラリーサイトを2つ紹介します。
SANKOU!
▲出典：SANKOU!
『SANKOU!』には、レイアウト別のカテゴリがあります。
「2カラム」のカテゴリから、サイドバーを設置したホームページを見つけることが可能です。
Web Design Clip
▲出典：Web Design Clip
『Web Design Clip』にも、レイアウト別のカテゴリがあります。
▲出典：Web Design Clip
画面右上のハンバーガーメニュー内にある「TYPE_E」や「TYPE_F」のレイアウトから、サイドバーを設置したホームページを見つけられますよ。
まとめ
今回は、サイドバーのデザインを機能別に紹介しました。
- サイドバーは、コンテンツエリアの左右に設置するホームページのパーツ
- サイドバーのデザインは、求める機能に沿ったものを参考にする
- ギャラリーサイトなら、効率的に参考のサイドバーデザインを探せる
ホームページにサイドバーを設置するときは、まず「必要な機能が何か」を検討してから、他社のデザインを参考にするといでしょう。
それでは、素敵なホームページの完成を願っております。
以上、最後まで読んでいただきありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、18万社の導入実績があります。
10月2日12時まで利用料金最大30%OFFキャンペーンを開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
さらに2023年9月29日12時まで、20周年記念プレゼントキャンペーンも開催中です！
PlayStation®5や星野リゾート宿泊ギフト券5万円分が当たるビッグチャンスです。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2023年5月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
