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
870
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
2
490
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
24
React 18からのAPI useIDを使おう!/ Let's Use the useID API from React 18
yamanoku
0
89
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.7k
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
280
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 / How to make Nuxt applications accessible based on page transitions
yamanoku
0
870
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
yamanoku
0
3.3k
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
yamanoku
3
5.8k
PWA is Progressive Web Accessibility
yamanoku
0
87
Other Decks in Design
See All in Design
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
4.2k
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
190
Bulletproof Design System with TypeScript
takanorip
7
4.2k
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
240
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
440
7 Core Values of Round-L
wired888
0
2.1k
minpaku-community-scrum-patterns
norinity1103
1
430
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Think Like a Performance Engineer
csswizardry
27
2k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Site-Speed That Sticks
csswizardry
11
880
4 Signs Your Business is Dying
shpigford
185
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
A better future with KSS
kneath
239
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
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/ 罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