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

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

Transcript

1. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ9ষ - ιʔγϟϧϝσΟΞͷར༻ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/ 12೥9݄11೔Ր༵೔
2. σβΠχϯάɾΠϯλʔϑΣʔε ୈ2൛ ύλʔϯʹΑΔ࣮ફతΠϯλϥΫγϣϯσβΠϯ http://amzn.to/LfZuHZ 12೥9݄11೔Ր༵೔
3. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ 12೥9݄11೔Ր༵೔
4. ୈ̕ষͰֶͿ͜ͱ ΦϯϥΠϯͰͷιʔγϟϧΠϯλϥΫγϣϯ ͷجૅͱɼاۀ͕఻͑Δ΂͖͜ͱʹࣗൃతʹ ࣖΛ܏͚ͯ͘ΕΔਓʑΛ૿΍͢ํ๏ΛֶͿɽ 12೥9݄11೔Ր༵೔
5. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ جຊతͳ࢟੎ɾํ਑ֶ͍ͭͯͿ. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄11೔Ր༵೔
6. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ جຊతͳ࢟੎ɾํ਑ֶ͍ͭͯͿ. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄11೔Ր༵೔
7. 1. Α͍ίϯςϯπΛੜΈग़͢. 2. ಡऀͷݩ΁ಧ͚Δ. 3. ಡऀʹՁ஋ΛܾΊͯ΋Β͏. 4. ݟ͚ͭ΍͘͢͢Δ. 5. ࠞͥ߹ΘͤΔ. 6. ίϛϡχςΟΛҭΉ. ιʔγϟϧϝσΟΞͷجૅͱ̒ͭͷݪଇ 0. ࣖΛ͢·͢. 12೥9݄11೔Ր༵೔
8. 0. ࣖΛ͢·͢. ωοτ্ͷͲ͜Ͱ࿩୊ʹͳ͍ͬͯΔͷ͔୳͢. ໨త΍࢖໋ʹؔΘΔϞϊɼͲΜͳҙݟ͕͋Δͷ͔Λ୳͠, ʮϑΥϩʔͯ͠Α͔ͬͨʯͱࢥΘΕΔΑ͏ͳଘࡏʹͳΔ. 12೥9݄11೔Ր༵೔
9. 1. Α͍ίϯςϯπΛੜΈग़͢. Ұఆͷස౓ͰɺΈΜͳʹتΜͰ΋Β͑ΔΑ͏ͳ΋ͷΛ ॻ͍ͨΓɺσβΠϯͨ͠Γɺه࿥ͨ͠Γ͢Δ͜ͱɻ 12೥9݄11೔Ր༵೔
10. 2. ಡऀͷݩ΁ಧ͚Δ. ಡऀ͕ΦϯϥΠϯͰͨ·Γ৔ʹ͍ͯ͠ΔͱΘ͔Δ৔ॴͳΒ Ͳ͜΁Ͱ΋ߦ͜͏ʂ e.g. Facebook, Twitter, Digg, RSS, ... 12೥9݄11೔Ր༵೔
11. 3. ಡऀʹՁ஋ΛܾΊͯ΋Β͏. ಡऀ͕ࣗ෼ͷϑΥϩϫʔͱʹίϯςϯπΛڞ༗Ͱ͖ΔखஈΛ ఏڙ͠ɺ਎ۙͳ૬खʹ͸ϝʔϧͰ௨஌Ͱ͖ΔΑ͏ʹ͢Δɻ cf. Designing Social Interface http://www.amazon.com/Designing-Social-Interfaces- Principles-Experience/dp/0596154925 12೥9݄11೔Ր༵೔
12. 4. ݟ͚ͭ΍͘͢͢Δ. ৽઱ͳίϯςϯπΛఆظతʹΞοϓσʔτͯ͠ɺ อ༗͍ͯ͠ΔίϯςϯπΛ༷ʑͳ੾ΓޱͰݟͤΑ͏ɻ 12೥9݄11೔Ր༵೔
13. 5. ࠞͥ߹ΘͤΔ. ήετ౤ߘʹΑΔهࣄ΍ϨϏϡʔͳͲΛެ։ͨ͠Γɺ ࣸਅίϯςετΛ։࠵͠ɺड৆࡞Λ͓൸࿐໨͢Δɻ ˎ ΄ͱΜͲͷ૊৫Ͱ͸͜ͷߦ͖·Ͱୡ͢Δ͜ͱ͸·ͣͳ͍͕ɼ ɹ ΋͠೤৺ͳϑΥϩϫʔ͕͍ΔͷͳΒɼੋඇྗΛ߹ΘͤΑ͏ʂ 12೥9݄11೔Ր༵೔
14. 6. ίϛϡχςΟΛҭΉ. ඞཁͰ͋Ε͹ɼϢʔβʹΦϯϥΠϯͰͷߦ͖৔Λ༩͑Α͏ɽ Ϣʔβࣗ਎͕໘ന͍ͱ൑அͨ͠΋ͷΛڞ༗Ͱ͖Δ৔ʹ͢Δɽ 12೥9݄11೔Ր༵೔
15. 1. Α͍ίϯςϯπΛੜΈग़͢. 2. ಡऀͷݩ΁ಧ͚Δ. 3. ಡऀʹՁ஋ΛܾΊͯ΋Β͏. 4. ݟ͚ͭ΍͘͢͢Δ. 5. ࠞͥ߹ΘͤΔ. 6. ίϛϡχςΟΛҭΉ. ιʔγϟϧϝσΟΞͷجૅͱ̒ͭͷݪଇ 0. ࣖΛ͢·͢. 12೥9݄11೔Ր༵೔
16. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ جຊతͳ࢟੎ɾํ਑ֶ͍ͭͯͿ. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄11೔Ր༵೔
17. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ جຊతͳ࢟੎ɾํ਑ֶ͍ͭͯͿ. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄11೔Ր༵೔
18. 1. Editorial Mix 2. Personal Voices 3. Repost and Comment 4. Conversation Starters 5. Inverted Nano-pyramid 6. Timing Strategy 7. Specialized Streams 8. Social Links 9. Sharing Widget 10. News Box 11. Content Leaderboard 12. Recent Chatter ιʔγϟϧϝσΟΞͷσβΠϯύλʔϯ 12೥9݄11೔Ր༵೔
19. 1. Editorial Mix 2. Personal Voices 3. Repost and Comment 4. Conversation Starters 5. Inverted Nano-pyramid 6. Timing Strategy 7. Specialized Streams 8. Social Links 9. Sharing Widget 10. News Box 11. Content Leaderboard 12. Recent Chatter ιʔγϟϧϝσΟΞͷσβΠϯύλʔϯ 12೥9݄11೔Ր༵೔
20. 1. Editorial Mix / ଟ࠼ͳฤूίϯςϯπ starbucks on Facebook χϡʔε΍ؾʹͳΔ࿩ɺࣸਅɾಈըɺαʔϏεެ։ͷࠂ஌ͳͲΛ ࠞͥ߹Θͤͨهࣄ·ͨ͸ϦϯΫΛఆظతʹ౤ߘ͢Δϫβ. 12೥9݄11೔Ր༵೔
21. 2. Personal Voices / ݸਓతͳൃݴ Zappos CEO on Twitter ελοϑ͕ݸਓͱͯ͠ൃݴ͢Δ͜ͱΛ঑ྭ͠, ૊৫΍ϒϥϯυʹਓؒੑΛ༩͑Δϫβ. 12೥9݄11೔Ր༵೔
22. 3. Repost and Comment / ࠶౤ߘͱίϝϯτ Mashable ʹ࠶౤ߘ͞Εͨɺ࿩୊ͷ YouTube ಈը ࣗલͷίϯςϯπΛ࡞Γग़͚ͩ͢Ͱ͸ͳ͘ɼϦϯΫͨ͠ΓҾ༻ͨ͠Γɼ ࠶౤ߘͰ͖ΔίϯςϯπΛଞͷαΠτ͔Βݟ͚ͭͯ͘Δϫβ. 12೥9݄11೔Ր༵೔
23. 4. Conversation Starters / ձ࿩ͷ͖͔͚ͬ Tim Gunn ʹΑΔϑΝϯ΁ͷ࣭໰ ࣭໰΍Ṗ͔͚ɼٞ࿦ͷωλͱͳΔτϐοΫΛ౤͔͚͛ɼ ϑΥϩϫʔͱͷձ࿩ͷ͖͔͚ͬΛ࡞Δϫβ. 12೥9݄11೔Ր༵೔
24. 5. Inverted Nano-pyramid / ௒খܕͷٯϐϥϛου ಡऀʹϦϯΫΛΫϦοΫͤ͞ΔΑ͏ʹ࡞ΒΕͨݟग़͠ ୹͘ɼத਎ͷೱ͍ۙگϝοηʔδ΍هࣄݟग़͠Λॻ͘ϫβ. How to Write Headlines That Work, Copyblogger http://www.copyblogger.com/how-to-write-headlines-that-work/ 12೥9݄11೔Ր༵೔
25. 1. Editorial Mix 2. Personal Voices 3. Repost and Comment 4. Conversation Starters 5. Inverted Nano-pyramid 6. Timing Strategy 7. Specialized Streams 8. Social Links 9. Sharing Widget 10. News Box 11. Content Leaderboard 12. Recent Chatter ιʔγϟϧϝσΟΞͷσβΠϯύλʔϯ 12೥9݄11೔Ր༵೔
26. 6. Timing Strategy / λΠϛϯάઓུ ͋Δ૊৫͕ιʔγϟϧϝσΟΞΛߋ৽͢ΔλΠϛϯάͷྫ ιʔγϟϧϝσΟΞ͝ͱͷظ଴͞Ε͍ͯΔλΠϛϯάʹԠͯ͡ɼ ౤ߘͷϖʔε΍࣌ؒଳɺ༵೔ʹ͍ͭͯௐ੔͢Δϫβ 12೥9݄11೔Ր༵೔
27. 6. Timing Strategy / λΠϛϯάઓུ ͋Δ૊৫͕ιʔγϟϧϝσΟΞΛߋ৽͢ΔλΠϛϯάͷྫ ιʔγϟϧϝσΟΞ͝ͱͷظ଴͞Ε͍ͯΔλΠϛϯάʹԠͯ͡ɼ ౤ߘͷϖʔε΍࣌ؒଳɺ༵೔ʹ͍ͭͯௐ੔͢Δϫβ 12೥9݄11೔Ր༵೔
28. 7. Specialized Streams / ΧςΰϦผετϦʔϜ Wired’s blog ಡऀ૚ͷҧ͍ʹԠͯ͡ɼίϯςϯπΛଟ਺ͷνϟωϧʹ෼͚Δϫβ. 12೥9݄11೔Ր༵೔
29. 8. Social Links / ιʔγϟϧϦϯΫ Huffington PostΛϑΥϩʔ͢Δ10छྨͷํ๏ αΠτ಺ͷͲ͔͜ʹɼιʔγϟϧϝσΟΞͷΞΧ΢ϯτ΍ ίϯςϯπ΁ͷϦϯΫͷҰཡΛࣔ͢ϫβ. 12೥9݄11೔Ր༵೔
30. 9. Sharing Widget / ڞ༗΢ΟδΣοτ Slate ͷهࣄͷ࠷ޙʹ͋Δڞ༗΢ΟδΣοτ ϑΥϩϫʔͱखܰʹڞ༗Ͱ͖ΔίϯτϩʔϧͷҰࣜΛ഑ஔ͢Δϫβ. Share This http://www.designingsocialinterfaces.com/patterns/Share_This 12೥9݄11೔Ր༵೔
31. 10. News Box / χϡʔεϘοΫε Red Cross News αΠτͷτοϓϖʔδͰɼ࠷৽ͷ͓஌Βͤ΍ϒϩάهࣄɼಈըͳͲͷ ίϯςϯπΛఏࣔ͢ΔϫβɽαϜωΠϧը૾͕͋Δͱͳ͓ྑ͍. 12೥9݄11೔Ր༵೔
32. 11. Content Leaderboard / ίϯςϯπͷείΞϘʔυ Wall Street Journal ڞ༗ճ਺΍ϒϩάʹॻ͔Εͨճ਺ͳͲͷιʔγϟϧϝσΟΞͷج४ʹج͍ͮͯ, ࠷΋ਓؾͷ͋Δهࣄ΍ϒϩά΁ͷ౤ߘɼಈըͳͲͷίϯςϯπͷҰཡΛࣔ͢ϫβ. 12೥9݄11೔Ր༵೔
33. 12. Recent Chatter / ࠷৽ͷ͟͞Ί͖ ɹ ɹɹɹ ɹBoing Boingɹɹ ɹ Kitchen Table Mathɹɹɹ ϢʔβʹΑΔίϝϯτ΍πΠʔτͳͲɼ ଞͷίϛϡχςΟͰͷ׆ಈঢ়گΛαΠυόʔʹදࣔ͢Δϫβ. 12೥9݄11೔Ր༵೔
34. 1. Editorial Mix 2. Personal Voices 3. Repost and Comment 4. Conversation Starters 5. Inverted Nano-pyramid 6. Timing Strategy 7. Specialized Streams 8. Social Links 9. Sharing Widget 10. News Box 11. Content Leaderboard 12. Recent Chatter ιʔγϟϧϝσΟΞͷσβΠϯύλʔϯ 12೥9݄11೔Ր༵೔
35. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ جຊతͳ࢟੎ɾํ਑ֶ͍ͭͯͿ. ιʔγϟϧϝσΟΞ੍࡞ͷͨΊͷ ۩ମతͳσβΠϯύλʔϯΛֶͿ. 12೥9݄11೔Ր༵೔
36. ୈ̕ষͰֶͿ͜ͱ ΦϯϥΠϯͰͷιʔγϟϧΠϯλϥΫγϣϯ ͷجૅͱɼاۀ͕఻͑Δ΂͖͜ͱʹࣗൃతʹ ࣖΛ܏͚ͯ͘ΕΔਓʑΛ૿΍͢ํ๏ΛֶͿɽ 12೥9݄11೔Ր༵೔
37. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ 12೥9݄11೔Ր༵೔
38. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ9ষ - ιʔγϟϧϝσΟΞͷར༻ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/ 12೥9݄11೔Ր༵೔