タイポグラフィベーシック (+ デザインアイデア)

Web にも DTP にも役立つタイポグラフィの基礎とタイポグラフィを利用したデザインアイデア。

Transcript

1. View Slide

2. KITE
   KITERETZ inc. CEO & Founder
   ­ kite.koga ¬ ixkaito ® ixkaito
   Ŷ ixkaito Ʃ ixkaito ŧ ixkaito
   Web & graphic designer
   Programmer
   WordPress core contributer
   Ruby on Rails contributer
   React contributer
   Wocker developer
   Bathe developer
   Frasco developer
   

   View Slide

3. ੈքҰΘ͔Γ΍͍͢
   8PSE1SFTT
   ಋೖͱ
   αΠ
   τ੍࡞ͷ
   ڭՊॻ
   ൃച
   ஶऀɿ҆౻ಞ࢙ɼԬຊलߴɼݹլւਓɼਂ୔޾࣏࿠
   IUUQTXXXBNB[PODPKQEQ
   

   View Slide

4. ݖ
   ར
   ຊ
   ஶ
   ʂ
   ϧ
   ϒ
   Π
   ό
   ͷ
   ܾ
   ղ
   ϧ
   ϒ
   ϥ
   τ
   ݖ
   ࡞
   
   ݖ
   ར
   ຊ
   Ϋ
   Ϧ
   Τ
   Π
   λ
   ͷ
   ͷ
   Ί
   ͨ
   ͷ
   ஶɹେ۲ഹɹ๺ଜਸɹ໦ଜ߶େɹݹլւਓɹᜊ໦߂थɹ֯ాҁՂɹછ୩ণར
   ݱ৔ͰτϥϒϧʹͳΓ͕ͪͳݖརͷ໰୊ʹ͍ͭͯ
   ɹ ΫϦΤΠλʔͱͯ͠΍ͬͯ͸͍͚ͳ͍͜ͱ
   ɹ ݖརΛ৵֐͞Εͨ࣌ͷ۩ମతͳରॲ๏
   Λɺ
   Θ͔Γ΍͘͢·ͱΊͨΫϦΤΠλʔͷͨΊͷόΠϒϧ
   ൃച
   ஶऀɿେ۲ഹɼ๺ଜਸɼછ୩ণརɼ໦ଜ߶େɼ
   ݹլւਓɼᜊ໦߂थɼ֯ాҁՂ
   IUUQTXXXBNB[PODPKQEQ
   ஶ࡞ݖτϥϒϧղܾͷόΠϒϧʂ
   ΫϦΤΠ
   λʔͷͨΊͷ
   ݖརͷຊ
   

   View Slide

5. IUUQTESJCCCMFDPNJYLBJUPcIUUQTUXJUUFSDPNJYLBJUPcIUUQTXXXJOTUBHSBNDPNJYLBJUP
   Date Typography
   

   View Slide

6. TYPOGRAPHYBASICS
   

   View Slide

7. ຊ೔͸ओʹ͜
   ͬͪͷ࿩
   

   View Slide

8. ΞηϯμʔϥΠϯ
   ΩϟοϓϥΠϯ
   ϛʔϯϥΠϯ
   ϕʔεϥΠϯ
   σΟηϯμʔϥΠϯ
   ΩϟοϓϋΠ
   τ
   σΟηϯμʔ
   Ξηϯμʔ
   ΤοΫεϋΠ
   τ
   

   View Slide

9. Ӭ Ծ૝ϘσΟ
   ࣈ໘
   ࠎ֨
   

   View Slide

10. ηϦϑ ϒϥέο
    τηϦϑ ϔΞϥΠϯηϦϑ εϥϒηϦϑ
    

    View Slide

11. ͏Ζ͜
    

    View Slide

12. ϩʔϚϯମɾηϦϑମ
    αϯηϦϑମ
    εϥϒηϦϑମ
    εΫϦϓτମ
    

    View Slide

13. ໌ேମ
    ΰγοΫମ
    ؙΰγοΫମ
    ఻౷ॻମ
    

    View Slide

14. View Slide

15. View Slide

16. E
    WAV
    ະௐ੔
    

    View Slide

17. E
    WAV
    ະௐ੔
    

    View Slide

18. WAVE
    ௐ੔ޙ
    

    View Slide

19. ௐ੔ޙ
    WAVE
    

    View Slide

20. ϑΥϯτ
    ະௐ੔
    

    View Slide

21. ϑΥϯτ
    ະௐ੔
    

    View Slide

22. ϑΥϯτ
    ௐ੔ޙ
    

    View Slide

23. ௐ੔ޙ
    ϑΥϯτ
    

    View Slide

24. ϝ
    τϦΫεʗࣗಈɺϓϩϙʔγϣφϧϝ
    τϦΫε
    ϑΥϯτ͕͍࣋ͬͯΔ٧Ί৘ใʹΑΔࣗಈΧʔχϯά
    

    View Slide

25. ΦϓςΟΧϧ
    จࣈͷܗঢ়ʹԠͯ͡ɺΞϓϦέʔγϣϯʹΑΔࣗಈΧʔχϯά
    

    View Slide

26. WAVE ϑΥϯτ
    WAVE
    ϝ
    τϦΫεʗࣗಈɺϓϩϙʔγϣφϧϝ
    τϦΫε ΦϓςΟΧϧ
    ϑΥ
    ϯ
    τ
    

    View Slide

27. σϑΥϧτ
    

    View Slide

28. View Slide

29. font-feature-settings: "palt" 1;
    ϓϩϙʔγϣφϧϝ
    τϦΫε
    

    View Slide

30. font-feature-settings: "pwid" 1;
    ϓϩϙʔγϣφϧࣈܗ
    

    View Slide

31. font-feature-settings: "pkna" 1;
    ϓϩϙʔγϣφϧ͔ͳ
    

    View Slide

32. font-feature-settings: "pwid" 1;
    :BLV)BO+1
    

    View Slide

33. ::first-letter {
    font-feature-settings: "palt" 1;
    }
    

    View Slide

34. Lorem ipsum dolor sit amet consectetur
    adipiscing elit hendrerit viverra nunc dapibus,
    condimentum odio turpis velit non
    scelerisque proin quisque felis tellus, ligula
    faucibus habitant tempor himenaeos vitae
    ridiculus per sapien curae.
    

    View Slide

35. ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ
    ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰ
    χϟʔχϟʔٽ͍͍ͯͨࣄ͚ͩ͸ه
    Ա͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓ
    ؒͱ͍͏΋ͷΛݟͨɻ
    

    View Slide

36. ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ
    ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰ
    χϟʔχϟʔٽ͍͍ͯͨࣄ͚ͩ͸ه
    Ա͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓ
    ؒͱ͍͏΋ͷΛݟͨɻ
    

    View Slide

37. ߦૹΓʹจࣈαΠζʴߦؒʹMJOFIFJHIU
    

    View Slide

38. ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ
    ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰ
    χϟʔχϟʔٽ͍͍ͯͨࣄ͚ͩ͸ه
    Ա͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓ
    ؒͱ͍͏΋ͷΛݟͨɻ
    

    View Slide

39. Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍͍ͯͨࣄ͚ͩ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠
    ΋͋ͱͰฉ͘ͱͦΕ͸ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑզʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏
    ߟ΋ͳ͔͔ͬͨΒผஈڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্Ͱগ͠མͪͭ
    ͍ͯॻੜͷإΛݟͨͷ͕͍ΘΏΔਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻୈҰໟΛ΋ͬͯ૷০͞Ε΂͖͸ͣͷإ͕ͭΔͭ
    Δͯ͠·ΔͰༀ؈ͩɻͦͷޙೣʹ΋͍ͩͿ⁊͕ͬͨ͜Μͳยྠʹ͸Ұ౓΋ग़ձΘͨ͠ࣄ͕ͳ͍ɻͷΈͳΒͣإͷਅத͕͋·Γʹಥى͍ͯ͠Δɻͦ͏ͯͦ͠ͷ݀ͷத͔Β
    ࣌ʑ΀͏΀͏ͱԎΛਧ͘ɻͲ͏΋ҺͤΆ࣮ͯ͘ʹऑͬͨɻ͜Ε͕ਓؒͷҿΉԎ૲ͱ͍͏΋ͷͰ͋Δࣄ͸Α͏΍͘͜ͷࠒ஌ͬͨɻ
    

    View Slide

40. Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍ͯ
    ͍ͨࣄ͚ͩ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ
    ͘ͱͦΕ͸ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ͔͔ͬͨΒผஈ
    ڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑ
    ϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔ
    ਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻୈ
    ҰໟΛ΋ͬͯ૷০͞Ε΂͖͸ͣͷإ͕ͭΔͭΔͯ͠·ΔͰༀ؈ͩɻͦͷޙೣʹ΋͍ͩͿ
    ⁊͕ͬͨ͜Μͳยྠʹ͸Ұ౓΋ग़ձΘͨ͠ࣄ͕ͳ͍ɻͷΈͳΒͣإͷਅத͕͋·Γʹಥى
    ͍ͯ͠Δɻͦ͏ͯͦ͠ͷ݀ͷத͔Β࣌ʑ΀͏΀͏ͱԎΛਧ͘ɻͲ͏΋ҺͤΆ࣮ͯ͘ʹऑͬ
    ͨɻ͜Ε͕ਓؒͷҿΉԎ૲ͱ͍͏΋ͷͰ͋Δࣄ͸Α͏΍͘͜ͷࠒ஌ͬͨɻ
    

    View Slide

41. Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍ͯ
    ͍ͨࣄ͚ͩ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ
    ͘ͱͦΕ͸ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ͔͔ͬͨΒผஈ
    ڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑ
    ϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔ
    ਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻୈ
    ҰໟΛ΋ͬͯ૷০͞Ε΂͖͸ͣͷإ͕ͭΔͭΔͯ͠·ΔͰༀ؈ͩɻͦͷޙೣʹ΋͍ͩͿ
    ⁊͕ͬͨ͜Μͳยྠʹ͸Ұ౓΋ग़ձΘͨ͠ࣄ͕ͳ͍ɻ
    ࢀߟج४ɿߦૹΓɺߦ௕ ʙ จࣈ
    

    View Slide

42. ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍ͯ
    ͍ͨࣄ͚ͩ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ
    ͘ͱͦΕ͸ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ͔͔ͬͨΒผஈ
    ڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑ
    ϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔ
    ਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻ
    

    View Slide

43. ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍ͯ
    ͍ͨࣄ͚ͩ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ
    ͘ͱͦΕ͸ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ͔͔ͬͨΒผஈ
    ڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑ
    ϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔ
    ਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻ
    େ͖͍จࣈͷ୹͍ߦ௕ͷ৔߹͸ɺ
    ج४஋ΑΓ΋ڱ͍ߦؒɾߦૹΓͷ΄͏͕ಡΈ΍͍͢
    

    View Slide

44. Lorem ipsum dolor sit amet consectetur adipiscing elit habitant in, pretium
    dapibus dictum senectus luctus mollis ac non diam, interdum ultricies
    sollicitudin rhoncus mi imperdiet vel himenaeos. Consectetur dapibus orci
    rutrum donec dictum lobortis quam primis, class ipsum vulputate etiam
    augue nam tortor. Mattis dis nec mus praesent tortor suspendisse nascetur
    nunc, platea massa magnis habitasse parturient curabitur leo cubilia, elit fusce
    penatibus libero aliquam porttitor blandit.
    

    View Slide

45. Lorem ipsum dolor sit amet consectetur adipiscing elit habitant in, pretium
    dapibus dictum senectus luctus mollis ac non diam, interdum ultricies
    sollicitudin rhoncus mi imperdiet vel himenaeos. Consectetur dapibus orci
    rutrum donec dictum lobortis quam primis, class ipsum vulputate etiam
    augue nam tortor. Mattis dis nec mus praesent tortor suspendisse nascetur
    nunc, platea massa magnis habitasse parturient curabitur leo cubilia, elit fusce
    penatibus libero aliquam porttitor blandit.
    ϑΥϯτͷΤοΫεϋΠ
    τͷߴ͞ʹ΋ΑΓ·͕͢ɺ
    ߦૹΓΛج४஋ΑΓڱ͘
    ͠
    ͯ΋ಡΈʹ͘
    ͘ͳΒͳ͍
    

    View Slide

46. View Slide

47. ΤοΫεϋΠ
    τ ΩϟοϓϋΠ
    τ
    

    View Slide

48. ΤοΫεϋΠ
    τ ΩϟοϓϋΠ
    τ
    Ͳͷํ๏ʹ͢Δ͔ɺ͢΂ͯେจࣈ͔ͳͲʹΑͬͯɺݟͨ໨ʹ͔ͳΓͷҧ͍͕ग़Δ৔߹͕͋Δɻ
    ͲΕ͔͕ඞͣਖ਼ղͱ͍͏Θ͚Ͱ͸ͳ͘ɺҰͭͷϓϩδΣΫ
    τͰ͸ἧ͑ํΛ౷Ұ͢Δ͜ͱ͕େࣄɻ
    

    View Slide

49. ϐΫηϧ
    ڃ
    ϙΠϯτ
    ϛ
    Ϧ
    ϝʔτϧ
    ηϯνϝʔτϧ
    Πϯν
    ύΠ
    Χ
    ࣃʢ)ʣ NN ໿ QY
    JO ໿ QY
    ໿ QY
    ໿ QY
    QY
    QU QY
    px
    Q
    pt
    mm
    cm
    in
    pc
    

    View Slide

