カスタムUIを作る覚悟 / The determination to create a custom UI

by matsuji

Slide 1

Slide 1 text

ΧελϜ6*Λ࡞Δ֮ޛ ·ͭ͡ !NUK@K

Slide 2

Slide 2 text

The new native app

Slide 3

Slide 3 text

อੵ ! Timelab CEO / Product Manager ؏Ҫ " Designer / macOS nativeίΞϝϯόʔ ·ͭ͡ # App Developer / ๻ usagimaru $ Software Designer / Developer / macOS nativeίΞϝϯόʔ

Slide 4

Slide 4 text

ΧελϜUI:   Apple͕ఏڙ͢ΔAPIʹ͸ͳ͍දݱͰ࣮ݱ͞ΕͨUI

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ΧελϜUIΛ࡞Δ͜ͱ͸೉͍͠ ୯ʹݟͨ໨Λ  ࣮૷͢Δ͚ͩͳΒ·ͩ͠΋...

Slide 7

Slide 7 text

࣮ྫ ࣮૷ͨ͠ྫ 1. φϏήʔγϣϯόʔͷλΠτϧ 2. γʔτ ࣮૷͠ͳ͔ͬͨྫ 3. ೔෇ϐοΧʔ

Slide 8

Slide 8 text

࣮૷ͨ͠ྫ̍ φϏήʔγϣϯόʔͷλΠτϧ

Slide 9

Slide 9 text

࣮૷ͨ͠ྫ̍ φϏήʔγϣϯόʔͷλΠτϧ • Ξχϝʔγϣϯ: φϏήʔγϣϯόʔͷτϥϯδγϣϯ ͜͜ʹ஫໨

Slide 10

Slide 10 text

࣮૷ͨ͠ྫ̍ φϏήʔγϣϯόʔͷλΠτϧ • Ξχϝʔγϣϯ: φϏήʔγϣϯόʔͷτϥϯδγϣϯ • ΞΫηγϏϦςΟ: ʮಁ໌౓ΛԼ͛ΔʯͰϒϥʔΛ΍ΊΔ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ʮઃఆʯʼʮΞΫηγϏϦςΟʯʼʮը໘දࣔͱςΩεταΠζʯ

Slide 13

Slide 13 text

ʮઃఆʯʼʮΞΫηγϏϦςΟʯʼʮը໘දࣔͱςΩεταΠζʯ

Slide 14

Slide 14 text

ʮઃఆʯʼʮΞΫηγϏϦςΟʯʼʮը໘දࣔͱςΩεταΠζʯ

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

ʮಁ໌౓ΛԼ͛ΔʯOFF ʮಁ໌౓ΛԼ͛ΔʯON

Slide 17

Slide 17 text

࣮૷ͨ͠ྫ̎ γʔτ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

࣮૷ͨ͠ྫ̎ γʔτ ΠϯλϥΫγϣϯ&ΞΫηγϏϦςΟ: άϥόʔ

Slide 20

Slide 20 text

࣮૷ͨ͠ྫ̎ γʔτ ΠϯλϥΫγϣϯ&ΞΫηγϏϦςΟ: άϥόʔ άϥόʔ

Slide 21

Slide 21 text

άϥόʔΛλοϓ͢ΔͱɺσΟςϯτΛॱ൪ʹબ୒Ͱ͖·͢ɻ άϥόʔ͸7PJDF0WFSʹ΋ରԠ͓ͯ͠Γɺ Ϣʔβ͸ը໘ΛݟͣʹγʔτͷαΠζΛมߋͰ͖·͢ɻ γʔτ | Apple Developer

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

࣮૷͠ͳ͔ͬͨྫ ೔෇ϐοΧʔ • ίϯύΫτ࣌ͷจࣈͷϑΥϯτΛੈք؍ʹ  ͋ͬͨ΋ͷʹม͔͑ͨͬͨ • ͜ͷϑΥϯτΛมߋ͢ΔAPI͕ఏڙ͞Ε͓ͯΒͣ  ΧελϜUIͱ࣮ͯ͠૷͢Δඞཁ͕͋ͬͨ

