Compose のデザイン システム
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Jetpack Compose を使用すると、デザイン システムを簡単に実装できます。また、テーマ設定やコンポーネントなどにより、一貫性のあるデザインをアプリに施すことができます。
以降のページでは、デザイン システムを設計および実装する方法について詳しく説明します。
サンプル
次のサンプルは、Jetpack Compose のデザイン システムを示しています。
あなたへのおすすめ
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-08-27 UTC。
[null,null,["最終更新日 2025-08-27 UTC。"],[],[],null,["Jetpack Compose makes it easy to implement a design system and give your\napp a consistent look and feel with theming, components, and more.\n\nThe following pages provide details on how to design and implement your design\nsystem:\n\n- [Material Design 3](/develop/ui/compose/designsystems/material3): Learn how to use [Google's design system](https://m3.material.io/) to build your product in Compose.\n- [Migrating from Material 2 to Material 3](/develop/ui/compose/designsystems/material2-material3): Learn how to migrate your app from Material Design 2 to Material Design 3 in Compose.\n- [Custom design systems](/develop/ui/compose/designsystems/custom): Learn how to implement a custom design system in Compose, and how to adapt existing Material Design composables to handle this.\n- [Anatomy of a theme](/develop/ui/compose/designsystems/anatomy): Learn about the lower-level constructs and APIs used by `MaterialTheme` and custom design systems.\n- [Migrating XML themes to Compose](/develop/ui/compose/designsystems/views-to-compose): Learn how to migrate your View-based XML themes to Compose.\n\nSamples\n\nThe following samples demonstrate design systems in Jetpack Compose:\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Material Design 2 in Compose](/develop/ui/compose/designsystems/material)\n- [Custom design systems in Compose](/develop/ui/compose/designsystems/custom)\n- [Anatomy of a theme in Compose](/develop/ui/compose/designsystems/anatomy)"]]