UIデザインをはじめよう

2019/04/23に株式会社gumi様で行ったデザイン講義のスライドです。

UIデザインをはじめるために必要な知識を解説しました。
（予告から内容はかなり変わりました）

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

第三回「今日からできるUXデザイン」はこちら
https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain

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

※訪問講座のご案内※
あなたの会社に話しに行きます。料金表はこちら
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. 6*σβΠ ϯΛ͸͡ΊΑ ͏ גࣜձࣾ9FNPOP QFSGPSNFE
   CZ
   ͱ Γ͍Ί͙Έ!LJOBLPCPPTUFS  9FNPOPσβΠ ϯߨ࠲
   ʢʣ
2. ͩΕ ʁ ͱ Γ͍Ί͙Έ גࣜձࣾ9FNPOP୅ද ೥ੜɻ ϓϩάϥ ϛ ϯά͕ Ͱ͖ ΔσβΠφʔɻ ୹ՎΛͭ ͘ Δਓɻ ࿩͠૬ख͕ཉ͠ ͘ ͯCPUΛࣗ ࡞ͨ͜͠ ͱ͕͋Δɻ ౦ژେֶཧՊҰྨೖֶɺ จ ֶ෦फڭֶफڭֶ࢙ଔۀɻ
3. ࠓճͷ࿩    σβΠ ϯͷجૅ 6*σβΠ ϯΛ͸͡ΊΑ ͏ 69ͷߟ͑ํ
4. ͓͠ͳ͕͖      6*ͬͯԿ ʁ ͭͷ6* ݟ͑ͳ͍6* ݟ͑Δ6* ϖʔύʔϓϩ τλΠ ϐϯά
5. ର৅ ࡞ͬͨΞϓϦ Λ Ͳ ͏࢖͍΍͢ ͘ ͢Ε͹ ͍͍͔ࠔͬͯΔਓ
6. 6*σβΠ ϯΛ ݕ౼Ͱ͖ Δ Α ͏ʹͳΔ ໨త ࠓճ͸ΘΓ ͱ۩ମతͳ࿩Ͱ͢
7. 6*69ͷ୲౰ྖҬ 6* ΞϓϦ Λ஌Δˠ ࢖͏ ˠ೔ৗʹؼΔ 69
8. ୈҰճͷ͋Β͢ ͡
9. σβΠ ϯ͸ઃܭ σβΠ ϯ͸༏ઌॱҐ σβΠ ϯʹ͸఻͍͑ͨ͜ ͱ͕͋Δ ୈҰճͷ͋Β͢ ͡
10. ೝ஌ෛՙ Լ͍͛ͨ ୈҰճͷ͋Β͢ ͡
11.  6*ͬͯԿ ʁ
12. 6*ݟͨ͜ ͱ͋Δਓ͍·͔͢
13. ઈର͋Δ
14. 6* 6TFS
    *OUFSGBDF ʢϢʔβʔΠ ϯλʔϑ Σ ʔεʣ
15. 6TFS ࢖͏ਓ *OUFSGBDF ք໘ ˢ Θ͔Β ͳ͍
16. ӳޠ͔Βߦ͘ JOUFS
    
    GBDF ʙͷؒ ද໘
17. *OUFSGBDF ผʑͷ΋ͷ͕ ަྲྀ͢Δ ͱ ͖ ؒʹ͋Δ΋ͷ
18. ྫ
19. 1$
    
    σΟ εϓϨΠ ͲΜͳΠ ϯλʔϑ Σ ʔε ʁ
20. 1$
    
    σΟ εϓϨΠ )%.* ͱ͔
21. ਓؒ
    
    14 ͲΜͳΠ ϯλʔϑ Σ ʔε ʁ
22. ਓؒ
    
    14 ίϯ τϩʔϥʔ
23. ਓؒ
    
    εϚϗ ͲΜͳΠ ϯλʔϑ Σ ʔε ʁ
24. ਓؒ
    
    εϚϗ λ ονύωϧ ΩʔϘʔ υ
25. 6* Ϣʔβʔ ͱ੡඼ͷؒʹ͋Δ΋ͷ ࠓճ࡞Δ΋ͷ
26. ը໘࡞ΔΑ ʂ ۩ମతʹ͸
27. ͋ͳͨ͸6*σβΠφʔͰ͢ ը໘࡞੒Λ໋͡ ΒΕ· ͨ͠ ࠷ॳʹ͢Δ ͜ ͱ͸ ʁ σβΠφʔΫΠζ
28. બ୒ࢶ    ΞΠ ίϯ Λඳ͘ Ϙλϯ Λඳ͘ ը໘࿮ Λඳ͘
29. ਖ਼ղ  ʮ͑ ʁ
    ͳΜͰ ʁ ʯ ͱݴ͏
