Zenn初投稿になります。Flutterエンジニアをしてます、hott3です😃

MaterialDesign3 のデザイン領域のお話になってしまいました。コードは出てこないです。。
同アドベントカレンダーに MaterialDesign3 の実装記事があります、とても参考になりました🙇‍♂️🙇‍♂️

目次

導入
MaterialDesign3とは"Googleのデザインシステム"
"デザインシステム"とは
Flutter × MaterialDesign3で解決したいこと
MaterialDesign3を構成する要素
"デザインシステム"で実現したいこと
感想

導入

Flutter開発において MaterialDesign3 の導入を検討するにあたり、
確認と考察をしたいことがあったので、記事化して整理したいと思います。

MaterialDesign3とは"Googleのデザインシステム"

MD3 のドキュメントを確認すると下記のように書いてあります。
つまり MD3 とは"Googleのデザインシステム"ということのようです。

Material 3 is the latest version of Google's open-source design system. Design and build beautiful, usable products with Material 3.
（訳）Material 3 は、Google のオープンソースデザインシステムの最新バージョンです。Material 3 を使って、美しく、使いやすい製品をデザイン、構築してください。

https://m3.material.io/

デザインシステムとは

"デザインシステム" という言葉で検索するといくつかの定義が出てきました。

デザインシステムとは、デザインにおけるスタイル、UIコンポーネントのライブラリ、そしてその他のルールにまつわるドキュメントである。

一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。

デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネントなどを備えた一連のリソースのことを指します。

つまり、デザインシステムとは

「一貫したデザインや操作性を提供するリソースであり、デザインされた要素のライブラリとそれらのルールにまつわるドキュメントで構成されている」

ということかと考えてます。

似ている言葉、「デザインパターン」

似たような言葉でデザインパターンという言葉もあったかと思います。
こちらはオブジェクト指向の要素で実装サイドのメリットがいくつかあるようです。（コードの再利用、実装の効率化、メンテンス性の向上など）
今回は、UIを含めた視覚的なデザインも含むため、「デザインシステム」とは異なる意味であると認識しています。

Flutter × MaterialDesign3で解決したいこと

今まで、Flutter × MaterialDesign3 を検討した際には「いい感じなデザインで実装できる」ぐらいに考えていましたが、
"Googleのデザインシステム"であるために、プロジェクトにフィットしない場合もあるかと思います。

プロジェクトごとに適したデザインシステムへのアプローチをするために、Flutter × MD3 に触れつつ、
デザインシステムそのものへの理解を深めていきたいです。

MaterialDesign3を構成する要素

ここからは MD3 構成要素をざっくり見ていき、
そのデザインシステムの具体的な内容を確認していこうと思います。

MaterialDesign3のページを確認する

Faundations

Faundationsページには、アクセシビリティやインターフェースのありかたについて書いてあり、
"デザインシステム"のルールにまつわるドキュメントにあたるかと思います。

Foundations inform the basis of any great user interface, from accessibility standards to essential patterns for layout and interaction.
（訳）アクセシビリティの基準からレイアウトやインタラクションの基本パターンまで、優れたユーザーインターフェースの基礎となる情報を提供するのが「ファウンデーション」です。

https://m3.material.io/foundations

例えば、Accessibility - Touch and pointer target sizesによると、
アイコンのタッチ可能な領域の最小サイズを48 × 48dp^[1]として推奨しています。
これはどの端末でもある一定以上のサイズを表示することを推奨している内容でした。
また、より多くのユーザーに対してアクセシビリティを向上させるには、最小サイズをより大きく設定しておくとよさそうです。

Faundations では、他の構成で取り上げられる要素の根拠や理由についてまとめられていました。

Styles

Stylesページには、Color（色）やElevation（標高）など、要素に対して役割を持たせるためのルールが記載されていました。
ここでいう役割とは、要素に規則の一貫性を持たせることで表現できる役割だと認識しています。

配色を変更することで、他の要素より強調する色の役割
他の要素よりも手前に表示されることで、注意を向ける標高の役割など

