2カラム型(サイドバーあり)と1カラム型の特徴・メリットデメリット

従来のWebサイトの主流はサイドバーが付いている2カラムのレイアウトでした。

ですがここ最近、スマホやタブレットの普及が進むにつれて1カラムのレイアウトをよく見かけられるようになってきて、サイドバーを設置するメリットとは何なのか?と悩まれたことがある方も多いのではないでしょうか。

そこで今回の記事では、サイドバーがあるとどんなメリット、デメリットがあるのかおよび、ワンカラム型のレイアウトメリットデメリットをご紹介します。

サイドバーの特徴とメリットデメリット

サイドバーとは

サイドバーとは、Webサイトの画面右側や左側にあり、ナビゲーションメニューや広告等が貼り付けられている箇所のことを言います。

当ブログでもメインコンテンツの右側におすすめ記事や広告等を貼っていますが、これがサイドバーです。

また、このようなサイドバーが付いているWebサイトのレイアウト構造を2カラムレイアウトと呼び、これが現在の主流のレイアウトなのですが、対してサイドバーが付いていないレイアウト構造を1カラムレイアウトと呼びます。

時々、両サイドにサイドバーが付いているWebサイトもありますよね?

はい。少し珍しいレイアウトですが、あれはカラム数(列数)が3つになることから3カラムレイアウトと呼んでいます。

サイドバーありと無しのメリット・デメリット

サイドバーがある場合とない場合の両者のメリット・デメリットは主に以下のようなものが挙げられます。

こんなサイトに2カラムレイアウト(サイドバーあり)がおすすめ

一般的に下記のようなサイトの場合サイドバーあり(2カラム)が効果を発揮する可能性が高いのでおすすめです。

こんなサイトに1カラムレイアウト(サイドバーなし)がおすすめ

一般的に、下記のようなサイトには、サイドバー無し(1カラム)がおすすめです。
 

ここからはサイドバーあり・無しのメリットデメリット内容を詳しく説明していきます。

サイドバーあり(2カラム)のメリット

それではサイドバーあり(2カラム)のメリットについてより詳しく解説していきます。以下では計3つのメリットを挙げました。

サイト内の回遊率が上がりやすい

まず1つ目のメリットですが、サイドバーがあることで「サイト内の回遊率が上がりやすくなる」という点です。

回遊率とはサイトに訪れるユーザーが1セッションあたりにどれくらいのページを見たのかを示す指標のことを言います。

サイドバーに次にユーザーの興味をそそるであろうコンテンツやメニューを載せておくことで次のアクションを起こしてもらえる可能性が高くなります。

特に、特化ブログのようにコンテンツが一貫して同じようなものを発信している場合は、サイドバーに関連記事を利用することでより高い回遊率を期待することができます。

ユーザーが見たい情報を自分で探せる

2つ目のメリットは、「ユーザーが見たい情報を自分で探せる」という点です。

これは例えばECサイト等などを想定しているのですが、サイドバー内に商品一覧やカテゴリー、検索(価格別/ジャンル別/メーカー別)などを載せておくことで、ユーザーにとって自分が見たい・欲しい情報などを探しやすくなります。(以下はハンドメイド作品の通販、販売サイトであるCreemaの公式サイトになります。)

商品数の多いECサイトのように情報が多く、ユーザーが情報を絞り込む必要があるWebサイトのような場合はサイドバーありがおすすめです。

