BLOG
Material DesignとMaterial 3：ボタンスタイルの比較
2023.11.20
2023.11.20
はじめに
Material 3は、Googleが提案する最新のデザインフレームワークです。Material Designは2014年にGoogleから公開され、アプリやウェブページのデザインの基盤として用いられてきました。その後のバージョンアップを経て、Material Designは進化し、Material 3が登場しました。
今回は、Material DesignとMaterial3の違いについて、ボタンの比較とともにご紹介します。
この記事ではFlutter 3.13.9とDart 3.1.5をベースに解説を行っています。
Material DesignとMaterial 3の主な違い
1. デザイン哲学における進化
Material Designは、グリッドベースのレイアウトと厳密なカラーシステムを特徴としています。このアプローチは、整理された構造と一貫性のあるビジュアルを提供することに重点を置いています。
対照的に、Material 3（Material Youとも呼ばれます）は、ユーザーの好みや設定を反映することで、よりパーソナライズされたデザイン体験を生み出します。この新しいデザイン言語は、柔軟性とユーザーエクスペリエンスのカスタマイズを中心に展開されています。
2. カラーシステムの変革
Material Designのカラーシステムは、プライマリとセカンダリの固定カラーを使用して、視覚的な一貫性を保ちます。
一方で、Material 3は、ユーザーの壁紙や選択したテーマに基づいて色が動的に変わるという革新的なアプローチを取り入れています。これにより、各ユーザーに合わせたユニークな色の組み合わせが生まれます。
3. コンポーネントの進化
Material Designでは、標準化されたスタイルガイドに従った基本的なコンポーネントが提供されます。
対して、Material 3では、より柔軟なカスタマイズが可能な新しいコンポーネントを導入しています。これにより開発者は、より創造的でユーザー中心のインターフェイスを構築できるようになります。
続いて、今回はMaterial3の中からボタンに焦点を当てて解説していきます。
ボタンについての比較
以下では、ボタンに着目して、Material DesignとMaterial 3の違いについて比較しています。
Material Design
従来のMaterial Designでは、シャープなエッジ、クリアな色分け、明確なシャドーを使用して、要素がどのように階層化されるべきかを強調しています。
Material3
Material 3では、より柔らかい色合い、動的なテーマ、丸みを帯びたコンポーネントなど、ユーザーのカスタマイズ性を重視したデザインが特徴です。これにより、よりアクセシブルで応答性のあるUIが実現されます。
今回使用したコード
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// Material 3を使用するかどうかのフラグ
bool useMaterial3 = true;
// 共通のテーマカラー
const MaterialColor primaryColor = Colors.deepPurple;
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: primaryColor,
colorScheme: useMaterial3
? ColorScheme.fromSeed(seedColor: primaryColor)
: ColorScheme.fromSwatch(primarySwatch: primaryColor),
useMaterial3: useMaterial3,
appBarTheme: const AppBarTheme(
backgroundColor: primaryColor,
titleTextStyle: TextStyle(
color: Colors.white, // AppBarのテキスト色を白に設定
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
// ボタンテーマの統一
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: primaryColor,
onPrimary: Colors.white,
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: primaryColor,
),
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
primary: primaryColor,
side: const BorderSide(color: primaryColor),
),
),
),
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Buttons'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {},
child: const Text('ElevatedButton'),
),
const SizedBox(height: 10),
TextButton(
onPressed: () {},
child: const Text('TextButton'),
),
const SizedBox(height: 10),
OutlinedButton(
onPressed: () {},
child: const Text('OutlinedButton'),
),
],
),
),
),
);
}
}以下の部分で、Material designとMaterial3の切り替えを行います。
bool useMaterial3 = true; // falseでmaterial designまとめ
本記事では、Googleの最新デザインフレームワークであるMaterial 3の特徴と、Flutterを使用した実装方法に焦点を当てました。Material 3は、ユーザーの好みを反映したパーソナライズされたデザインを特徴とし、従来のMaterial Designからの進化を表しています。Flutterを用いることで、これらの新しいデザイン要素を効果的に取り入れることが可能です。