50. ཁૉͷϑΥ
    ϯταΠζ
    ཁૉͷΤοΫεϋΠ
    τ
    ཁૉͷʮʯ
    ʢθϩʣͷ෯
    ϧʔτཁૉͷϑΥ
    ϯταΠζ
    Ϗϡʔϙʔτ෯ͷ
    Ϗϡʔϙʔτߴ͞ͷ
    Ϗϡʔϙʔτͷ୹ลͷ
    Ϗϡʔϙʔτͷ௕ลͷ
    .
    Y
    DIBSBDUFS
    SPPUFN
    WJFXQPSUXJEUI
    WJFXQPSUIFJHIU
    WJFXQPSUNJOJNVN
    WJFXQPSUNBYJNVN
    em
    ex
    ch
    rem
    vw
    vh
    vmin
    vmax
    ˞
    ε
    Ϋ
    ϩ
    ồ
    ϧ
    ό
    ồ
    ͷ
    ෯
    Λ
    ؚ
    Ή
    

    View Slide

51. ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    h1 { font-size: 5vw; }
    QY QY
    

    View Slide

52. ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    QY QY
    

    View Slide

53. View Slide

54. {
    9.6x + y = 48
    3.2x + y = 32
    େ͖͍εΫϦʔϯ෯ͷ
    খ͍͞εΫϦʔϯ෯ͷ
    େ͖͍εΫϦʔϯͰͷϑΥϯταΠζ
    খ͍͞εΫϦʔϯͰͷϑΥϯταΠζ
    

    View Slide

55. {
    x = 2.5
    y = 24
    ղɿ
    

    View Slide

56. 5vw
    QY
    QY QY
    7JFXQPSU
    'POU4J[F
    QY
    ੾ย QY
    QY
    ܏͖
    calc(2.5vw + 24px)
    

    View Slide

57. QY
    QY QY
    7JFXQPSU
    'POU4J[F
    QY
    QY
    

    View Slide

58. IUUQTHJUIVCDPNJYLBJUPWJFXQPSUTDBMF
    

    View Slide

59. IUUQTHJUIVCDPNJYLBJUPWJFXQPSUTDBMFS
    

    View Slide

60. DESIGNIDEAS
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet consectetur adipiscing elit, mi nisl nulla id in purus pellentesque parturient,
    curabitur dui ornare tristique mollis euismod. Tempus sociis felis semper curabitur lorem enim volutpat
    habitasse quam eleifend, platea nulla penatibus tempor viverra dictum erat ad feugiat dignissim, mollis
    consectetur dapibus morbi primis eget tincidunt egestas mus. Aenean mauris rhoncus tincidunt euismod
    fames vestibulum commodo malesuada, platea per risus congue elementum lacinia et quis, vehicula fusce
    neque dolor tristique lorem penatibus.
    Aenean Fermentum
    Aenean fermentum dolor donec facilisi montes pretium, lacus elementum placerat iaculis consectetur euismod
    et, aptent id dui congue enim. Rutrum sociis integer tincidunt parturient augue massa nostra, blandit nunc
    porttitor lobortis eros libero commodo, felis molestie morbi venenatis sed elit. Tempus vehicula fames quis
    enim cum mauris, rutrum montes sagittis lorem lectus eget, malesuada imperdiet ligula diam condimentum.
    

    View Slide

65. I Am A Cat
    ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍ͯ
    ͍ͨࣄ͚ͩ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ
    ͘ͱͦΕ͸ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ͔͔ͬͨΒผஈ
    ڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑ
    ϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔ
    ਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻ
    

    View Slide

66. I Am A Cat
    ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍ͯ
    ͍ͨࣄ͚ͩ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ
    ͘ͱͦΕ͸ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ͔͔ͬͨΒผஈ
    ڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑ
    ϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔ
    ਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻ
    

    View Slide

67. Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉
    ͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍͍ͯͨࣄͩ
    ͚͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍
    ͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ͘ͱͦΕ͸ॻੜͱ
    ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ
    ͔͔ͬͨΒผஈڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ
    ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্
    Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋
    Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻ
    ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ
    ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴ
    Ͱχϟʔχϟʔٽ͍͍ͯͨࣄ͚ͩ
    ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝
    Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠
    ΋͋ͱͰฉ͘ͱͦΕ͸ॻੜͱ͍͏
    ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨ
    ͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ
    զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ
    ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏
    ߟ΋ͳ͔͔ͬͨΒผஈڪ͍͠ͱ΋
    ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤ
    ΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ
    ޗഐ͸ೣͰ͋Δɻ
    ໊લ͸·ͩແ͍ɻ
    

    View Slide

68. View Slide

69. View Slide

70. ৽ਓσβΠφʔืूத
    ৄ͓͘͠࿩͠Λฉ͖͍ͨํ͸ 4/4ɺ
    ΋͘͠͸ (JU)VC*TTVF Ͱϝοηʔδ͍ͩ͘͞
    IUUQTXXXGBDFCPPLDPNLJUFLPHBcIUUQTUXJUUFSDPNJYLBJUPcIUUQTHJUIVCDPNLJUFSFU[IJSFNF
    

    View Slide