今日からできるUXデザイン

2019/05/08に株式会社gumi様でプログラマ向けに行ったデザイン講義のスライドです。

難しく考えがちなUXデザインですが、今できることからやってこうぜって話です

この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。

第一回「これだけ守れば見やすくなるデザインの基礎」はこちら
https://speakerdeck.com/kinakobooster/koredakeshou-rebajian-yasukunarudezainfalseji-chu

第二回「UIデザインをはじめよう」はこちら
https://speakerdeck.com/kinakobooster/uidezainwohazimeyou

※訪問講座のご案内※
あなたの会社に話しに行きます。料金表はこちら
https://xemono.life/#/workwith/consulting

ご質問はTwitter@kinakoboosterまでお気軽にどうぞ。
https://twitter.com/kinakobooster

株式会社Xemonoの詳細はこちら
https://xemono.life

実践編・アイコンを実際に作る過程はこちら
https://note.mu/xemono/n/nd7b696b78702

とりいめぐみはこんなことを考えている人です
http://noubrain.hateblo.jp/entry/2019/04/05/171255

Transcript

1. ࠓ೔͔ΒͰ͖ Δ69 גࣜձࣾ9FNPOP QFSGPSNFE
   CZ
   ͱ Γ͍Ί͙Έ!LJOBLPCPPTUFS  9FNPOPσβΠ ϯߨ࠲
   ʢʣ
2. ͩΕ ʁ ͱ Γ͍Ί͙Έ גࣜձࣾ9FNPOP୅ද ೥ੜɻ ϓϩάϥ ϛ ϯά͕ Ͱ͖ ΔσβΠφʔɻ ୹ՎΛͭ ͘ Δਓɻ ࿩͠૬ख͕ཉ͠ ͘ ͯCPUΛࣗ ࡞ͨ͜͠ ͱ͕͋Δɻ ౦ژେֶཧՊҰྨೖֶɺ จ ֶ෦फڭֶफڭֶ࢙ଔۀɻ
3. ࠓճͷ࿩    σβΠ ϯͷجૅ 6*σβΠ ϯΛ͸͡ΊΑ ͏ 69ͷߟ͑ํ
4. ͓͠ͳ͕͖         69ͬͯԿ ʁ ࠓ೔͔ΒͰ͖ Δ69 จষ ίʔσΟ ϯά ྲྀΕͷσβΠ ϯ ਓؒʹ͍ͭͯ ओޠͷͰ͔͍࿩ · ͱΊ
5. ର৅ 6*σβΠ ϯʹ ೖ໳Ͱ͖ͨਓ
6. ໨త 69֓೦Ͱ ࢹ໺Λ޿͘ ͢Δ
7. ୈೋճͷ͋Β͢ ͡
8. 6*σβΠ ϯ͸ ࢼߦࡨޡ ୈೋճͷ͋Β͢ ͡
9. օ஌ͬͯΔ ύʔπΛ ૊Έ߹ΘͤΑ ͏ ୈೋճͷ͋Β͢ ͡
10.  69ͬͯԿ ʁ
11. 6TFS
    &YQFSJFODF ʢϢʔβʔମݧʣ 69
12. 6TFS ࢖͏ਓ &YQFSJFODF ମݧ
13. 6*69ͷ୲౰ྖҬ 6* ͳʹ͔͍ͨ͠ˠ ࢖͏ ˠຬ଍ͯ͠ؼΔ 69
14. Կ͔ؾ͖ͮ ·ͤΜ͔
15. कඋൣғͰ͔͗͢ͳ͍ ʁ
16. 69͸ ΫισΧओޠ
17. ͳͥ कඋൣғ͕ Ͱ͔͍ͷ͔
18. ࢹ໺޿Ίʹ 6*ͷ͜ ͱ Λ ߟ͑ΔͨΊ
19. 6*69ͷ୲౰ྖҬ ʢ࠶ܝʣ 6* ͳʹ͔͍ͨ͠ˠ ࢖͏ ˠຬ଍ͯ͠ؼΔ 69
20. ੡඼Λ࢖͏ಈػ ·Ͱߟ͍͑ͨ
21. ը໘ͷ֎΋ ߟ͑Δͷ͕ 69
22. 69ຊʹ͸Կ͕ॻ͍ͯ͋Δͷ͔
23. Ϣʔβʔ ௐࠪͷ ΍Γํ
24. ϓϩ τλΠ ϐϯά ϖϧιφ ΧελϚʔδ ϟ ʔχʔ ϢʔβʔΠ ϯλ Ϗϡ ʔ
25. Ϣʔβʔ͕ ԿΛߟ͑ͯΔ͔ Θ͔Γ͍ͨ
26. ओޠ͕Ͱ͔͍͔Β Ϣʔβʔͷ࿩͔͠ Ͱ͖ ͳ͍
27. ࣮ࡍͲ ͏࡞Ε͹͍͍ͷ ʁ
28. 69Λߟ͑ΔͨΊͷҰͭͷ໰͍
29. ͦΕςΫ ϊϩδʔͷ ౎߹ʹ ߹Θͤͯͳ͍ ʁ
30. ςΫ ϊϩδʔͷ౎߹ʹ߹Θͤͨిྗܭ IUUQTFOXJLJQFEJBPSHXJLJ&MFDUSJDJUZ@NFUFS
31. ਓؒͷ౎߹ʹ߹ΘͤΔɺ ͱ͸
32. ൑அྗΛ ແବଧͪ ͤ͞ͳ͍
33. ࣌ؒΛׂ͔͚ͨʹ ׬੒඼͕ແ೉ ˣ ͔ͳ Γਖ਼ղ
34. ΍Γ͕ͪ
35. ͍Β ͳ͍ը໘ ࡞ͬ ͪ Ό ͏ ΍Γ͕ͪ
36. #FTU
    JOUFSGBDF JT /P
    JOUFSGBDF ࢀߟ ɿ ʰ͞ Αͳ Βɺ Π ϯλʔϑ Σ ʔεʱ
37. ྫ ंͷ伴Λ ։͚Δ
38. ෺ཧ伴ํࣜ ंʹۙͮ͘ ˠ伴Λग़͢ˠ։͚Δ εςο ϓ
39. ंʹۙͮ͘ ˠ伴Λग़͢ˠ։͚Δ ෺ཧ伴ํࣜ εςο ϓ ंʹۙͮ͘ ˠεϚϗग़͢ˠ ϗʔϜը໘͔ΒΞϓϦ Λ୳ͯ͠։͘ ˠ ղৣϘλϯΛԡͯ͠։͚Δ ψϧ͍ं؅ཧΞϓϦ εςο ϓ
40. 69σβΠφʔ͕͍Δ ͱʜ ʁ
41. Α Γ Α͍伴 ిࢠϩο ΫΛ࣋ͬͯंʹۙͮ͘ ˠ υΞϊ ϒͷϘλϯΛԡͯ͠ղৣ εςο ϓ
42. 69͸ ը໘ʹͱ ΒΘΕͳ͍ ΫισΧࢹ໺
43. Ϣʔβʔ͕ تͿ΋ͷΛ ͭ͘ Ζ ͏ ʢ΄ͱΜͲͷਓ͸ཉ๬Λ֮ࣗͯ͠ͳ͍͚ͲͶʣ
44. "#ςε τͷ݁Ռ ঃʑʹϘλϯ͕ Ͱ͔͘ ͳΔ ΍Γ͕ͪ
45. ਓ͸ҙࢤʹ൓ͯ͠ Ϙλϯԡͤ͞ΒΕͨ͜ ͱ ͙ Β͍ ͪ ΌΜͱΘ͔Δ
46. Ϣʔβʔ͸۪͔Ͱ͸ͳ͍
47. ͤΊͯؾ࣋ͪΑ ͘ ϘλϯΛԡͯ͠΋ Β͓͏
48. ࢹ໺޿Ίʹ 6*Λߟ͑Δ ࠓ೔͔ΒͰ͖ Δ ͜ ͱ
49. Τϥʔ ϝ οηʔδ ͕Μ͹Δ ͨͱ ͑͹
50. Ұը໘Ͱ໌ࣔ͢Δ ɾ ͍·Ͱ͖ Δ ͜ ͱ ɾ Ͳ ͜ʹߦ͘ ͷ͔ ɾ ͍· Ͳͷลͳͷ͔ ɹ ʢՌ͕ͯ͋Δͷ͔ͳ͍ͷ͔ʣ ͨͱ ͑͹
51.  ࠓ೔͔ΒͰ͖ Δ69
52. ਓؒͷ౎߹ʹ߹ΘͤΔ ൑அྗΛແବݣ͍ͤ͞ͳ͍ ઈରʹϢʔβʔςε τ͢Δ    69ࡾՕ৚
53. 69 ࢹ໺͕Ͱౕ͔͍͕ ڧ͍
54. ͋Δ ͱྑ͍஌ࣝ จষ͕ॻ͚Δ ϓϩάϥϜΛॻ͚Δ σβΠ ϯ͕Ͱ͖ Δ ਓؒ৺ཧʹৄ͍͠ اը͕Ͱ͖ Δˡ͜Ε͸·ͨผͷػձʹ    
55. 69Ͱߟ͑Δ ͜ ͱ ੡඼ͷ΄΅શ෦
56. · ͱΊͯ࿩͢ͱ ΫισΧओޠ τʔΫʹ ͳ ͬ ͪ Ό ͏
57. 69΍Δʹ͸ ݖྗ͕͍Δ
58. Ͱ͖ Δ ͱ ͔͜Β ΍ͬͯ ͘ ͔͠ͳ͍
59.  จষ
60. શମͷྲྀΕΛ ߟ͑ͯ จষΛ࡞Δ
61. ྫ
63. $MJDLͰࠓ͙͢ങ͏
64. ͜Θ͍ ͚Ͳ͍͢͝ηϯε
65. িಈങ͍Λ༠ൃ͍ͨͬ͠Ά͍
66. ɾ ϫϯΫ Ϧ ο ΫͰ͙͢ങ͑ΔΞϐʔϧ ɾ ࢄʑΞϚκϯͰങͬͯΔ͔Β άμάμݴ Θͳ ͘ ͯ΋͍͍Ͱ͠ ΐײ ɾ ഑৴ઌΛҰॹʹғ͏ ͜ ͱ Ͱɺ ଈ%-͞ΕΔ ͜ ͱ Λදͯ͠Δ $MJDLͰࠓ͙͢ങ͏
67. Ϙλϯ୯ମͰ೰Ήͱ ೔࿨ͬͨจষ͔͠Ͱ͖ ͳ͍ ొ࿥ͨ͠Ϋ ϨΧͰߪೖ͢Δ ߪೖͯ͠μ΢ϯϩʔ υΛ࢝ΊΔ ߪೖ͢Δ
68. ʮিಈങ͍ͤͯ͑͞ʙʯ ͕͋Δ͔Β ʮ$MJDLͰࠓ͙͢ങ͏ʯ ͕੒ཱ͢Δ
69. Ͳ ͏ ͯ͠΄͍͔͠Ͱ ʮਖ਼ղʯ ΋ มΘΔ
70.  ίʔ υ
71. ։ൃͷ69 Λ Α ͘ ͍ͨ͠
72. ࣗಈԽͰ͖ Δ ͱ ͜͸ ࣗಈԽ
73. 
    XFCQBDL
    XBUDI ίϯύΠϧࣗಈԽͷྫ
