元はTwitterで。

Twitterで以下のように言ってしまいました。

世の中ではレスポンシブ全盛期と言っても過言ではない時代に入ろうとしています。しかし、レスポンシブデザインによってユーザーが使いにくいサイトになってはいけないな、と思っています。(スマホとか特に)

別に、「レスポンシブの技術がないからできないんだ」とかというわけではありません。ただ、ウェブ技術でソースコードなどを掲載するときの見やすさを重視するとどうしてもスマートフォンを対象から外すかどうかというがあると思います。このサイトに限ったことではないとは思いますが、参考にしてもらえれば良いと思います。

ユーザーのターゲットをどこに当てるか

ユーザーをどこを狙うかによって変わってくると思いますし、内容でも変わってくると思います。

見てもらいたいユーザーにとって不便かどうかを自分がスマホでサイトを見ていると考えるといいと思います。私はスマートフォンでは縦方向のみのスクロールで済ませたいと思っています。横に移動してイラッとしてしまうことが多いのが原因です。

横方向のスクロールを無くしたいと一概に言ってしまうとYouTubeなどの動画を掲載したら...と色々と問題が出てきてしまうのですが、半分以上の記事やサイトで執筆する記事の内容でどうなのか、ということを考えれば良いと思います。

"タブレットサイズ"で切る理由

このサイトは主にサーバーなどのフロントエンドの方向などで解説したりしていきたいと思っているので、「記事が読みやすく最適ではないか」と判断しているからです。

というのも、タブレットだと大体7型〜10型サイズで、特にiPadを基準として考えると情報を表示しておくためのモニタとして活用できるのではないかな、と思っています。4:3の比率の物が多いですし、10型となるとMicrosoftのSurfaceのサイズと同じぐらいのサイズですよね。とすると、外出先でノートパソコンと一緒に持ち運んだりしていて、コーティングやサーバー管理などの作業をしていて"あれ、これって何だったっけ..."となった時に横に置いて見ながらすることができます。他にも、ノートパソコン1台でやっていてもだいたい横600px〜700pxに合わせていれば今のノートパソコンの液晶の解像度の幅に適しています。(Macの場合は1440px,一般的なWindowsのラップトップは1366px)

自分が作業をしやすいから、というわけではありませんが画面の半分にした時のことまですこし頭のなかに入れているといいかもしれません。「ユーザー(=閲覧者)が自分(顧客など)のウェブサイトをどのようにしてみるか」ということと「ウェブサイトに使っているプラグイン(SyntaxHighlighterなど)とサイトのデザインが干渉して結果見づらくならないか」ということを考えなければいけないかなと思っています。

スマートフォンまでしたほうが良い例

最後に、レスポンシブデザインを採用したほうが良いサイトとそうではないサイトについてまとめたいと思います。ただ、個人の意見も入っていますし、見やすさ重視している部分もあります...。あくまでも一例です。

対応したほうが良いサイト

  • 個人のブログ(日記とかガジェットの紹介とか)
  • トピックやニュースなどを伝えるメディア(特にスマホ用のものを扱っているところは)
  • 個人プロフィールサイト
  • お店のサイト(スマホで店を調べて場所を調べることも多い)

対応しないほうが良いサイト

  • ソースコードなどをある程度扱う前提のサイト(シンタックスハイライトとか)
  • 企業サイト(情報量が多くなるし、表とか多くなるとそれに合わせてしないといけないからお金もかかる。)

いずれにしても、ユーザーの見やすさを重視すべきではないかと思っています。タブレットであればある程度画面と解像度も大きいので情報の表示量を多くしても読みやすいですが、スマホは大きさ・解像度の療法が小さいのでどれくらいの情報にするかを考えなければいけませんね。

タブレットのサイズ(10型ぐらい)のパソコンとかあったので約10型のタブレットはパソコンと同じ量の情報を掲載しても問題ないのかなー、と思っていたりしますが...。