引用:Creema(クリーマ) 公式サイト(https://www.creema.jp/)

見せたい情報を見てもらえる可能性が高まる

3つ目のメリットは、「見せたい情報を見てもらえる可能性が高まる」という点です。

これは例えば、メインコンテンツだけでなく「サイトの運営者情報」「広告」等も見てもらいたいといったWebサイトの場合、無理やりメインコンテンツ内に挿入すると不自然になってしまいます。

そこで、このような情報を自然とユーザーに見せたいといった場合はサイドバーの中に設置しておくことで、自然とさりげなくこちら側の見せたい情報等を見てもらえるようにすることができます。

有名なブロガーさんのブログとかだと、充実したプロフィールなどがサイドバーに設置されているのをよく見かけたりしますね。

サイドバーあり(2カラム)のデメリット

次はサイドバーあり(2カラム)のデメリットについてを説明していきます。

メインコンテンツへの集中が分散される

まず1つ目のデメリットは、「メインコンテンツへの集中が分散される」という点です。

サイドバーあり(2カラム)のメリットとして、上で「見せたい情報を見てもらえる可能性が高まる」ということを説明しましたが、これは裏を返せば、ユーザーにとって目に入る情報量が多くなることからメインコンテンツへの集中が分散されるというリスク等もあります。

その為、ユーザーにしっかりと読んでもらいたいコンテンツであったり、しっかりと集中して見てもらいたい画像などを載せていたりする場合は、サイドバーがあることがデメリットであると言えます。

情報を載せすぎると画面が見にくく煩雑になる

2つ目のデメリットは、「情報を載せすぎると画面が見にくく煩雑になる」という点です。

1カラム型レイアウトの場合は、読者の読みたい内容を精査して掲載しますが、サイドバーがあるととにかくいっぱい情報を掲載したけっかぐちゃぐちゃして見にくくなってしまうリスクがあります。

特に左右にサイドバーがある3カラムのようになってくると情報が多くなりすぎて画面が見にくく煩雑になるといった傾向があります。(その為、狙いがない限りは3カラムレイアウトはあまり使用されません。)

人によってはこれだけの理由でページを離脱してしまうことも考えられますので、適度な量なら問題はありませんが、情報は載せすぎるとサイドバーがあることがデメリットとなってしまう場合があります。

ダイナミックなレイアウトデザインを作るのが難しい

3つ目のデメリットは、「ダイナミックなレイアウトデザインを作るのが難しい」という点です。

2カラムレイアウトではサイドバーがあるが為にメインコンテンツの領域は小さいので、写真などをでかでかと表示させたり、全幅背景などを使ったダイナミックなレイアウトが難しくなります。

これらのダイナミックなレイアウトは商品の訴求力を高める効果もあるので、ダイナミックなレイアウトデザインを作るのが難しいということはデメリットであると言えます。

スマホメインの場合サイドバーの重要度は低い

4つ目のデメリットは、スマホメインの場合サイドバーの重要度は低い(あまり意味がない)です。

近年、方がPCユーザーよりも多くなってきました。

ジャンルにもよりますが、アパレルや美容などは、すでにスマホからのアクセスの割合の方が多く、PC用は減ってきつつあります。

そのためサイドバーを設置しても限られたPCユーザー以外はあまり関係なく、逆にPCとスマホでデザインの統一感がなくなるというリスクもあるため注意が必要です。

ここからはサイドバー無しのメリットデメリットについてご紹介していきます。

サイドバー無し(1カラム)のメリット

それではここからは、サイドバー無し(1カラム)のメリットについてをより詳しく解説していきます。先ほど上で説明したサイドバーあり(2カラム)のデメリットと相反しているところもあります。

メインコンテンツに集中してもらえる

まず1つ目のメリットは、「メインコンテンツに集中してもらえる」という点です。

サイドバーが無いことによってメインコンテンツ以外の他の余分な情報がなくなる分、よりメインコンテンツに集中してもらえるようになります。

最近ブログよりも手軽に始められることから利用者数を増やしているnoteと呼ばれるサービスなんかでは、記事ページが1カラムになっていてメインコンテンツに集中できるようになっています。

引用: note公式サイト(https://note.com/)

商品の訴求力を高めることができる

2つ目のメリットは、「商品の訴求力を高めることができる」という点です。

これは1つ目のメリットと少し重複する部分もあるのですが、サイドバーが無いことで余分な情報がなくなり、商品画像などをダイナミックに表示させることがで、商品の訴求力を高めることができます。

(以下はAppleの公式サイトにあるMacbook Airの商品ページですが、1カラムのデザインになっています。)

引用:Apple公式サイト Macbook Airの商品ページ(https://www.apple.com/jp/macbook-air/)

スマホとPCでのデザインに統一感が出しやすい

3つ目のメリットは、「スマホとPCでのデザインに統一感が出しやすい」という点です。

通常、スマホとPCのウィンドウの横幅は異なる為、PCでは2カラムのレイアウトでWebサイトが構成されていても、スマホでは1カラムにしてあげる必要があります。

ただし、中にはそうすることでスマホで見たときとPCで見たときのWebサイトの印象がガラッと変わってしまうということも起こります。

しかし、PCの状態で元々1カラムのレイアウトならその心配はありません。

レイアウトのデザインの幅が広がる

4つ目のメリットは、「レイアウトのデザインの幅が広がる」という点です。

サイドバーがある2カラムではメインコンテンツの領域が小さい為、全幅や横並びレイアウトといったレイアウトデザイン等を組むことが難しい(組んでもダイナミックさに欠ける)ですが、1カラムではこのようなダイナミックなレイアウトデザインを組むことが出来ます。

ただし、デザインが苦手な人にとっては、1カラムレイアウトでは縦方向、上から下にコンテンツを重ねていくだけで単調なデザインにもなりやすいといった傾向もあるので、注意が必要です。

サイドバー無し(1カラム)のデメリット

次はサイドバー無し(1カラム)のデメリットについてを説明していきます。

直帰されやすく、ユーザーの次の行動に繋げることが難しい

1つ目のデメリットは、「直帰されやすく、ユーザーの次の行動に繋げることが難しい」という点です。

サイドバーがあれば、そこにユーザーの次の行動を刺激するコンテンツ等を貼り付けてサイトをより回遊させるといった手段を取ることができますが、サイドバーが無ければそれができないので、メインコンテンツが読み終えられたらそのままサイトを離脱される可能性が高くなります。

メインコンテンツ以外の情報を見てもらえにくい

2つ目のデメリットは、「メインコンテンツ以外の情報を見てもらえにくい」という点です。

1カラムレイアウトということは、すなわちメインコンテンツのみのカラム(列)だけが表示されているということなので、その他の情報(「サイトの運営者情報」やメインコンテンツとはあまり関係のない広告など)のような情報を自然に掲載することができにくくなります。

そのため、一つのゴール(ストーリー)に向けてコンテンツを見せる場合は良いのですが、ポータルサイトのように色々なジャンル・コンテンツから利用者が欲しい情報を選んでもらうと言う場合には注意が必要です。
 
 

まとめ

まとめです。今回はサイドバーがあるとどんなメリット、デメリットがあるのかについてをご紹介しました。

サイドバーがある方が良いのか、ない方が良いのかといったことは一概には言えません。

ですので、ご自身の運営している、あるいはこれから運営しようとしているWebサイトにサイドバーを付けるべきかと悩んでいる方がいましたら、今回ご紹介したサイドバーの特徴・メリットとデメリットを考慮して選択して見てください。

今回は以上になります。最後までご覧いただきありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室