ブレークポイントはいくつ？
レスポンシブウェブデザインで最初に悩むのが、ブレークポイントを何ピクセルにしたらよいか、だと思います。「推奨値が決まっていればそれにするんだけれど・・」と思うでしょうけれど、結論から言えば、2016年時点ではサイトによって全くバラバラで、特に決まった値というのはありません！
比較的多いのは、500～600ピクセル以下をスマホ、700～900ピクセル以下をタブレット、それ以上はPCとして切替えているケースですが、それ以外のケースもあり様々です。
切替パターンも、スマホとPCだけの2パターンから、細かく5～6パターンに変わるサイトまで様々ですが、まずは初心者のシンプルなサイトであれば2パターンで十分ですので（タブレットとPCは共通）、下記例を参考に、ご自分のサイトに適したブレークポイントを設定してみてください。
ブレークポイントはどう決める？
以前は、端末の機種を想定して、iPhoneやiPadは何ピクセルだから・・・とブレークポイントを設定していましたが、今は次々に様々な画面サイズの新機種、新端末が発売されますので、特定の機種を想定しても意味がありません。
また、レスポンシブの真の目的は、「どんな画面サイズの端末でも、見易いレイアウトで表示する」ということですから、要するに、そのサイトが見易ければどんなブレークポイントでもよいのです。
既にPC用サイトがある場合は、そのPC用レイアウトでは見難くなった時点のサイズで、スマホ版（あるいはタブレット版）に変えるのが最も望ましい形です。
でも、そうはいっても普通はどうしてるの？と思うでしょうから、世の中の信頼できるサイトはどんなブレークポイントを設定しているか、下記に例示しましょう。
お手本サイトのブレークポイント（参考値）
まずは、レスポンシブを推奨しているGoogleのサイト、それから、比較的最近レスポンシブのサイトを公開した信頼できるサイト（文部科学省、慶應義塾大学、ニトリ通販等）。
なんとまあ、見事にバッラバラ！
つまり、サイトの作り（シンプルなサイトか情報満載なサイトか等）によって、ブレークポイントは本当に様々なのです。
●Google モバイルフレンドリーの解説サイト･･････496/720/1000
https://developers.google.com/webmasters/mobile-sites/
●Google ログイン画面･･････580/800
https://accounts.google.com/ServiceLogin
●文部科学省サイト･･････480/690/979
http://www.mext.go.jp/
●慶應義塾大学サイト･･････750/1024
https://www.keio.ac.jp/ja/
●ニトリ 公式通販サイト･･････480/600/900/1280
https://www.nitori-net.jp/store/ja/ec/
●レスポンシブWebデザイン.jp（秀逸なWebデザイン集）･･････400/680/1000
http://responsive-jp.com/
シンプルなサイトなら、600ピクセル前後のみの2段階
上記のように、「サイトによってブレークポイントは様々」というのをご理解頂いたうえで、初心者のシンプルなWebサイトであれば600ピクセル前後をブレークポイントとして、スマホとPCの２段階に切替えるので十分と考えます。
ちなみに、当サイトのブレークポイントは520pxです。シンプルな作りなので、タブレットとPCは共通、またスマホであっても横向きの場合はPC版にしています（古い機種では横もスマホ版が表示）。
スマホの横向きでもスマホ版を表示したい場合は、600px程度にするとよいでしょう。
まずは600ピクセル前後をブレークポイントに設定して、実際に表示させてみて、見易さや操作性を確認したうえで決定されることをお奨めします。
※レスポンシブ制作については、レスポンシブWeb制作の基礎のページで詳しく解説しています。
スマホ対応簡単解説 ＜目次＞
