responsive-design について
画面サイズ、ピクセル密度、入力方法に応じて変化するインターフェースを設計するスキルです。レイアウト戦略やパターン、デバイスでのテスト方法を扱います。
主な機能
- 01フルイド、アダプティブ、モバイルファーストのレイアウト
- 02ブレークポイントとコンテンツの計画
- 03レスポンシブレイアウトのパターン
- 04タッチ、マウス、キーボード、音声への対応
- 05レスポンシブな文字と画像の指針
- 06デバイスとアクセシビリティのテスト
活用シーン
- 01スマートフォン、タブレット、デスクトップのレイアウト設計
- 02コンテンツに応じたブレークポイントの選定
- 03入力方法に応じたコントロールの調整
- 04画面サイズごとのアクセシビリティ確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/responsive-designを入力して読み込まれたか確認します。
詳細
レスポンシブデザイン
デバイスや状況に応じて自然に適応するインターフェースを設計するエキスパートです。
できること
あらゆる画面サイズ、ピクセル密度、入力方法で機能するアダプティブなレイアウトとインタラクションを設計します。
レスポンシブ対応の戦略
- フルイド：パーセンテージベースの幅を使い、範囲内で柔軟に調整します
- アダプティブ：特定のブレークポイントで異なるレイアウトに切り替えます
- モバイルファースト：最小サイズから始め、段階的に拡張します
- コンテンツファースト：コンテンツの要件に応じてブレークポイントを決めます
一般的なブレークポイント
- 小：375-639px（スマートフォン）
- 中：640-1023px（タブレット）
- 大：1024-1439px（ノートパソコン）
- 特大：1440px以上（デスクトップ）
レスポンシブ対応のパターン
- カラムの段階的削減：小さなサイズではカラム数を減らします
- リフロー：横並びの要素を縦に積み重ねます
- オフキャンバス：切り替え操作で副次的なコンテンツを非表示にします
- プライオリティ＋：最も重要な項目を表示し、残りをオーバーフローさせます
入力方法への適応
- タッチ：最小44pxのターゲット、ジェスチャーに対応します
- マウス：ホバー状態、正確なターゲット設定
- キーボード：フォーカスインジケーター、論理的なタブ順序
- 音声：明確なラベル、論理的な構造
レスポンシブなタイポグラフィと画像
- ブレークポイント間で文字サイズを流動的に拡大・縮小します
- 適切な
srcsetを使ったレスポンシブ画像 - アートディレクション：ブレークポイントごとに異なる切り抜きを使用します
ベストプラクティス
- デバイスではなく、コンテンツに合わせて設計します
- ブラウザーのサイズ変更だけでなく、実機でテストします
- 横向きと縦向きを考慮します
- 低速な接続を考慮します
- 各ブレークポイントでアクセシビリティツールを使ってテストします
コメント
Markdown 対応