Styles are the visual aspects of a UI that give it a distinct look and feel. They can be customized by changing your Material theme.
（訳）スタイルとは、UIに独特のルック＆フィールを与える視覚的な側面です。スタイルは、Materialのテーマを変更することでカスタマイズできます。

https://m3.material.io/styles

例えば、Style- Color systemによると、
Primary、On-primary、Primary container、On-primary container、という役割がありました。
MD3ではベースカラーを1つ選択することで、配色パターンから他の色も自然と決まっていきます。
これらの色を使い分け規則の一貫性をもたせることで、ユーザーに役割を表現しているようです。

Primaryとは目立たせたい要素の塗りに使用する色。On-primaryとはPrimaryの上に表示するテキストに使用する色。。
Primary containerとはPrimaryよりは強調する必要のない要素の塗りに使用する色。On-primary containerとはPrimary containerの上に表示するテキストに使用する色。

※このPrimary container、On-primary containerの使用イメージがうまく持てておらず、解釈を続けていきたいです🤔

Components

Componentsページには、具体的なUIパターンやコンポーネントの例が記載されています。
コンポーネントの記載には大きさや必要な余白、使用される色について記載があるだけでなく、不適切な使用例についても記載がありました。
読んでみると普段の実装でも、ありがちな失敗例も多く、言われてみればユーザビリティをそこなっていたことに気づきました。

Components are interactive building blocks for creating a user interface. They can be organized into five categories based on their purpose: Action, containment, navigation, selection, and text input.
（訳）コンポーネントは、ユーザーインターフェースを作成するためのインタラクティブなビルディングブロックです。これらは、その目的に応じて、アクション、コンテインメント、ナビゲーション、選択、テキスト入力の5つのカテゴリーに整理することができる。

https://m3.material.io/components

例えば、Components - Buttons - Specsによると、
Filled buttonのスペックの記載がありました。StylesのColorで記載があったRoleが使用されていて、ボタンの配色に指定がありました。

また、Components - Buttons - Guidelinesでは、
Common buttonsの ✅Do（適切な使用例）と❌Don't（不適切な使用例）の紹介があり、より具体的で直接的に用法を知ることができました。

MaterialDesign3を構成している要素を確認して思ったこと

MD3の公式ドキュメントを確認してみると、コンポーネントに落とし込む前から、色や形などの細かな要素にも役割を持たせていることが印象的でした。
また、配布されているFigmaのデザインデータでMaterial 3 Design Kitを確認すると、様々なパーツのパターンが用意されていました。
このデザインデータを確認することで、実装時に必要な余白や色を参照しやすいですね。
（実装時の指定方法も color: #FFFFFF, のカラーコードとかではなく color : primaryColor, など定数化できていると良さそう）

ドキュメントとコンポーネントのデザインデータが揃っているために、
プロジェクト全体でとる値が確認しやすかったり、
デザインの方向性や要素の役割をイメージしやすいかったりします。
このドキュメントとデザインデータが揃っていて、利用できる状態を"デザインシステム"として認識しています。

感想

MaterialDesign3をデザインシステムとして、見つめ直し確認してみました。
今までデザインに対して表面的なイメージしか持てていなかったので、
イメージしにくかったデザインのリソースについて、「少し」理解を深めることができたと思います。

デザイン領域に触れることはデザイン分野の知識や、少なくないリソースが必要になりますが、
デザインシステムについて、検討したことは今後の開発やデザイナーとのコミュニケーションを円滑にすすめる糧になったかと思います💡

デザインシステムを実践して、開発効率と品質を向上させたい気持ちです。
実装コードのない記事となりましたが、お読みいただきありがとうございました🙇‍♂️🙇‍♂️

参考

Material Design

https://m3.material.io/

MD3について

MD3のデザイントークンについて

デザインシステムについて

https://www.i3design.jp/in-pocket/10230

他の組織のデザインシステムの取り組み例

脚注

dpとは、画面上の表示要素の幅や高さなどを指定する長さの単位の一つ。機種ごとの画素密度の違いによらず、画面上の実際の長さを指定することができる。主にAndroid OSで用いられる。 ↩︎

Discussion