74. ίʔ υελΠϧ΋GPSNBUUFS࢖͏
75. ελΠ Ϧ ϯάࣗಈԽͷྫ 
    FTMJOU
    pY
76. ࠶ར༻Ͱ͖ Δ ͱ ͜͸ ࠶ར༻
77. ίϯϙʔωϯ τ ͷ ෼͚ํ
78. ڍಈ͕༧ଌͰ͖ Δ ύʔπΛ ૊Έ߹ΘͤΔ
79. ౷Ұײͷ͋Δ σβΠ ϯΛ ࡞Γ͍ͨ
80. جຊ BUPNJD
    EFTJHO ͰΑ͍
81. Ϩΰϒϩο ΫΛ σβΠ ϯ ͯ͠ ૊Έ߹ΘͤΔ BUPNJD
    EFTJHOͷߟ͑ํ
82. ͜ΕҎ্෼͚ΒΕͳ͍ ࠷খύʔπ͔Β ߟ͑Δ BUPNJD
    EFTJHOͷߟ͑ํ
83. ͨͩ஫ҙ఺͸ ͋Δ
84. BUPNJD
    EFTJHO IUUQBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS
85. ݪࢠ
86. ෼ࢠ
87. ߏ଄ମ
88. ςϯϓϨʔ τ ςϯϓϨʔ τ
89. ͏ · ͘ ߦ͖ ͦ ͏ײ ͋Δ
90. ໰୊఺ ͦΜͳ៉ྷʹ෼͚ΒΕͳ͍ ͙͢૊Έ߹Θͤരൃ͢Δ ৭΍ܗͷهड़Λ੾Γ෼͚ͯόϦΤʔγ ϣ ϯ࡞ΕΔΑ ͏ʹ͓ͯ͜͠ ͏ Ұ౓͔͠࢖Θͳౕ͍ͱ͔ग़ͯ ͘ Δ ΋ ͏ ͜Ε͸࢓ํͳ͍ ˠͱ Γ͋͑ͣ෼ׂෆՄೳͳ΋ͷΛݪࢠʹ͓ͯ͜͠ ͏
91. ໰୊఺ Α ͘ Ͱ͖ͨύʔπ͕͋ͬͯ΋ ܭը͕ͳ͍ͱ ݁ہΧΦε
92. Ϩΰόέπ౉͞Εͯ΋ ͍ΖΜͳ΋ͷ࡞Εͪ Ό ͏
93. ܭըΛཱͯΑ ͏ BUPNJD
    EFTJHO ੒ཱͷͨΊʹ
