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

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

Kite
November 24, 2018
3.4k

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

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

Kite

November 24, 2018
Tweet

Transcript

  1. 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 full-size slide

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

    View full-size slide

  3. ݖ



    ʂ
    ϧ
    ϒ
    Π
    ό
    ͷ
    ܾ
    ղ
    ϧ
    ϒ
    ϥ
    τ
    ݖ


    ݖ


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

    View full-size slide

  4. IUUQTESJCCCMFDPNJYLBJUPcIUUQTUXJUUFSDPNJYLBJUPcIUUQTXXXJOTUBHSBNDPNJYLBJUP
    Date Typography

    View full-size slide

  5. TYPOGRAPHYBASICS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. E
    WAV
    ະௐ੔

    View full-size slide

  13. E
    WAV
    ະௐ੔

    View full-size slide

  14. WAVE
    ௐ੔ޙ

    View full-size slide

  15. ௐ੔ޙ
    WAVE

    View full-size slide

  16. ϑΥϯτ
    ະௐ੔

    View full-size slide

  17. ϑΥϯτ
    ະௐ੔

    View full-size slide

  18. ϑΥϯτ
    ௐ੔ޙ

    View full-size slide

  19. ௐ੔ޙ
    ϑΥϯτ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ϧ
    ό

    ͷ

    Λ
    ؚ
    Ή

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. {
    x = 2.5
    y = 24
    ղɿ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. IUUQTHJUIVCDPNJYLBJUPWJFXQPSUTDBMF

    View full-size slide

  51. IUUQTHJUIVCDPNJYLBJUPWJFXQPSUTDBMFS

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide