Tweet
Tweet

Slide 1

Slide 1 text

ϚʔΫΞοϓ͸ Լ४උ͕ˋ ίʔσ Οϯάઐ໳ϓϩμΫγϣϯ'-"5ατ΢ϋϧϛ ! ָΛ͢ΔͱΫΦϦςΟ্͕͕Δ

Slide 2

Slide 2 text

自己紹介 " גࣜձࣾ'-"5 ϚʔΫΞοϓ͸
 Լ४උ͕

Slide 3

Slide 3 text

ϓϩϑΟʔϧ ατ΢ϋϧϛ גࣜձࣾ'-"5୅දऔక໾ ϚʔΫΞοϓΤϯδχΞ೥ ઐ໳ֶߍXFCඇৗۈߨࢣ೥ -*,&ɿࣂ͍ݘεύϯ ߦಈࢦ਑ɿ ΤϯδχΞϥΠϑΛͨͷ͠Ή

Slide 4

Slide 4 text

ίʔσΟϯάઐ໳'-"5 "# $!! ϑϩϯτΤϯυશൠ ελοϑ໊ ίʔσΟϯάʹಛԽͨ͠डୗ੍࡞ձࣾ

Slide 5

Slide 5 text

ݸਓϫʔΫɿΠϕϯτొஃ ϚʔΫΞοϓʢ)5.-$44ʣ
 ೥$44/JUFొஃਓ ೥ϚʔΫΞοϓܥΠϕϯτਓ ೥๺ւಓΠϕϯτਓ 8FCܥͷΠϕϯτొஃ಺༰
 ɾ)5.-$44ॳڃʙ্ڃ
 ɾ࣮ફతͳۀ຿Ͱ࢖͑ΔϚʔΫΞοϓ ɾडୗ੍࡞ͷٕज़τϨϯυ
 ɾतۀͰ)5.-ΛֶͿֶੜ ɾ)5.-ͷجຊΛֶΜͩޙͷಠֶͷίπ ٕज़ऀ޲͚ొஃ💻 ࣮ઓతͳ)5.-ɾ$44ͷઐ໳Ո

Slide 6

Slide 6 text

ݸਓϫʔΫɿઐ໳ֶߍͷඇৗۈߨࢣ ܂୔σβΠϯݚڀॴ ݱ໾ͷΫϦΤΠλʔ੍࡞τϨϯυΛऔΓೖΕͨतۀ σβΠφʔ͞ΜʹϚʔΫΞοϓΛڭ͑ͯ·͢ اۀͱ߹ಉतۀ ΦϦδφϧ໰୊ 8FCΛमਖ਼ͤΑ ઐ໳ֶߍͷඇৗۈߨࢣ೥໨

Slide 7

Slide 7 text

なぜ Լ४උ͕ॏཁ͔🙌 גࣜձࣾ'-"5 ϚʔΫΞοϓ͸
 Լ४උ͕

Slide 8

Slide 8 text

खൈ͖ʹͳΒͳ͍ʁ ࣌ؒΛ͔͚Δͱ
 ྑ͍΋ͷ͕Ͱ͖Δʁ 🤔 Լ४උͰָΛ͢Δͱ ΫΦϦςΟ্͕͕Δ

Slide 9

Slide 9 text

ௐཧ ఏڙ ϑΝϛϦʔϨετϥϯͷ৔߹ ࢓ࠐΈ Լ४උΛࡁ·͓ͤͯ͘

Slide 10

Slide 10 text

Լ४උͰϕʔε࡞ۀΛݮΒ͢ ࢓্͛ ެ։ ϕʔε ϚʔΫΞοϓͷ৔߹

Slide 11

Slide 11 text

खଧ͕͍͍ͪͷ͸ ʮڶഴʯͱʮ͏ͲΜʯ͚ͩ͆

Slide 12

Slide 12 text

҆ఆ඼࣭ εϐʔυ 61 ίετ μ΢ϯ खؒΛ ݮΒ͢ νϟϨϯδ ೰·ͳ͍ 作業を効率化して悩まない ＝クオリティに時間を使える

Slide 13

Slide 13 text

下準備1 खॻ͖ίʔσΟϯά📝 גࣜձࣾ'-"5 ϚʔΫΞοϓ͸
 Լ४උ͕

