7onicDESIGN SYSTEM

Breakpoints

モバイルファーストで設計されたブレークポイントシステム。画面サイズに応じたレスポンシブレイアウトを実現します。

Breakpoint Scale

5段階のブレークポイントでほぼすべてのデバイスに対応

default0px
モバイル（縦向き）4カラム
sm:640px
小型タブレット、大型スマートフォン（横向き）4カラム
md:768px
タブレット（縦向き）8カラム
lg:1024px
タブレット（横向き）、小型ノートPC12カラム
xl:1280px
デスクトップ、ノートPC12カラム
2xl:1536px
大型デスクトップモニター12カラム

Grid System

ブレークポイントごとに推奨されるグリッドカラム数

default

4col

md: 768px

8col

lg: 1024px

12col

よく使うレイアウトパターン

サイドバー + メイン
lg+
2
10
3
9
サイドバー (2 or 3)
メイン (10 or 9)
3等分カード
md+
md:grid-cols-3
default:grid-cols-1
4等分グリッド
lg+
lg:grid-cols-4
md:grid-cols-2
レスポンシブ変化の例
default1列
md:2列
lg:3列

Device Reference

各デバイスの画面幅と対応するブレークポイント

モバイル

default

iPhone SE375px
iPhone 14390px
iPhone 14 Plus428px

タブレット

md: 768px〜

iPad Mini744px
iPad810px
iPad Pro 11"834px

デスクトップ

lg: 1024px〜

MacBook Air1280px
MacBook Pro 14"1512px
iMac 24"1920px

画面幅の比較

ブレークポイントの境界を点線で表示

iPhone SE
375pxxs
iPhone 14
390pxxs
iPhone 14 Plus
428pxxs
iPad Mini
744pxsm
iPad
810pxsm
iPad Pro 11"
834pxsm
MacBook Air
1280pxsm
MacBook Pro 14"
1512pxsm
iMac 24"
1920pxsm

Design Principles

モバイルファースト

最小の画面サイズから設計を始め、大きな画面に向けて拡張します。

コンテンツ優先

デバイスではなくコンテンツに基づいてブレークポイントを選択します。

2fr
3fr
2fr

流動的なグリッド

固定幅ではなく相対単位を使用し、スムーズに適応します。

テスト重視

実際のデバイスでテストし、ブレークポイント境界を確認します。

Interactive Preview

スライダーで画面幅を変更し、ブレークポイントの切り替わりを体験

1024px
lg
グリッド:4col
ナビ:inline
レイアウト:row