30. લճͷ෮श σβΠ ϯʹ͸ ໨త͕େࣄ
31. ཧ༝ ໨తͳ ͠Ͱ͸ධՁͰ͖ ͳ͍
32. Կ͕ചΓͷΞϓϦ ʁ ࢖͏ਓ͸ͲΜͳਓ ʁ ΞϓϦ Λग़͢ͱ୭͕خ͍͠ͷ ʁ 6*Λ࡞Δલʹ໰͏ ͜ ͱ
33. ը໘࡞ͬͯ ऴΘΓ Ͱ͸ͳ͍ 6*ͷ໋॓ ࢖͍΍͍͢ը໘͕ݸ͋ͬͯ΋શମ͕࢖͍΍͍͢ͱ͸ݶΒ ͳ͍
34. ʮྲྀΕʯ ͕େࣄ
35. ྫ ɿ ෼༻λΠϚʔ
36. ෳࡶͳ΋ͷΛ খ෼͚ʹͯ͠ ࢖͍΍͢ ͘ ݟͤΔ ࿹ͷݟͤॴ
37.  ͭͷ6*
38. 6*ʹ͸ͭ͋Δ ݟ͑Δ6* ݟ͑ͳ͍6* ը໘ ը໘ભҠ ࢀߟ ɿ ʰ͸͡Ίͯͷ6*σβΠ ϯʱ 1&",4ग़൛Α Γ
39. ߟ͑Δॱ൪ ݟ͑ͳ͍6*͔Β ߟ͑Δ
40.  ݟ͑ͳ͍6*
41. ΞϓϦͷ ʮ஍ਤʯ ը໘ભҠͷઃܭ
42. ྫ
43. εϥΠ υγ ϣ ʔͷը໘ભҠ
44. εϥΠ υγ ϣ ʔͷը໘ભҠ Ұ௚ઢ ɾ ෼ذ͠ͳ͍
45. ΢Σ ϒαΠ τͷը໘ભҠ
46. ΢Σ ϒαΠ τͷը໘ભҠ ໢ঢ় ɾ Ͳ ͔͜ΒͰ΋ྲྀೖ
48. ϖʔδ το ϓ 5XJUUFS ϒϩά ݕࡧ ཉ͍͠΋ͷϦε τ ଞͷ঎඼ ߪೖϖʔδ ྲྀೖͱྲྀग़
49. ΞϓϦͷը໘ભҠ
50. πϦ ʔঢ় ɾ ೖΓޱݻఆ ΞϓϦͷը໘ભҠ
51.  ݟ͑Δ6*
52. ҰͭҰͭͷ ը໘Λ ઃܭ͢Δ
53. σόΠε͝ͱͷ ಛੑ
54. εϚϗ 
    ࢦͰૢ࡞͢Δ
    ˠ
    ಧ͖ͮΒ͍ྖҬ͕͋Δ 
    γϯάϧλεΫ 
    ௕Ίͷ௕ํܗ
56. λϒϨο τ 
    ࢧ͑ͯ৮Δ
    ˠ
    ্ͷํʹϘλϯஔ͚Δ 
    λεΫ͸ʙ 
     ɿ ͙ Β͍
58. 1$ 
    ϙΠ ϯλΛಈ͔͢ ɹˠ
    ࡉ͔͍͜ ͱͰ͖ ͪ Ό ͏ 
    ϚϧνλεΫ 
    Մม΢Ο ϯ υ΢
    
    
    
    ΢Ο ϯ υ΢ͷ୺ͱ
    
    ը໘ͷ୺͕ҧ͏
60. ύʔπͷ͜ ͱ Λίϯϙʔωϯ τͱݴ͍·͢ ఆ൪ίϯϙʔωϯ τ બ
61. ଟ͘ Ͷ ʁ 
    ϨΠΞ΢ τ 
    ೖྗܥ 
    ൓Ԡܥ 
    ܁Γฦ͢ܥ 
    ϑ Υ ʔϜܥ إͳ ͡Έͷ໊લΛ֮͑ ͱ ͜ ͏