Slide 24

Slide 24 text

ࢦͰૢ࡞ͨ͠৔߹

Slide 25

Slide 25 text

τϥοΫύου  + ΩʔϘʔυͷ৔߹

Slide 26

Slide 26 text

τϥοΫύου  + ΩʔϘʔυͷ৔߹

Slide 27

Slide 27 text

τϥοΫύου  + ΩʔϘʔυ +஍Ҭ͕ΞϝϦΧͷ৔߹

Slide 28

Slide 28 text

τϥοΫύου  + ΩʔϘʔυ +஍Ҭ͕ΞϝϦΧ +ݴޠ͕ӳޠͷ৔߹

Slide 29

Slide 29 text

Apple Pencilͷ৔߹  ʢεΫϦϒϧʣ

Slide 30

Slide 30 text

͜Ε΍ΔΜ...ʁ • ඪ४API͸͜ΕΒΛશͯରԠ͍ͯͯ͠ɺϢʔβʔͷظ଴஋΋͜ͷϨϕϧ • ·ͩະ֬ೝͷڍಈ΋ଟ͋͘Γͦ͏ʢಛఆͷ஍Ҭͱݴޠͷ૊Έ߹ΘͤͷΑ͏ͳʣ • ͜ΕΒΛશͯରԠ͢Δͷ͸ίετ͕ߴ͗͢Δ • ʮϑΥϯτΛগ͠ม͍͑ͨʯͱ͍͏զʑͷ౎߹ͷͨΊ͚ͩʹ  ϢʔβʔମݧΛԼ͛ͯ͠·͏ σβΠϯΛमਖ਼ͯ͠ඪ४APIΛ࢖༻͢Δ͜ͱʹ

Slide 31

Slide 31 text

Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε

Slide 32

Slide 32 text

Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε

Slide 33

Slide 33 text

ΞΫηγϏϦςΟ • VoiceOver • μΠφϛοΫλΠϓ • Ϙλϯͷܗ • ΦϯΦϑϥϕϧ • ಁ໌౓ΛԼ͛Δ • ࢹࠩޮՌΛݮΒ͢ ͳͲͳͲ...

Slide 34

Slide 34 text

ΞΫηγϏϦςΟ • VoiceOver • μΠφϛοΫλΠϓ • Ϙλϯͷܗ • ΦϯΦϑϥϕϧ • ಁ໌౓ΛԼ͛Δ • ࢹࠩޮՌΛݮΒ͢ ͳͲͳͲ...

Slide 35

Slide 35 text

iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ σϑΥϧτ

Slide 36

Slide 36 text

iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ σϑΥϧτ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ ͢Δ͜ͱͰ͢ɻ খ͘͞

Slide 37

Slide 37 text

iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ σϑΥϧτ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ ͢Δ͜ͱͰ͢ɻ খ͘͞ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ͠ ͯͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬͯUI Λ࣮ݱ͢Δ͜ͱͰ͢ɻ େ͖͘

Slide 38

Slide 38 text

iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUIΛ࡞Δ֮ޛ 9݄20೔15:40~

Slide 39

Slide 39 text

iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃ ऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४ APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUI... 9݄20೔15:40~ ୯७ʹจࣈΛେ͖͘͢Δ͚ͩͰ͸ɺෆద੾ͳ৔߹΋% λΠτϧ͕লུ͞Ε͍ͯΔ ༨ന

Slide 40

Slide 40 text

จࣈαΠζ͕େ͖͍࣌͸  ඞཁʹԠͯ͡ϨΠΞ΢τΛมߋ͢Δ

Slide 41

Slide 41 text

iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃ ऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४ APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUI... 9݄20೔15:40~

Slide 42

Slide 42 text

iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUI... 9݄20೔15:40~

Slide 43

Slide 43 text

ΧελϜUI... 9݄20೔15:40~ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ

Slide 44

Slide 44 text

ΧελϜUIΛ࡞Δ֮ޛ 9݄20೔15:40~ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ

Slide 45

Slide 45 text

ʢϛϡʔδοΫɺϝʔϧɺϝοηʔδ౳΋ྑ͍ྫʣ จࣈαΠζʹԠͯ͡ϨΠΞ΢τΛมߋ͢Δ& ΧελϜUIΛ࡞Δ֮ޛ 9݄20೔15:40~ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ

Slide 46

Slide 46 text

λϒόʔͷจࣈ͸  ϑΥϯταΠζ͕େ͖͘ͳΒͳ͍

Slide 47

Slide 47 text

௕ԡ͠

Slide 48

Slide 48 text

ϥʔδίϯςϯπϏϡʔΞʔ จࣈαΠζΛେ͖͘Ͱ͖ͳ͍ͱ͖  ௕ԡ͠Ͱઆ໌ͱը૾ΛදࣔͰ͖Δ

Slide 49

Slide 49 text

Tips: ίϯτϩʔϧηϯλʔʹʮςΩεταΠζʯΛஔ͘͜ͱͰ؆୯ʹ֬ೝՄೳ

Slide 50

Slide 50 text

"Get started with Dynamic Type" https://developer.apple.com/videos/play/wwdc2024/10074/

Slide 51

Slide 51 text

Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε

Slide 52

Slide 52 text

΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ

Slide 53

Slide 53 text

΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ ͲΜͳαΠζʹͯ͠΋ॊೈʹ  ద੾ͳϨΠΞ΢τʹͳΔ͔Ͳ͏͔

Slide 54

Slide 54 text

΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ ΩʔϘʔυ͚ͩͰ͋Δఔ౓  շదʹૢ࡞͕Ͱ͖Δ͔

Slide 55

Slide 55 text

΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ ϗόʔΤϑΣΫτ͕  ద੾͔Ͳ͏͔

Slide 56

Slide 56 text

΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ εΫϦϒϧ͕ద੾ʹ  ಈ࡞͢Δ͔Ͳ͏͔ ※ςΩετϑΟʔϧυʹ  ݟ͔͚ͤͨϘλϯ͸ಛʹ஫ҙ

Slide 57

Slide 57 text

Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε

Slide 58

Slide 58 text

ʮશͯʹରԠ͠ͳ͚Ε͹͍͚ͳ͍ʯͱ͍͏࿩Ͱ͸ͳ͍͕  ʮରԠ͠ͳ͍ͱ͍͏൑அΛͨ͠ / ରԠͰ͖͍ͯͳ͍ʯͱ͍͏ೝࣝ͸ඞཁ

Slide 59

Slide 59 text

Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ

Slide 60

Slide 60 text

Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ • φϏήʔγϣϯ΍ίϯτϩʔϧ͸೉қ౓͕ߴΊͳͷͰආ͚Δ • ίϯϙʔωϯτʢඪ४ͷίϯτϩʔϧΛ૊Έ߹ΘͤͨUIʣ ͸໰୊ʹͳΓʹ͍͘

Slide 61

Slide 61 text

Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ • φϏήʔγϣϯ΍ίϯτϩʔϧ͸೉қ౓͕ߴΊͳͷͰආ͚Δ • ίϯϙʔωϯτʢඪ४ͷίϯτϩʔϧΛ૊Έ߹ΘͤͨUIʣ ͸໰୊ʹͳΓʹ͍͘ • Androidͱͷ౷Ұ͚ͩΛ໨తʹͨ͠ΧελϜͷφϏήʔγϣϯ /   ίϯτϩʔϧ͸ආ͚Δ

Slide 62

Slide 62 text

Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ • φϏήʔγϣϯ΍ίϯτϩʔϧ͸೉қ౓͕ߴΊͳͷͰආ͚Δ • ίϯϙʔωϯτʢඪ४ͷίϯτϩʔϧΛ૊Έ߹ΘͤͨUIʣ ͸໰୊ʹͳΓʹ͍͘ • Androidͱͷ౷Ұ͚ͩΛ໨తʹͨ͠ΧελϜͷφϏήʔγϣϯ /   ίϯτϩʔϧ͸ආ͚Δ • νʔϜͷٕज़ྗ / ڠۀ౓ / ϓϥοτϑΥʔϜ΁ͷཧղ౓