Slide 14

Slide 14 text

デザインだけを設計として コードを書いていた Լ४උφγࢠ /0ʂ )

Slide 15

Slide 15 text

手書きコーディングで 設計と手順を見える化 Լ४උΞϦࢠ 0,̇ *

Slide 16

Slide 16 text

視覚認知を 利用する Point!

Slide 17

Slide 17 text

ྫɿөըͷֆίϯς ຐঁͷ୐ٸศ ελδΦδϒϦֆίϯςશू cٶ࡚ॣcຊc௨ൢc"NB[PO IUUQTXXXBNB[PODPKQEQ ʮΞχϝࢦࣔʯʮԻʯʮॱ൪ʯʮεϐʔυʯ

Slide 18

Slide 18 text

ྫɿ$.ֆίϯς Ӭԕͷ$.मߦૐɺதౡ৴໵ͷֆίϯςू ʛΞʔτʛ&YDJUFJTN Τ ΩαΠτΠζϜ IUUQJTNFYDJUFDPKQBSUSJE@0SJHJOBM@ ʮඵ਺ʯʮηϦϑʯʮίϚׂΓʯʮঢ়گઆ໌ʯ

Slide 19

Slide 19 text

ͲΜͳ͜ͱΛॻ͘ʁ දࣔ਺+BWB4DSJQUΞχϝʔγϣϯ"1*ʹίʔυଆͰܾΊΔ͜ͱ
 ֬ೝ఺͋ͱͰਐߦ͢Δͱ͜ΖʹϝϞ ૊Ή͚ͩʗΑ͠ͳʹਐߦʗ֬ೝ఺ ༏ઌ౓ʗ෼୲ʗ೉қ౓ σβΠϯʗ࢓༷Ͱܾ·͍ͬͯͳ͍࣮૷಺༰Λݟ͑ΔԽ GPOUTJ[FɺNBSHJOɺQBEEJOHɺXJEUIɺIFJHIUɺMJOFIFJHIU ࡞ۀલʹݟ͑ΔԽ͓ͯ͘͠

Slide 20

Slide 20 text

࣮ࡍͷखॻ͖ίʔσΟϯά ࡞ۀલʹݟ͑ΔԽ͓ͯ͘͠

Slide 21

Slide 21 text

📍༏ઌ౓ͱ೉қ౓Λચ͍ग़͢ 📍σβΠϯπʔϧͱͷԟ෮ΛݮΒ͢ 📍ݟ͑ΔԽͯ͠੔ཧ͢Δ 3つのメリット

Slide 22

Slide 22 text

下準備2 ετοΫ͢Δ📎 גࣜձࣾ'-"5 ϚʔΫΞοϓ͸
 Լ४උ͕

Slide 23

Slide 23 text

イチからコードを 書いていた Լ४උφγࢠ - /0ʂ

Slide 24

Slide 24 text

50%ほどは 過去のストックコード Լ४උΞϦࢠ . 0,̇

Slide 25

Slide 25 text

自分の 型を決める Point!

Slide 26

Slide 26 text

͓͢͢ΊϑϨʔϜϫʔΫ .646#JJʢϜεϏʔʣ IUUQTHFUCPPUTUSBQDPN IUUQTCVMNBJP IUUQTRSBDHJUIVCJPNVTVCJJ IUUQTHFUCBTJTHJUIVCJP #6-."ʢϒϧϚʣ #PPUTUSBQ #BTJTʢϕʔγεʣ ࢀߟʹͯࣗ͠෼༻ʹΞϨϯδ

Slide 27

Slide 27 text

ࣗ࡞ϑϨʔϜϫʔΫ )5.-$44ɺNJYJO
 ϞδϡʔϧʹΧʔυɺҰཡ ೖྗܥʹ'03.ɺ8:4*8:( ϖʔδʹ'"2ɺϓϥΠόγʔϙϦγʔɺ ػೳ "1*ʹ(PPHMFϚοϓɺ:PV5VCFɺ'BDFCPPLຒΊࠐΈ
 4/4Ϙλϯɺ*OTUBHSBNϑΟʔυ
 $.4ʹ8PSE1SFTTɺ.PWBCMF5ZQF৚݅෼ذɺλά IUUQTqBUTBUPHJUIVCJPUFNQIUNM TQBOϩΰ ࣗ෼ͷϑϨʔϜϫʔΫΛ࡞Ζ͏

Slide 28

Slide 28 text

📍ίϐϖͰѹ౗తͳ࣌ؒ୹ॖ
 📍ಉ͜͡ͱͰճ೰·ͳ͘ͳΔ 📍ࣗ෼ͷϫʔΫϑϩʔΛ੔ཧͰ͖Δ 3つのメリット

Slide 29

Slide 29 text

下準備3 ಁ͔͢🔍 גࣜձࣾ'-"5 ϚʔΫΞοϓ͸
 Լ४උ͕

Slide 30

Slide 30 text

/0ʂ 0 デザインカンプを 並べて目視チェック Լ४උφγࢠ

Slide 31

Slide 31 text

1 0,̇ 透かしコーディングで チェックも同時に済ます Լ४උΞϦࢠ

Slide 32

Slide 32 text

モジュール 単位で進行 Point!

Slide 33

Slide 33 text

ಁ͔͠ίʔσΟϯά DPOUBJOFS σβΠϯΧϯϓΛॏͶͯίʔσ Οϯά

Slide 34

Slide 34 text

🤔 💡操作デモ

Slide 35

Slide 35 text

📍ψέϞϨɺNBSHJOɺGPOUTJ[F
 📍ؒҧ͍୳ָ͕͠ʹͰ͖Δ 📍νΣοΫ࣌ؒେ෯୹ॖ 3つのメリット

Slide 36

Slide 36 text

下準備4 νΣοΫϦετΛ࡞Δ✅ גࣜձࣾ'-"5 ϚʔΫΞοϓ͸
 Լ४උ͕

Slide 37

Slide 37 text

/0ʂ ヌケモレ多し 時間も足りない Լ४උφγࢠ 4

Slide 38

Slide 38 text

0,̇ チェック項目を 意識しながら制作 ヌケモレ減った Լ४උΞϦࢠ 5

Slide 39

Slide 39 text

段階ごとに チェックする Point!

Slide 40

Slide 40 text

8)Ͱ੔ཧ͢Δ 8IPʢ୭͕ʣ୲౰ऀ 8IBUʢԿΛʣ)PXʢͲͷΑ͏ʹʣ಺༰Λॻ͘ 8IFOʢ͍ͭʣక੾೔ஈ֊ʢ४උʗ։࢝ʗςετΞοϓʗຊ൪ެ։ʣ 8IFSFʢͲ͜Ͱʣ63-ɾΩϟϓνϟ ϫʔΫϑϩʔʹ͋ͬͨνΣοΫϦετ

