mcpField
M
mobile-first-design

mobile-first-design

github.com/aj-geddesデザイン・UI373860 回インストール34 週間前に更新
リポジトリ

mobile-first-design について

小さな画面から設計を始め、大きなデバイス向けに体験を広げるデザインスキルです。レスポンシブ実装、モバイル性能、プログレッシブエンハンスメントのガイドを提供します。

主な機能

  1. 01小画面を起点とするレイアウト設計
  2. 02レスポンシブデザインのガイド
  3. 03モバイル性能のガイド
  4. 04プログレッシブエンハンスメントのガイド

活用シーン

  1. 01Webアプリの設計
  2. 02レスポンシブサイトの作成
  3. 03モバイル向け機能の優先順位付け
  4. 04デバイス間の体験改善

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill mobile-first-design

インストール後、Claude Code で/mobile-first-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
mobile-performance.md
progressive-enhancement.md
responsive-design-implementation.md
scripts/
validate-config.sh
templates/
config-starter.yaml

詳細

モバイルファーストデザイン

目次

概要

モバイルファーストデザインでは、小さな画面を出発点として優先し、すべてのデバイスで主要な機能が動作するようにしながら、大きな画面ではより優れた体験を提供します。

使用する場面

  • Web アプリケーションのデザイン
  • レスポンシブ Web サイトの作成
  • 機能の優先順位付け
  • パフォーマンスの最適化
  • プログレッシブエンハンスメント
  • デバイスをまたいだ体験のデザイン

クイックスタート

最小限の動作例：

Mobile-First Approach:

Step 1: Design for Mobile (320px - 480px)
  - Constrained space forces priorities
  - Focus on essential content and actions
  - Single column layout
  - Touch-friendly interactive elements

Step 2: Enhance for Tablet (768px - 1024px)
  - Add secondary content
  - Multi-column layouts possible
  - Optimize spacing and readability
  - Take advantage of hover states

Step 3: Optimize for Desktop (1200px+)
  - Full-featured experience
  - Advanced layouts
  - Rich interactions
  - Multiple columns and sidebars

---
## Responsive Breakpoints:

Mobile: 320px - 480px
  - iPhone SE, older phones
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装については、references/ ディレクトリを参照してください：

ガイド内容
レスポンシブデザインの実装レスポンシブデザインの実装
モバイルパフォーマンスモバイルパフォーマンス
プログレッシブエンハンスメントプログレッシブエンハンスメント

ベストプラクティス

✅ DO
  • 最小の画面向けに設計する
  • 実際のモバイルデバイスでテストする
  • レスポンシブ画像を使用する
  • モバイルのパフォーマンスを最適化する
  • タッチターゲットを最低 44x44px にする
  • モバイルではコンテンツを縦に並べる
  • モバイルではハンバーガーメニューを使用する
  • モバイルでは重要でないコンテンツを非表示にする
  • 低速なネットワークでテストする
  • プログレッシブエンハンスメントのアプローチを採用する
❌ DON'T
  • モバイルユーザー全員が高速なネットワークを利用できると想定しない
  • モバイルでデスクトップ専用のパターンを使用しない
  • タッチ操作のニーズを無視しない
  • ボタンを小さくしすぎない
  • 横向き表示を忘れない
  • モバイルのレイアウトを複雑にしすぎない
  • モバイルのパフォーマンスを無視しない
  • キーボードがないと想定しない（iPad ユーザー）
  • モバイルユーザーテストを省略しない
  • ノッチとセーフエリアを忘れない

コメント

Markdown 対応