Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Material Designとは何かを知る会
Search
Okuto Oyama
June 12, 2016
Design
1
850
Material Designとは何かを知る会
社内勉強用資料。Material Designとは何か?を改めてイチから学んでみました。
Okuto Oyama
June 12, 2016
Tweet
Share
More Decks by Okuto Oyama
See All by Okuto Oyama
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
100
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
14
React 18からのAPI useIDを使おう!/ Let's Use the useID API from React 18
yamanoku
0
48
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.4k
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
240
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 / How to make Nuxt applications accessible based on page transitions
yamanoku
0
820
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
yamanoku
0
3.2k
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
yamanoku
3
5.6k
PWA is Progressive Web Accessibility
yamanoku
0
79
Other Decks in Design
See All in Design
harutaka Vision Deck
zenkigenforrecruit
0
120
Echoes Boomerang
artcloudyu
PRO
0
230
portfolio_YumiYasuda
yum0418
0
270
Social Anxiety
ksmith2024
0
230
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
420
AIで加速するアクセシビリティのこれから
magi1125
3
500
Haley's adventure chase
ivettetwin
0
210
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.4k
クライアントワークにおける UXリサーチの実践
kozotaira
0
670
問いの変遷
iflection
0
130
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
120
セブンデックス カルチャーブック
sevendex
2
16k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.8k
Documentation Writing (for coders)
carmenintech
71
4.9k
The Cult of Friendly URLs
andyhume
79
6.4k
A Tale of Four Properties
chriscoyier
159
23k
Designing for Performance
lara
609
69k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Navigating Team Friction
lara
186
15k
GitHub's CSS Performance
jonrohan
1031
460k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Invisible Side of Design
smashingmag
299
51k
Transcript
Material Design הכ⡦ַ濼⠓ 0LVUP0ZBNB
娖〷
أُؗ٦ٌ٦ؿ؍ؤي ~ iOS6 ؿٓحزرؠ؎ٝ iOS7 ~ Modern UI Win8 ~
˖ نةٝװؙٔٝזוך䞔㜠ך䊴ⴽ⻉ָꨇ׃ְկ ' ˖ ة؎هؚٓؿ؍٦ה葿鼅ןָꨇ׃ְկ ' ˖ ٌث٦ؿךךך⹛ֹ׃ַדֹזְկ
4 ˖ ؝ٝإفزָ♧倜ׁג⢪欽䠬ַָזֻזկ . ِ٦ؠ٦ךךرؠ؎ٝחכ玎黅ְ
What’s Material Design ?
(PPHMFָ䲿㈖ׅرؠ؎ٝؖ؎سٓ؎ٝ .BUFSJBM%FTJHOכ 秵ה؎ؙٝ ךًةؿ؋٦דדֹגְկ
չ秵պ
⾨ׁEQך秵ד⳿勻גְ
זחչdpպהכ density-independent pixels 㺘䏝ꬊ⣛㶷ؾؙإٕ וך歗㺘䏝דずׄ״ֲח邌爙דֹؾؙإٕ⽃⡘ וך鍑⫷䏝ך畭劣ד鋅ג㣐ֹׁכずׄ
秵כ⚛ץꅾז׃ג ⴱג䠐䧭ׅ Ӫխխխխխխխ✕
אזֺ湡4FBN 媮䊴4UFQ ٖ؎،ؐز 卐ךل٦ػ٦ָ籬ָגְ㜥さծ晙倯⹛ַׇלֲ晙倯⹛ֻ 卐ךل٦ػ٦ָꅾזגְ㜥さծאך⹛ֹכ㛇劤涸ח杝甧׃גְկ
秵ךꅾזדꤣ䕦ך慬ׁ٥䎢ָ㢌גֻ ׃رغ؎أךؖٓأ굲ן馉ֿׅהכ⳿勻זְ
չ؎ؙٝպ
歗♳ח㶷㖈ׅ葿ךאְسحز 醱꧟ז㔳䕎 㫝ךⱖ溪 ׅץגչ؎ؙٝպךًةؿ؋٦
؎ؙٝכ荈㖈ח⹛ְגծ葿㢌 ؽرؔכٔ،ٕة؎يח刿倜ׁ竲ֽ؎ؙٝה鍑ꅸׁկ
Material Designחֶֽ չ،صً٦ءّٝպ https://www.google.com/design/spec/motion/material-motion.html
䭁㣐٥簭㼭 㢌䕎㔊錬̒̔⚵ ˟瘝⦓麊⹛דכזְ
؎٦آؚٝ،صً٦ءّٝ ،صً٦ءّٝך㨣穄✪儗חכ⸇幾鸞ָ涪欰ׅկ 简䕎獳⹛׃גכזזְկ颵ꆀַָ֮ http://easings.net/ja
Material Designחֶֽ չنةٝպ
FAB ( Floating Action Button ) ˖ 㛇劤涸ח歗חאֽ㶷㖈 ˖ 秵ךאזֺ湡ծ媮䊴חꂁ縧דֹ
אזֺ湡ח֮儗̔ 媮䊴ח֮儗̔ ӧ♧筰ח⹛ֻ ✕♧筰ח⹛ַזְ
˖ 害欽涸זꞿ倯䕎ךنةٝ ˖ ِ٦ؠ٦،ؙءّٝ儗חٔحفٕծꥐ饯ָ涪欰ׅ ٖ؎ؤسنةٝ ؿٓحزنةٝ ˖ 害欽涸ז俑㶵ֽךنةٝկ ˖ ِ٦ؠ٦،ؙءّٝ儗ח葿ָ㢌٥ٔحفָٕ涪欰ׅ
˖ ꥐ饯כ׃זְ https://getmdl.io/components/index.html#buttons-section
תה
˖ ״ِ٦ؠ٦穗꿀ח䘝㹋ח鏣鎘ׁرؠ؎ٝ ˖ وذٔ،ٕرؠ؎ٝכչ秵պהչ؎ؙٝպ ˖ 秵כ⾨ָ֮ծ؎ؙٝכ荈㖈ח䎢ָ ˖ ،صً٦ءّٝכ颵ꆀծⴓַװְׅ⹛ֹ • FAB
(Floating Action Button) Material Design הכ
㷕ֿה
穠㽷אך չؿؓ٦وحزպ ח麓ֺזְ
وذٔ،ٕرؠ؎ٝכ 姻鍑ךرؠ؎ٝדכזְ չ姻鍑ח鵚בֻךرؠ؎ٝպ
וְֲֲךָ ِ٦ؠ٦חהג姻׃ְַ 罋ִ䗳銲ָ֮
Material Design ַ ַֿך Webرؠ؎ٝ罋ִ״ֲ
• Google Material design ˖ ״ַֻوذٔ،ٕرؠ؎ٝך鏣鎘؝ٝإفز ˖ ➙ׁ➂חכ耀ֽזְծأُؗ٦ٌ٦ؿ؍ؤيהؿ ٓحزرؠ؎ٝך麩ְ •
https://getmdl.io/ • http://materializecss.com/ • http://fezvrasta.github.io/bootstrap-material-design/ 罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