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

A short story about a developer who love font

30a0fa53945400e145718f57155869d3?s=47 cocopon
August 03, 2016

A short story about a developer who love font

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

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

30a0fa53945400e145718f57155869d3?s=128

cocopon

August 03, 2016
Tweet

More Decks by cocopon

Other Decks in Design

Transcript

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

  2. ࣗݾ঺հ DPDPQPO %FWFMPQFS%FTJHOFS

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

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

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

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

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

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

  9. ΤϯδχΞࢯ͕σβΠϯʹڵຯ͕ͳ͍৔߹
 ͦͷՁ஋Λਖ਼͘͠൑அͰ͖ΔͩΖ͏͔ʁ Ͳ͜·Ͱ͕
 ʮࡉ͔ͯ͘Ͳ͏Ͱ΋͍͍͜ͱʯ ͳͷͩΖ͏ʁ ʢ˞࠷ऴϖʔδͷʮޙ೔௥هʯ΋͝ࢀর͍ͩ͘͞ʣ

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

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

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

  13. ΤϯδχΞϦϯάͱಉ͘͡Β͍
 σβΠϯ͸͓΋͠Ζ͍Αʂ

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

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

  16. ϖʔδ͍ͬͺ͍ʹҹ࡮͞Εͨʮ4ʯΛݟͯ
 ཕʹଧͨΕͨΑ͏ͳিܸΛड͚·ͨ͠

  17. ϑΥϯτͱ͸ɺ
 ॻମͷϓϩ͕ؾͷԕ͘ͳΔΑ͏ͳ࣌ؒΛ͔͚ͯ Ұจࣈͣͭେࣄʹҭ্ͯ͛ͨ
 ׼ͱྦͷ݁থͳͷͩͳʜʜ Sec

  18. ଚ͍ʜʜ ͱ ͏ ͱ

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

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

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

  22. ༗໊ॻମͷղઆ΍ Gill Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Eulostile ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz Avenir ABCDEFGHIJKLMNOPQRSTUVWXYZ ࠷΋൚༻తͳαϯηϦϑମͰɺ
 ϘʔϧυମͳͲ͸19ੈلάϩ
 ςεΫͷߥ࡟Γͳ… େจࣈ͸ಊʑͱͨ͠ݹయతͳ
 ࠎ֨Λ͍࣋ͬͯͯɺͲͪΒ͔
 ͱ͍͏ͱΠΪϦε෩Ͱ͕͢ɺ… ແػతɺগ͠SFͬΆ͍ۙ୅త
 ͳײ͡Ͱ͢ɻ60೥୅͔Β70೥
 ୅ʹ͔͚ͯྲྀߦͨ͠ॻମͰɺ… ચ࿅ɺۙ୅తɻزԿֶతͳࣈܗ ͳ͕Β΋ɺͲ͔͜ਓؒຯΛײ͡
  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
  24. ஶऀʹΑΔॻମվྑϓϩδΣΫτͷখ࿩ͳͲ Avenir Next Ultra Light Avenir Next Medium Avenir Next

    Regular Avenir Next Demi Bold Avenir Next Heavy Avenir Next Bold
  25. ੝Γͩ͘͞Μʂ

  26. ϑΥϯτΛ࢖ͬͯ
 ࣮ࡍʹจষΛ૊ΜͰΈ͍ͨ Ԥจ૊൛ https://www.amazon.co.jp/dp/4568504112/

  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 ͜ͷ͋ͨΓͷ͓΋͠Ζ͕͞Θ͔ͬͯ͘Δͱɺઌͷখ࿩ͷ݅͸ղܾͦ͠͏Ͱ͢Ͷ
  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
  29. ΑΓ࣮ફతͳ಺༰ʂ

  30. Ή͢ͼ

  31. ΤϯδχΞϦϯάͷྖҬ΋
 σβΠϯͷྖҬ΋ ಉ͘͡Β͍͓΋͠Ζ͍

  32. ΤϯδχΞ΋
 σβΠφʔ΋ ʮΑ͍΋ͷΛ࡞Γ͍ͨʯ ͱ͍͏૝͍͸ಉ͡

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

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

  35. ޙ೔௥ه ྫࣔʹ࢖༻ͨ͠খ࿩ʹ͍ͭͯ͸ɺಛఆͷϓϩδΣΫτΛࠩ͢΋ͷͰ͸ͳ͘ɺ
 Ұൠతʹى͜Γ͏Δࣄ৅ͱͯ͠ڍ͛ͨ΋ͷͰ͢ɻ ͜ͷࢿྉ͸ɺσβΠφʔʗΤϯδχΞ૒ํͷࣗൃతͳาΈدΓͷఏҊΛ ҙਤ͓ͯ͠ΓɺҰํతͳཧղΛڧཁ͢Δ΋ͷͰ͸͋Γ·ͤΜɻ ͓ޓ͍ཧղͷ͋Δঢ়ଶ͔ΒελʔτͰ͖Ε͹ɺίϛϡχέʔγϣϯʹඞཁͳ
 ࣌ؒΛ࡟ݮ͠ɺΑΓೲಘײͷ͋ΔϓϩμΫτ։ൃ͕Ͱ͖ΔͷͰ͸ͳ͍͔ʜ
 ͱ͍͏͓࿩Ͱ͢ɻ ʢ౰ํΤϯδχΞͰ͢ͷͰɺΤϯδχΞ͞Μͷۤ࿑ɾ௚໘͢Δཧෆਚ͞͸
 ɹ௧͍΄Ͳཧղ͓ͯ͠Γ·͢ʜʣ