A short story about a developer who love font

エンジニアでもデザインがちょっと楽しくなる（かもしれない）、フォントのはなし。

ひとりのエンジニアが「フォント沼」にハマったお話をします。

Transcript

1. ΤϯδχΞͰ΋
   σβΠϯ͕ͪΐͬͱָ͘͠ͳΔ
   ϑΥϯτͷ͸ͳ͠
   !DPDPQPO
   ͔΋͠Εͳ͍
   

   View Slide

2. ࣗݾ঺հ
   DPDPQPO
   %FWFMPQFS%FTJHOFS
   

   View Slide

3. ΞϓϦΛ࡞ͬͨΓ
   ޫΔΦγϟϨి୎ʮ-MVNJOPʯ
   

   View Slide

4. ΠϯλϥΫςΟϒΞʔτΛ࡞ͬͨΓ
   ʷυοτͷΩϡʔϒܕ͓͢͠ʮ͢͠ͽ͜ʯ
   

   View Slide

5. δΣωϥςΟϒσβΠϯͷຊΛ؂मͨ͠Γ
   

   View Slide

6. ͜͹ͳ͠
   ຊ୊ͷલʹɺͻͱ͚ͭͩখ࿩Λ
   

   View Slide

7. デザイナー氏 エンジニア氏
   J04ΞϓϦΛ࡞Ζ͏ͱ͍ͯ͠ΔσβΠφʔࢯͱΤϯδχΞࢯ
   

   View Slide

8. ͦ΋ͦ΋ɺͦΜͳࡉ͔ͳ࿩

   Ͳ͏Ͱ΋͍͍Α͏ͳʜɻ

   Կ΋มΘΒͳ͍Α͏ʹݟ͑ΔΑ
   デザイナー氏 エンジニア氏
   /4"UUSJCVUFE4USJOHΛ࢖͑͹
   Ͱ͖ͳ͍͜ͱ͸ͳ͍͚ΕͲɺ໘౗ʜ
   6*-BCFMʹͦΜͳϓϩύςΟ͸ͳ͍
   ϥΠϯϋΠτʢʹߦͷߴ͞ʣΛ

   σβΠϯͷ14%ʹ߹Θͤͯ΄͍͠ʂ
   

   View Slide

9. ΤϯδχΞࢯ͕σβΠϯʹڵຯ͕ͳ͍৔߹

   ͦͷՁ஋Λਖ਼͘͠൑அͰ͖ΔͩΖ͏͔ʁ
   Ͳ͜·Ͱ͕

   ʮࡉ͔ͯ͘Ͳ͏Ͱ΋͍͍͜ͱʯ
   ͳͷͩΖ͏ʁ
   ʢ˞࠷ऴϖʔδͷʮޙ೔௥هʯ΋͝ࢀর͍ͩ͘͞ʣ
   

   View Slide

10. ͓ޓ͍͕૬खͷྖҬΛ஌Δ͜ͱͰ
    ϓϩμΫτͷ׬੒౓͸͙ͬͱߴ·Δ
    

    View Slide

11. ྆ऀͷؒʹଘࡏ͢ΔΪϟοϓʜ͜ΕͰ͸Α͍ϓϩμΫτ͸ੜ·Ε·ͤΜ
    

    View Slide

12. デザイン エンジニアリング
    ͓ޓ͍ͷྖҬΛΧόʔ͋͠͏ɺ͜ͷܗ͕ཧ૝తʂ
    

    View Slide

13. ΤϯδχΞϦϯάͱಉ͘͡Β͍

    σβΠϯ͸͓΋͠Ζ͍Αʂ
    

    View Slide

14. ͻͱΓͷΤϯδχΞ͕
    ϑΥϯτপʹϋϚΔ·Ͱ
    Frutiger...
    ࠓ೔͸ςʔϚΛʮϑΥϯτʯʹߜͬͯɺࣗ਎͕ͲͷΑ͏ͳܦҢͰ

    ϑΥϯτপʹϋϚ͍ͬͯͬͨͷ͔Λ͓࿩Λ͍ͨ͠ͱࢥ͍·͢
    

    View Slide

15. ϑΥϯτপͷೖΓޱ
    ໘ന͞ɾԞਂ͞Λ༏͘͠ڭ͑ͯ͘Εͨ
    ϑΥϯτͷ;͗͠
    https://www.amazon.co.jp/dp/4568504287/
    

    View Slide

