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

ノンデザイナーが
多少マシな見た目の資料を作る方法

 ノンデザイナーが
多少マシな見た目の資料を作る方法

KittenLT3で発表させていただいたスライドです。

Tsubasa SEKIGUCHI

December 07, 2022
Tweet

More Decks by Tsubasa SEKIGUCHI

Other Decks in Design

Transcript

  1. Photo by Christian Chen on Unsplash KittenLT3(৽͍͠ឺΛ࡞Ζ͏) 2020.3.6 @ Online

    Tsubasa SEKIGUCHI LEA-3645969186565158903 ϊϯσβΠφʔ͕
 ଟগϚγͳݟͨ໨ͷࢿྉΛ࡞Δํ๏ Design for non-designer
  2. TinyKitten Freelance frontend engineer

  3. Tsubasa SEKIGUCHI I 💖 Open source & Cat.

  4. TrainLCD ೔ຊશࠃͰ࢖͑Δ ిंͷ-$%Λ࠶ݱͨ͠εϚϗΞϓϦͰ͢

  5. TeamKitten ʮ໘ന͍ʯ͜ͱΛ͍ͨ͠ਓ͕ू·Δ 
 ίϛϡχςΟͰ͢ɻ

  6. TeamKittenओ࠵Πϕϯτ KittenLT3ʹ͝ࢀՃ͍͖ͨͩɺ ͋Γ͕ͱ͏͍͟͝·͢ɻ

  7. σβΠϯͷఆٛͱ͸ʁ KittenLT3 ৽͍͠ឺΛ࡞Ζ͏

  8. σβΠϯͱ͸۩ମతͳ໰୊Λղ͖໌͔ͨ͢Ίʹ ࢥߟɾ֓೦ͷ૊ΈཱͯΛߦ͍ɺ ͦΕΛ༷ʑͳഔମʹԠͯ͡දݱ͢Δ͜ͱ σβΠϯͱ͸Կ͔ʁ

  9. σβΠϯͱ͸۩ମతͳ໰୊Λղ͖໌͔ͨ͢Ίʹ ࢥߟɾ֓೦ͷ૊ΈཱͯΛߦ͍ɺ ͦΕΛ༷ʑͳഔମʹԠͯ͡දݱ͢Δ͜ͱ σβΠϯͱ͸Կ͔ʁ

  10. σβΠϯ͸ɺ໰୊Λղܾ͢Δ ʮखஈʯͰ͋Δɻ σβΠϯͱ͸Կ͔ʁ

  11. σβΠϯʹ͸ʮ໨తʯ͕͋Δ ങͬͯ΄͍͠ कͬͯ΄͍͠ དྷͯ΄͍͠ σβΠϯͱ͸Կ͔ʁ

  12. σβΠϯͱ͸Կ͔ʁ DESIGN ART ≠ σβΠϯ͸ΞʔτͰ͸ͳ͍ σβΠϯ͸ʮཧղʯ͞ΕΔ͜ͱ͕ॏཁ

  13. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁͩΖ͏͔ʁ KittenLT3 ৽͍͠ឺΛ࡞Ζ͏

  14. 1. ηϯε 2. ֶྺ 3. ؾ߹͍ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ

  15. 1. ηϯε 2. ֶྺ 3. ؾ߹͍ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ ΋ͪΖΜ΄ͱΜͲؔ܎ͳ͍

  16. 1. σβΠϯͷݪଇʹै͏ 2਺஋΍ਤΛ࢖͏ . ઌਓͷ஌ܙΛआΓΔ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ

  17. σβΠϯͷݪଇʹै͏ KittenLT3 ৽͍͠ឺΛ࡞Ζ͏

  18. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 σβΠϯͷݪଇʹै͏ ݪଇۙ઀ ؔ࿈͢Δ৘ใͷ༨ന͸ద੾ʁ ਓ͸Ґஔతʹ͍ۙ΋ͷΛ ʮؔ܎͕͋Δ΋ͷʯͱೝࣝ͢Δ शੑ͕͋Δͦ͏Ͱ͢ɻ Ͱ΋ɺ͜ͷࢿྉ͸Ͳ͏Ͱ͠ΐ͏ʁ ϞϊΫϩ

    Ϩου ϐϯΫ ΦϨϯδ άϦʔϯ ϒϧʔ
  19. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 σβΠϯͷݪଇʹै͏ ݪଇۙ઀ ؔ࿈͢Δ৘ใͷ༨ന͸ద੾ʁ ਓ͸Ґஔతʹ͍ۙ΋ͷΛ ʮؔ܎͕͋Δ΋ͷʯͱೝࣝ͢Δ शੑ͕͋Δͦ͏Ͱ͢ɻ ؔ܎͋Δ΋ͷ͸ۙ͘ɺ ؔ܎ͷͳ͍΋ͷ͸ԕ͘͠·͠ΐ͏ɻ

    ϞϊΫϩ Ϩου ϐϯΫ ΦϨϯδ άϦʔϯ ϒϧʔ
  20. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 σβΠϯͷݪଇʹै͏ ݪଇ੔ྻ ἧ͑ͳ͔ͬͨΒ ͜ͷ໊ࢗ͸ͲΜͳҹ৅Λड͚·͔͢ʁ ཁૉ͕ͩΒͩΒཏྻ͞Ε͍ͯΔΑ͏Ͱɺ Θ͔Γʹ͍͘ͱײ͡ΔͷͰ͸ʁ ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ؔޱཌྷ

    TSUBASA SEKIGUCHI 5JOZ,JUUFO  ˟౦ژ౎ઍ୅ా۠ઍ୅ా̍—̍ [email protected] https://tinykitten.me
  21. ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ؔޱཌྷ TSUBASA SEKIGUCHI 5JOZ,JUUFO  ˟౦ژ౎ઍ୅ా۠ઍ୅ా̍—̍ [email protected] https://tinykitten.me ݪଇ੔ྻ

    ἧ͑Δͱ ࢿྉʹ౷Ұײ͕ੜ·Εɺ Θ͔Γ΍͘͢ͳΔɻ ʮݟ͑ͳ͍ઢʯͰ ἧ͑Δ͜ͱ͕ϙΠϯτʂ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 σβΠϯͷݪଇʹै͏
  22. ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ؔޱཌྷ TSUBASA SEKIGUCHI 5JOZ,JUUFO  ˟౦ژ౎ઍ୅ా۠ઍ୅ా̍—̍ [email protected] https://tinykitten.me ݪଇ੔ྻ

    ἧ͑Δͱ ࢿྉʹ౷Ұײ͕ੜ·Εɺ Θ͔Γ΍͘͢ͳΔɻ ʮݟ͑ͳ͍ઢʯͰ ἧ͑Δ͜ͱ͕ϙΠϯτʂ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 σβΠϯͷݪଇʹै͏
  23. ݪଇڧऑ ৘ใͷ༏ઌ౓Λؾʹ͠ͳ͍ͱ ྫ͑͹ɺࠨͷදࢴΛݟ͍ͯͩ͘͞ɻ ͨͩจࣈΛཏྻͯ͠Δ͚ͩͰɺ Ͳͷ৘ใ͕ॏཁͳͷ͔Θ͔Γ·ͤΜɻ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 σβΠϯͷݪଇʹै͏ ڧ͍νʔϜͷ࡞Γํ ڧ͍νʔϜΛ࡞Δʹ͸Կ͕ඞཁ͔

    5JOZ,JUUFO ๭Πϕϯτ ๛ౡ۠ຽηϯλʔ
  24. ݪଇڧऑ ৘ใͷ༏ઌ౓Λؾʹ͠Α͏ ྫ͑͹ɺࠨͷදࢴΛݟ͍ͯͩ͘͞ɻ จࣈͷେ͖͞΍ଠ͞Λม͑Δ͚ͩͰɺ දࢴͷҹ৅͸มΘΓ·͢ɻ ΋ͪΖΜɺ͜ͷϨΠΞ΢τ͕ ਖ਼ղͱ͍͏Θ͚Ͱ͸͋Γ·ͤΜɻ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 σβΠϯͷݪଇʹै͏

    ڧ͍νʔϜͷ࡞Γํ ڧ͍νʔϜΛ࡞Δʹ͸Կ͕ඞཁ͔ TinyKitten ๭Πϕϯτ at ๛ౡ۠ຽηϯλʔ
  25. ݪଇ൓෮ ಛ௃తͳ΋ͷΛ ҙࣝతʹ܁Γฦ͠࢖͏ ৭΍ઢɺϞνʔϑɺϨΠΞ΢τͳͲΛ ಉ͡σβΠϯͷதͰ܁Γฦ͠࢖͏ͱ શମʹҰମײ͕ੜ·Ε·͢ɻ ͜ͷϧʔϧͷ͜ͱΛɺۀք༻ޠͰ τʔϯˍϚφʔʢτϯϚφʣͱ͍͍·͢ɻ ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 


    σβΠϯͷݪଇʹै͏
  26. ਺஋΍ਤΛ࢖͏ KittenLT3 ৽͍͠ឺΛ࡞Ζ͏

  27. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 ਺஋΍ਤΛ࢖͏ ͜ͷࢿྉ͸৴༻Ͱ͖Δʁ ਺஋͕ࣔ͞Ε͍ͯͳ͍࿩͸ɺ ͋·Γ৴༻͞Εͳ͍ɻ ΄͛ࣄۀͷ੒௕ ౰ࣾͷ΄͛ࣄۀʹ͓͍ͯɺ ೥͔Β೥ؒͰେ෯ͳ ੒௕Λ਱͛·ͨ͠ɻ

  28. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 ਺஋΍ਤΛ࢖͏ ͜ͷࢿྉ͸৴༻Ͱ͖Δʁ ਺஋͕͸͖ͬΓ͠·ͨ͠Ͷɻ Ͱ΋·ͩͩΊͰ͢ɻ ਤ͕ͳͯ͘෼͔ΓͮΒ͍ɻ ΄͛ࣄۀͷ੒௕ ౰ࣾͷ΄͛ࣄۀʹ͓͍ͯɺ ೥͔Β೥ؒͰച্͕ഒʹ

    ੒௕͠·ͨ͠ɻ
  29. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 ਺஋΍ਤΛ࢖͏ άϥϑ͸ద੾ʁ ਤΛ෇͚·ͨ͠ɻ Ͱ΋·ͩବ໨Ͱ͢Ͷɻ ݟΔଆͷϊΠζΛߟ͑·͠ΐ͏ɻ ΄͛ࣄۀͷ੒௕ ೥͔Β೥ؒͰച্͕ഒʹ੒௕

  30. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 ਺஋΍ਤΛ࢖͏ ྫͱͯ͠ ໌Β͔ʹແବͳ৘ใΛഉআ͠·ͨ͠ɻ ࢿྉΛݟ͍ͯΔਓ͸ ݁ՌΛ஌Γ͍͚ͨͩɻ ແବͳ૷০΍ɺ ϊΠζͱͳΔσʔλ͸ආ͚·͠ΐ͏ɻ ΄͛ࣄۀͷ੒௕

    ԯԁ ԯԁ     ೥͔Β೥ؒͰച্͕ഒʹ੒௕
  31. ઌਓͷ஌ܙΛआΓΔ KittenLT3 ৽͍͠ឺΛ࡞Ζ͏

  32. ͍͍ࢿྉΛ࡞ΔͨΊʹ͸Կ͕ඞཁ͔ʁ 
 ઌਓͷ஌ܙΛआΓΔ 4MJEFTIBSF౳ΛݟΔ σβΠϯͷηϯε͸ཁ͸Ҿ͖ग़͠ɻ εϥΠυ͕γΣΞ͞Ε͍ͯΔαΠτΛݟͯɺ ͍͍εϥΠυͷख๏Λ౪ΜͰΈΑ͏ɻ

  33. Photo by Christian Chen on Unsplash KittenLT3 2020.2.6 @ Online

    Tsubasa SEKIGUCHI LEA-3645969186565158903 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening!