Metalによる素材を活かしたUI作り

.FUBMʹΑΔૉࡐΛ ׆͔ͨ͠6*࡞Γ ,B[VIJSP)BZBTIJ J04%$SFKFDUDPOGFSFODF

ࣗݾ঺հ wྛ࿨߂ w5XJUUFSɿLB[VIJSP wHJUIVCɿLB[VIJSP wRJJUBɿLB[VIJSP w:BIPP+BQBO$PSQ wJ04ΞϓϦΤϯδχΞ wJ04ΞϓϦࠇଳ

ΞδΣϯμ લஔ͖(16ϓϩάϥϛϯάʹ͍ͭͯ લஔ͖.FUBMʹ͍ͭͯ ຊ୊.FUBM4IBEJOH-BOHVBHF ຊ୊γΣʔμʔ࣮૷σϞ
ຊ୊γΣʔμʔͷษڧํ๏

લஔ͖

·ͣ(16ϓϩάϥϛϯά ʹ͍ͭͯ

$16ͱ(16 0QOF(- IUUQTXXXOUVFEVTHIPNFFIDIVBQSPHSBNNJOHPQFOHM$(@#BTJDT5IFPSZIUNM

(16ͷϨϯμϦϯάύΠϓϥΠϯ 0QFO(- IUUQTXXXOUVFEVTHIPNFFIDIVBQSPHSBNNJOHPQFOHM$(@#BTJDT5IFPSZIUNM w ϓϦϛςΟϒ ਤܗߏ੒ཁૉ σʔλΛ༻ҙ͢Δͱ͜Ζ͔Βελʔτ a

(16ͷϨϯμϦϯάύΠϓϥΠϯ 0QFO(- IUUQTXXXOUVFEVTHIPNFFIDIVBQSPHSBNNJOHPQFOHM$(@#BTJDT5IFPSZIUNM a w ࠲ඪσʔλͷม׵ 7FSUFY4IBEFSΛγΣʔμʔ༻ݴޠͰॻ͘

(16ͷϨϯμϦϯάύΠϓϥΠϯ 0QFO(- IUUQTXXXOUVFEVTHIPNFFIDIVBQSPHSBNNJOHPQFOHM$(@#BTJDT5IFPSZIUNM a w ௖఺৘ใΛϥελϥΠζ͢Δ

(16ͷϨϯμϦϯάύΠϓϥΠϯ 0QFO(- IUUQTXXXOUVFEVTHIPNFFIDIVBQSPHSBNNJOHPQFOHM$(@#BTJDT5IFPSZIUNM a w ϥελϥΠζ͞Εͨσʔλʹ৭ॲཧΛͯ͠ग़ྗ 'SBHNFOU4IBEFS ΛγΣʔμʔ༻ݴޠͰॻ͘

ৄ͘͠͸ͪ͜Β શ෦লུ wৄࡉ͸5SZ4XJGU5PLZP "GUFS5BMLͷͪ͜Βͷࢿྉ͕ࢀߟʹ ͳΓ·͢ w*OUSPEVDUJPO5P% 1SPHSBNNJOH(SBQIJDT1JQFMJOF wIUUQTTQFBLFSEFDLDPN UB@LB@UTVJOUSPEVDUJPOUPE QSPHSBNNJOHHSBQIJDTQJQFMJOF

ৄ͘͠͸ͪ͜Β શ෦লུ w एׯมଶతͰ͕͢ɺಉ͡ํͷ΋ͷͰϨϯ μϦϯάύΠϓϥΠϯΛ࣮૷ͯ͠ΈΑ͏ ͱ͍͏ࢿྉ͕͋Γ·͢ w ࡞ͬͯΘ͔ΔϨϯμϦϯάύΠϓϥΠϯ w IUUQTTQFBLFSEFDLDPNUBLBUTV
[VP UVUFXBLBSVSFOEBSJOHVQBJQVSBJO DQVEFENJBPIVB

.FUBM w ೥ʹൃද͞Εͨ"QQMFಠࣗͷ (16ϓϩάϥϛϯά"1* w $16ଆͱϝϞϦྖҬΛڞ༗͢Δલఏ w 0QFO(-ΑΓ΋ΑΓந৅౓͕௿͘ɺ ύϑΥʔϚϯε͕ߴ͍ .FUBM
.FUBM

ैདྷͷ(161SPHSBNNJOH"1* w ඳըॲཧͷ$16(16ͷ੾Γସ ͑͸ίετ͕͔͔Δ w 4UBUF7BMJEBUJPO w γΣʔμʔͷίϯύΠϧ w ίϚϯυૹ৴
IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZNFUBMΑΓ

.FUBMͷಛ௃ w .FUBM͸ଟ͘ͷ΋ͷΛ%SBX5JNFͷ֎Ͱ ߦ͏ͷͰΦʔόʔϔου͕௿͍ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZNFUBMΑΓ

.FUBMͰ࣮૷͢Δ΋ͷ w $16ଆͰ7JFXΛ༻ҙͯ͠ɺ(16΁ૹ৴͢ΔίϚϯυ Λهड़͍ͯ͘͠ w γΣʔμʔͱݺ͹ΕΔ΋ͷͰ௖఺ॲཧɾ৭ॲཧΛهड़ ͍ͯ͠%SBX$BMMຖʹ࣮ߦ

$16ଆͷίʔυͰهड़͢Δ΋ͷ %FWJDFͷऔಘ $PNNBOE2VFVF࡞੒ 5FYUVSF΍#V⒎FSͳͲͷϦιʔεͷ࡞੒ 3FOEFS1JQFMJOFͷ࡞੒ 7JFXΛ༻ҙͯ͠ඳը

$16ଆͷίʔυͰهड़͢Δ΋ͷ

$16ଆͷίʔυͰهड़͢Δ΋ͷ 7JFX$POUSPMMFSͷ

$16ଆͷίʔυͰهड़͢Δ΋ͷ WJFX%JE-PBEʹॻ͍͍ͯ͘

$16ଆͷίʔυͰهड़͢Δ΋ͷ

$16ଆͷίʔυͰهड़͢Δ΋ͷ .FUBM༻ͷσϦήʔτΛ࣮૷

$16ଆͷίʔυͰهड़͢Δ΋ͷ ຖϑϨʔϜ͝ͱʹ͍͕ͭ͜ݺ͹ΕΔͷͰ (16Ͱ࣮ߦ͍ͨ͠ίϚϯυΛ࡞੒ͯ͠౉͍ͯ͘͠

ৄ͘͠͸ͪ͜Β શ෦লུ IUUQTQFBLTDDCPPLTJ04ΑΓ w ষʹ.FUBMͷ࿩͕͋Γ·͢ w ඞཁ࠷খݶͷ࣮૷Λஸೡʹઆ໌͠ ͯ͘Ε͍ͯΔͷͰऔֻ͔ͬΓͱ͠ ͯࣸܦ͢Δͷ͕͓͢͢Ί

ৄ͘͠͸ͪ͜Β શ෦লུ IUUQTTIVCPPUIQNJUFNTΑΓ w .FUBMʹ͍ͭͯৄࡉʹղઆͯ͘͠ Ε͍ͯΔຊ w ೔ຊޠͰ.FUBMʹ͍ͭͯͷຊ͸ଟ ෼͜Ε͚ͩʁ

ຊ୊

.FUBM4IBEJOH-BOHVBHF .4-

.4- w $ Λϕʔεʹ։ൃ͞ΕͨγΣʔμʔݴޠ w ಠࣗ"UUSJCVUFT͕৭ʑ͋Δ w جຊσʔλߏ଄͸4DBMBS 7FDUPS .BUSJY
5FYUVSFͳͲγϯϓϧͳ΋ͷ w NFUBMϑΝΠϧͱͯ͠هड़ͯ͠ɺ4XJGUଆ͔ΒίϯύΠϧͨͦ͠ΕΛ3FOEFS1JQFMJOF΁౉͢ w 7FSUFY4IBEFSɾ'SBHNFOU4IBEFSͦΕͧΕ΁ͷΠϯɾΞ΢τΛؔ਺Ͱهड़

.FUBM4IBEJOH-BOHVBHF 4QFDJpDBUJPO w جຊతʹ.4-ؔ࿈ͷυΩϡϝϯτ͸͜Ε ͚ͩ w ݴޠతʹΘ͔Βͳ͍͜ͱ͕͋ͬͨΒԿ౓΋ ͍ͭ͜Λࢀর IUUQTEFWFMPQFSBQQMFDPNNFUBM.FUBM4IBEJOH-BOHVBHF4QFDJpDBUJPOQEG

3FOEFS1JQFMJOF IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPONFUBMIFMMP@USJBOHMFΑΓ ;

3FOEFS1JQFMJOF a a ͜͜ͱ͜͜Λ.4-Ͱॻ͘ IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPONFUBMIFMMP@USJBOHMFΑΓ

͖ͬ͞ͷਤͰ͍͏ͱ a a ͜͜ͱ͜͜ IUUQTXXXOUVFEVTHIPNFFIDIVBQSPHSBNNJOHPQFOHM$(@#BTJDT5IFPSZIUNM

.4-ͰͷγΣʔμʔ࣮૷ͷྲྀΕ w $16ଆͱڞ༗ͨ͠ΓγΣʔμʔؒͰ΍ΓऔΓ͢Δσʔλߏ଄ͷ࡞੒ w 7FSUFY4IBEFSͰ࠲ඪ৘ใΛॲཧͯ͠ɺϥελϥΠζͤ͞Δ࠲ඪσʔλΛΞ΢τϓοτ͢Δ w 'SBHNFOU4IBEFSͰϥελϥΠζ͞ΕͨϐΫηϧ৘ใͷΠϯϓοτΛॲཧͯ͠ɺϐΫηϧ͝ ͱͷ৭৘ใΛΞ΢τϓοτ͢Δ

7FSUFY4IBEFS

a 7FSUFY4IBEFS Ұͭͷؔ਺ͱͯ͠࡞੒͢Δ

7FSUFY4IBEFS WFSUFYΛ͚ͭΔ

7FSUFY4IBEFS ࠲ඪΛҾ਺ʹϥελϥΠζ͞ΕͯϑϥάϝϯτγΣʔμʔʹ౉͢࠲ඪ৘ใΛ࣋ͬͨߏ଄ମΛฦ͢

7FSUFY4IBEFS͕ฦ٫͢Δߏ଄ମ ࠷௿ݶඞͣ<<QPTJUJPO>>Λ͚ͭͨ࠲ද৘ใΛ͍࣋ͬͯΔඞཁ͕͋Δ

'SBHNFOU4IBEFS

a 'SBHNFOU4IBEFS Ұͭͷؔ਺ͱͯ͠࡞੒͢Δ

'SBHNFOU4IBEFS GSBHNFOUΛ͚ͭΔ

'SBHNFOU4IBEFS w Ҿ਺ʹόʔςοΫεγΣʔμʔͰฦͨ͠ߏ଄ମ͕ೖͬͯ͘Δ w ࠲ඪσʔλ͕ϥελϥΠζ͞Εͯ౉͞Εͯ͘ΔͷͰϐΫηϧ୯ҐͰॲཧ͢Δ͜ͱʹͳΔ

'SBHNFOU4IBEFS w ͦͷଞʹղ૾౓ͱݱࡏͷܦա࣌ؒΛҾ਺ͱͯ͠౉͍ͯ͠Δ w ͜ΕΒΛ౉͢ͱ͖ʹ͸CV⒎FSͱͯ͠$16ଆ͔Β౉͢͜ͱʹͳΔ w ʮ$16ଆͷίʔυͰهड़͢Δ΋ͷʯͷ߲໨ͰTFU'SBHNFOU4IBEFS ͱ͍͏ؔ਺Λ ௨ͯ͡౉͍ͯ͠Δ

'SBHNFOU4IBEFS wϑϥάϝϯτγΣʔμʔͰฦ͢΂͖৘ใ͸৭৘ใʹͳΔ w৭৘ใ͸࣍ݩϕΫτϧͱͯ͠ฦ͢ wϐΫηϧຖͷ৭৘ใΛฦ͢͜ͱʹͳΔ

'SBHNFOU4IBEFS γΣʔμʔͷશମͱग़ྗ݁Ռ

࣮ࡍʹॱংཱͯͯγΣʔμʔΛॻ͍ͯΈΔ

࣮ࡍʹॱংཱͯͯγΣʔμʔΛॻ͍ͯΈΔ w ࠷ऴతʹ࣍ͷΑ͏ͳΞχϝʔγϣϯ Λ࡞੒͢Δ

ͱ͍͏Θ͚Ͱ࣮૷ͷσϞ

γϯϓϧͳ࣮૷Ͱ͕͢ શମతʹ͸͜Μͳײ͡Ͱ࡞͍͖ͬͯ·͢

ଞʹ΋͜͏͍͏ͷ΋࡞ΕΔ

.4-ͷֶशํ๏ w جຊతʹ৘ใ͕ͦΕ΄Ͳଟ͘͸ͳ͍ w $16ଆͷॲཧ͸ܾ·͍ͬͯΔͷͰ֮͑Ε͹ऴΘΓ͕ͩɺγΣʔμʔ͸Ͳ͏ֶश͢Ε͹͍͍ͷ͔ w ݴޠͦͷ΋ͷ͸೉͘͠ͳ͍͕ɺάϥϑΟοΫϓϩάϥϛϯάͱͯ͠Ͳ͏ܭࢉͨ͠ΒͲ͏දࣔ͞ ΕΔͷ͔ཧղ͕͍ͨ͠ w ωοτΛړΔͱ0QFO(-༻ͷγΣʔμʔݴޠ
(-4- ͔Β.4-΁ͷҠ২ͨ͠ͱ͍͏࿩୊Λݟ͔͚ Δ w <J04>.FUBMγΣʔμ͜ͱ͸͡Ί8FC(-(-4-ͷ๛෋ͳαϯϓϧΛࢀߟʹ͢Δ IUUQTRJJUBDPNTIVJUFNTEEBCDBCFGD w 6*ʹ.FUBM͕࢖͑ͳ͍͔͍Ζ͍Ζࢼͯ͠Έͨ࿩ IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHEFUBJM

HMTMTBOECPYDPN w (-4-Ͱهड़͞ΕͨγΣʔ μʔ͕๛෋ʹܝࡌ͞Ε ͍ͯΔ

HMTMTBOECPYDPN w ίʔυͱ࣮ߦ݁Ռ͕Θ ͔Γ΍͘͢දࣔ͞Εͯ ͍Δ IUUQHMTMTBOECPYDPNFΑΓ

(-4-.4- w ػցతͳҠ২͕ՄೳΒ͍͠ w ΄Μͱʹʁ w ΍ͬͯΈͨ w ෼ޙ

(-4-.4- w ػցతͳҠ২͕ՄೳΒ͍͠ w ΄Μͱʹʁ w ΍ͬͯΈͨ w ਺෼ޙʜ

ಈ͍ͨ IUUQHMTMTBOECPYDPNFΛ.4-΁ม׵ͯ͠J1IPOF Ͱ࣮ߦ

Ҡ২ํ๏ w 'SBHNFOU4IBEFSͷΈΛ࣮૷ w 7FSUFYU4IBEFS͸جຊ࠲ඪΛड͚औͬͯɺͦΕΛͦͷ··ฦ͚ͩ͢ͷίʔ υͰ͍͍ w ܕ͕ҧ͏ͷͰ߹ΘͤΔ w ΠϯϓοτɾΞ΢τϓοτͷॻ͖ํ͕ҧ͏ͷͰ߹ΘͤΔ
ฦ͢΂͖΋ͷ͸ಉ͡

ࡉ෦͸͍͍ͱͯ͠ɺશମతʹͳΜͱͳ͘ܗ͕ ࣅ͍ͯΔ͜ͱΛΘ͔ͬͯ΋Β͑Δͱࢥ͍·͢

w ͜ΕͰجຊతʹ͸ಈ͘ w ೉͍͠ܭࢉ෦෼͸ͦͷ··ྲྀ༻Ͱ͖Δ w ͭ·Γ.4-ͷ๛෋ͳαϯϓϧίʔυ͕खʹೖͬͨ w ޙ͸͜ΕΛϕʔεʹखΛՃ͍͑ͯ͘͜ͱͰ.4-ʹ׳ ΕΔ

(16Λ࢖ͬͨΠϯλϥΫςΟϒͳΞ χϝʔγϣϯΛࣗ࡞͢Δͷ͸ָ͍͠ʂ

ࢀߟࢿྉ w.FUBM"DDFMFSBUJOHHSBQIJDTBOENVDINPSF IUUQTEFWFMPQFSBQQMFDPNNFUBM w%(SBQIJDTXJUI0QFO(-#BTJD5IFPSZ IUUQTXXXOUVFEVTHIPNFFIDIVBQSPHSBNNJOHPQFOHM$(@#BTJDT5IFPSZIUNM w J041SPHSBNNJOH IUUQTQFBLTDDCPPLTJ04 w .FUBMೖ໳ɹIUUQTTIVCPPUIQNJUFNT
w 8PSLJOHXJUI.FUBM'VOEBNFOUBMT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZNFUBM w 8PSLJOHXJUI.FUBM0WFSWJFX IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZNFUBM w <J04>.FUBMγΣʔμ͜ͱ͸͡Ί8FC(-(-4-ͷ๛෋ͳαϯϓϧΛࢀߟʹ͢Δ IUUQTRJJUBDPNTIVJUFNTEEBCDBCFGD w 6*ʹ.FUBM͕࢖͑ͳ͍͔͍Ζ͍Ζࢼͯ͠Έͨ࿩ IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHEFUBJM w *OUSPEVDUJPO5P%1SPHSBNNJOH(SBQIJDT1JQFMJOF IUUQTTQFBLFSEFDLDPNUB@LB@UTVJOUSPEVDUJPOUPEQSPHSBNNJOHHSBQIJDTQJQFMJOF w ָ͍͠ʂ6OJUZγΣʔμʔ͓ֆඳ͖ೖ໳ʂɹIUUQTEPDTHPPHMFDPNQSFTFOUBUJPOE/.IY)8V/;TK/33MB'0VZTKP/HDQ'M&I[PE&3MH w *OUSPEVDUJPO5P%1SPHSBNNJOH(SBQIJDT1JQFMJOFɹIUUQTTQFBLFSEFDLDPNUB@LB@UTVJOUSPEVDUJPOUPEQSPHSBNNJOHHSBQIJDTQJQFMJOF

Metalによる素材を 活かしたUI作り

Metalによる素材を 活かしたUI作り

More Decks by kazuhiro4949

Featured

Transcript

Metalによる素材を活かしたUI作り

Metalによる素材を活かしたUI作り