62. ίϯϙʔωϯ τਤؑ "QQMF IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFT
63. ίϯϙʔωϯ τਤؑ (PPHMF IUUQTNBUFSJBMJPEFTJHO
64. ϨΠΞ΢ τ 
    ϔο μʔ
    
    J
    φϏόʔ 
    ϑ ο λʔ
    
    J
    λϒόʔ 
    υϩϫʔ
65. ϨΠΞ΢ τ 
    ϔο μʔ
    
    J
    φϏόʔ 
    ϑ ο λʔ
    
    J
    λϒόʔ 
    υϩϫʔ
66. ϨΠΞ΢ τ 
    ϔο μʔ
    
    J
    φϏόʔ 
    ϑ ο λʔ
    
    J
    λϒόʔ 
    υϩϫʔ ϨΠΞ΢ τ 
    ϔο μʔ
    
    J
    φϏόʔ 
    ϑ ο λʔ
    
    J
    λϒόʔ 
    υϩϫʔ
67. ϨΠΞ΢ τ 
    ϔο μʔ
    
    J
    φϏόʔ 
    ϑ ο λʔ
    
    J
    λϒόʔ 
    υϩϫʔ ϨΠΞ΢ τ 
    ϔο μʔ
    
    J
    φϏόʔ 
    ϑ ο λʔ
    
    J
    λϒόʔ 
    υϩϫʔ
68. ೖྗܥ 
    αʔνόʔ 
    πʔϧόʔ 
    Ϙλϯ
69. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
70. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
71. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
72. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
73. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
74. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
75. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
76. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
77. ൓Ԡܥ 
    Π ϯδέʔλʔ 
    εϐφʔ 
    μΠΞϩά 
    Ξϥʔ τ 
    ΞΫγ ϣ ϯγʔ τ 
    τʔε τ 
    πʔϧνο ϓ 
    ϙο ϓΦʔόʔ
78. ܁Γฦ͢ܥ 
    Ϧε τ 
    ςʔϒϧ 
    Χʔ υ 
    ϖʔδ ϟ ʔ
79. ܁Γฦ͢ܥ 
    Ϧε τ 
    ςʔϒϧ 
    Χʔ υ 
    ϖʔδ ϟ ʔ
80. ܁Γฦ͢ܥ 
    Ϧε τ 
    ςʔϒϧ 
    Χʔ υ 
    ϖʔδ ϟ ʔ
81. ܁Γฦ͢ܥ 
    Ϧε τ 
    ςʔϒϧ 
    Χʔ υ 
    ϖʔδ ϟ ʔ
82. ϑ Υ ʔϜܥ 
    ςΩε τ 
    νΣ ο ΫϘο Ϋε 
    εΠ ον 
    ϥδΦϘλϯ 
    εϥΠ μʔ 
    εςούʔ
83. ϑ Υ ʔϜܥ 
    ςΩε τ 
    νΣ ο ΫϘο Ϋε 
    εΠ ον 
    ϥδΦϘλϯ 
    εϥΠ μʔ 
    εςούʔ
84. ϑ Υ ʔϜܥ 
    ςΩε τ 
    νΣ ο ΫϘο Ϋε 
    εΠ ον 
    ϥδΦϘλϯ 
    εϥΠ μʔ 
    εςούʔ
85. ΍Γ͕ͪ ΞϓϦ͸πϦ ʔঢ়ͷߏ଄͕ଟ͍
86. ΍Γ͕ͪ ࠓͲ ͜ʹ͍Δ͔஌Γ͍ͨΑͶ
87. ΢ϫʔ UBC ৄࡉ ͨͿ λϒ ৄࡉ ৄࡉ ৄࡉ ৄࡉ
88. ໰୊఺ ࢦ͔Βԕ͍ͱ ͜ ΖʹφϏ͕ Ұཡੑ͕ߴ͍Α ͏ Ͱ௿͍ Ϙλϯີ౓͕ߴ͗͢Δ
89. ͢Δ ͜ ͏ ৄࡉ ৄࡉ ͨͿ ৄࡉ ৄࡉ ৄࡉ 
    େΧςΰϦ ͨͿ λϒ ͨͿ UBC
90. ݟ׳Εͨίϯϙʔωϯ τΛ ࢖͍ͬͯ͜ ͏
91. ৽6*ͷֶश͸ Ϣʔβʔʹෛ୲ ಛʹ೥഑ͷํ͸ڋ൱൓Ԡ͕ग़΍͍͢
92. ΈΜͳ஌ͬͯΔ Ωϟ ϥ ʢύʔπʣ Ͱ ೋ࣍૑࡞͠Α ͏
93. ੈքͷશ͔ͯΒ ύΫ ϦݩΛݟ͚ͭΖ ΋ ͬ ͱ্Λ໨ࢦ͢ਓ΁
94. ͦΕͰ΋ΦϦ δφϧ͕΍Γ͍ͨʜʜ
95. ήʔϜσβΠ ϯͷ஌ݟ͕ࢀߟʹͳΔ Ϣʔβʔʹ ઓུతʹ ڭ͑ࠐ΋ ͏
96. ࣮ફฤ
97. ·࢛͔ͣ֯Β ඳ͍ͯΈΑ ͏
98. ͳʹʹඳ͘ ͷ ʁ
99.  ϖʔύʔ ϓϩ τλΠ ϐϯά
110. λϒϨο τʹର͢Δࢴͷ༏Ґੑ 
     ͸΍͍ 
     ͪ ͗ΕΔ 
     ޿͛ΒΕΔ 
     ω ο τʹܨ͕ͬͯͳ͍
111. ࢴͰ࡞Δཧ༝ ్தͬΆ͘ ݟ͑Δ ˣ ݕ౼͠΍͍͢
112. ࢴࣳډͰ ը໘ભҠΛ ݕূ͠Α ͏
113. ਓʹ৮Βͤͯ Ͳ ͜Ͱࠞཚ͢Δ͔Λ Α ͘ ݟΔ ࢴͰ࡞Δཧ༝
114. εΫϥ ο ϓ  εΫϥ ο ϓ ͦ ͯ͠
115. ଓ͖͸ߨٛޙͷ ϫʔΫγ ϣ ο ϓͰ ʂ
116. ࠓճͷ · ͱΊ
117. Α ͘ ݟΔύʔπΛ ૊Έ߹ΘͤΑ ͏ 6*Λ͸͡ΊΔʹ͸
118. 6*͸ ࢴͰ࣮ݧͰ͖ Δ
119. ͭ͘ ͬͯΈΑ ͏ ʂ
120. ࣍ճ༧ࠂ
121. ΋ ͬ ͱ ΋൵͍͠ ΞϓϦ ͱ͸Կ͔ ʁ ࣍ճ༧ࠂ
122. ʮ࢖ͬͯ΋ Β ͑ͳ͍ʯ Λճආ͢Δ ࣍ճ༧ࠂ
123. Ϣʔβʔͷཉ๬Λ ໌Β͔ʹ ࣍ճ༧ࠂ
124. 69΍Δͧ ࣍ճ༧ࠂ
125. ͱ Γ͍Ͱ ͨ͠ !LJOBLPCPPTUFS
126. Π ϯλʔϑ Σ ʔεσβΠ ϯͷ৺ཧֶ ʢΦʔϜࣾʣ ଓ ɾ Π ϯλʔϑ Σ ʔεσβΠ ϯͷ৺ཧֶ ʢΦʔϜࣾʣ
     
     
     
     
     ΦϥΠ Ϧ ʔઌੜ͍ͭ΋͋Γ͕ͱ ͏
     
     
     
     
     ଟগॏ͍͚Ͳ͢΂ͯͷ໾ʹཱͭΑ )VNBO
     *OUFSGBDF
     (VJEFMJOF IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFT .BUFSJBM
     %FTJHO
     (VJEF IUUQTNBUFSJBMJPEFTJHO
     ࣍ʹಡΉ΋ͷ
127. એ఻ ࢓ࣄͱڠྗऀ ืूத גࣜձࣾ9FNPOPͰݕࡧ ʂ
128. ΞϓϦσβΠ ϯ ΢Σ ϒ੍࡞ σβΠ ϯߨ࠲ Ͱ͖ ΔΑ
129. גࣜձࣾ9FNPOP෭ࣾ௕ɹ͔Θͷ ೥ੜɻ Վਓ ΋ͷ͜͝ Ζ͍ͭͨͱ ͖͔ΒখઆΛॻ͖࢝Ίͨɻ จষΛಡΉ͜ ͱ ͱॻ͘ ͜ ͱҎ֎Կ΋ ͨ͜͠ ͱ͕ͳ͍ɻ ౦ژେֶେֶӃ ʢത࢜՝ఔʣ Ͱϑ Ν ϯλδʔͷݚڀͳ Ͳ Λ ͍ͯ͠Δɻ ۝೥΄Ͳલ͔Β୹ՎΛ࡞Γ࢝Ίͨɻ ೥ɺ ୹Վͷ৽ਓ৆Ͱ͋ΔՎ ஃ৆Λड৆ɻ ࡶࢽ ʰݱ୅୹Վʱ ʹͯ ʮՎஃ࣌ධʯ ࿈ࡌதɻ ΄͔ɺ ୹Վ ɺ ॻධɺ ΤοηΠ ͳ Ͳ Λ୹Վࡶࢽ΍৽ฉͳ Ͳʹॻ͍͍ͯΔɻ ͜ͷձࣾͰͷ໾ׂ͸൑அྗ୲౰ɻ ෭ࣾ௕΋ΑΖ ͠ ͘
130. ධ࿦ ໋໊ ୹Վ Ͱ͖ ΔΑ
131. &/%