マガジン
記事一覧
Material Design 3 要点まとめ #14 Typography
Material Design 3 ガイドラインの要点をまとめたものです。
第14回はTypographyの章。前回から4ヶ月越しになってしまいました。
一旦最終回です。
OverviewM2からの更新ポイント
バリアブルフォントRoboto FlexとRoboto Serifが登場。
タイプスタイルは役割によって分類された5種類（ディスプレイ、ヘッドライン、タイトル、ボディ、ラベル）に。シ
Material Design 3 要点まとめ #13 Shape
Material Design 3 ガイドラインの要点をまとめたものです。
第13回はShapeの章。M3コンポーネントのシェイプの種類とカスタマイズに関する内容です。短い。
M2からの更新ポイントM3のシェイプは2つのファミリー x 7つのスタイルで構成されている。
M2では、コンポーネントのシェイプの分類は「コンポーネント全体のサイズ」を基準にした3種類（Small・Medium・Larg
Material Design 3 要点まとめ #12 Motion - Transitions
Material Design 3 ガイドラインの要点をまとめたものです。
第11・12回はMotionの章。ちょっと長いので記事を2つに分けます。今回はTransitionsの項について。代表的なトランジションパターンの性質と、それぞれの適切なユースケースについて紹介されています。ところどころでAndroidとiOSのデフォルトについて言及されているのが印象的。
Transition patt
Material Design 3 要点まとめ #11 Motion - Easing and duration
Material Design 3 ガイドラインの要点をまとめたものです。
第11・12回はMotionの章。ちょっと長いので記事を2つに分けます。今回はOverview＋Easing and durationの項。Overviewではモーションがデザイントークンとして整備されたことが紹介されています。Easing and durationは、物理世界の動きを模倣する「イージング」と、変化の継続時
Material Design 3 要点まとめ #10 Icons
Material Design 3 ガイドラインの要点をまとめたものです。
第10回はIconsの章。マテリアルデザインにおけるアイコンの役割や、アイコンデザインの基準について説明しています。また、Googleが提供するアイコンライブラリ「Material Symbols」についても紹介しており、デザイナーが利用する際の注意点や使い方についても解説しています。
OverviewM2からの更新ポイ
Material Design 3 要点まとめ #9 Elevation
Material Design 3 ガイドラインの要点をまとめたものです。
第9回はElevationの章。Elevation（高度）とは、z軸に沿った2つの表示面の間の相対的な距離のことです。M2での厳密さと比べると、かなり簡略化されました。シャドウが減って見た目の印象もだいぶ変わりました。
OverviewM2からの更新ポイント
M2では高度を表現するために必ず「シャドウ」を使っていたが、
Material Design 3 要点まとめ #8 Color - Dynamic color
Material Design 3 ガイドラインの要点をまとめたものです。
第6・7・8回はColorの章。長いので記事を3つに分けます。今回はDynamic colorの項について。
Overviewダイナミックカラーによるカラースキームの自動生成には以下の2つのロジックがある。
ユーザー設定／コンテンツに応じた配色
ユーザーが選択した壁紙など、ユーザーの設定をもとにして配色を自動生成する
Material Design 3 要点まとめ #7 Color - Color system
Material Design 3 ガイドラインの要点をまとめたものです。
第6・7・8回はColorの章。長いので記事を3つに分けます。今回はColor systemの項について。
M3のカラーシステムは動的な変化に対応するもので、配色を一定値の固定グループではなく「相対的な色調のまとまり」と考えるところがポイントです。
Key colors & tones要点
カラースキーム：5つのキーカ
Material Design 3 要点まとめ #6 Color - Overview
Material Design 3 ガイドラインの要点をまとめたものです。
第6・7・8回はColorの章。長いので記事を3つに分けます。今回は概要のみ。重要なキーワードの紹介といったところ。
M2からの更新ポイントダイナミックカラーの導入ダイナミックカラーとは、さまざまなソースや条件に応じて色を適用するカラーシステムのこと。
カラーシステムによって、自動的に多くのデフォルト値が提供される。そ
Material Design 3 要点まとめ #5 Interaction states
Material Design 3 ガイドラインの要点をまとめたものです。
第5回はInteraction statesの章。ステートレイヤーの基本法則など、コンポーネントの「状態」の表現についての解説です。
要点ステートレイヤー：要素の「状態」を表す半透明の覆いUIコンポーネントには「ステートレイヤー」という、要素の「状態」を表す半透明の覆いがある。
レイヤーは要素全体を覆うか、要素の上に円
Material Design 3 要点まとめ #4 Design tokens
Material Design 3 ガイドラインの要点をまとめたものです。
第4回はDesign tokensの章。M3の目立った新概念のひとつ。スタイル指定の構造化が大きく進みました。
要点デザイントークン：スタイルの「値」を共通化するハードコードされた「値」の代わりにデザイントークンでスタイルを定義する、という概念。
デザインシステムによるプロダクトの構築、メンテナンス、スケーリングなどの
Material Design 3 要点まとめ #3 Customizing Material
Material Design 3 ガイドラインの要点をまとめたものです。
第3回はCustomizing Materialの章。Android12からの新機能である、ダイナミックカラーによるUIカラーのパーソナライズの紹介。ここでは触りだけ紹介されていて、詳細は別章にそれぞれジャンプする構成になってます。
要点ダイナミックカラー：UIカラーにユーザーの設定を反映M3のカラースキームを使ってUI
Material Design 3 要点まとめ #2 Adaptive design
Material Design 3 ガイドラインの要点をまとめたものです。
第2回はAdaptive designの章。Material Designの基本的なレイアウトの考え方やバリエーションについてのガイドラインです。折りたたみ式ディスプレイについて大きく取り上げられているところにAndroidっぽさを感じます。
OverviewM2からの更新ポイント
折りたたみ式デバイスガイドラインを追
Material Design 3 要点まとめ #1 Accessibility
Material Design 3 ガイドラインの要点をまとめたものです。
第1回はAccessibilityの章。ここはMDやM3特有の内容というよりはアクセシビリティに関する概論みたいな話が多いです。
Overview要点
MDのコンポーネントはデフォルトでアクセシビリティに対応している
MDのコンポーネントにはあらかじめ基本的なアクセシビリティの要素が組み込まれているので、これを使用す