Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

レスポンシブWebデザイン【スマホサイズのブレークポイント】

Ethan_Marcotte_-_Responsive_webdesign

ブレークポイントとはレスポンシブWebデザインをコーディングする際に
CSS3のMedia Queriesを使って画面サイズ別にCSSを切り替えることです。
CSSが切り替わる画面幅をブレークポイントと呼びます。
スマホのブレークポイントをどこに設定すれば一番良いのか調べてみました。

 

弊社ではスマホサイズは768px以下をスマホサイズの
ブレ-クポイントに設定していることが多いです。

レスポンシブで作られているサイトを色々見てみたのですが、
スマホでのブレークポイントは「640px以下」、「550px以下」「736px以下」「820px以下」
とサイトに寄ってバラバラでした。
比較的「768px以下」が多いと感じました。

 

現在使用されているポピュラーなデバイスのサイズは、
スマホ縦「320px〜479px」スマホ横、タブレット「480px〜767px」、タブレット「768px〜1023px」
PC「1024px〜」となります。

上記のことからタブレットの最小幅「768px」以下は
スマホサイズと考える制作者が多いのではないかと思います。

 

それではスマホでの一番最適なブレークポイントはどこなのでしょうか?
ブレークポイントについて下記のように記載されているサイトを見つけました。

・ブレークポイントはレイアウトによって、望ましい設定が変わります。
参考URL http://www.mobile-first.jp/original/1444/

・『ブレークポイント』ですが、特に「こうするべき」というものが今のところありません。
この境目をどの値にするかもそうですし、何分割させるのかというのも制作者が
いろいろ試行錯誤している最中なのです。
参考URL http://www.aiship.jp/knowhow/archives/3376

 

上記のことからデザイン、レイアウトに寄ってブレークポイントの場所は変えた方が良いと考えた方がよさそうです。
私がコーディングしている際に思うのが、スマホの最小幅は320pxなのですが、
「768px以下」をスマホのブレークポイントとした際に
どうしても最小幅320pxのスマホで確認したら画像やフォントサイズが小さくて見えにくい場合があります。
その際は320pxの幅で見やすい画像サイズやフォントサイズを設定することが大切です。
 

 

この記事を共有する

投稿者:OHTO
    2015年02月24日火曜日 | 00:28
    WordPress勉強あるのみ。

    この人が書いたその他のブログ記事

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    • I.M.Dコーポレートサイト
    お問い合わせ