スマートフォンで「縦スクロール」は非常にウザいんです

パソコンでの横スクロールとモバイルでの横スクロール

「パソコンだと横スクロールが疎ましく、モバイル端末では縦スクロールが疎ましい。」みたいなことをどこかに書いたのですが(どこかは忘れちゃった)
私はMacユーザーなんだけども、Macでは マウスの上で指を左右にスライドすると 前ページ・後ページの履歴を繰ることができる んですよね。これが非常に便利で、この設定を利用しているMacユーザーさんは多いと思います。でもね、横、つまり左右スクロールするときも同じ動作なんですよぅ (´・ω・｀)
だから左にスクロールするつもりが前のページに戻っちゃったりして。もうなんか。パソコンで横スクロールバー出るとか問題外。ありえない。 ←
そうですよね？ Macユーザーさん(笑)

このMacのマウス動作がクソ、とか耳にすることもありますけど。私から言わせてもらえれば横スクロールバーなんぞ出す方がクソ。って思っています。すみません
私がレスポンシブを好むのはこれもあるよ (´・ω・｀)
固定幅1024px以上でブログされてる方は知っておいてほしいなぁ… そのあたり…。横1024割りこんだら横スクロールバーでも仕方ないと思って諦めつくよ。うん。譲歩しても1366px。
(ちなみに一般的なタブレットの横幅は768pxですから確実に超過です)

逆にモバイル端末。こちらの場合は横スクロールは気にならないんです(ただし慣性スクロールは欲しい)
寧ろ快適に操作できます。でも縦はダメよ〜 (´・ω・｀)
Twitterとかも縦にクルクルするからちょっとヤダなぁと思ってる。でもそれはとぅいったーさん仕様だから仕方ないですね。

モバイル端末で縦スクロールボックスを利用する時は余幅を設けましょう

指を逃す場所を確保して頂けると助かります。以下サンプルです。

• スクロールボックスの範囲・外罫を赤くしてあります。
• 実際にはモバイル端末でスクロールバーは出ませんが、わかりやすくするために付けています。

スクロールボックスの左右に余白がありません。そして上下も余白がない。つまりサイズ設定が大きすぎる例。こんななってると指の逃げ場がありませんので、この下にあるコンテンツに行きたくても中身のクルクルが終わるまで移動できません。まぁ、これは極端な例です。

黒い部分は実際には先行コンテンツと後続コンテンツがありますが、不可視にしてあります。黒い範囲が余白となり、指をここに置いてスワイプすればスクロールボックスの中身を無視できます。

左右の余幅(gap)も必要ですが、モバイル端末のことを考慮するのならば 縦サイズを大きく設定し過ぎない ことは大事かな、と思います。

おすすめ共有プラグイン

FC2ブログでどうしても縦に伸びてしまいがちなのは

• アーカイブ(月日)
• カテゴリ

ですよね。折りたたみ系共有プラグインのおすすめをご紹介しますけれど、注意事項

1. 全てのプラグインを拝見したわけではありませんので、私の知らない優れものはまだたくさんあると思います。
2. html5に準拠していること
3. JSのエラーが生じないこと
4. テンプレート内の他プラグインとコンフリクト(衝突・干渉)しにくいコード内容になっているもの

を選ばせて頂いたつもりです。実際に私が利用させて頂いているものです。

カテゴリ折りたたみ
作者名: Paroday[paro2day] 様
名称: Categories...B
DOWNLOAD

アーカイブ折りたたみ
作者名: daniel[pcafe] 様
名称: Tree-Arcive
DOWNLOAD

これだけ？？？え。そうですよ (´・ω・｀)
上記2作はたぶん作者様が「テンプレートと衝突させたらアカンなー」を考えて作ってくださってるんだと思います。分野が違うのでどうしてもその立場から製作してしまいがちというか、私なんかは完全にそうなんで ←
ですからホント尊敬するー (´・ω・｀)
重宝しております。ありがとうございます。

まとめ

折りたたみの場合はコンテンツが隠されているわけなので、最初からバーンとこう… 目に見えたほうが良いんじゃないか、というのもわかるんですけどね。鬱陶しがられては元も子もないというか ^^;
スクロールボックスを選択するならば最低でも左右上下の余幅・余白に気を使うと良いのかなぁ、と。ま、そんなとこですわ ←←←