Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kite
November 24, 2018
3.2k

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

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

Kite

November 24, 2018
Tweet

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