Slide 63

Slide 63 text

Slide 64

Slide 64 text

UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷

Slide 65

Slide 65 text

UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ Ξχϝʔγϣϯ ೖྗσόΠε ΞΫηγϏϦςΟ ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ

Slide 66

Slide 66 text

UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ ೖྗσόΠε ΞΫηγϏϦςΟ ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ Ξχϝʔγϣϯ ௕͞͸ʁ ΞχϝʔγϣϯΧʔϒ͸ʁ ό΢ϯε͸Ͳ͏͢Δʁ  ॳ଎͸ʁ Ξχϝʔγϣϯதʹ  ΠϯλϥΫγϣϯ͸ड͚෇͚Δʁ

Slide 67

Slide 67 text

UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ Ξχϝʔγϣϯ ೖྗσόΠε ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ ΞΫηγϏϦςΟ ελΠϧ͸ʁ ϥʔδίϯςϯπϏϡʔΞʔΛ࢖͏ʁ μΠφϛοΫλΠϓ ϨΠΞ΢τ͸ม͑Δʁ

Slide 68

Slide 68 text

UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ Ξχϝʔγϣϯ ೖྗσόΠε ΞΫηγϏϦςΟ ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ ੹຿͕ᐆດ

Slide 69

Slide 69 text

ڥքΛҾ͖͗͢ͳ͍ • UIσβΠφʔͱΤϯδχΞͷؒͰɺ੩తͳσβΠϯҎ֎ͷ৘ใ͸ු͖͕ͪ • FigmaͳͲͰʮֆʯΛϕʔεʹίϛϡχέʔγϣϯ͍ͯ͠Δฐ֐ • ු͍ͨ৘ใ͸UIσβΠφʔ/ΤϯδχΞ͕૬ޓʹੵۃతʹर͍ʹ͍͘ඞཁ͕͋Δ • ίϯτϩʔϧ΍φϏήʔγϣϯͷΧελϜUIʹऔΓ૊Ή࣌͸  ಛʹີͳڠۀͱ૬ޓͷཧղ͕ٻΊΒΕΔ • ΧελϜUIʹରͯ͠ɺUIσβΠφʔ/ΤϯδχΞͱઢΛҾ͘ͷͰ͸ͳ͘  ಉ͡ΫϦΤΠλʔͱͯ͠औΓ૊Ή

Slide 70

Slide 70 text

ͱ͜ΖͰ....

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

ΧελϜφϏήʔγϣϯόʔ ΧελϜπʔϧόʔ

Slide 73

Slide 73 text

iOS 18·Ͱʹ࡞ΓࠐΜͰ͍ͨ  ΧελϜUI͸iOS 26ʹ௥ैͰ͖ͣ...

Slide 74

Slide 74 text

શͯΛࣺͯΔܾஅΛ͠·ͨ͠'

Slide 75

Slide 75 text

େมʁ • ΧελϜUIΛ࡞Δͱ͍͏ͷ͸ͦ͏͍͏͜ͱ • ΧελϜUI͸... • ࣮૷͢Δͷ΋େม • ϝϯςφϯεΛ͢Δͷ΋େม • ऴྃ͸ಥવདྷΔ • ָͳ࣌͸ͳ͍ • ΧελϜUIΛ࡞Δʹ͸ ֮ޛ ͕ඞཁ

Slide 76

Slide 76 text

·ͱΊ | ΧελϜUIΛ࡞Δ֮ޛ • ඪ४UI͕αϙʔτͯ͘͠Ε͍ͯͨશͯΛࣗ෼Ͱ໘౗ݟΔ֮ޛ • UIσβΠφʔͱΤϯδχΞؒͷີͳڠۀΛ͢Δ֮ޛ • ࡞Δͷ΋࡞͔ͬͯΒ΋େมɺͳͷʹऴΘΓ͸ಥવདྷΔ͜ͱΛड͚ೖΕΔ֮ޛ