16. ϖʔδ͍ͬͺ͍ʹҹ࡮͞Εͨʮ4ʯΛݟͯ

    ཕʹଧͨΕͨΑ͏ͳিܸΛड͚·ͨ͠
    

    View Slide

17. ϑΥϯτͱ͸ɺ

    ॻମͷϓϩ͕ؾͷԕ͘ͳΔΑ͏ͳ࣌ؒΛ͔͚ͯ
    Ұจࣈͣͭେࣄʹҭ্ͯ͛ͨ

    ׼ͱྦͷ݁থͳͷͩͳʜʜ
    Sec
    

    View Slide

18. ଚ͍ʜʜ
    ͱ ͏ ͱ
    

    View Slide

19. ͦΓΌສԁ΋͢ΔΘ͚ͩ
    

    View Slide

20. ϑΥϯτͷ͜ͱɺ
    ΋ͬͱ஌Γ͍ͨʂ
    

    View Slide

21. https://www.amazon.co.jp/dp/4568502772/
    ॻମͷछྨ΍ྺ࢙ɺ౾஌ࣝʜ
    ΋ͬͱ஌Γ͍ͨ
    Ԥจॻମ
    

    View Slide

22. ༗໊ॻମͷղઆ΍
    Gill Sans
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    Helvetica
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    Eulostile
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    Avenir
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    ࠷΋൚༻తͳαϯηϦϑମͰɺ

    ϘʔϧυମͳͲ͸19ੈلάϩ

    ςεΫͷߥ࡟Γͳ…
    େจࣈ͸ಊʑͱͨ͠ݹయతͳ

    ࠎ֨Λ͍࣋ͬͯͯɺͲͪΒ͔

    ͱ͍͏ͱΠΪϦε෩Ͱ͕͢ɺ…
    ແػతɺগ͠SFͬΆ͍ۙ୅త

    ͳײ͡Ͱ͢ɻ60೥୅͔Β70೥

    ୅ʹ͔͚ͯྲྀߦͨ͠ॻମͰɺ…
    ચ࿅ɺۙ୅తɻزԿֶతͳࣈܗ
    ͳ͕Β΋ɺͲ͔͜ਓؒຯΛײ͡
    

    View Slide

