サイドバーを
スマホでも
すっきり魅力的なサイドバーも
スマホでは下の方に
押し込まれちゃうよ～。

これまでのWebサイトの課題から
スマホでのサイドバーの見せ方

WEBサイトの悩み事のひとつに、スマホでのサイドバーの扱い方があります。
通常WEBサイトはメインコンテンツとは別にキャンペーンやイベントなどの注目させたいコンテンツをサイドボックスに入れ、メインの左右に設置するケースが多くあります。

さらにサイドボックスを固定させることで注目させたいコンテンツをスクロールの影響受けずに常時表示させられ、ユーザーもサイドバーへアクセスしやすくなります。
また、ユーザーがサイト全体の構成を把握しやすいといった効果もあります。

ただ、サイドバーの高さがページの高さを超えてしまうと全体が表示されないという悩み事が発生してしまいますが…、これはまた別の機会ということに。

さて、いいことづくめのサイドバーですが、スマホの場合だと扱いが難しくなります。

横幅の狭いスマホでは
ワンコラムが常識

ワンコラムが常識のスマホではサイドバー要素は上か下に移動するしか方法がありません。
よくあるケースではサイトの下の方に押し込んだり…。
これはメインのコンテンツが少なければそれほど問題ありませんが、縦に長いコンテンツの場合、何度もスクロールしないとたどり着けなく逆にアクセスしづらくなってしまいます。
そもそも当初のアクセスしやすくという目的からも逸脱してます。
他には、TOPのグローバルメニューの下にサブメニューとして配置したりなど。しかし、ただでさえスペースに限りのあるスマホにあまり上部にメニューやバナーが集まるのは、ボタンのいっぱいついた家電みたいなもので、ユーザビリティ的に最善とはいえない手法です。

では、どうするか

サイドボックスのコンテンツを
ウインドウの最下段へ固定。

スタジオ・ハッピィバリーではスマホ表示の時はサイドボックスのコンテンツをウインドウの最下段へ固定します。
数が多い場合は慣性スクロールで左右へスワイプします。
この方法だとPCと同じようにスマホでもユーザーが、いつでも簡単にサイドボックスへアクセスすることが可能になります。
また、フッター要素がせりあがってきた時、重ならないようにposition: fixed ではなくposition: stikckey で設定します。
position: stikckeyでサイドバー用を設定するとフッターがせりあがってきた時、一緒に上にスクロールしていきます。

上のQRコードを読み込むとスマホでこのサイトの仕様を確認できます。