94. ܭըΛཱͯΑ ͏ ϨΠΞ΢ τ࡞੒ ϧʔϧ੍ఆ ɾ ఆ਺Խ ϧʔϧΛ ΋ ͱʹ૿΍͢   
95. ϧʔϧ੍ఆ ɾ ఆ਺Խ ଍ͯͬͨ͠ ઌͷΧΦεΛ ճආ͢ΔͨΊʹ
96. ༨നͱαΠζͷ બ୒ࢶΛ ݮΒ͢ DTT
97. DTTͷྫ FMFNFOU
    \
    
    DPMPSCH
    ''
    TQBDFCSPBE
    QY
    TQBDFCBTJD
    QY
    TQBDFOBSSPX
    QY ^
98. ཁૉ͕૿͑ͯ ࠔΒ ͳ͍͔ ߟ͑Δ ڞ௨ԽͷΩϞ
99. ؾʹ͢Δ ͱ ͜ Ζ ͕ଟ͘ ͳΔ ˣ ѱ͍ڞ௨Խ
100. ૿΍͠΍͍͢ ˣ ྑ͍ڞ௨Խ
101. ʰϦ ʔ μϒϧίʔ υʱ ͸͍͍ຊ
102.  ྲྀΕͷσβΠ ϯ
103. ࢹ໺޿͘ σβΠ ϯΛ͢Δ ख๏
104. ΧελϚʔδ ϟ ʔχʔ
105. Ϣʔβʔ͕ ͲΜͳཉ๬Ͱ Ͳ ͏੡඼Λ৮Γ Ͳ ͏ຬͨ͞ΕΔ͔     ΧελϚʔδ ϟ ʔχʔ ʜʜΛ૝ఆͯ͠σβΠ ϯ͢Δ
106. ྫ *OTUBHSBN
107. ຊ୨͕΄͠ ͘ ͯ Π ϯελΛݟΔਓ
108. Π ϯελ։͘
109. ݕࡧԡ͢
110. ຊ୨ͬͯೖΕͯ ຊ୨ԡ͢
111. Θʔ͍ Ίͬ ͪ Όຊ୨ݟΕΔ
112. շదεςο ϓ
113. ࣍΋Π ϯελͰ ୳ͦ ͏͔ͳ ͬͯͳΔ ˢ Π ϯελͷΊ͋ͯ
114. Ϣʔβʔ͕ ΄͍͠΋ͷΛಘΔ ·Ͱͷܦ࿏Λߟ͑Δ
115. ͜ΕΛԿຊ͔ߟ͑ շద͞ Λ σβΠ ϯ ͍ͯ͘͠
116. ͜ͷख๏ͷܽ఺
117. ͏ · ͘ ͍͔ͳ͍ ܦ࿏Λ ૝ఆͮ͠Β͍ ͜ͷख๏ͷܽ఺
118. ࢖͏ਓʹ ৮ͬͯ΋ Β͓͏
119.  ਓؒʹ͍ͭͯ
120. લ൒ͷ෮श Ϣʔβʔ͸۪͔Ͱ͸ͳ͍
121. ։ൃऀΑ Γ͸ෆ׳Ε
122. ࣮؀ڥ͸ ։ൃ؀ڥΑ Γ Α ͬΆͲաࠅ
123. ਓؒ͸ ։ൃऀͷ૝ఆΛ ௒͑ͯ ͘ Δ
124. Ϣʔβʔςε τ ͠Α ͏
125. ΍Γํ Ϣʔβʔςε τ
126. ͳΜͱ͔ͯ͠ ϢʔβʔΛ ั·͑Δ Ϣʔβʔςε τ
127. ͜ΕͰ ʙͯ͠ ͘ ͩ ͍ͬͯ͞ ݴͬͯ౉͢ Ϣʔβʔςε τ
128. Ϣʔβʔςε τ ࿥ը΋͋Γ ༷ࢠΛ ޙΖ͔Β Α ͘ ݟΔ
129. ॏཁ ࠔΓ࢝Ίͯ΋ ॿ͚ͳ͍ Ͳ ͜Ͱ٧· ͔ͬͨΑ ͘ ݟ͓ͯ͜ ͏
130. ͳΜΒ͔ͷܗͰ ऴΘΔ
131. ೋճ໨Λ΍Δ ॏཁ
132. ಉ͡ ͜ ͱ Λ ͯ͠΋ Β͍ͳ͕Β Ͳ ͜Ͱࠔ͔ͬͨฉ͘
133. ͓ྱΛݴ͏
134. ݁ՌΛ࣋ͪؼΓ ӳ༤ѻ͍
135. ݁ՌΛ΋ ͱʹ ࠞཚϙΠ ϯ τΛ ௵͍ͯ͘͠
136. ͜Ε͸ΞϓϦͰ΋ ϖʔύʔϓϩ τͰ΋ Ͱ͖ Δ
137.  ओޠͷσΧ͍࿩
138. اըͱ͸ ΄͍͠΋ͷΛ ࡞Δ ͜ ͱ
139. ࣗ෼ͷͰ΋ଞਓͷͰ΋ ΄͍͠΋ͷΛ ࡞Δ ͜ ͱ اըͱ͸
140. ࣗ෼΋ϢʔβʔͷҰਓ 74 Ϣʔβʔ͸૝૾Λ௒͑ͯ ͘ Δ
141. Ϣʔβʔͷ ݴ͍ͳ Γ͸ ͏ · ͘ ͍͔ͳ͍
142. ࢹ໺Λ޿͛ͯ ແҙࣝͷཉ๬Λ ͢ ͘ ্͍͛Δ
143. ೔ʑ ࣗ෼ͷཉ๬ʹ ޲͖߹͏
144. ࣗ෼ͷ ཉ๬Λ ݚ͗੅·ͦ ͏
145. ͦ ͯ͠
146. ͱ͔ݴͬͯݏ͕ΒΕΔͷ͕69ऀ ͜ͷը໘ ΄ΜͱʹϢʔβʔ ΄͍͔͠ͳ ʁ
147. ࠓճͷ · ͱΊ
148. ςΫ ϊϩδʔͰͳ ͘ ਓؒͷ౎߹ʹ ߹ΘͤΑ ͏
149. ൑அྗΛ ແବଧͪ ͤ͞ͳ͍
150. ࢖ͬͯ΋ Β ͬͯ ޙΖ͔ΒݟΑ ͏
151. ࣍ճ༧ࠂ
152. ࣍͸͋ͳ͕ͨͨͪ ࡞Δ൪Ͱ͢
153. ͱ Γ͍Ͱ ͨ͠ !LJOBLPCPPTUFS
154. ࣍ʹಡΉ΋ͷ Ұਓ͔Β࢝ΊΔ69σβΠ ϯ ɹࣗ෼ʹ΋Ͱ͖ ͦ ͏ײ͋Δ XFC੡࡞ऀͷͨΊͷ69σβΠ ϯΛ͸͡ΊΔຊ
     69͸ݖྗͩͬͯ࿩͕ͪ ΌΜͱॻ͍ͯ͋Γ ·͢ ήʔϜྨ
     ੈքͷશͯΛࢀߟʹ͠Α ͏
