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
860
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
350
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
17
React 18からのAPI useIDを使おう!/ Let's Use the useID API from React 18
yamanoku
0
52
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.4k
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
250
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 / How to make Nuxt applications accessible based on page transitions
yamanoku
0
830
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
80
Other Decks in Design
See All in Design
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
130
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
270
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
オープンデータを利用して色々なものを作った話
hjmkth
1
110
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
260
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
510
今日から意識できるアクセシビリティ
fumiko
0
240
マンガで分かるサービスデザインガイドライン
senryakuka
1
900
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
私とデザインの10年
iflection
0
150
Cyber Heart Online Book
hjnasby
0
120
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Rails Girls Zürich Keynote
gr2m
94
14k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The World Runs on Bad Software
bkeepers
PRO
69
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Optimizing for Happiness
mojombo
379
70k
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/ 罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