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