jpskill.com
💬 コミュニケーション コミュニティ

expressive-design

Material 3 Expressive (M3E). Comprehensive guidance on expressive design system for Flutter with platform support for Android and Linux desktop. Covers color tokens, typography scales, motion specifications, shape tokens, spacing ramps, and component enhancements for creating emotionally engaging UIs. Includes migration guidance from standard M3 and platform-specific integration notes.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o expressive-design.zip https://jpskill.com/download/8762.zip && unzip -o expressive-design.zip && rm expressive-design.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/8762.zip -OutFile "$d\expressive-design.zip"; Expand-Archive "$d\expressive-design.zip" -DestinationPath $d -Force; ri "$d\expressive-design.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して expressive-design.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → expressive-design フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1
📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

Material 3 Expressive Design System

Material 3 Expressive (M3E) is Google's most researched design system update, based on 46 studies with 18,000+ participants. It creates emotionally engaging user experiences through strategic use of color, shape, size, motion, and containment.

Quick Reference

Category Reference Description
Foundations FOUNDATIONS.md Research, principles, communication, core elements
Color COLOR.md Tokens, palettes, contrast specs
Typography TYPOGRAPHY.md Scales, values, treatments
Motion MOTION.md Durations, easing, transitions
Shapes SHAPES.md Radii, tokens, containment
Spacing SPACING.md Spacing ramps, touch targets
Components COMPONENTS.md Component specifications
Migration MIGRATION.md M3 to M3E migration guide
Accessibility ACCESSIBILITY.md Compliance, testing
Platforms PLATFORMS.md Android and Linux desktop

Core Expressive Elements

  1. Color - Expanded tonal palettes, container tiers, emotional selection
  2. Shape - Expressive radii, containment, visual boundaries
  3. Size - Larger touch targets, visual hierarchy
  4. Motion - Energetic transitions, emotional timing
  5. Containment - Surface elevation, tonal separation

When to Use M3 Expressive

  • Media and entertainment applications
  • Communication apps (email, messaging)
  • Social platforms
  • Creative tools
  • Consumer-facing products

When to Avoid M3 Expressive

  • Banking and financial applications
  • Safety-critical interfaces
  • Healthcare and medical software
  • Productivity tools requiring efficiency
  • Forms-heavy applications

Platform Support

  • Android - Dynamic color, Android 16 integration, native behaviors
  • Linux Desktop - Keyboard navigation, focus management, desktop interactions

Key Research Findings

  • 87% preference among 18-24 age group
  • 4x faster element recognition
  • 32% increase in subculture perception
  • 34% boost in modernity
  • Erases age-related usability gaps

Flutter Integration

Use the m3e_design package for M3 Expressive implementation:

dependencies:
  m3e_design: ^0.2.1
  dynamic_color: ^1.8.1

Next Steps

  1. Review FOUNDATIONS.md for core principles
  2. Apply color system from COLOR.md
  3. Implement typography from TYPOGRAPHY.md
  4. Add motion from MOTION.md
  5. Apply shapes from SHAPES.md
  6. Configure spacing from SPACING.md
  7. Implement components from COMPONENTS.md
  8. Migrate existing M3 from MIGRATION.md
  9. Ensure accessibility with ACCESSIBILITY.md
  10. Configure platform-specifics from PLATFORMS.md