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
470
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
21
React 18からのAPI useIDを使おう!/ Let's Use the useID API from React 18
yamanoku
0
80
リアクティブシステムの変遷から理解する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
860
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.7k
PWA is Progressive Web Accessibility
yamanoku
0
85
Other Decks in Design
See All in Design
mento Design Team Portfolio
mento0fficial
1
630
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
240
What makes a great Director?
_limex_
0
200
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
180
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
790
UXデザインはなぜ定着しないのか?
designstudiopartners
0
940
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
960
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building an army of robots
kneath
306
46k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Code Review Best Practice
trishagee
70
19k
Balancing Empowerment & Direction
lara
3
610
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
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/ 罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