SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

サイドバー内のコンテンツをスマホに配置するための3つの方法

PCサイトが2カラムレイアウトの場合、スマホサイトではサイドバーをどの位置に配置すればよいでしょうか?
この記事では、レスポンシブでサイドバーをレイアウトするための代表的な3つの配置方法について、HTML・CSSを使った具体的なやり方とメリット・デメリットを含めて解説します。

方法1.サイドバーをメインコンテンツの下に配置する

スマホではメインコンテンツの下にサイドバーのコンテンツを配置するというレイアウトです。
単純なレイアウトなのでレスポンシブでも実装しやすく、よく使われています。

sidebar-image1

サイドバーのコンテンツ量が少なく、かつ内容の重要度や利用頻度が低い場合にはこの方法でよいでしょう。

ヨドバシカメラではサイドバーの内容をすべてスマホに表示させています。

https://www.yodobashi.com/category/19531/11970/

PCサイト:
yodobashi-pc3

スマホサイト:
yodobashi-sp3

実装方法

以下のように、メインコンテンツはmainタグ内に、サイドバーのコンテンツはasideタグとして記述します。
mainasidedivで囲んでおきます。

<header>
 ヘッダ
</header>

<div class="wrapper">

 <main>
  メインコンテンツ
 </main>

 <aside>
  サイドバー
 </aside>

</div>

<footer>
 フッタ
</footer>

CSSで2カラムレイアウトを実装するには、floatを使う方法やtableレイアウトを使う方法などがありますが、flexレイアウトが簡単です。
なお、flexレイアウトはIE10以上で対応しています。
https://caniuse.com/#feat=flexbox

メディアクエリを使い、デバイス幅が480px以下の場合にflexレイアウトを解除するようにしています。

.wrapper {
 display: flex;
 max-width: 1600px;
 min-width: 980px;
 margin: 0 auto;
 padding: 0 20px;
}
main {
 flex: 1;
 margin: 0 20px;
}
aside {
 width: 220px;
}
 
@media screen and (max-width: 480px) {
 .wrapper {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  min-width: initial;
 }
 main {
  margin: 0;
 }
 aside {
  width: 100%;
 }
}

メリット

ルールが単純なので、CSSだけで実装しやすいです。

デメリット

PCでサイドバーの上部にあるコンテンツは、ファーストビュー内に収まっていましたが、スマホではファーストビューには見えません。そのため、サイドバー上部にキャンペーンや重要なバナーを配置している場合は、スマホで訴求力が低下してしまいます。

また、サイドバーの幅がスマホの幅に足りないことが多く、画像を配置した場合には隙間ができてしまうレイアウト上の問題もあります。サイドバー内の画像は2段組みにするなどの工夫が必要です。

その他、ページが長くなりすぎるという問題もあります。コンテンツを開閉式にするなどの工夫が必要です。

方法2.サイドバーの一部をメインコンテンツ下に配置する

先ほどの方法1「サイドバーをメインコンテンツの下に配置する」の改良版です。
サイドバーのうち、利用頻度の低い要素を非表示とし、一部の要素をメインコンテンツの下に配置する方法です。

sidebar-image3

たとえば、PCサイトではサイトバー内にカテゴリの第2階層までの直リンクを配置しているが、スマホでは量が多いので非表示にする、といった使い方ができます。

OZmallでは、PCのサイドバーの内、記事ランキングや広告は非表示にし、SNSとアプリダウンロードのみをメインコンテンツの下に配置しています。
https://www.ozmall.co.jp/gourmet/

PCサイト:
ozmall-pc

スマホサイト:
ozmall-sp

実装方法

サイドバーのコンテンツ内の各要素でスマホでは表示しない要素に class=”pc_only” 属性を追加します。

<header>
 ヘッダ
</header>

<div class="wrapper">

 <main>
  メインコンテンツ
 </main>

 <aside>
  <section class="pc_only">サイドバー1</section>
  <section>サイドバー2</section>
  <section class="pc_only">サイドバー3</section>
  <section>サイドバー4</section>
 </aside>

</div>

<footer>
 フッタ
</footer>

CSSでは、class="pc_only" に対し、display: noneを設定します。

.wrapper {
 display: flex;
 max-width: 1600px;
 min-width: 980px;
 margin: 0 auto;
 padding: 0 20px;
}
main {
 flex: 1;
 margin: 0 20px;
}
aside {
 width: 220px;
}
 
@media screen and (max-width: 480px) {
 .wrapper {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  min-width: initial;
 }
 main {
  margin: 0;
 }
 aside {
  width: 100%;
 }
 .pc_only {
  display: none;
 }
}

メリット

ページの長さを調節できます。
また、サイドバー内の要素の内、スマホで利用頻度が高いコンテンツを強調できます。
CSSだけで実装できるのもメリットです。

デメリット

方法1「サイドバーをメインコンテンツの下に配置する」と同じデメリットがあります。
PCではサイドバーの上部に位置するコンテンツが、スマホではファーストビューにありません。
また、サイドバーの幅がスマホの幅に足りないことにより、画像を配置した場合に隙間ができます。
なお、広告などを display: none で非表示にすると掲載ポリシー違反になることがあります。

方法3.サイドバーの内容を分散して配置する

サイドバー内にある検索ボックス、リンク集、SNSなどのブロック単位で、スマホサイトの各所に配置する方法です。

ブロックの配置先としては、例えば次のような場所があります。

  • ヘッダ
  • スライドメニュー
  • メインコンテンツの上部
  • フッタの直前
  • フッタ
  • 画面下部に固定
sidebar-image4

コープデリのスマホ版では、PCのサイドバー内にある申込ボタンはファーストビュー内に、キャンペーンはメインコンテンツの上に、その他はフッタの直前に配置しています。

https://www.coopdeli.jp/

PCサイト:
coopdeli-pc

スマホサイト:
coopdeli-sp1
coopdeli-sp2

実装方法

PCのみ表示するコンテンツと、スマホのみに表示するコンテンツをHTMLに記述し、CSSで表示/非表示を切り替えます。

具体的には、PCのみ表示するコンテンツには class="pc_only" 、スマホのみ表示するコンテンツには class="sp_only" を書いておきます。

<header>
 ヘッダ
</header>

<div class="wrapper">

 <aside class="sp_only">
  <section>サイドバー3</section>
 </aside>

 <main>
  メインコンテンツ
 </main>

 <aside>
  <section class="sp_only">サイドバー4</section>
  <section>サイドバー1</section>
  <section class="pc_only">サイドバー2</section>
  <section class="pc_only">サイドバー3</section>
  <section class="pc_only">サイドバー4</section>
 </aside>

</div>

<footer>
 フッタ
</footer>

CSSでは、class="sp_only"class="pc_only"のスタイルを定義します。

.wrapper {
 display: flex;
 max-width: 1600px;
 min-width: 980px;
 margin: 0 auto;
 padding: 0 20px;
}
main {
 flex: 1;
 margin: 0 20px;
}
aside {
 width: 220px;
}
 
.sp_only {
 display: none;
}
 
@media screen and (max-width: 480px) {
 .wrapper {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  min-width: initial;
 }
 main {
  margin: 0;
 }
 aside {
  width: 100%;
 }
 .pc_only {
 display: none;
 }
 .sp_only {
  display: block;
 }
}

そのほか、サーバー側でアクセスしたデバイスに応じてHTMLを動的に出力する方法もあります。

メリット

PCのサイドバー内にある情報をスマホの適切な位置に配置できます。ファーストビューを意識したレイアウトが可能です。

デメリット

PC用のタグとスマホ用のタグが各所に混在して配置されることになるので、ソースコードとしての見通しが低下したり、部分的にコードの二重管理が発生したりします。サイドバーの内容がページによって異なる場合には、特に注意が必要です。

サイドバーの内容を移動させるだけでは解決しない問題

いずれかの方法で、サイドバー内の情報の配置換えをすれば、うまくいきそうに思えてくるのですが、実際にやってみるといくつか課題が見えてきます。

画像の大きさがスマホの画面幅に合わない

PCのサイドバーの幅は180px~240px程度が多いため、サイドバーに配置する画像の多くは幅が200px前後です。一方、スマホのブラウザ幅は320px~414pxのため、画像を配置しても幅いっぱいには表示できず、隙間が空いてしまいます。

sidebar-image2

また、Retinaディスプレイではピクセル密度が高いため、画像がぼやけて表示されてしまう問題もあります。最近のスマホは高精細ディスプレイが多く、この事象は無視できなくなっています。

対応策としては、高解像度画像を利用する方法や、スマホに配置した画像は2列・3列で表示させたりするなど、レイアウトで工夫する方法があります。

まとめ

PCとスマホの両方のレイアウトを突き詰めて考えると、サイドバーは思ったよりも扱いづらい存在です。

また、PCサイトにおけるユーザーの視線は、ヘッダやサイドバーを除いたメインコンテンツ内をF字型で垂直方向に動きます。サイドバーはメインコンテンツ以外の情報を求めるユーザーのための補助的な役割であり、クリック率も高くありません。そのため、最近ではサイドバーを外し、1カラムで表示するサイトが増えてきています。

ところがサイドバーを外してみると、スマホは最適されたレイアウトになるものの、今度はPCサイトのコンテンツが間延びしたように見えてしまいます。サイドバーがあった場所にもメインコンテンツが広がることで、隙間が多くできたり、画面の大きさに対して情報量が少なくなるためです。

alter.jsはスマホサイトのコンテンツを利用し、ブロックを並べたり広げたりすることで、情報量を調節しながらPCサイトをレイアウトします。

Webサイト制作はalter.jsで。

Page Top