ど素人から毛を生やす。<延>

ブログのレスポンシブ化って何pxからがベスト?

Web > Other 2014年7月17日(最終更新:2年前)

このページは2014.7.17に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
最近のマイブームがOVA版TOSの音楽巡りな餅。です。

新しい刺激が欲しい今日この頃……

 

さて、今回は当ブログに追加されたささやかな新機能について。

所謂、レスポンシブ対応という奴をいたしました。
とは言っても、head内に
<meta name="viewport" content="width=device-width,initial-scale=1.0">
を追加した上で、一定pxからサイドバーを下に落としただけという雑仕様ですが。

今回の主題は、その切り替えポイントは何pxがベストなのかという点です。
言い方を変えるなら、ブログでサイドバーが邪魔になるのはどこからかということ。

餅。はワンカラムサイトが好きです。
視線誘導が容易で、余分な情報がない分、本文の内容がストレートに入ってきます。
企業サイトなんかはもう全部ワンカラムで良いんじゃないかと思うくらい好きです。
パララックスサイトである必要はないんです。
ワンカラムは情報伝達という視点において原点かつ頂点だと思うんです。

一方、ブログサイトにおけるサイドバーの有用性も理解できます。
最新記事や人気記事の欄に面白そうなタイトルがあったらついクリックしてしまいますし、
サイドバーを発端に果てないネサフが始まることも少なくありません。
また、当サイトは忘備録も兼ねて作っているため、利便性故にサイドバーは手放せません。

では、一体どこのラインからワンカラム化してしまうのが良いのでしょうか。
と首を傾げたとき、餅。はpixivで面白い小説を発見したときのことを思い出しました。
タブレットPCでpixiv閲覧する場合、アプリでなく通常サイトを見る方は多いと思います。
餅。もそうです。
が、アプリがあるだけあって、pixivサイトはレスポンシブ対応等は一切行っていません。
イラストや漫画を巡っているときには特に気にならないのですが、
小説になるとサイドバーが邪魔になってきます。
文字も小さくなりますし、やはり余分な文字情報が視界に入っているのは
集中や気分を削がれてあまり気持ちよくありません。
ので、わざわざ本文のサイズまで画面を拡大して読みます。
PCで見るとき、わざわざ本文だけを切り取るように拡大したり、
ウィンドウを縮める方はいないと思います。

つまり、タブレットPCではサイドバーは邪魔ということです。
というわけで、切り替えポイントはiPadの縦向きのときの横幅、768pxに決定しました。
多くのタブレットPCの横幅は768pxないし640pxなので、大きい方に合わせます。
@media screen and (max-width: 768px) {

そんな感じでタブレットPC対応したど素人ブログですが、
スマホへの対応具合はいまひとつ感があります。
そりゃ、サイドバー落としているだけですから。
でもま、現在のコンテンツ的にはスマホからの需要はまず無いだろうと切り捨ててます。
Web以外のコンテンツが増えたら、スマホへの本格対応も考えねばですね。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)