こんにちは。ハマです。
最近、近所の薬局で安売りしているじゃが○こが主食になりつつあります。炭水化物だし特に問題ないですね。

さて、今回はスマートフォン向けページのスクロールについてです。

コンテンツを詰め込みたくても一度に表示できる量は限られます。詰め込みすぎればページが縦に長くなり、スクロール量が増えてしまいます。

結果的にページ下部に行くほどコンテンツが読まれなくなる傾向があります。

そこでページのスクロール量を減らす方法を色々考えてみました。

見出しをタップすると内容が表示される「アコーディオン制御」

文章やリンクをつらつらと書き連ねると、思いのほかページは長くなってしまうものです。

そこで見出しを利用して詳細情報の表示・非表示機能を実装してみましょう。これはアコーディオンと呼ばれる方法です。

001
画面いっぱいの表示も
yajirushi
002
折りたたんでスッキリ!

「見出し+詳細情報」で表示されている箇所をアコーディオン制御にすることで、スクロール量が減り、ユーザーはページ内から興味のある見出しを素早く見つけることができます。

つまり、ユーザーにとって不要な情報は省くことができるんですね。

長くなりがちなナビゲーション等をメニューボタンで表示する

一番大事なファーストビュー、どのページを開いても画面の半分が同じ表示で埋まっているなんてもったいないですよね。

前回のカオツ氏のブログでも紹介していますが、メニューボタンを用意することで利便性を損なうことなく、ファーストビューを有効活用できます。

003
ページの上部が埋まってしまっているページも
yajirushi
004
005
メニューボタンでスッキリ!

メニューボタンを用意することで、見た目がスッキリした使い勝手の良いページになります。

ページ内リンクを用意する

ページ内リンクを用意することで、スクロールしなくても該当箇所まで移動することができるようになります。

また、まとめておくことでページ内のインデックスのような役割も果たし、検索性も良くなります。

ページ内リンクを加えた分、ページの表示量は増えてしまいますが、そこは上記のメニューボタンの表示に加えてしまえば一発解決です!

ページ内リンクは一瞬で画面が切り替わるので、jQuery等を使ってスムーズに移動するように作成すると視覚的にも良いかもしれません。

スクロールを減らして“スマート”なスマートフォンページに

繰り返しになりますが、ページが長くなれば下部コンテンツは読まれなくなってしまいます。せっかくなら最後まで読んで欲しいですよね。

情報量を削らずにスクロール量を減らして、スマートなページにしたいですね。

今回のブログも長くならないうちに、ここで筆を置かせていだきます!