サイドバーとは何ですか？ブログにサイドバーが必要ですか？

公開: 2020-01-18

典型的なウェブサイトのレイアウトについて考えるとき、メインコンテンツ領域の右側または左側に重要なリンクまたは情報の列を含める可能性が高くなります。 この要素は「サイドバー」と呼ばれ、Web全体で非常に普及しています。 ただし、効果を上げるには、この機能がどのように機能するかを理解することが重要です。

すべてのWebサイトにサイドバーが必要なわけではなく、サイドバーがない方がはるかに優れているデザインもあります。 そのことを念頭に置いて、この機能の目的、この機能の使用を検討する必要のあるサイトの種類、および現在の「モバイルファースト」の状況にどのように影響するかについて詳しく説明します。

それを手に入れよう！

私たちのYoutubeチャンネルを購読する

サイドバーとは何ですか（そしてなぜサイドバーがあるのが便利なのですか）？

つまり、サイドバーは、Webページのプライマリコンテンツ領域の右側または左側に配置される列です。 これらは通常、次のようなさまざまな種類の補足情報をユーザーに表示するために使用されます。

  • キーページへのナビゲーションリンク
  • 商品やサービスの広告
  • メール登録フォーム
  • 人気のある投稿または関連する投稿
  • ソーシャルメディアリンク

Web上で最も人気のある10のサイトのうち8つは、何らかの形または形式のサイドバーを使用しています。 ウィキペディアはナビゲーションメニューとして機能します。

ウィキペディアのサイドバー。

一方、Redditは、収益を生み出す広告と関連する投稿、およびアカウントをアップグレードするオプションを共有します。

Redditサイドバー。

前に説明した使用法は、サイトがサイドバーを機能させる最も一般的な方法の一部ですが、著者の経歴、アフィリエイトの免責事項、およびその他のさまざまな目的にも使用されることがあります。

アフィリエイト開示を含むサイドバー。

サイドバーをWebサイトのデザインに組み込むことの主な利点は、ユーザーがサイト内を移動してもサイドバーが表示されたままになることです。 これにより、重要な情報や機能をいつでもすぐに利用できるようになります。

これが、サイドバーに電子メールのサブスクリプションフォームや広告などの召喚状（CTA）要素が含まれていることが多い理由です。 ナビゲーション機能は、見つけやすく、アフィリエイト開示ステートメントなどの法的コンテンツがシャッフルで失われる可能性が低いため、ここでもうまく機能します。

サイドバーを使用することでメリットが得られる2種類のWebサイト

ほぼすべてのタイプのWebサイトにサイドバーを含めることができます。 ただし、これらは、ユーザーが追加のガイダンスの恩恵を受ける可能性があるいくつかの異なる状況で特に役立ちます。 ここに私たちが言及する価値があると感じる2つがあります。

1.コンテンツの多いWebサイト

ブログ、ニュースサイト、オンラインマガジン、およびその他のコンテンツの多いWebサイトには、かなり広いカテゴリが含まれます。 しかし、それらすべてに共通することが1つあります。それは、常により多くの記事を公開することで生き残るということです。

あなたが持っているコンテンツが多ければ多いほど、あなたのウェブサイトをナビゲートすることはより複雑になります。 この状況では、次の目的でサイドバーを使用できます。

  • ソーシャルメディアへのリンクや共有ボタンを含む
  • ユーザーが見逃さない場所にメール登録フォームを表示する
  • 関連する投稿やページへのリンクを表示する
  • 最も人気のあるコンテンツを披露
  • 見つけやすい検索バーを追加する

サイドバーは、ユーザーが他の方法では見逃される可能性のあるエンゲージメントの機会を見つけ、サブスクリプションを促進して訪問者を呼び戻し、ナビゲーションを改善して読者をサイトに長くとどまらせるのに役立ちます。 これらの結果はすべてサイトに利益をもたらし、サイトから得られる収益を増やすことができます。

2.オンラインストア

ウェブサイトはオンラインストアほど複雑にはなりません。 eコマースサイトが提供する製品が多いほど、含まれるページも多くなります。 これにより、サイドバーは次のような要素を含めるのにさらに便利になります。

  • 関連商品と過去の購入
  • カートに追加ボタン
  • バイヤーのレビューと評価
  • あなたが実行している特別な取引やプロモーションの広告
  • 顧客が現在の合計を追跡できるようにするショッピングカートビュー

eコマースのウェブサイトのデザインに共通する問題の1つは、多くの混乱を伴うことです。 AmazonまたはeBayをざっと見てみると、私たちが何を意味しているのかすぐにわかります。

雑然としたページの例。

その雑然としたものを整理し、ページをよりユーザーフレンドリーにするのに役立つ要素はすべて歓迎され、サイドバーは確かにその法案に適合します。

サイドバーはモバイルファーストの世界にどのように適合しますか？

それらの歴史的な有用性にもかかわらず、サイドバーは最近攻撃を受けています。 それらに対する最も強い議論は、それらがモバイルデバイスにうまく変換されないということです。 スマートフォンやタブレットでは画面スペースが限られているため、ページの3分の1以上をセカンダリコンテンツに割り当てることは現実的ではありません。

代わりに、この情報は通常、小さいデバイスではページの下部に移動され、検出される可能性は低くなります。 現在、モバイルトラフィックが世界のインターネット使用量の51％以上を占めていることを考えると、これはWebデザインにとって重要な問題です。

それに応じて、一部のサイトはサイドバーをまったく使用しないことを選択しました。 これは理にかなっていますが、これらのサイトがこのレイアウトが提供する利点を利用できないことも意味します。 コンテンツの多いブログやeコマースストアを運営している場合、これは実際の問題になる可能性があります。

これに対処するための1つのオプションは、モバイルデバイスでサイドバーを非表示にすることです。 これにより、デスクトップユーザーは、スマートフォンやタブレットでサイトを読みやすくしながら、セカンダリコンテンツを表示できるようになります。

もう1つの解決策は、補足コンテンツの一部だけを小さなデバイスに隠すことです。 たとえば、ヘッダーにソーシャルボタンがある場合、繰り返しを避けるためにモバイルサイドバーからソーシャルボタンを削除できます。

または、uouはモバイルサイトに折りたたみ可能なサイドバーを使用できます。 その後、ユーザーは必要に応じて表示または非表示を選択できます。

Amazonのモバイルサイトにある折りたたみ可能なサイドバー。

最後に、サイドバーを完全に保ち、応答性を高めて、小さい画面に合わせて縮小するオプションが常にあります。 サイトに最適なルートは、サイドバーに含まれるコンテンツの種類と、Webサイト全体の目標によって異なります。

結論

プライマリコンテンツにスポットライトを当てたい一方で、サイトのユーザーが必要とする他の多くの情報もあります。 サイドバーを使用すると、重要な領域へのリンク、電子メールのサインアップフォームなど、重要な要素をページ全体に表示できます。

サイドバーには、モバイルファーストのブラウジングに関しては欠点があるかもしれませんが、すぐにはどこにも行きません。 代わりに、私たちは彼らのデザインにアプローチする方法を再考する必要があります。 ただし、適切なツールを使用すれば、課題に取り組む必要があります。

サイドバーを最大限に活用する方法について質問がありますか？ 下のコメントセクションに残してください！

KreethaMahamud氏による記事のサムネイル画像/shutterstock.com