● オンライン
Material Design

Google's オープンソース デザインシステム のための consistent, 直感的 interfaces 全体 platforms.

無料デザインシステム

プロダクト概要

Material Designは、Googleの包括的なオープンソースデザインシステムで、ウェブ、モバイル、その他のプラットフォーム全体で美しく一貫性のあるアクセシブルなユーザー体験を作成するためのものです。2014年にオリジナルがローンチされ継続的に進化し(最新はMaterial Design 3)、紙とインキからインスピレーションを得た標高、シャドウ、動き、マテリアルサーフェスなどの原則を使用して直感的なインタラクションを導きます。Googleプロダクト以外でも広く採用され(Androidアプリ、Material Web Componentsを使用したウェブなど)、テーマ、レスポンシブレイアウト、アクセシビリティによる適応性を強調しています。 コンポーネント:状態とテーマのためのバリアントを備えたボタン、カード、ナビゲーションドロワー、ダイアログ、チップスなどの再利用可能なUI要素。 デザイントークン:色(ベースライン、ダイナミックスキーム)、タイポグラフィ、シェイプ、エレベーション、モーションのガイドライン。 Material Theme Builder:パレットをカスタマイズしテーマを生成するツール。 実装:Material Web(ウェブ)、Material UI(React)、Angular Material、Flutter Material、Android Jetpack Compose。 アクセシビリティ:WCAG準拠、ハイコントラストモード、包括的なパターン。

label.best_for

チーム 構築 スケーラブル, consistent digital products.

主な機能

  • コンポーネント: Reusable UI elements のような buttons, cards, navigation drawers, dialogs, と chips を使った variants のための states と themes.
  • デザイントークン: 色 (baseline, dynamic schemes), タイポグラフィ, shape, elevation, と motion guidelines.
  • マテリアル Theme Builder: ツール のための customizing パレット と 生成 themes.
  • Implementations: マテリアル ウェブ (ウェブ), マテリアル UI (React), Angular マテリアル, Flutter マテリアル, と Android Jetpack Compose.
  • アクセシビリティ: WCAG compliance, high-コントラスト modes, と inclusive パターン.

メリット

  • +オープンソース
  • +カラーパレット生成
  • +アクセシビリティのコントラスト確認
  • +スムーズなアニメーション機能

デメリット

  • -導入にはチームの合意が必要
  • -カスタマイズが複雑になる場合あり

/// スペック

  • 価格:free
  • プラットフォーム:
    Browser / Android
ASSETS_DIRECTORY
/// 関連ツール