Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design とは

Avatar for みっちゃん みっちゃん
May 29, 2023
Programming
110
0

Material Design とは

Avatar for みっちゃん

みっちゃん

May 29, 2023

More Decks by みっちゃん

See All by みっちゃん
Do you use git worktree?
Avatar for みっちゃん mitchan
0
120
Android値受け渡し大全 〜 設計を制する者が「渡す」を制す 〜
Avatar for みっちゃん mitchan
1
7.1k
2024年にチャレンジしたことを振り返るぞ
Avatar for みっちゃん mitchan
0
300
DroidKaigi初めて登壇したレポ
Avatar for みっちゃん mitchan
1
250
実践！難読化ガイド
Avatar for みっちゃん mitchan
0
4.1k
「実践！難読化ガイド」事前予告編
Avatar for みっちゃん mitchan
0
320
画面遷移 〜iOSとAndroid〜
Avatar for みっちゃん mitchan
0
420
パソコン音痴な私がモバイル開発界隈でぬくぬく成長している理由
Avatar for みっちゃん mitchan
0
600
ドキュメントから adbコマンドの仕組みを読み解く
Avatar for みっちゃん mitchan
1
400

Other Decks in Programming

See All in Programming
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
460
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
140
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
180
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.2k
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
340
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
3
820
dRuby over BLE
Avatar for makicamel makicamel
2
300
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.1k
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
280
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
160
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
270
oxlintはeslint/typescript-eslintを置き換えられるのか
Avatar for shoma-fujita shomafujita
2
310

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
350
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
140
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
150
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k

Transcript

  1. Material Designとは 登壇者：みっちゃん

  2. Material Designはなぜ必要か 一番の目的はアプリのデザインを統一すること！ アプリはデザインが統一されている必要があります。 そのためにDesign Systemがあります。 2

  3. Design Systemとは アプリの中でデザインがブレないように用意するコンポーネントや、プ ロダクトにおけるデザインの決まり事 例えば、SmartHRさんはプロダクトのDesignSystemを公開されている 3

  4. Material DesignもDesign Systemです！！ 4

  5. Material Designをどう使う？ Material Designはあくまで手段 Material Designの全てを使わないといけないわけではない！ デザイナーさんとのやりとりをもっと円滑に行うためのユビキタス言語* （*全員で同じ言葉でコミュニケーションを行うための共通言語の定義） 5

  6. MaterialDesignは従来のデザインとどう違う？ 従来のデザイン（M2） • 凹凸がある・立体的 • elevation(陰)がある • 色が濃い • 四角い・角がはっきりしている

    Material 3 • 平面的 • elevation(陰)がない • 色が淡い • 全体的に丸い

  7. まとめ 可愛くなった。（♡） 7