ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blog
スタッフブログ

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

ブレイクポイントについて改めて考えてみた

1

年末ですね。 忙しいですね。
年始にいろいろと忘れないように、メモしまくっているマサヨシです。※メモをなくさないようしないと。。。

さて、ボクはコーディング作業にはgulpを使っています。
autoprefixer、css-mqpackerなど、CSSをコンパイルするのに便利なので使っています。

autoprefixer //prefixを自動で付けてくれる
css-mqpacker //mediaqueryなどまとめてくれたりする

これらを使っててちょっと不具合が起こりました。
昔の名残でPCをベースにCSSをかいて、そこからブレイクポイントを付けていくので、PC->Tablet->SPの順で付けていってました。
css-mqpackerを使うまでは特に支障がなかったのですが、media queryをまとめてくれるという、ありがたい機能が仇となり PC->SP->Tabletの順番に書き換わってしまう!

なんでだーーー

気がつくまで、ムダな時間を少し過ごしました。
順番が変わってしまったことで小さい方を優先され、タブレットの記載が全く無効化されてしまっていたってことが判明という、すごくダサいミスを犯しておりました。

そこで、改めて、考えたスマホベースで書くほうが簡単なんじゃない?と・・・(今更感)

そして、次に気になったのはブレイクポイント!
前に、設定してから、随分と気がたったなぁってことで再考。

よく使われているモニターを調べる

過去半年分を調べてみました。(1年を調べようとしたけど、途中でとまってしまた)

デスクトップ

statcounter-resolution-jp-monthly-201606-201611-bar-pc

1920×1080、1366×768、2560×1440の順に多いみたいですね。
少し前に比べたら「2560×1440」27インチモニタが随分増えたようですね。
iMacが増えたのかな?
ただし、これはモニターサイズであるということで、ブラウザを最大で見ているわけではないということ

タブレット

statcounter-resolution-jp-monthly-201606-201611-bar-tablet

768×1024、1280×800、600×960の順ですが768×1024のiPadが圧倒的ですね。
これはすごすぎですね。

スマートフォン

statcounter-resolution-jp-monthly-201606-201611-bar-sp

375×667、320×567、360×640、414×736、1080×1920、720×1280の順になっていますね。
iPhone6/7が一番多く、iPhone5/5s/SEが次点、その次にアンドロイド端末のようですね。
414がiPhone6+/7+で1080、720がアンドロイドですね。

まとめると

  • – スマートフォンの上位は414が最大、まだ大きいものも増えそう
  • – タブレット上位の最小サイズは600なのでスマホデザインの最大値は599
  • – タブレットの横で見た場合の最小値は960
  • – デスクトップはモニターサイズ最大でみているわけではないので1024や1280も考えると1000以下も考える

結論

600pxと960pxと1200px
600pxはスマホとタブレットの
960pxはタブレットとデスクトップ(ラップトップも含む)の
1200pxはラップトップとデスクトップの
各境目になります。

  • – 厳密に言うとタブレットの横向きにすると960px以上になりますが、そこはデスクトップと同じデザインでも問題なく表示できるであろう
  • – スマホの横向きはほぼ居ないだろうというのと広がるならばタブレット用のデザインの方が見やすいであろう
  • – 最近は、大きなモニターが増えていっているので小さいPCモニター、大きなPCモニターで表示を切り替えてもいいであろう

1200pxに関しては、無しもあり・・・デザインによりけりですね。
今回は、派生からブレイクポイントに関してを考えてみたのですが、じっくり考えると結構なやむところですね。
もっと、こうするべきでは?みたいなのがありましたら、ご指導いただければと思います。

日々進化するこの業界は、勉強勉強の毎日ですね。
それでは、みなさま、よいお年を!!!!

この記事を共有する

髭人
投稿者:髭人
2016年12月27日火曜日 | 22:18
WEB制作業界に新しい風に!台風になりたい!

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

コメントを残す

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

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