23. ࣌୅͝ͱͷॻମͷભҠ΍
    ੈل͔Βੈل
    w 0NOJB
    w )BNNFS/V[JBMF
    ੈل͔Βੈل
    w %VD%F#FSSZ
    w /PUSF%BNF
    w "MUF4DIXBCBDIFS
    w 8JMIFMN,MJOHTQPS(PUJTDI
    ੈل
    w 5IPSPXHPPE
    w &HZQUJBO
    w 1MBZCJMM
    w .BEBNF
    w )BXUIPSO
    w $BSMUPO
    w #FSOIBSE
    w 'SBOLMJO(PUIJD
    

    View Slide

24. ஶऀʹΑΔॻମվྑϓϩδΣΫτͷখ࿩ͳͲ
    Avenir Next Ultra Light
    Avenir Next Medium
    Avenir Next Regular
    Avenir Next Demi Bold
    Avenir Next Heavy
    Avenir Next Bold
    

    View Slide

25. ੝Γͩ͘͞Μʂ
    

    View Slide

26. ϑΥϯτΛ࢖ͬͯ

    ࣮ࡍʹจষΛ૊ΜͰΈ͍ͨ
    Ԥจ૊൛
    https://www.amazon.co.jp/dp/4568504112/
    

    View Slide

27. Ͳͷ͘Β͍ͷߦ͕ؒಡΈ΍͍͢ΜͩΖ͏ʁ
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Maecenas ultricies ante ipsum, ac pharetra arcu
    auctor facilisis. Donec auctor quam augue, non
    pharetra nunc sodales nec. Nullam consectetur, ante
    sed tincidunt euismod, nulla felis hendrerit nibh, ut
    aliquet turpis lacus et tellus. Proin bibendum feugiat
    velit, eu cursus arcu aliquam a. Pellentesque
    ultricies massa nec velit aliquam feugiat. Aliquam
    feugiat lacus vitae nulla interdum fermentum. In
    pulvinar bibendum ante quis posuere. Suspendisse
    ut lacus in nunc sagittis convallis eget sit amet
    sapien. Sed convallis vitae dolor sed rutrum. In quis
    justo a lacus scelerisque mollis sit amet a augue.
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Aenean sodales ac lorem ac hendrerit. Nulla
    quis accumsan orci, sit amet sollicitudin mauris.
    Praesent ipsum eros, pellentesque vitae sodales ut,
    blandit ut erat. Maecenas ut dapibus erat.
    Nullam in sapien eleifend, mollis urna venenatis,
    vestibulum libero. Suspendisse eget accumsan sem,
    ac viverra arcu. Fusce hendrerit augue id tempor
    tristique. Nullam nec neque tincidunt, elementum
    nibh eget, suscipit urna. Praesent nec sapien
    facilisis, condimentum lorem vel, semper felis.
    Pellentesque sed dui a lorem dictum rhoncus et at
    elit. Integer scelerisque finibus aliquet. Nulla
    lacinia, turpis ac fringilla rutrum, elit purus varius
    urna, a tristique risus mauris a dui. Proin mauris
    arcu, finibus eget ipsum eget, auctor ultricies elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Maecenas ultricies ante ipsum, ac pharetra arcu
    auctor facilisis. Donec auctor quam augue, non
    pharetra nunc sodales nec. Nullam consectetur, ante
    sed tincidunt euismod, nulla felis hendrerit nibh, ut
    aliquet turpis lacus et tellus. Proin bibendum feugiat
    velit, eu cursus arcu aliquam a. Pellentesque
    ultricies massa nec velit aliquam feugiat. Aliquam
    feugiat lacus vitae nulla interdum fermentum. In
    pulvinar bibendum ante quis posuere. Suspendisse
    ut lacus in nunc sagittis convallis eget sit amet
    sapien. Sed convallis vitae dolor sed rutrum. In quis
    justo a lacus scelerisque mollis sit amet a augue.
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Aenean sodales ac lorem ac hendrerit. Nulla
    quis accumsan orci, sit amet sollicitudin mauris.
    Praesent ipsum eros, pellentesque vitae sodales ut,
    blandit ut erat. Maecenas ut dapibus erat.
    Nullam in sapien eleifend, mollis urna venenatis,
    vestibulum libero. Suspendisse eget accumsan sem,
    ac viverra arcu. Fusce hendrerit augue id tempor
    tristique. Nullam nec neque tincidunt, elementum
    nibh eget, suscipit urna. Praesent nec sapien
    facilisis, condimentum lorem vel, semper felis.
    Pellentesque sed dui a lorem dictum rhoncus et at
    elit. Integer scelerisque finibus aliquet. Nulla
    lacinia, turpis ac fringilla rutrum, elit purus varius
    urna, a tristique risus mauris a dui. Proin mauris
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Maecenas ultricies ante ipsum, ac pharetra arcu
    auctor facilisis. Donec auctor quam augue, non
    pharetra nunc sodales nec. Nullam consectetur, ante
    sed tincidunt euismod, nulla felis hendrerit nibh, ut
    aliquet turpis lacus et tellus. Proin bibendum feugiat
    velit, eu cursus arcu aliquam a. Pellentesque
    ultricies massa nec velit aliquam feugiat. Aliquam
    feugiat lacus vitae nulla interdum fermentum. In
    pulvinar bibendum ante quis posuere. Suspendisse
    ut lacus in nunc sagittis convallis eget sit amet
    sapien. Sed convallis vitae dolor sed rutrum. In quis
    justo a lacus scelerisque mollis sit amet a augue.
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Aenean sodales ac lorem ac hendrerit. Nulla
    quis accumsan orci, sit amet sollicitudin mauris.
    Praesent ipsum eros, pellentesque vitae sodales ut,
    blandit ut erat. Maecenas ut dapibus erat.
    Nullam in sapien eleifend, mollis urna venenatis,
    vestibulum libero. Suspendisse eget accumsan sem,
    ac viverra arcu. Fusce hendrerit augue id tempor
    tristique. Nullam nec neque tincidunt, elementum
    nibh eget, suscipit urna. Praesent nec sapien
    αΠζQU
    ߦૹΓQU
    αΠζQU
    ߦૹΓQU
    αΠζQU
    ߦૹΓQU
    ͜ͷ͋ͨΓͷ͓΋͠Ζ͕͞Θ͔ͬͯ͘Δͱɺઌͷখ࿩ͷ݅͸ղܾͦ͠͏Ͱ͢Ͷ
    

    View Slide

28. ݟग़͠ͱຊจͷϑΥϯτɺͲ͏૊Έ߹ΘͤΔʁ
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Maecenas ultricies ante ipsum, ac pharetra arcu
    auctor facilisis. Donec auctor quam augue, non
    pharetra nunc sodales nec. Nullam consectetur, ante
    sed tincidunt euismod, nulla felis hendrerit nibh, ut
    aliquet turpis lacus et tellus. Proin bibendum feugiat
    velit, eu cursus arcu aliquam a. Pellentesque ultricies
    massa nec velit aliquam feugiat. Aliquam feugiat lacus
    vitae nulla interdum fermentum. In pulvinar bibendum
    ante quis posuere. Suspendisse ut lacus in nunc
    sagittis convallis eget sit amet sapien. Sed convallis
    vitae dolor sed rutrum. In quis justo a lacus
    scelerisque mollis sit amet a augue. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Aenean
    sodales ac lorem ac hendrerit. Nulla quis accumsan
    orci, sit amet sollicitudin mauris. Praesent ipsum eros,
    pellentesque vitae sodales ut, blandit ut erat.
    Maecenas ut dapibus erat.
    The quick brown fox jumps over
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Maecenas ultricies ante ipsum, ac pharetra arcu
    auctor facilisis. Donec auctor quam augue, non
    pharetra nunc sodales nec. Nullam consectetur, ante
    sed tincidunt euismod, nulla felis hendrerit nibh, ut
    aliquet turpis lacus et tellus. Proin bibendum feugiat
    velit, eu cursus arcu aliquam a. Pellentesque ultricies
    massa nec velit aliquam feugiat. Aliquam feugiat lacus
    vitae nulla interdum fermentum. In pulvinar bibendum
    ante quis posuere. Suspendisse ut lacus in nunc
    sagittis convallis eget sit amet sapien. Sed convallis
    vitae dolor sed rutrum. In quis justo a lacus
    scelerisque mollis sit amet a augue. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Aenean
    sodales ac lorem ac hendrerit. Nulla quis accumsan
    orci, sit amet sollicitudin mauris. Praesent ipsum eros,
    pellentesque vitae sodales ut, blandit ut erat.
    Maecenas ut dapibus erat.
    The quick brown fox jumps over
    

    View Slide

29. ΑΓ࣮ફతͳ಺༰ʂ
    

    View Slide

30. Ή͢ͼ
    

    View Slide

31. ΤϯδχΞϦϯάͷྖҬ΋

    σβΠϯͷྖҬ΋
    ಉ͘͡Β͍͓΋͠Ζ͍
    

    View Slide

32. ΤϯδχΞ΋

    σβΠφʔ΋
    ʮΑ͍΋ͷΛ࡞Γ͍ͨʯ
    ͱ͍͏૝͍͸ಉ͡
    

    View Slide

33. デザイン エンジニアリング
    ૬खͷྖҬͷ͓΋͠Ζ͞Λ஌Γ
    ΑΓΑ͍ϓϩμΫτΛ

    ڠྗͯ͠࡞͍ͬͯ͜͏
    

    View Slide

34. ΤϯδχΞͰ΋
    σβΠϯ͕ͪΐͬͱָ͘͠ͳΔ
    ϑΥϯτͷ͸ͳ͠
    !DPDPQPO
    ͔΋͠Εͳ͍
    

    View Slide

35. ޙ೔௥ه
    ྫࣔʹ࢖༻ͨ͠খ࿩ʹ͍ͭͯ͸ɺಛఆͷϓϩδΣΫτΛࠩ͢΋ͷͰ͸ͳ͘ɺ

    Ұൠతʹى͜Γ͏Δࣄ৅ͱͯ͠ڍ͛ͨ΋ͷͰ͢ɻ
    ͜ͷࢿྉ͸ɺσβΠφʔʗΤϯδχΞ૒ํͷࣗൃతͳาΈدΓͷఏҊΛ
    ҙਤ͓ͯ͠ΓɺҰํతͳཧղΛڧཁ͢Δ΋ͷͰ͸͋Γ·ͤΜɻ
    ͓ޓ͍ཧղͷ͋Δঢ়ଶ͔ΒελʔτͰ͖Ε͹ɺίϛϡχέʔγϣϯʹඞཁͳ

    ࣌ؒΛ࡟ݮ͠ɺΑΓೲಘײͷ͋ΔϓϩμΫτ։ൃ͕Ͱ͖ΔͷͰ͸ͳ͍͔ʜ

    ͱ͍͏͓࿩Ͱ͢ɻ
    ʢ౰ํΤϯδχΞͰ͢ͷͰɺΤϯδχΞ͞Μͷۤ࿑ɾ௚໘͢Δཧෆਚ͞͸

    ɹ௧͍΄Ͳཧղ͓ͯ͠Γ·͢ʜʣ
    

    View Slide