【2024年】Web制作会社20社のブレイクポイント調べてみたら...

皆さんはブレイクポイントをどの値に設定していますか？
会社によって指定はあるとは思いますが、現在はどこに設定するのが主流なのか、Web制作会社の制作実績から調べてみました。

2024年現在のブレイクポイント目安

ブレイクポイントで話題によく上がるのは、「bootstrap」のブレイクポイントを一つの目安にすることです。
ここで改めて「bootstrap」のブレイクポイントについて振り返りたいと思います。

１．調査方法

• 位置情報での検索結果の影響を防ぐため、アメリカ版google+シークレットモードで「Web制作会社」と検索
• １ページ目に表示された制作会社、もしくは「制作会社おすすめ○○選」といった記事から20社抜粋
• 制作実績ページから最新の２件を調査（合計40ページ）

また、すべてのブレイクポイントを拾っているわけではありません。
一部のデザインを実装するために、スタイルが一つ二つ書いてるような、ブレイクポイントは記載していません。
あくまでも、PC、スマホ、タブレットなどの表示をどこで切り替えているかを調べています。
では早速結果にまいります。

２．調査結果

ということで結果はこのようになりました。
以下は調査結果をまとめた表になります。

縦軸の数字がサイトで、１社につき２サイト調べています。
横軸がブレイクポイントの設定の値です。

3．総評

だいたい 768pxにブレイクポイントを設定している

上記の結果の通り、ブレイクポイントの大半は768pxに設定しており、後は必要に応じてPC表示用のブレイクポイントを設定していましたが、基本は「bootstrap」に近い値を設定しているようです。
768px一つだけブレイクポイントを設定している会社も多かったです。
あまりブレイクポイントが増えると修正も大変になるため、私もこのパターンが好きです。

また、スマホ用にもっと小さいブレイクポイントを設定しているかと思いましたが、そうでもないようですね。

まとめ

今後デバイスが進化して、ブレイクポイントの流行が変わるかもしれませんが、その際は「bootstrap」のブレイクポイントも変更されてるはずなので、その値を参考にして良いと思います。

また、前回スマホ表示時のフォントサイズも調査してますので、トレンドを理解してコーディングに活かしましょう。

また、HTMLの最新情報を学びたいなら生放送の授業がピッタリ！
最新情報を業界のトップレベルの講師が生放送で授業してくれます。
そんな動画学習でオススメが「Schoo」です。登録・生放送授業は無料！
是非、一度お試しください。

おすすめ

登録・生放送授業が無料！オンライン学習動画サービス

7000本の授業が見放題！社会人向けオンライン学習動画【Schoo(スクー)】

7000本の授業が見放題！オンライン学習動画【Schoo(スクー)】

総合評価 ：

「参加型生放送授業」と、「8,000本以上の録画授業」で動画学習
「WEBアプリケーション開発【入門】」や「HTML・CSS基礎」などWEB制作講座も多彩！
参加型生放送授業は無料、録画授業は月/980円と格安で学べる！

• 365日配信される参加型生放送授業が無料
• チャットで業界の気軽に質問できる
• 月/980円で今までの授業がどれでも見放題！
• WEB制作や、プログラミング講座も多彩な講座が用意されています。

\ 無料授業を体験！ /

【Schoo(スクー)】

生放送授業のスケジュールを見てみよう！