mobile-first-design について
モバイル向けのレイアウトから設計を始め、大きな画面に適応させるためのガイドです。ブレークポイント、タッチ対象のサイズ、性能目標、プログレッシブエンハンスメントを扱います。
主な機能
- 01モバイル画面幅からの設計
- 02大画面向けブレークポイント
- 03タッチしやすい対象サイズ
- 04ページとバンドルの性能目標
- 05プログレッシブエンハンスメント
活用シーン
- 01スマートフォンからデスクトップまで拡張するレイアウト設計
- 02ボタンサイズとタッチ間隔の確認
- 03モバイルページの性能制約の設定
- 04モバイル向けの基盤を大画面向けに拡張
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/mobile-first-designを入力して読み込まれたか確認します。
詳細
モバイルファースト設計
モバイルを基盤としてインターフェースを設計し、大きな画面向けに機能を拡張します。
ブレークポイント
| 名前 | 幅 | デバイス |
|---|---|---|
| モバイル | 320-480px | iPhone SE、小型 Android |
| タブレット | 481-768px | iPad mini |
| デスクトップ | 769-1024px | iPad Pro、ノートパソコン |
| 大画面 | 1025px+ | デスクトップモニター |
モバイルファースト CSS
/* Base styles (mobile) */
.container {
padding: 1rem;
}
.nav {
display: none; /* Hidden on mobile */
}
.nav-toggle {
display: block; /* Hamburger visible */
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 720px;
margin: 0 auto;
}
.nav {
display: flex;
}
.nav-toggle {
display: none;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
タッチしやすい設計
/* Minimum touch target: 48x48px */
.button {
min-height: 48px;
min-width: 48px;
padding: 12px 24px;
}
/* Adequate spacing */
.list-item {
padding: 16px;
margin-bottom: 8px;
}
パフォーマンス要件
| 指標 | 目標 |
|---|---|
| ファーストコンテンツフルペイント | 3G 接続で <3s |
| JS バンドル | gzip 圧縮後 <100KB |
| ページ全体のサイズ | <500KB |
プログレッシブエンハンスメント
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
ベストプラクティス
- 幅 320px から設計を始めます
- 相対単位（rem、%、vw）を使用します
- 実機でテストします
- モバイル向けに画像を最適化します
- 初回読み込み時の JavaScript を最小限に抑えます
- ズームしなくてもテキストを読みやすくします
コメント
Markdown 対応