デザイニング・インターフェイス勉強会 最終回

デザイニング・インターフェイス勉強会
http://www.facebook.com/groups/di2e.study/

Transcript

1. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ11ষ - ࢹ֮తͳελΠϧͱඒֶ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/ 12೥9݄18೔Ր༵೔
2. σβΠχϯάɾΠϯλʔϑΣʔε ୈ2൛ ύλʔϯʹΑΔ࣮ફతΠϯλϥΫγϣϯσβΠϯ http://amzn.to/LfZuHZ 12೥9݄18೔Ր༵೔
3. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ 12೥9݄18೔Ր༵೔
4. ୈ11ষͰֶͿ͜ͱ ܗ্ࣜͷߏ଄Ͱ͸ͳ͘ײ৘ʹجͮ͘ಛੑ͔Β, ϏδϡΞϧσβΠϯͷجૅʹֶ͍ͭͯͿ. ·ͨ, ͦΕΒͷσβΠϯύλʔϯʹ͍ͭͯ੔ཧ͢Δɽ 12೥9݄18೔Ր༵೔
5. Visual Design ͷجૅ ʢ֎૷ɾLook & Feelʣʹֶ͍ͭͯͿ. Visual Design ʹ͓͚Δ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄18೔Ր༵೔
6. Visual Design ͷجૅ ʢ֎૷ɾLook & Feelʣʹֶ͍ͭͯͿ. Visual Design ʹ͓͚Δ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄18೔Ր༵೔
7. http://credibility.stanford.edu/ “Ϣʔβ͸ɼૉਓ͕࡞ͬͨΑ͏ʹ ݟ͑ΔαΠτΛ৴པ͠ͳ͔ͬͨ” P. 477 12೥9݄18೔Ր༵೔
8. “ελΠϧతͳཁૉ͸͋ͳͨͷ੡඼ ʹ͍ͭͯͷϝοηʔδΛ఻͑Δ.” P. 478 ελΠϧΛ௨ͯ͡ɼ৴པײɼܹࢗੑɼ༇շ͞ɼ׆ྗɼ མͪண͖ɼྗڧ͞ɼۓுײɼتͼͳͲΛ఻͑ΒΕΔɽ ͋ͳͨ͸ͦͷ੡඼Λ௨ͯ͠ɼ ԿΛ఻͍͑ͨͷͩΖ͏͔ʁ 12೥9݄18೔Ր༵೔
9. ಉ͡಺༰ɼҧ͏ελΠϧ CSS Zen Garden http://csszengarden.com/ 12೥9݄18೔Ր༵೔
10. Design #1 ✓ۭؒతͳΏͱΓ ✓font: චهମ 12೥9݄18೔Ր༵೔
11. Design #2 ✓ۭؒ٧ΊࠐΈܕ 12೥9݄18೔Ր༵೔
12. Design #3 ✓leaf/greenͷ܁ฦ͠ 12೥9݄18೔Ր༵೔
13. Design #4 ✓פ৭: professional 12೥9݄18೔Ր༵೔
14. Design #5 ✓Georgia: Թ΋Γײ 12೥9݄18೔Ր༵೔
15. Design #6 ✓ஆ৭: ೤͞ ✓ΏͱΓͷ͋Δۭؒ 12೥9݄18೔Ր༵೔
16. Design #7 ✓༷ʑͳ֯౓ 12೥9݄18೔Ր༵೔
17. Design #8 ✓sans-seirf/bold: cool ✓ͨͬͨ̍ͭͷପԁ 12೥9݄18೔Ր༵೔
18. ಉ͡಺༰ɼҧ͏ελΠϧ CSS Zen Garden http://csszengarden.com/ 12೥9݄18೔Ր༵೔
19. Visual Design ͷجૅ ೝ஌తͳ൓Ԡ ײ৘తͳ൓Ԡ 12೥9݄18೔Ր༵೔
20. Visual Design ͷجૅ ೝ஌తͳ൓Ԡ ࠓ೔ͷ࿩͸ͬͪ͜ ײ৘తͳ൓Ԡ 12೥9݄18೔Ր༵೔
21. ײ৘తɾੜཧతͳ൓Ԡ ඇৗʹଟ͘ͷཁҼʹࠨӈ͞ΕΔ. ద੾ʹௐ੔͢Δʹ͸๛෋ͳ࣮ફ͕ඞཁ. 12೥9݄18೔Ր༵೔
22. 1. ৭ 2. λΠϙάϥϑΟ 3. ۭؒతͳΏͱΓ 4. ֯౓ͱܗঢ় 5. ࣭ײͱϦζϜ 6. ը૾ 7. จԽతࢀর 8. ܁Γฦ͢ࢹ֮తϞνʔϑ ײ৘తɾੜཧతͳ൓Ԡʹ࡞༻͢ΔཁҼ 12೥9݄18೔Ր༵೔
23. ஆ৭/פ৭ɼ҉͍/໌Δ͍എܠɼڧ͍/ऑ͍ίϯτϥετɼ ߴ͍/௿͍࠼౓ɼ৭૬ͷ૊Έ߹ΘͤɼͳͲΛҙࣝ͢Δɽ 1. ৭ 12೥9݄18೔Ր༵೔
24. 2. λΠϙάϥϑΟ ͲΜͳ੠ͰޠΒΕΔͷ͔ΛܾΊΔɽ େ͖͍/খ͍͞ɼ਌͍͠/ݎ͍ۤ͠ɼޱޠత/ݖҖతɼͳͲ. 12೥9݄18೔Ր༵೔
25. 3. ۭؒతͳΏͱΓ ۭؒతͳΏͱΓ↑ɿ։์ੑɼ੩͚͞ɼམͪண͖ɼࣗ༝ ۭؒతͳΏͱΓ↓ɿ੾ഭײɼۓுײ Design #2 Design #6 12೥9݄18೔Ր༵೔
26. 4. ֯౓ͱۂઢ ௚ઢ΍௚֯Ͱߏ੒: ҆ఆͨ͠ҹ৅ ༷ʑͳ֯౓Ͱߏ੒: ༂ಈײɾ׆ྗ Design #7 Design #8 12೥9݄18೔Ր༵೔
27. 5. ࣭ײͱϦζϜ ϑΥϯτ͸࣭ײΛࠨӈ͢Δ࠷΋ॏཁͳཁૉ. εΫϦʔϯ্ͰςΩετͷഎܠʹςΫενϟΛ࢖͏࣌͸஫ҙ. Design #8 Design #6 12೥9݄18೔Ր༵೔
28. 6. ը૾ σβΠϯͷงғؾ࡞ΓΛࢧ͑Δଘࡏɽͨͩ͠ΞϓϦͰ͸, ελΠϧΑΓɼ಺༰ͱ࢖͍΍͢͞ͷํ͕ॏཁ. 12೥9݄18೔Ր༵೔
29. 6. ը૾ σβΠϯͷงғؾ࡞ΓΛࢧ͑Δଘࡏɽͨͩ͠ΞϓϦͰ͸, ελΠϧΑΓɼ಺༰ͱ࢖͍΍͢͞ͷํ͕ॏཁ. 12೥9݄18೔Ր༵೔
30. 7. จԽతࢀর Α͘਌͠·Ε͍ͯΔϞϊͷࢀর͸ɼڧ྽ͳײ৘Λݺͼ֮·͢. ͨͩ͠ɼλʔήοτϢʔβ͕୭ͳͷ͔ɼे෼ʹҙࣝ͢Δ͜ͱ. 12೥9݄18೔Ր༵೔
31. 8. ܁Γฦ͢ࢹ֮తϞνʔϑ Α͍σβΠϯʹ͸౷Ұੑ͕͋Δɽ֤ཁૉ͕, ߏ଄త/ײ৘తʹࢧ͑߹ͬͯɼશମ͕̍ͭʹ·ͱ·͍ͬͯΔ. Design #4 Design #5 Design #8 12೥9݄18೔Ր༵೔
32. 1. ৭ 2. λΠϙάϥϑΟ 3. ۭؒతͳΏͱΓ 4. ֯౓ͱܗঢ় 5. ࣭ײͱϦζϜ 6. ը૾ 7. จԽతࢀর 8. ܁Γฦ͢ࢹ֮తϞνʔϑ ײ৘తɾੜཧతͳ൓Ԡʹ࡞༻͢ΔཁҼ 12೥9݄18೔Ր༵೔
33. Visual Design ͷجૅ ʢ֎૷ɾLook & Feelʣʹֶ͍ͭͯͿ. Visual Design ʹ͓͚Δ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄18೔Ր༵೔
34. Visual Design ͷجૅ ʢ֎૷ɾLook & Feelʣʹֶ͍ͭͯͿ. Visual Design ʹ͓͚Δ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄18೔Ր༵೔
35. 1. Deep Background 2. Few Hues, Many Values 3. Corner Treatments 4. Borders That Echo Fonts 5. Hairlines 6. Contrasting Font Weights 7. Skins and Themes Visual Design ͷ̓ͭͷσβΠϯύλʔϯ 12೥9݄18೔Ր༵೔
36. 1. Deep Background 2. Few Hues, Many Values 3. Corner Treatments 4. Borders That Echo Fonts 5. Hairlines 6. Contrasting Font Weights 7. Skins and Themes Visual Design ͷ̓ͭͷσβΠϯύλʔϯ 12೥9݄18೔Ր༵೔
37. 1. Deep Background / ਂΈͷ͋Δഎܠ Firefox Download ը૾·ͨ͸άϥσʔγϣϯΧϥʔΛ, લ໘ʹ͋ΔཁૉΑΓԞ·ͬͯݟ͑Δϖʔδഎܠͱͯ͠഑ஔ͢Δϫβ. 12೥9݄18೔Ր༵೔
38. 1. Deep Background / ਂΈͷ͋Δഎܠ ஫ҙɿ஫໨఺ʢFocul Pointʣ͸෼ࢄͤ͞ͳ͍͜ͱ. ը૾·ͨ͸άϥσʔγϣϯΧϥʔΛ, લ໘ʹ͋ΔཁૉΑΓԞ·ͬͯݟ͑Δϖʔδഎܠͱͯ͠഑ஔ͢Δϫβ. 12೥9݄18೔Ր༵೔
39. 2. Few Hues, Many Values / গ৭૬ɾଟ໌౓ Mint ΠϯλʔϑΣΠε্Ͱ࢖༻͢Δ৭૬Λ3ͭҎԼʹߜΔ. ͦͷޙɼબΜͩ৭૬ͷ໌౓Λมߋͯ͠ɼΧϥʔύϨοτΛ࡞੒͢Δ. 12೥9݄18೔Ր༵೔
40. 2. Few Hues, Many Values / গ৭૬ɾଟ໌౓ Mint ͷΠϯλʔϑΣΠεͰ༻͍ΒΕ͍ͯΔ৭ ΠϯλʔϑΣΠε্Ͱ࢖༻͢Δ৭૬Λ3ͭҎԼʹߜΔ. ͦͷޙɼબΜͩ৭૬ͷ໌౓Λมߋͯ͠ɼΧϥʔύϨοτΛ࡞੒͢Δ. 12೥9݄18೔Ր༵೔
41. 3. Corner Treatments / ίʔφʔॲཧ JetBlue ΠϯλʔϑΣΠε্ͷ Box ͷίʔφʔʹۂઢ·ͨ͸ࣼઢΛ༻͍Δϫβ. ༻͍ͨۂઢ·ͨ͸ࣼઢ͸ɼΠϯλʔϑΣΠεશମΛ௨ͯ͠Ұ؏ͤ͞Δ. 12೥9݄18೔Ր༵೔
42. 4. Borders That Echo Fonts / font Λ൓өͨ͠ border MoMA, Online Exhibition in 2002 Ϙʔμʔ΍ͦͷଞͷઢͳͲʹɼओཁͳϑΥϯτͷσβΠϯͱ ಉ͡σβΠϯʢ৭ɾଠ͞ɾۂ͕Γ۩߹ͳͲʣΛద༻͢Δ. 12೥9݄18೔Ր༵೔
43. 5. Hairlines / ϔΞϥΠϯ ex 1 ϐΫηϧ෯ͷઢΛɺϘʔμʔɺਫฏઢɺςΫενϟͱͯ͠ར༻͢Δϫβ. 12೥9݄18೔Ր༵೔
44. 6. Contrasting Font Weights / Font Weight ͷ Contrast Waterlife.nfb.ca 2 छྨͷରরతͳϑΥϯτΛ༻͍ͯ, Ϩϕϧ͕ҟͳΔ৘ใΛ۠ผ͠ɼݟͨ໨ʹຯΘ͍Λ૿͢ϫβ. 12೥9݄18೔Ր༵೔
45. 1. Deep Background 2. Few Hues, Many Values 3. Corner Treatments 4. Borders That Echo Fonts 5. Hairlines 6. Contrasting Font Weights 7. Skins and Themes Visual Design ͷ̓ͭͷσβΠϯύλʔϯ 12೥9݄18೔Ր༵೔
46. 7. Skins and Themes / εΩϯͱςʔϚ WordPress Theme ΞʔΩςΫνϟΛެ։͠ɼϢʔβ΍αʔυύʔςΟ͕, ಠࣗͷάϥϑΟοΫ΍ελΠϧΛσβΠϯͰ͖ΔΑ͏ʹ͢Δϫβ. 12೥9݄18೔Ր༵೔
47. 1. Deep Background 2. Few Hues, Many Values 3. Corner Treatments 4. Borders That Echo Fonts 5. Hairlines 6. Contrasting Font Weights 7. Skins and Themes Visual Design ͷ̓ͭͷσβΠϯύλʔϯ 12೥9݄18೔Ր༵೔
48. Visual Design ͷجૅ ʢ֎૷ɾLook & Feelʣʹֶ͍ͭͯͿ. Visual Design ʹ͓͚Δ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄18೔Ր༵೔
49. ୈ11ষͰֶͿ͜ͱ ܗ্ࣜͷߏ଄Ͱ͸ͳ͘ײ৘ʹجͮ͘ಛੑ͔Β, ϏδϡΞϧσβΠϯͷجૅʹֶ͍ͭͯͿ. ·ͨ, ͦΕΒͷσβΠϯύλʔϯʹ͍ͭͯ੔ཧ͢Δɽ 12೥9݄18೔Ր༵೔
50. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ 12೥9݄18೔Ր༵೔
51. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ11ষ - ࢹ֮తͳελΠϧͱඒֶ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/ 12೥9݄18೔Ր༵೔