Media Queriesのブレイクポイント｜WDSG策定チーム［#04］

みなさんは普段、Media Queriesのブレイクポイントはどの位置で指定していますか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［Media Queriesのブレイクポイント］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．Media Queriesのブレイクポイント

１）基本的に、ブレイクポイントは［768px］を指定します。

意図１：
スマートフォンユーザー向けに最適な表示を行います。

意図２：
代表的なタブレット端末［iPad］を基準にします。

２）デザインに応じて適宜ブレイクポイントを追加します。推奨する位置は［Bootstrap 4］を基準に指定します。

・Extra Small：0〜575px
・Small：576〜767px
・Medium：768〜991px
・Large：992〜1199px
・Extra Large：1200px〜

２．策定までの流れ

［Media Queriesのブレイクポイント］について行ったSlackでの流れを、公開議事録として掲載します。

園川さん：
media queryはどこでbreakpointを区切ってますか？

ヒカル：
僕の現状は以下で、mixinで必要な分を呼び出してます！
・1200px
・1000px
・768px
・480px
・400px
・357px

いなとみさん：
僕はbootstrap3使っているので、そのデフォルトを利用していますよー！
・スマホ：767px以下
・タブレット：768px〜991px
・PC：992px〜1119px
・PC大：1200px以上

桑島さん：
私もBootstrap使う場合も多いので、Bootstrap4を参考にする場合が多いです。
・1200px
・992px
・768px
・576px
さらにスマホの縦対応として
・320px（あまり使いませんが…）

吉永さん：
デザインやリキッドレイアウトにするか、Bootstrap縛りなど、案件によりけりなのでPC/SPのみの場合はとりあえず。
・SP 768px or 769px

ヒカル：
では、マストをSP/PCの［768px］で指定、あとはデザインに応じてBootstrap4と同様の位置を掲載する方向で、策定を進めますね！

桑島さん：
私も768pxはマストだと思います。
それ以外は、正直レイアウトに合わせて適宜にという感じな気がします…。
bootstrapは一般的にも普及しているので、bootstrapを参考に～でいいと思います。

以上が、Slackでの流れです。

実際はAnalyticsで［解像度］ごとのアクセスデータを参照したり、ドキュメント化する時に調査を行いました。

３．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！