Studio Happyvalley

サイドバーを
スマホでも
すっきり

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

image: サイドバーをスマホでもすっきり
Cleared Sidebar

スマホでもアクセスしやすいユーザビリティの高いサイドバーにする

 | 2021/06/25

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

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

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

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

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

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

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

では、どうするか

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/06/clearedsidebar.png

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

ビューポートの最下段に慣性スクロールで配置

『サイドバーをスマホでもすっきり』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition