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
UIデザイン講習会
Search
Spa
July 25, 2020
Design
32
13k
UIデザイン講習会
2020/7/25にtraPで実施したUIデザイン講習会の資料です
Spa
July 25, 2020
Tweet
Share
More Decks by Spa
See All by Spa
推しデザイン会: サインシステム
elevenlines
3
310
推しフォント会
elevenlines
0
180
DTP講習会
elevenlines
1
130
Design Workshop
elevenlines
2
320
Other Decks in Design
See All in Design
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
600
実利の世界で、表現者である
kiyou77
3
140
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
300
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
240
Improve a service workshop
mastervicedesign
1
130
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
570
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
760
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
270
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
510
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
33k
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.5k
The One
chinweanimation
0
100
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Become a Pro
speakerdeck
PRO
26
5k
Producing Creativity
orderedlist
PRO
341
39k
A Tale of Four Properties
chriscoyier
157
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A designer walks into a library…
pauljervisheath
204
24k
Mobile First: as difficult as doing things right
swwweet
222
9k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
A Philosophy of Restraint
colly
203
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
98
The Invisible Side of Design
smashingmag
298
50k
Transcript
6*σβΠϯߨशձ 6*σβΠϯͷߨशձͰ͢ @spa
@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ͷϏϡʔߏ νϟϯωϧ ίϨΫγϣϯ Ϧετ ϝοηʔδ ίϨΫγϣϯ Ϧετ
ఴϑΝΠϧ ίϨΫγϣϯ άϦου λά ίϨΫγϣϯ Ϧετ Ϣʔβʔ ίϨΫγϣϯ Ϧετ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ ϝΠϯφϏήʔγϣϯ ϞόΠϧ࣌υϩϫʔ NPEBM NPEBM
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
Follow OK! NG
ϏδϡΞϧσβΠϯͷίπ ήγϡλϧτ৺ཧֶ • ਓؒ·ͣશମͷߏʢήγϡλϧτʣΛೝࣝ͢Δ • ήγϡλϧτͱใͷཧతߏ͕Ұக͍ͯ͠Δͱخ͍͠ • ۙͷཁҼ: ͍ۙͷΛ·ͱ·Γͱͯ͠ଊ͑Δ →
ۙݪଇ • ྨಉͷཁҼ: ࣅͯΔͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ෮ݪଇ • ด߹ͷཁҼɺྑ͍࿈ଓͷཁҼͱ͍͏ͷ͋Δ
ϏδϡΞϧσβΠϯͷίπ ۙͷཁҼ ྨಉͷཁҼ ด߹ͷཁҼ Α͍࿈ଓͷཁҼ
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά • Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ • ۙݪଇʹରԠ͢Δߏཁૉ • CSSϕʔεͩͱɺେࡶʹೋͭʹ͔ΕΔ • ίϯϙʔωϯτؒͷۭനʢmarginʣ
• ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά • Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ • ۙݪଇʹରԠ͢Δߏཁૉ • CSSϕʔεͩͱɺେࡶʹೋͭʹ͔ΕΔ • ίϯϙʔωϯτؒͷۭനʢmarginʣ
• ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάNBSHJOͱQBEEJOH margin padding
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ • ༨നेʹɺ͋ΒΏΔͷʹઃఆ͢Δ • ځ۶/༨༟͕ͳ͍ͳͱײͨ͡ΒύσΟϯάΛ͚ͭΔ͜ͱΛݕ౼ • Ұ؏ੑͷ͋ΔεϖʔγϯάΛ͢Δ • ྻݪଇͱؔ࿈͕ਂ͍
• ༨നͷऔΓํͰҹΛίϯτϩʔϧͰ͖Δ • ҰʹೖΔใྔΛௐ͢Δ
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ༨നेʹऔΔ • marginɾpaddingຊจจࣈαΠζͷ͙Β͍ཉ͍͠ • ࠨͷྫߦؒͷҰ؏ੑ่Ε͍ͯͯਏ͍ λΠτϧλΠτϧ ʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇ͚ ཱ͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͘ ͍ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺը͕ग़
དྷΔɻͱ͔͘ʹਓ λΠτϧλΠτϧ ʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇ ཱ͚͕֯ͭɻͲ͜ӽͯ͠ ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜ
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • ۭനͷେ͖͞ɾͲ͜ʹۭനΛஔ͔͘ʹ͍ͭͯҰ؏ͨ͠ϧʔϧ͕͋Δͱ ྑ͍ • ΟϯυશମͷύσΟϯά • λΠτϧͱຊจͷؒͷϚʔδϯɹͳͲ •
Կ͔୯ҐΛܾΊͯͦΕͷഒʹ͢ΔͱΉඞཁ͕ݮΔ • جຊ8pxͷഒɺඍௐ͍ͨ͠ͱ͖4pxͷഒɹͳͲ
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • ϧʔϧΛܾΊΔࡍɺରͱͳΔίϯϙʔωϯτͷཻΛߟྀ͢Δ • େ͖͍ॱʹ • ηΫγϣϯؒͷεϖʔε • ΦϒδΣΫτؒͷεϖʔε
• ίϯϙʔωϯτͷεϖʔε • ্ԼࠨӈͰ౷Ұͨ͠༨നΛऔΔ
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • Material Design Guidelineͷྫʢ⚠marginͳͲͷ༻๏͕͜ͷࢿྉͱҟͳΔʣ (VUUFS EQEQ 7FSUJWBM.BSHJO EQEQ
)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ݪଇ • εϖʔγϯά • ͱʹ͔͘దͳ༨നΛ͚ͭͯ͋͛Δ • λΠϙάϥϑΟ
• ৭ • ϝϯλϧϞσϧ
͓ΘΓͰ͢