Slide 41

Slide 41 text

ΧςΰϦ෼ྨ͢Δ ɾϓϩδΣΫτશମ ɾαʔόʔ
 ɾ$.4ʗγεςϜ
 ɾσβΠϯɾϞʔγϣϯ
 ɾίʔσΟϯάઃܭ ɾૉࡐ؅ཧ ɾ4/4
 ɾӡ༻ ΧςΰϦผʹνΣοΫϦετΛ࡞Δ ߲໨ΛΧςΰϦ෼ྨ͢Δ

Slide 42

Slide 42 text

📍ψέϞϨɺNBSHJOɺGPOUTJ[F
 📍඼࣭ͷόϥπΩ͕ͳ͘ͳΔ 📍νΣοΫ࣌ͷ߲໨ΛݮΒͤΔ 3つのメリット

Slide 43

Slide 43 text

ࣗ෼ͷϫʔΫϑϩʔΛ࡞͓ͬͯ͘ ָͯ͠ΫΦϦςΟʹ࣌ؒΛ࢖͏ ·ͱΊ ϑϨʔϜϫʔΫ νΣοΫϦετ ಁ͔͠ ίʔσΟϯά खॻ͖ ίʔσΟϯά

Slide 44

Slide 44 text

😀5IBOLT ʮָΛ͢ΔͱΫΦϦςΟ্͕͕Δ ɹϚʔΫΞοϓ͸Լ४උ͕ˋʯ ίʔσ Οϯάઐ໳ϓϩμΫγϣϯ'-"5ατ΢ϋϧϛ