2020/7/25にtraPで実施したUIデザイン講習会の資料です
6*σβΠϯߨशձ6*σβΠϯͷߨशձͰ͢@spa
View Slide
@spa Ͱ͢WebϑϩϯτΤϯυΛ͍ͯ͠Δ͜ͱ͕ଟ͍͢ਓ
͜ͷߨशձͰ͢Δ͜ͱ• UIσβΠϯલʹߟ͑Δ͖͜ͱ• UIΛσβΠϯ͢Δ࣌ͷϓϩηε• ۩ମతͳݟͨΛ࡞Δ࣌ͷίπ
͜ͷߨशձͰ͠ͳ͍͜ͱ• σβΠϯιϑτͷѻ͍ํ• ϑϩϯτΤϯυ࣮ͷํ๏• όοΫΤϯυͷϞσϧͱͷରԠͷऔΓํ• ͳͲ
͓͠ͳ͕͖• UIͱʁ• UIσβΠϯͷϓϩηε• OOUIͷ࣮ફ• ϏδϡΞϧσβΠϯͷϙΠϯτ
6*ͱʁᶃ6*JTOBOJ
6*ͱʁ͍͔ͭ͘ʮUIʯΛࢥ͍ු͔ͯΈ͍ͯͩ͘͞
6*ͱʁ6*ͱʁ• Ϣʔβʔͱػց͕ใΛΓऔΓ͢Δࡍͷڥք• ใͷΓͱΓʁ• ใͷදࣔ• ใʹର͢Δ / ใΛ༻͍ͨԿ͔͠Βͷૢ࡞
6*ͱʁঢ়ଶΛదʹӅṭ/ूͯ͠ใΛදࣔ
6*ͱʁ෦ॲཧΛӅṭͯ͠ใͷૢ࡞Λఏڙ
6*ͱʁ6*σβΠϯͰߟ͑Δ͜ͱ• ͲͷΑ͏ʹͯ͠ใΛΘ͔Γ͘͢ఏڙ͢Δ͔ʁ• ϏδϡΞϧͷදݱͦͷ1ͭͷखஈʹա͗ͳ͍• ෦ͷใΛ͏·͘நԽͯ͋͛͠Δඞཁ͕͋Δ• ใͷૢ࡞༰қ͔ʁ• ୭SQLΛʹॻ͍ͯૢ࡞ͨ͘͠ͳ͍ʢઐ༻πʔϧผʣ
6*ͱʁΘ͔Γ͍͢6*ͷͨΊʹ• ఏڙ͞ΕΔใͷཧղ͕༰қͰ͋Δ• దͳߏԽ: ਓؒͷ৺ཧΛߟྀ• ϢʔβʔͷϝϯλϧϞσϧʹԊͬͨͷʹ͢Δ• ʮ͜͜Λ͜͏ͨ͠Β͜͏ͳΔͩΖ͏ʯΛཪΒͳ͍
6*ͱʁϝϯλϧϞσϧͷྫ: ϘλϯͱϦϯΫButton https://example.com
6*ͱʁࢀߟώϡʔϦεςΟοΫ• 10 Usability Heuristics for User Interface Design• UIΛධՁ͢Δ࣌ͷج४ͷͻͱͭ• దͳϑΟʔυόοΫΛͤΑɺϢʔβʔͷΘ͔Δݴ༿Λ༻͍Αɺ…• ৄ͘͠ิࢿྉ
6*σβΠϯͷϓϩηεᶄ1SPDFTTGPSEFTJHOJOH6*
6*σβΠϯͷϓϩηε͜ͷষͰ• UIσβΠϯͷεςοϓΛղͯͬ͟͠ͱோΊͯΈΔ• ⚠ Ұ͔Β࡞Δ߹Λఆ͍ͯ͠·͢• ⚠ WebΞϓϦέʔγϣϯΛ೦಄ʹஔ͍͍ͯ·͢• ήʔϜͳͲͷ߹ʹԠ༻͕ޮ͘ͱࢥ͏
6*σβΠϯͷϓϩηε6*σβΠϯͷϓϩηεཁٻੳϞσϧநग़ ϏϡʔఆٛϏδϡΞϧ
6*σβΠϯͷϓϩηεཁٻੳ• UXʹؔΘΔ෦ʢUI͚ͩͷͰͳ͍ʣ• ࠓ͔Β࡞Δରʹ͍ͭͯ• ͦΕΛϢʔβʔ͕ͬͯͲ͏خ͍͠ͷ͔• ͦΕͷଘࡏͰͲΜͳΛղܾ͠Α͏ͱͯ͠Δͷ͔• ʢ࡞Δଆͷઢͱͯ͠ʣͦΕ͕Ͳ͏͋ͬͯཉ͍͠ͷ͔• ࠓճͷߨशձͷείʔϓ͔Βগ͠֎ΕΔ……
6*σβΠϯͷϓϩηεཁٻੳ• ϢʔεέʔεΛఆ͠ɺԿ͕ඞཁͱ͞ΕͯΔ͔ݕ౼• Ϣʔβʔͷௐࠪɺϧιφʢରਓ૾ʣΛઃఆ͠ࢥߟ࣮ݧɺ…• ࠷ऴతͳඪ• Ϣʔβʔͷඞཁͱ͢Δใɾૢ࡞͕ཧͰ͖Δ͜ͱ• ͦΕΒͷϏδϡΞϧදݱͷํੑ͕ཧͰ͖Δ͜ͱ
6*σβΠϯͷϓϩηε6*ͱ69ͷҧ͍• UIϢʔβʔ͕ʹ͢Δใͷදݱ• UXͦͷͷͷ༻Λ௨ͯ͡ಘͨମݧશମ• ͓ؾ࣋ͪͷੈքʢ͍͠ʣ• UIΛ௨ͯ͡ൃੜ͢Δ• αϙʔτରԠͳͲUXʹؔΘΔཁҼ
6*σβΠϯͷϓϩηεϞσϧநग़• ཁٻʹ͓͍ͯඞཁʹͳͬͯ͘ΔΦϒδΣΫτΛநग़͢Δ࡞ۀ• ྫ͑traQͳΒϢʔβʔɺϝοηʔδɺνϟϯωϧͳͲ• DDDͰݴ͏ͱ͜Ζͷentityͱ͔value object• ใͷநԽΛ͢Δ• OOUIͷॴͰৄ͘͠આ໌͠·͢
6*σβΠϯͷϓϩηεϏϡʔఆٛ• ΦϒδΣΫτΛͲͷΑ͏ʹදࣔ͢Δ͔ܾΊΔ• ϦετදࣔɺάϦουදࣔɺ୯ମͰͷදࣔ……ͳͲͳͲ• ͦΕΒͷදࣔͷ͞ΕํͷભҠؔΛܾΊΔ• ʮϫΠϠʔϑϨʔϜΛඳ͘ʯ࡞ۀʹ૬• OOUIͷॴͰৄ͘͠આ໌͠·͢
6*σβΠϯͷϓϩηεϏδϡΞϧఆٛ• ·ͣϏδϡΞϧͷํੑΛܾΊΔ• Կ͔ͷҰ෦ͷ߹શମʹϚον͢ΔΑ͏ʹ• ϓϩμΫτͷՁΛදݱ͢Δ৭ܗɾεϖʔγϯάͳͲΛߟ͑Δ• ʮϓϩμΫτ͕Ͳ͏͋ͬͯཉ͍͔͠ʯΛදݱͰ͖Δ
6*σβΠϯͷϓϩηεϏδϡΞϧఆٛ• ํੑʹԊ͏Α͏ʹύʔπͷϏδϡΞϧΛܾఆ͍ͯ͘͠• ݸʑͷΦϒδΣΫτͷදݱ• Ϗϡʔͷදݱ• ͦͷଞඞཁͱͳΔίϯϙʔωϯτͷදݱ• ϢʔβʔͷϝϯλϧϞσϧ͔Βҳ͠ͳ͍͕ඞཁ
6*σβΠϯͷϓϩηεͦͷઌσβΠϯγεςϜ• ࡞͍ͬͯ͘ͱ͋ΔఔϏδϡΞϧදݱͷύλʔϯ͕Ͱ͖ͯ͘Δ• ͲͷΑ͏ͳΦϒδΣΫτɾϏϡʔʹͲͷΑ͏ͳػೳΛׂΓͯΔ͔• ϏδϡΞϧʢ৭ͱ͔typographyͱ͔ͷʣͷϧʔϧ• ͜ΕΛνʔϜͰڞ༗ͨ͠ͷ͕σβΠϯγεςϜ• σβΠϯγεςϜʹԊͬͨͷΛ࡞Δ• ίϯελϯτʹߋ৽͍ͯ͘͠
6*σβΠϯͷϓϩηεϓϩηεͷ·ͱΊ• ཁٻੳ• Ϟσϧநग़• Ϗϡʔఆٛ• ϏδϡΞϧఆٛ: શମͷίϯηϓτ / ݸʑͷΦϒδΣΫτϏϡʔ• σβΠϯγεςϜͷཱ֬
6*σβΠϯͷϓϩηε6* σβΠϯϏδϡΞϧใͷઃܭใͷઃܭͱϏδϡΞϧσβΠϯ͕૬ޓʹӨڹΛ༩͑ͭͭਐΉ
006*ͷ࣮ફᶅ006*JOQSBDUJDF
006*ͷ࣮ફ͜ͷষͰ• UIͷઃܭࢦͷҰͭͰ͋Δ OOUI ͱ͍͏ख๏Λݟ͍ͯ͘• ใͷཧͷ؍Ͱ༗༻• σβΠϯϓϩηεͷϞσϧநग़ʙϏϡʔఆٛʹ૬͢Δ෦• ⚠ ྫʹ͏traQ͋Δఔ؆ུԽ͞ΕͨͷʹͳΓ·͢• ಛʹDMɾΞΫςΟϏςΟͷଘࡏΛল͍͍ͯΔͱ͍͏ʹҙ͍ͯͩ͘͠͞
006*ͷ࣮ફ͜ͷষͷྲྀΕ• OOUIͱʁ• OOUIͷϓϩηε• ΦϒδΣΫτநग़• Ϗϡʔఆٛ• ϨΠΞτఆٛ• ϨΠΞτύλʔϯʹ͍ͭͯ
006*ͷ࣮ફ006*ͱ• ʮΦϒδΣΫτࢦUIʯͷ͜ͱ• ͋ΔͷʢΦϒδΣΫτʣʹରͯ͠ૢ࡞Λߦ͏ελΠϧͷUI• ରٛޠ: λεΫࢦUI• ΦϒδΣΫτࢦϓϩάϥϛϯά……ʁ• ͍ۙ
006*ͷ࣮ફ006*WTλεΫࢦ• OOUI : ໊ࢺ → ಈࢺ• λεΫʢΓ͍ͨ͜ͱʣΛΦϒδΣΫτͷૢ࡞ʢΞΫγϣϯʣͰୡ͢Δ• λεΫࢦ: ಈࢺ → ໊ࢺ• λεΫͷશମ૾͕نఆ͞Ε͍ͯͯɺͦΕʹରΛͯΊΔ
006*ͷ࣮ફέʔΩʹݟΔOOUI
006*ͷ࣮ફ006*ৄࡉ• ಉ͡छྨͷΦϒδΣΫτ͕৭ʑͳํ๏Ͱදࣔ͞ΕΔ• γϯάϧϏϡʔ • ίϨΫγϣϯϏϡʔ • ΦϒδΣΫτͷΞΫγϣϯ͕ը໘ભҠΛੜΉ߹͕͋Δ• ྫ: ϙέϞϯͷಓ۩
006*ͷ࣮ફ006*ͷϓϩηε• ΦϒδΣΫτநग़• ϏϡʔɾφϏήʔγϣϯఆٛ• ϨΠΞτઃܭϞσϧநग़Ϗϡʔઃܭ^USB24ΛݟͯΈΔ
006*ͷ࣮ફΦϒδΣΫτநग़• ચ͍ग़ͨ͠λεΫ͔ΒΦϒδΣΫτͱଐੑɾΞΫγϣϯΛநग़• ΦϒδΣΫτ໊ࢺʹͳ͍ͬͯΔ• Կ͔ͷ֓೦ͷΠϯελϯεͳΒɺదͳநԽΛ͢Δ• म০ଐੑͰ͋ΔՄೳੑ͕ߴ͍• ྫ: ʮ3Aͷߴւ͞Μʯ→ΦϒδΣΫτʮֶੜʯͱͦͷଐੑʮֶʯʮʯ
006*ͷ࣮ફΦϒδΣΫτநग़USB2ͷྫ• ఆ͞ΕΔλεΫͷҰ෦ɹ໊ࢺͱϢʔβʔओମͷಈࢺΛڧௐͨ͠#a ͷ ϝοηʔδҰཡ ΛݟΔ#a/b ͷԼʹ #a/b/c Λ ࡞͢Δϝοηʔδ Λ ϐϯ͢Δ@spa ʹ Ͷ͜ Λ͚ͭΔϐϯཹΊϝοηʔδ ʹ ελϯϓ Λ͚ͭΔϝϯγϣϯ ͞ΕΔͱ ௨͕͘Δ
006*ͷ࣮ફΦϒδΣΫτநग़USB2ͷྫ• λεΫ͔ΒΦϒδΣΫτʹ૬͢ΔͷΛநԽ• ௨ɾϝϯγϣϯͦΕʹରͯ͠ૢ࡞ΛՃ͑ΔͷͰͳ͍ͷͰআ֎ϝοηʔδ νϟϯωϧ Ϣʔβʔλά ελϯϓ
006*ͷ࣮ફΦϒδΣΫτநग़USB2ͷྫ• ΦϒδΣΫτ͕ܾ·ͬͨΒͦΕΒͷଐੑΛߟ͑Δ• DBεΩʔϚͷΑ͏ʹͤͣɺϢʔβʔͷؔ৺ϕʔεͰϞσϦϯά͢Δνϟϯωϧɾνϟϯωϧ໊ɾࢠνϟϯωϧɾߘ͞Εͨϝοηʔδϝοηʔδɾ༰ɾߘͨ͠Ϣʔβʔɾԡ͞Ε͍ͯΔελϯϓ
006*ͷ࣮ફΦϒδΣΫτநग़USB2ͷྫ• ΦϒδΣΫτͷؔੑΛϞσϦϯά͢Δ• ͜͜ͰϢʔβʔͷؔ৺ϨϕϧͰͷநԽͰेϝοηʔδɾ༰ɾߘͨ͠Ϣʔβʔɾԡ͞Ε͍ͯΔελϯϓνϟϯωϧɾνϟϯωϧ໊ɾࢠνϟϯωϧɾߘ͞Εͨϝοηʔδ
006*ͷ࣮ફλεΫΛөͨ͠traQͷؔνϟϯωϧɾνϟϯωϧ໊ɾࢠνϟϯωϧɾߘ͞Εͨϝοηʔδϝοηʔδɾ༰ɾϐϯཹΊ͞Ε͍ͯΔ͔ɾߘઌνϟϯωϧɾߘͨ͠Ϣʔβʔɾԡ͞Ε͍ͯΔελϯϓϢʔβʔɾεΫϦʔϯ *%ɾද໊ࣔɾ͚ΒΕ͍ͯΔλάελϯϓλά
006*ͷ࣮ફΦϒδΣΫτநग़USB2ͷྫ• ΦϒδΣΫτʹରͯ͠ՄೳͳΞΫγϣϯΛఆٛ͢Δ• جຊCreate, ( Read, ) Update, DeleteνϟϯωϧɾɾࢠνϟϯωϧΛՃ͢Δ ɾߘ͢Δɾআ͢ΔɾϐϯཹΊ͢Δ ղআ͢ΔɾελϯϓΛ͚ͭΔ ֎͢ϝοηʔδɾ
006*ͷ࣮ફΞΫγϣϯΛఆٛͨ͠ਤʢλάͱελϯϓඪ४ͷCRUDΛαϙʔτʣνϟϯωϧɾνϟϯωϧ໊ɾࢠνϟϯωϧɾνϟϯωϧɾߘ͞ΕͨϝοηʔδɾࢠνϟϯωϧΛՃ͢Δɾ< ཧऀ > Ճ͢Δɾ< ཧऀ > আ͢Δϝοηʔδɾ༰ɾϐϯཹΊ͞Ε͍ͯΔ͔ɾߘઌνϟϯωϧɾߘͨ͠Ϣʔβʔɾԡ͞Ε͍ͯΔελϯϓɾߘ͢Δɾ< ߘऀ > আ͢Δɾ< ߘऀ > ฤू͢ΔɾϐϯཹΊ͢Δ ղআ͢ΔɾελϯϓΛ͚ͭΔ ֎͢ϢʔβʔɾεΫϦʔϯ *%ɾද໊ࣔɾ͚ΒΕ͍ͯΔλάɾ< ཧऀ > ࡞͢Δɾ< ཧऀ > আ͢Δɾ< ࣗ > ϓϩϑΟʔϧมߋɾλάΛ͚ͭΔελϯϓλά
006*ͷ࣮ફΦϒδΣΫτநग़·ͱΊ• λεΫ͔ΒΦϒδΣΫτީิΛൈ͖ग़͢• ީิΛ·ཻ͍͠ͰநԽ͢Δ• ͱͱͷλεΫͱݟൺͭͭ• ΦϒδΣΫτͷଐੑɾؔ࿈Λݕ౼• ΦϒδΣΫτʹର͢ΔΞΫγϣϯΛݕ౼
006*ͷ࣮ફΦϒδΣΫτநग़OPUF• ͜ΕΒͷεςοϓͰ༷͕ݻ·͍ͬͯ͘• ΞϓϦέʔγϣϯͰ Կ͕ݟ͑ͯ Կ͕Ͱ͖Δʁ ΛܾΊͨ• ٯʹλεΫɾϢʔεέʔεͷݕ౼ʹΔ͜ͱ• QͷྫͰΞΫγϣϯͷείʔϓʹݴٴͨ͠• ͜Εͱͷཁٻੳஈ֊Ͱ͍ͬͯͳ͍͜ͱͩͬͨ
006*ͷ࣮ફΦϒδΣΫτநग़OPUF• Γग़ͨ͠ͷΛϝΠϯΦϒδΣΫτͱ͍͏• ࠓճॏཁͰͳ͍ΦϒδΣΫτΛଐੑͱͯ͠ѻͬͨ• ݁ՌͷϞσϧඞͣ͠αʔόʔαΠυͳͲɺ্࣮ͷϞσϧͱҰக͠ͳ͍• දࣔલʹదʹใΛมͯ͋͛͠Δඞཁ͕͋Δ͔• ࣮αʔόʔ/ΫϥΠΞϯτϞσϧͷAPIͬͯΠϯλʔϑΣΠεͰ͢ΑͶ
006*ͷ࣮ફϏϡʔఆٛ• ΦϒδΣΫτΛͲ͏ݟͤΔ͔ʢϏϡʔʣͷఆٛΛߦ͏εςοϓ• ·࣮ͩࡍͷϨΠΞτ͠ͳ͍• ϞσϦϯάͨؔ͠ΛϏϡʔͷભҠؔʹམͱ͠ࠐΉ
006*ͷ࣮ફϏϡʔͷछྨ• ίϨΫγϣϯϏϡʔ• ෳͷΦϒδΣΫτΛҰཡදࣔ• શମ૾ΛѲ͍ͨ͠ͷɺλΠϜϥΠϯͳͲ• γϯάϧϏϡʔ• ͦͷΦϒδΣΫτͻͱͭʹ͍ͭͯɺৄࡉใΛදࣔ• ίϨΫγϣϯϏϡʔ͔ΒؾʹͳΔͷͷγϯάϧϏϡʔʹભҠ
006*ͷ࣮ફίϨΫγϣϯϏϡʔ / γϯάϧϏϡʔ
006*ͷ࣮ફϏϡʔͷఆٛ• γϯάϧɾίϨΫγϣϯ྆ํͷϏϡʔΛͱΓ͋͑ͣ࡞Δ• ίϨΫγϣϯ͔ΒγϯάϧʹભҠͰ͖Δ• ϞσϦϯά݁ՌͷؔʹԠͯ͡ભҠؔΛ͚͢
006*ͷ࣮ફϏϡʔͷఆٛ• ࠷ऴతʹϚʔδɾলུ͞ΕΔ߹͕͋Δ• ඞཁʹԠͯ͡ߟ͑ΕOKͳͷͰɺͱΓ͋͑ͣશͯॻ͖ग़͢• ໌Β͔ʹ།Ұ͔͠ଘࡏ͠ͳ͍ΦϒδΣΫτવίϨΫγϣϯϏϡʔΛ࣋ͨͳ͍
006*ͷ࣮ફϏϡʔͷఆٛUSB2ͷྫ• νϟϯωϧ - ϝοηʔδ 1:* ͷؔʹͳ͍ͬͯΔ• νϟϯωϧͷγϯάϧϏϡʔ͔ΒϝοηʔδͷίϨΫγϣϯϏϡʔʹભҠͯ͠ཉ͍͠• ϝοηʔδ - Ϣʔβʔ *:1 ͷؔʹͳ͍ͬͯΔ• Ϣʔβʔ͔ΒͦͷϢʔβʔ͕ߘͨ͠ϝοηʔδʹભҠ͢Δ……ʁ
006*ͷ࣮ફϏϡʔͷఆٛUSB2ͷྫ• ؆ུԽͨؔ͠ͷਤελϯϓνϟϯωϧϝοηʔδϢʔβʔ λά
006*ͷ࣮ફϏϡʔͷఆٛUSB2ͷྫ• ϏϡʔͷભҠؔΛߟ͑ͯΈΔ• Ϣʔβʔ͔ΒͦͷϢʔβʔ͕ߘͨ͠ϝοηʔδҾ͚ͳ͍ͷͰআ֎νϟϯωϧίϨΫγϣϯϝοηʔδίϨΫγϣϯϢʔβʔίϨΫγϣϯνϟϯωϧγϯάϧϝοηʔδγϯάϧϢʔβʔγϯάϧ
006*ͷ࣮ફϏϡʔͷఆٛUSB2ͷྫ• ϝοηʔδͷγϯάϧϏϡʔΛίϨΫγϣϯϏϡʔʹ౷߹νϟϯωϧίϨΫγϣϯϝοηʔδίϨΫγϣϯϢʔβʔίϨΫγϣϯνϟϯωϧγϯάϧϢʔβʔγϯάϧ
006*ͷ࣮ફϏϡʔͷఆٛUSB2ͷྫ• ϝοηʔδͷίϨΫγϣϯϏϡʔΛνϟϯωϧͷγϯάϧϏϡʔͱͯ͠͏ʢ࣮ࡍͷtraQʹ͍ۙʣνϟϯωϧίϨΫγϣϯϝοηʔδίϨΫγϣϯϢʔβʔίϨΫγϣϯνϟϯωϧγϯάϧϢʔβʔγϯάϧ
006*ͷ࣮ફϧʔτφϏήʔγϣϯݕ౼• ಛʹॏཁͦ͏ͳΦϒδΣΫτΛϧʔτφϏήʔγϣϯʹஔ• ϞόΠϧΞϓϦͳΒBottomBarͱ͔TabBarͱ͔• ࢥߟͷىͱͳΔʢ㲈ભҠઌ͕ଟ͍ʣΦϒδΣΫτ͕ྑ͍• ΞϓϦέʔγϣϯશମͰ༏ઌ͞ΕΔ͕͋ΕͦΕͰ
006*ͷ࣮ફϧʔτφϏήʔγϣϯͷϙΠϯτ• ΞϓϦέʔγϣϯΛʮͷʯ͕ฒΜͰ͍Δͷͱͯ͠ߟ͑Δ• → ػೳΛφϏήʔγϣϯʹฒΔͷѱख• ྫ֎: ʢରΦϒδΣΫτ͕ࣗ໌ͳ߹ͷʣݕࡧɾઃఆ• φϏήʔγϣϯ߲Λબͨ͠ΒΦϒδΣΫτͷίϨΫγϣϯϏϡʔʹભҠ͢ΔʢίϨΫγϣϯϏϡʔ͕͋Δ߹ʣ
006*ͷ࣮ફtraQͷϧʔτφϏήʔγϣϯ + νϟϯωϧͷίϨΫγϣϯϏϡʔ
006*ͷ࣮ફϨΠΞτઃܭ• ࣮ࡍʹݟ͑Δը໘ͷઃܭ• ͍ΘΏΔϫΠϠʔϑϨʔϜ• ϏϡʔΛը໘ʹͲͷΑ͏ʹஔ͢Δ͔ͷݕ౼• 1ը໘ʹෳϏϡʔ͕͋ͬͯOK• ϞόΠϧͱPCͰग़͚ͯ͠͠OK
006*ͷ࣮ફϨΠΞτύλʔϯ• ࢹ֮දݱύλʔϯཱ͕͍֬ͯ͠ΔͷͰै͓ͬͯ͘ͱྑ͍• φϏήʔγϣϯͷදࣔ• શମతͳը໘ϨΠΞτ• ίϨΫγϣϯදࣔ• ΦϒδΣΫτͷCRUD• Ϣʔβʔͷೝෛՙ͕Լ͕Δ
006*ͷ࣮ફϏϡʔஔͷύλʔϯ• جຊతʹ্/ࠨ͕֓ཁɺԼ/ӈ͕ৄࡉͱ͍͏ྲྀΕ͕͋Δ• υϦϧμϯͷํੑ• ฒͯஔ͚ͳ͍߹ը໘ભҠ• ࠨ͔ΒӈʹϓογϡͰ͖Δͱ͏Ε͍͠• దʹग़͚͠͠Α͏
006*ͷ࣮ફఆ൪ը໘ύλʔϯ• μϒϧϖΠϯ: ࠨʹίϨΫγϣϯϏϡʔ + ӈʹγϯάϧϏϡʔ
006*ͷ࣮ફఆ൪ը໘ύλʔϯ• γϯάϧϖΠϯ: ίϨΫγϣϯˠγϯάϧΛը໘ભҠͰରԠ
006*ͷ࣮ફφϏήʔγϣϯͷύλʔϯ• ϞόΠϧԼ͔υϩϫʔʢφϏήʔγϣϯͷ߹ࠨ͕ଟ͍ʣ
006*ͷ࣮ફφϏήʔγϣϯͷύλʔϯ• PC্͔ࠨ
006*ͷ࣮ફίϨΫγϣϯϏϡʔͷύλʔϯ• Ϧετදࣔ• άϦουදࣔ• ͦͷଞ• ϚοϐϯάͳͲ• Material Design Guideline ͳͲ͕ͱͯࢀߟʹͳΔ
006*ͷ࣮ફίϨΫγϣϯϏϡʔͷ৭ʑϦετ άϦου Ϛοϐϯά
006*ͷ࣮ફίϨΫγϣϯϏϡʔΞΠςϜͷ৭ʑϦετ Χʔυ
006*ͷ࣮ફγϯάϧϏϡʔͷύλʔϯ• ͦͷͷͷใͷΈΛදࣔ͢Δύλʔϯ• ଞΦϒδΣΫτͷίϨΫγϣϯΛϓϨϏϡʔతʹදࣔ͢Δύλʔϯ• جຊԡͨ͠ΒભҠ͕ൃੜ• ෦ʹଞΦϒδΣΫτͷίϨΫγϣϯΛؚΉύλʔϯ• ଐੑͷදݱͱͯ͠༻͍Δ• ଞͷΦϒδΣΫτͷίϨΫγϣϯͷΈΛؚΉύλʔϯ
006*ͷ࣮ફγϯάϧϏϡʔͷύλʔϯUSB2ͷྫ• ϢʔβʔϞʔμϧ࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ• ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ• Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛแͨ͠දࣔ• Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛแͨ͠දࣔ• ͜ΕΒΛλϒόʔͰΓସ͍͑ͯΔʢকདྷతͳ֦ுݟਾ͑ͯʣ
006*ͷ࣮ફϢʔβʔͷγϯάϧϏϡʔʢຒΊࠐΈϏϡʔͳ͠ / ͋Γʣ
006*ͷ࣮ફϨΠΞτͷఆٛUSB2ͷྫ• ϢʔβʔϞʔμϧ࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ• ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ• Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛแͨ͠දࣔ• Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛแͨ͠දࣔ• ͜ΕΒΛλϒόʔͰΓସ͍͑ͯΔʢকདྷతͳ֦ுݟਾ͑ͯʣ
006*ͷ࣮ફఴϑΝΠϧҰཡΛ͚ͭͨtraQͷϏϡʔߏνϟϯωϧίϨΫγϣϯ ϦετϝοηʔδίϨΫγϣϯ ϦετఴϑΝΠϧίϨΫγϣϯ άϦουλάίϨΫγϣϯ ϦετϢʔβʔίϨΫγϣϯ ϦετνϟϯωϧγϯάϧϢʔβʔγϯάϧϝΠϯφϏήʔγϣϯϞόΠϧ࣌υϩϫʔNPEBMNPEBM
006*ͷ࣮ફΞΫγϣϯͷஔ• جຊతʹରͱͳΔΦϒδΣΫτͷۙ͘ʹஔ͘• ৽ن࡞ͷ߹ίϨΫγϣϯϏϡʔΛରͱΈͳ͢• ྫ:• Χʔυදࣔ͞ΕͯΔͷʹର͢Δૢ࡞ˠΧʔυͷத• Ϧετදࣔͷ৽نՃˠϦετશମͷӈ্ͳͲ
006*ͷ࣮ફΞΫγϣϯͷஔ$SFBUF• ৽ن࡞ίϨΫγϣϯϏϡʔʹ͔͠ஔ͚ͳ͍• ৽ن࡞ϘλϯΛԡ͢ͱϞʔμϧͰ༰ΛٻΊΒΕΔύλʔϯ• ύϥϝʔλʔύλʔϯ• ೖྗཝ͕ৗʹԼʹଘࡏ͍ͯͯ͠ɺೖྗˠܾఆͰ৽ن࡞• ϓϨʔεϗϧμʔύλʔϯ
006*ͷ࣮ફύϥϝʔλʔ / ϓϨʔεϗϧμʔ ύλʔϯ
006*ͷ࣮ફΞΫγϣϯͷஔ6QEBUF• ߋ৽γϯάϧϏϡʔͰߦ͏ͷ͕جຊ• ༰͕શͯมߋՄೳͰɺࣗಈอଘ͞ΕΔύλʔϯ• ઃఆͳͲͰΘΕΔ• ϘλϯΛԡ͢ͳͲͰฤूϞʔυʹҠߦ͠ɺ໌ࣔతʹอଘ͢Δύλʔϯ• ϓϩϑΟʔϧฤूͷΠϝʔδ
006*ͷ࣮ફΞΫγϣϯͷஔ%FMFUF• আγϯάϧͰίϨΫγϣϯͰՄೳ• আͯ͠ྑ͍͔ͷ֬ೝΛग़͢ύλʔϯ• আͷऔΓফ͕͠Ͱ͖Δύλʔϯ• ίϨΫγϣϯϏϡʔʹฤूϞʔυΛ࣋ͨͤΔύλʔϯ• iOSͷTableView
006*ͷ࣮ફίϨΫγϣϯͷϑΟϧλϦϯά• จࣈྻݕࡧ• ଐੑϑΟϧλ• ଐੑΛΦϒδΣΫτͱ͖ͯ͠Βͳ͍ͱ͍͚ͳ͍͔͠Εͳ͍• શͯදࣔ ΛݸผͷΞΠςϜͱ͓͍ͯͨ͠ํ͕ྑ͍• ιʔτ
006*ͷ࣮ફ006*ͷ·ͱΊw ΦϒδΣΫτநग़w λεΫ͔ΒͷΦϒδΣΫτͷదͳநԽଐੑΞΫγϣϯw Ϗϡʔఆٛw γϯάϧϏϡʔίϨΫγϣϯϏϡʔભҠؔw ϨΠΞτఆٛw σβΠϯύλʔϯʹجຊతʹै͓͖ͬͯ͘
ϏδϡΞϧσβΠϯᶆ7JTVBMEFTJHO
ϏδϡΞϧσβΠϯͷίπ͜ͷষͷྲྀΕ• ʹݟ͑Δ࠷ऴܗΛσβΠϯ͢Δͱ͖ͷίπʹ͍ͭͯͰ͢• σβΠϯͷ4ݪଇ• εϖʔγϯά• λΠϙάϥϑΟ• ৭• ϝϯλϧϞσϧ
ϏδϡΞϧσβΠϯͷίπσβΠϯͷݪଇ• σβΠϯɾϨΠΞτͰԡ͑͞Δ͖ݪଇ• ۙ: ؔ͢Δใ͚ۙͮΔ• ྻ: Ұ࿈ͷใΛྻͤͯ͞දࣔ͢Δ• ରൺ: ॏཁͳใͱͦ͏Ͱͳ͍ใͷίϯτϥετΛ͚ͭΔ• ෮: ಉҰͷϞνʔϑΛ܁Γฦ͠༻͍Δ
ϏδϡΞϧσβΠϯͷίπۙ1SPYJNJUZؔ͠ͳ͍ใԕ͚͟Δɺؔ͢Δใ͚ۙͮΔྻ "MJHONFOUݟ͑ͳ͍ઢʹἧ͑ͯஔ͢Δ͜ͱͰใͷؔ࿈ੑΛڧௐରൺ $POUSBTUڧௐ͍ͨ͠ใେ͖͞ɾ৭Λڧ͘දࣔ͢Δ෮ 3FQFUJUJPOಛత ౷ҰతͳݟͨͷͷΛ܁Γฦ͠༻͍Δ
ϏδϡΞϧσβΠϯͷίπσβΠϯͷݪଇۙશผΞΠςϜˠ͍Ϛʔδϯݟग़͠ͱຊจͷ۠Γˠڱ͍Ϛʔδϯ
ϏδϡΞϧσβΠϯͷίπσβΠϯͷݪଇྻ্ἧ͑྆ἧ͑ࠨἧ͑
ϏδϡΞϧσβΠϯͷίπσβΠϯͷݪଇྻ• ྻ͕όϥόϥͩͱݟͮΒ͍• Լͷྫ˔͕શମॎதԝɺλΠτϧͱจষ͕ࠨɺจষ͕྆தԝݟͮΒ͍
ϏδϡΞϧσβΠϯͷίπσβΠϯͷݪଇରൺ• ॏཁͳใڧௐɺͦ͏Ͱͳ͍ใཱͨͳ͘• େ͖͞ɺ৭ɺଠ͞ɺεϖʔγϯάͰௐ
ϏδϡΞϧσβΠϯͷίπ৭ɾϑΥϯταΠζɾϑΥϯτΣΠτͷมߋΛͳͯ͘͠ΈΔ
ϏδϡΞϧσβΠϯͷίπσβΠϯͷݪଇ෮• ಉҰͷϞνʔϑΛ܁Γฦ͢• ಛʹΞϓϦέʔγϣϯͷ߹ɺಉҰͷڍಈΛ͢ΔίϯϙʔωϯτͷݟͨΛ౷Ұ͖͢Send Follow Send FollowOK! NG
ϏδϡΞϧσβΠϯͷίπήγϡλϧτ৺ཧֶ• ਓؒ·ͣશମͷߏʢήγϡλϧτʣΛೝࣝ͢Δ• ήγϡλϧτͱใͷཧతߏ͕Ұக͍ͯ͠Δͱخ͍͠• ۙͷཁҼ: ͍ۙͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ۙݪଇ• ྨಉͷཁҼ: ࣅͯΔͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ෮ݪଇ• ด߹ͷཁҼɺྑ͍࿈ଓͷཁҼͱ͍͏ͷ͋Δ
ϏδϡΞϧσβΠϯͷίπۙͷཁҼ ྨಉͷཁҼด߹ͷཁҼ Α͍࿈ଓͷཁҼ
ϏδϡΞϧσβΠϯͷίπεϖʔγϯά• Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ• ۙݪଇʹରԠ͢Δߏཁૉ• CSSϕʔεͩͱɺେࡶʹೋͭʹ͔ΕΔ• ίϯϙʔωϯτؒͷۭനʢmarginʣ• ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ
ϏδϡΞϧσβΠϯͷίπεϖʔγϯάNBSHJOͱQBEEJOHmarginpadding
ϏδϡΞϧσβΠϯͷίπεϖʔγϯάͷϙΠϯτ• ༨നेʹɺ͋ΒΏΔͷʹઃఆ͢Δ• ځ۶/༨༟͕ͳ͍ͳͱײͨ͡ΒύσΟϯάΛ͚ͭΔ͜ͱΛݕ౼• Ұ؏ੑͷ͋ΔεϖʔγϯάΛ͢Δ• ྻݪଇͱؔ࿈͕ਂ͍• ༨നͷऔΓํͰҹΛίϯτϩʔϧͰ͖Δ• ҰʹೖΔใྔΛௐ͢Δ
ϏδϡΞϧσβΠϯͷίπεϖʔγϯάͷϙΠϯτ༨നेʹऔΔ• marginɾpaddingຊจจࣈαΠζͷ͙Β͍ཉ͍͠• ࠨͷྫߦؒͷҰ؏ੑ่Ε͍ͯͯਏ͍λΠτϧλΠτϧʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇཱ͚͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺը͕ग़དྷΔɻͱ͔͘ʹਓλΠτϧλΠτϧʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇཱ͚͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜ
ϏδϡΞϧσβΠϯͷίπεϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά• ۭനͷେ͖͞ɾͲ͜ʹۭനΛஔ͔͘ʹ͍ͭͯҰ؏ͨ͠ϧʔϧ͕͋Δͱྑ͍• ΟϯυશମͷύσΟϯά• λΠτϧͱຊจͷؒͷϚʔδϯɹͳͲ• Կ͔୯ҐΛܾΊͯͦΕͷഒʹ͢ΔͱΉඞཁ͕ݮΔ• جຊ8pxͷഒɺඍௐ͍ͨ͠ͱ͖4pxͷഒɹͳͲ
ϏδϡΞϧσβΠϯͷίπεϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά• ϧʔϧΛܾΊΔࡍɺରͱͳΔίϯϙʔωϯτͷཻΛߟྀ͢Δ• େ͖͍ॱʹ• ηΫγϣϯؒͷεϖʔε• ΦϒδΣΫτؒͷεϖʔε• ίϯϙʔωϯτͷεϖʔε• ্ԼࠨӈͰ౷Ұͨ͠༨നΛऔΔ
ϏδϡΞϧσβΠϯͷίπεϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά• Material Design Guidelineͷྫʢ⚠marginͳͲͷ༻๏͕͜ͷࢿྉͱҟͳΔʣ(VUUFSEQEQ7FSUJWBM.BSHJOEQEQ)PSJ[POUBM.BSHJO
ϏδϡΞϧσβΠϯͷίπεϖʔγϯάͷϙΠϯτεϖʔεͷ༩͑Δҹ• εϖʔεΛେ͖͘։͚Δ• ΏͬͨΓͱͨ͠ҹ• ίϯςϯπʹूத͍ͤͨ࣌͞• εϖʔεΛͦ͜·Ͱ։͚ͳ͍• ଟ͘ͷใ͔ΒબͤΔ࣌
ϏδϡΞϧσβΠϯͷίπྫ: ϝσΟΞϓϥοτϑΥʔϜʢτοϓʣhttps://note.com/
ϏδϡΞϧσβΠϯͷίπྫ: ϝσΟΞϓϥοτϑΥʔϜʢίϯςϯπʣhttps://note.com/
ϏδϡΞϧσβΠϯͷίπεϖʔγϯά·ͱΊ• marginͱpaddingͷ2ͭͷύλʔϯͷ༨നͷऔΓํ͕͋Δ• ͋ΒΏΔཁૉʹదͳ༨നΛͱΔʂ• Ұ؏ੑͷ͋ΔεϖʔγϯάϧʔϧΛ࣋ͭ• ίϯϙʔωϯτͷཻ͝ͱʹదͳ༨നΛ
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟ• จࣈͷදࣔͷํͷ͜ͱ• େ͖͞ɺ৭ɺଠ͞ɺϑΥϯτɺจࣈؒɺߦؒɺஈམؒεϖʔε……• ରൺݪଇɾۙݪଇʹରԠ͢Δ
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟจࣈαΠζ• ࠷؆୯ʹใʹڧऑΛ͚ͭΔ͜ͱ͕Ͱ͖Δ• جຊ λΠτϧ >> ຊจ > ٭• จࣈαΠζʹݟ߹ͬͨ༨ന͕ඞཁ• ͑ΔจࣈαΠζͷϧʔϧΛ࡞͓ͬͯ͘ͱྑ͍• λΠϓγεςϜͱ͍͏
ϏδϡΞϧσβΠϯͷίπtraQͷλΠϓγεςϜ
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟϑΥϯτ• ͍Ζ͍Ζ͋Δ• ΰγοΫ → ͋Δఔͷจɺ໌ே → ຊͳͲͷจ• ෳࡶͳσβΠϯͷϑΥϯτ͋ΔఔͷจࣈαΠζΛ֬อ͢Δ
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟϑΥϯτΣΠτ• ϑΥϯτ͍͔ͭ͘ͷଠ͞ʢ = ΣΠτʣΛ͍࣋ͬͯΔ߹͕͋Δ• વଠ͍ͱཱͭ• ଟ༻ʹҙ• ࡉ͘͢Δͱཱͨͳ͘ͳΔ• ༨നΛޮՌతʹ͏ͱݟग़͠ʹ͑Δ• খ͍͞จࣈͷΣΠτʹҙ
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟจࣈؒ• ͍͜ͳ͢ͷ͕͍͠• ͔ͳΓҙਂ͍ௐ͕ඞཁখ ͞ ͍ จ ࣈ Ͱ จ ࣈ ؒ Λ ͱ Δଠ͍จࣈͷจࣈؒΛ٧ΊΔɻ
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟߦؒɾஈམؒ• جຊతͳൃεϖʔγϯάͷ࣌ͱಉ͡ʢߦؒ < ஈམؒʣ• ߦؒ௨ৗϑΥϯταΠζͷ1.2ഒఔ• 1.2ഒҎԼಡΈͮΒ͘ͳΔ• 1.5ഒ → ΏͬͨΓΊͷUI• 2ഒ → ͔ͳΓΏͬͨΓɺίϯςϯπϝΠϯͷUI
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟߦؒɾஈམؒߦؒαϯϓϧ ʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇཱ͚͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺը͕ग़དྷΔɻͱ͔͘ʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇཱ͚͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺը͕ग़དྷΔɻͱ͔͘ʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇཱ͚͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇཱ͚͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͍͘ͱޛͬ
ϏδϡΞϧσβΠϯͷίπλΠϙάϥϑΟ·ͱΊ• ·ͣຊจͷαΠζɾϑΥϯτΛܾΊΔ• ͔ͦ͜Βੜͯ͠ݟग़͠٭ͳͲͷαΠζΛߟ͑Δ• → λΠϓγεςϜΛ࡞Δ• Ұ؏ੑΛ࣋ͬͨλΠϓγεςϜͷద༻Λ͍ͯ͘͠
ϏδϡΞϧσβΠϯͷίπ৭• ͍Ζ͍Ζͳཁૉ͕͋Δ• τʔϯ• ৭ͷ࣋ͭΠϝʔδ• ආ͚ͨํ͕ྑ͍৭• ࠓճΧϥʔύϨοτΛ࡞Γɺద༻͢Δ͜ͱΛߟ͑Δ
ϏδϡΞϧσβΠϯͷίπ৭جૅࣝ)4-• ৭Λ3ͭͷύϥϝʔλʔΛͬͯද͢ํ๏• ৭૬(Hue) : ͲΜͳ৭͔• ࠼(Saturation) : ͲΕ͚ͩ৭͔͔• ໌(Luminance) : ͲΕ͚ͩ໌Δ͍͔
ϏδϡΞϧσβΠϯͷίπ24ׂͷ৭૬ʢ৭૬͜Εʹ͓͚ΔҐஔʣ
ϏδϡΞϧσβΠϯͷίπ্͕࠼0→1ɺԼ͕໌0→1ʢ৭૬205°ʣ
ϏδϡΞϧσβΠϯͷίπ৭جૅࣝτʔϯ• ࠼ͱ໌͕৭ͷงғؾΛܾΊΔ• 2ͭΛ߹ମͤͨ͞τʔϯͱ͍͏৭ͷྨ͕͋Δ• ϏϏουτʔϯɺϒϥΠττʔϯɺετϩϯάτʔϯɺ……• ӳࣈͰུ͢͜ͱ͕͋Δʢv, b, s, lt, sf, …ʣ
ϏδϡΞϧσβΠϯͷίπ৭جૅࣝτʔϯͱ৭ͷΈ߹Θͤ• τʔϯΛج४ʹ͢Δͱɺ࣍ͷΑ͏ʹ৭Λબ͍͍ͯײ͡ʹͳΔ• ಉ͡τʔϯ͔Β2৭• ಉ͡৭૬ͰҟͳΔτʔϯ͔Β2৭• ͦͷଞ৭૬ϕʔεͷิ৭ɺτϥΠΞυɺςτϥʔυͳͲ• άά͍ͬͯͩ͘͞
ϏδϡΞϧσβΠϯͷίπ৭ΧϥʔύϨοτ• ࣍ͷఔͷ৭͕୯७͚ͩͲ͍͍͢ΧϥʔύϨοτ• Primary color: αʔϏεશମͷΩʔΧϥʔ• Secondary color: Primaryͱͷ۠ผΛ͍ͨ͠ͱ͖ͷ৭• Text Color: จࣈ৭• Background Color: എܠ৭
ϏδϡΞϧσβΠϯͷίπ৭ΧϥʔύϨοτ1SJNBSZDPMPS• αʔϏεͷΠϝʔδͱͳΔ৭• ཁॴཁॴͰ͍ͬͯ͘ͷ͕ྑ͍• ॏཁͳϘλϯɺಛʹཱ͍ͨͤͨཁૉɺ……• ͍͗͢Δͱҙຯ߹͍͕΅͚ͯ͠·͏ͷͰΞΫηϯτఔʹ• UI༻ʹओཁʹ༻͍Δผͷ৭Λઃఆͯ͠ྑ͍ʢtraQͦ͏ʣ
ϏδϡΞϧσβΠϯͷίπ৭ΧϥʔύϨοτ4FDPOEBSZDPMPS• PrimaryҎ֎Ͱ͋Δ͜ͱΛࣔͨ͢Ίͷ৭• ΩϟϯηϧͳͲɺऑ͍ΞΫγϣϯʹରͯ͠͏• ࠼Ίͷ৭ʹ͢ΔͱΘ͔Γ͍͢• ϘʔμʔΛڧ੍͢Δ͜ͱߟ͑ΒΕΔ
ϏδϡΞϧσβΠϯͷίπ৭ΧϥʔύϨοτ#BDLHSPVOEUFYUDPMPS• എܠจࣈ৭• Primary colorͱಉ͡৭૬ͷࠇനΛ͏ͱ͍͍ײ͡ʹ·ͱ·Δ
ϏδϡΞϧσβΠϯͷίπ৭ΧϥʔύϨοτ࡞Δʹʁ• ͍Ζ͍Ζͳ৭Λ͏ͷͱ͍ͯ͠ͷͰ৭ΛߜΔ• PrimaryΛҰ৭ܾΊΔ• ͜ΕαʔϏεͷओ࣠ͷ৭ͳͷͰؤுܾͬͯΊΔ• v͔Βগ͠֎ͯ͠b, l, lt, sfͳͲΛ͏ͷ͕ྲྀߦΓͬΆ͍• secondary, text, backgroundಉ৭૬ผτʔϯ͔ΒબͿ
ϏδϡΞϧσβΠϯͷίπ৭ΧϥʔύϨοτ͍ํ• ΧϥʔύϨοτΛ࡞ͬͯͦͷ͍ํΛܾΊͳ͍ͱҙຯ͕ͳ͍• Primary colorΛΞΫηϯτఔʹ͏+શମΛനܥͰ·ͱΊΔ• ͖ͬ͢ΓϞμϯɺμʔΫϞʔυରԠָ͕• Primary colorΛଟ͘͏• ͘ͳΓ͕ͪͰඇৗʹ͍͠
ϏδϡΞϧσβΠϯͷίπΧϥʔύϨοτͷΠϝʔδ
ϏδϡΞϧσβΠϯͷίπ৭ආ͚͍ͨ৭• ਅͬࠇʢ#000000ʣ• Ͳͷ৭ʹରͯͬͯ͠ίϯτϥετ͕ݫ͍͠• จࣈ৭ʹഎܠ৭ʹίϯτϥετ͕ݫ͍͠• ໌Λগ্͛ͯ͠ɺprimary colorͷ৭૬ʹدͤΔͱ
ϏδϡΞϧσβΠϯͷίπ৭ආ͚͍ͨ৭• ݪ৭ʢ#ff0000, #00ff00, #0000ffʣ• Θͳ͍ํ͕ྑ͍• ઈରʹจࣈ৭Λ͜ͷ৭ʹ͍͚ͯ͠ͳ͍• ϏϏουτʔϯʢ͜ͷ3ͭ΄ͲͰͳ͍͕ʣආ͚͍ͨ• গ͠࠼ΛԼ͛Δɾ໌Λ͍͡ΔͳͲͨ͠৭Λprimaryʹ͏ͱྑ͍͔
ϏδϡΞϧσβΠϯͷίπ৭৭ͷ࣋ͭΠϝʔδ• ৭ʹ͔ͦ͜Β࿈͞ΕΔΠϝʔδ͕͋Δ• άά͍ͬͯͩ͘͞• ͕ΤωϧΪογϡɺ੨͕৴པɹͳͲ
ϏδϡΞϧσβΠϯͷίπϝϯλϧϞσϧ• Ϣʔβʔͷ͍࣋ͬͯΔɺදʹର͢ΔߦಈͷΠϝʔδ• ʮ͜ͷݟͨͷύʔπϘλϯͳͷͰɺԡ͢ͱԿ͔ى͜Δʯ• ίϯϙʔωϯτͷݟͨ͜ΕΛө͍ͯͯ͠ཉ͍͠• ίϯϙʔωϯτ͕ঢ়ଶΛ࣋ͭ߹ө͍ͯͯ͠ཉ͍͠• ʮಁ໌ͳϘλϯdisabledͩʯ
ϏδϡΞϧσβΠϯͷίπϝϯλϧϞσϧೝෛՙ• ϝϯλϧϞσϧʹԊ͍ͬͯͳ͍UIύʔπɺͦͷҙຯΛೝͮ͠Β͍• ϢʔβʔʹೝෛՙΛڧ͍͍ͯΔঢ়ଶ• Կ͔ελϯμʔυͳදݱ͕͋Δ߹ͦΕʹै͏• OSඪ४ͳͲ• ಉҰαʔϏεͰಉ͡ͷΛද͢ͷʹಉ͡දݱΛ͏ʢ෮ݪଇʣ
ϏδϡΞϧσβΠϯͷίπϏδϡΞϧσβΠϯ·ͱΊ• σβΠϯͷ4ݪଇ• εϖʔγϯά• ͱʹ͔͘దͳ༨നΛ͚ͭͯ͋͛Δ• λΠϙάϥϑΟ• ৭• ϝϯλϧϞσϧ
͓ΘΓͰ͢
elevenlines
minma
yuriemori
misaaa09
shogouenaka
ohtristanart
misty_marsden
uxaustralia
kazuyaseki
nabemasat
onlinesalon
ozontech
fixel_admin
62gerente
chrislema
lemiorhan
3n
caitiem20
lara
destraynor
brettharned
kastner
ddemaree
erikaheidi
sachag