155. એ఻ ࢓ࣄͱڠྗऀ ืूத גࣜձࣾ9FNPOPͰݕࡧ ʂ
156. ΞϓϦσβΠ ϯ ΢Σ ϒ੍࡞ σβΠ ϯߨ࠲ Ͱ͖ ΔΑ
157. גࣜձࣾ9FNPOP෭ࣾ௕ɹ͔Θͷ ೥ੜɻ Վਓ ΋ͷ͜͝ Ζ͍ͭͨͱ ͖͔ΒখઆΛॻ͖࢝Ίͨɻ จষΛಡΉ͜ ͱ ͱॻ͘ ͜ ͱҎ֎Կ΋ ͨ͜͠ ͱ͕ͳ͍ɻ ౦ژେֶେֶӃ ʢത࢜՝ఔʣ Ͱϑ Ν ϯλδʔͷݚڀͳ Ͳ Λ ͍ͯ͠Δɻ ۝೥΄Ͳલ͔Β୹ՎΛ࡞Γ࢝Ίͨɻ ೥ɺ ୹Վͷ৽ਓ৆Ͱ͋ΔՎ ஃ৆Λड৆ɻ ࡶࢽ ʰݱ୅୹Վʱ ʹͯ ʮՎஃ࣌ධʯ ࿈ࡌதɻ ΄͔ɺ ୹Վ ɺ ॻධɺ ΤοηΠ ͳ Ͳ Λ୹Վࡶࢽ΍৽ฉͳ Ͳʹॻ͍͍ͯΔɻ ͜ͷձࣾͰͷ໾ׂ͸൑அྗ୲౰ɻ ෭ࣾ௕΋ΑΖ ͠ ͘
158. ධ࿦ ໋໊ ୹Վ Ͱ͖ ΔΑ
159. &/%