認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design

2018.08.04 WordBench 倉敷 第4回勉強会でのライトニングトーク登壇資料です。
発表内容のテキスト版はこちら：http://bit.ly/infodesignLT

Transcript

1. 2018.08.04
   WordBench ૔ෑ ୈ4ճษڧձ LT
   ؒౢࠫ஌
   ఻ΘΔ৘ใσβΠϯ
   ೝ஌৺ཧֶʹֶͿ
   

   View Slide

2. PROFILE
   ؒౢࠫ஌
   @mjmjsachi
   ߴ஌ࢢࡏॅ
   ϑϦʔϥϯεσβΠφʔ
   DTP΢Σϒ
   

   View Slide

3. photo by chiharu nagatomi
   ࣮ߦҕһ
   ͯ͠·ͨ͠
   

   View Slide

4. https://speakerdeck.com/majimasachi/wordcamp-ogijima-2018-slideguide-jp
   

   View Slide

5. View Slide

6. View Slide

7. cognitive psychology
   ೝ஌৺ཧֶ
   ৘ใॲཧͷ؍఺͔Β
   ੜମͷೝ஌׆ಈΛݚڀ͢Δֶ໰
   Wikipedia
   

   View Slide

8. ෼͔ͬͨʂ
   ఻Θͬͨʂ
   ਓͷ৘ใॲཧγεςϜ
   ײ֮ ஌֮ ೝ஌
   ೖ
   ྗ
   ୹
   ظ
   ه
   Ա
   ௕
   ظ
   ه
   Ա
   ஌ࣝ
   ֓೦
   ܦݧ
   

   View Slide

9. ఻Θͬͨʂ
   ෼͔ͬͨʂ
   ਓͷ৘ใॲཧγεςϜ
   ײ֮ ஌֮ ೝ஌
   ୹
   ظ
   ه
   Ա
   ௕
   ظ
   ه
   Ա
   ஌ࣝ
   ֓೦
   ܦݧ
   ೖ
   ྗ
   ৘ใΛॲཧ͠΍͘͢͢Δ͜ͱͰ
   ఻͍͑ͨ಺༰ͷཧղʹ
   ϦιʔεΛ࢖ͬͯ΋Β͏
   ఻ΘΔ৘ใσβΠϯ
   ຊ೔ͷ͓࿩
   

   View Slide

10. ৘ใΛॲཧ͠΍͘͢͢Δ
    ⁞ϊΠζΛݮΒ͢
     ཧղΛॿ͚Δ
    

    View Slide

11. ⁞ϊΠζΛݮΒ͢
    ෳࡶ͞͸෼͔Γ΍͢͞ͱτϨʔυΦϑ
    ৘ใͷϛχϚϧԽ
    ৘ใॲཧΛϚϧνλεΫԽͤ͞ͳ͍޻෉
    

    View Slide

12. ϊΠζΛݮΒ͢
    දه༳Εɾޡࣈ୤ࣈΛͳ͘͢
    ؆ܿͳݴ͍ճ͠ʹ͢Δ
    6*ͷҰ؏ੑΛอͭ
    ཁૉΛ੔ྻͤ͞Δ
    ૷০Ͱ৘ใྔΛ૿΍͗͢͠ͳ͍
    

    View Slide

13.  ཧղΛॿ͚Δ
    ʮೝ஌༰қੑʯ
    ΛߴΊΔ
    ਓ͸ೝ஌͕༰қͳ΋ͷʹ޷ҙΛ๊͘
    ʰϑΝετεϩʔʱ
    μχΤϧɾΧʔωϚϯ
    

    View Slide

14. ཧղΛॿ͚Δ
    ݟ΍͘͢දࣔ͢Δ
    ܁Γฦ͢
    ड͚खʹͱͬͯ
    ೃછΈͷ͋Δදݱʹ͢Δ
    ஫໨͢΂͖෦෼Λࣔ͢
    

    View Slide

15. ཧղΛॿ͚Δ
    0120154022
    

    View Slide

16. ཧղΛॿ͚Δ
    0120-1540-22
    

    View Slide

17. ཧղΛॿ͚Δ
    0120-1540-22
    ͻͬ ͜ ͠ ͸ ʹͬͭ͏
    

    View Slide

18. ཧղΛॿ͚Δ
    ׽ࣈͱ͔ͳΛద౓ʹࠞͥΔ
    ۟ಡ఺΍ΧοίΛ্ख͘࢖͏
    վߦ͸ҙຯͷ۠੾ΓͰߦ͏
    ৘ใͷνϟϯΫԽ
    ͨͩͷจࣈྻʹ·ͱ·ΓΛ༩͑Δ͜ͱͰ
    ॲཧΛ͠΍͘͢͢Δ
    

    View Slide

19. ཧղΛॿ͚Δ
    ྨࣅੑɿ"ͱ#͸ࣅ͍ͯΔ
    ֊૚ੑɿ"ͱ͍͏౔୆ͷ্ʹ#͕͋Δ
    ҼՌੑɿ"͸#ͷݪҼͰ͋Δ
    ࣌ܥྻੑɿ"ͷ͋ͱʹ#͕ى͜Δ
    ৘ใͷମ੍Խ
    ৘ใಉ࢜Λؔ܎ੑʹΑͬͯ·ͱΊΔ
    etc
    

    View Slide

20. ཧղΛॿ͚Δ
    ৘ใಉ࢜ͷؔ܎ੑʹ;͞Θ͍͠දݱʹ͢Δ
    ৘ใͷମ੍Խɹࢹ֮Խ
    

    View Slide

21. ཧղΛॿ͚Δ
    ৘ใͷମ੍Խɹࢹ֮Խ
    ʲσβΠϯͷେݪଇʳ
    ۙ઀Proximity
    ੔ྻAlignment
    ڧऑContrast
    ൓෮Repetition
    

    View Slide

22. ཧղΛॿ͚Δ
    ৘ใͷମ੍Խɹࢹ֮Խ
    ʲσβΠϯͷେݪଇʳ
    ۙ઀Proximity
    ੔ྻAlignment
    ڧऑContrast
    ൓෮Repetition
    ৄ͘͠͸ɺ
    ·ͨͷػձʹʜ
    

    View Slide

23. ఻ΘΔ৘ใσβΠϯ
    ड͚औΓ΍͍͢ܗʹ৘ใΛՃ޻͢Δ
    ·ͱΊ
    ϊΠζΛݮΒ͢ʗཧղΛॿ͚Δ
    

    View Slide

24. ಧ͍ͨʁ
    ਓͷ৘ใॲཧγεςϜ
    ײ֮ ஌֮ ೝ஌
    ೖ
    ྗ
    ୹
    ظ
    ه
    Ա
    ௕
    ظ
    ه
    Ա
    ஌ࣝ
    ֓೦
    ܦݧ
    

    View Slide

25. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide