この記事は、Bricks公式サイトの内容をもとに、噛み砕いて分かりやすくまとめました。
Bricksのデフォルト設定（ブレークポイント）
Bricksには、あらかじめ４つのサイズ区分（ブレークポイント）が用意されています。
| デバイス | 画面幅の目安 |
|---|---|
| パソコン（Desktop） | 基準 |
| タブレット（縦） | 992px 以下 |
| スマホ（横） | 768px 以下 |
| スマホ（縦） | 478px 以下 |
まずはパソコンサイズで全体を作り、そのあと「タブレット」や「スマホ」に切り替えて見た目を整えていく流れが基本です。
画面の切り替えは、ビルダー上部のデバイスアイコンから行えます。
サイズ区分を追加・変更したいとき
もし自分のサイトに合ったサイズがほしい場合は、カスタムブレークポイントを追加できます。
手順は次のとおりです。
- WordPress管理画面で「Bricks > Settings > General」を開く
- 「Custom breakpoints」をオンにする（上図参照）
- ビルダー右上の「…（三点アイコン）」から「ブレークポイントマネージャー」を開く
- 幅や名前、アイコンなどを自由に設定
大画面用に「1400px」というブレークポイントを作るなど、柔軟に調整できます（下図参照）。
基準の考え方と「モバイルファースト」
Bricksでは通常、パソコン用デザインを基準にして、そこから小さい画面に合わせて修正していきます（下図参照）。
ですが、「スマホから作りたい」という方はモバイルファースト設計も可能です。
その場合は、スマホサイズ（Mobile）を基準に設定して、画面が大きくなるほどレイアウトを広げていく形になります（下図参照）。
スタイルの違いを見える化
Bricksでは、どの設定がどのデバイスで変わっているかを示す「インジケーター」が表示されます。
これによって、「この余白はスマホだけ変えてある」などが一目で分かります。
デザイン修正のときにとても便利です。
まとめ：レスポンシブ編集のコツ
- まずはパソコンサイズで全体を整える
- その後、タブレット・スマホごとに微調整する
- フォントや余白、配置をそれぞれ最適化
- 不要な要素はスマホで非表示にする
- カスタムブレークポイントは必要なときだけ追加
ブレークポイントについては、デスクトップとスマホのみの設定方法 の解説もあります
