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

事業とカルチャーを進化させる、Amebaのブランド戦略とデザインシステム【CADC2022】

 事業とカルチャーを進化させる、Amebaのブランド戦略とデザインシステム【CADC2022】

15年を超える歴史を持つAmebaでは「Amebaらしさ」を改めて解釈するために、ブランドを再定義し、それを体現するためのデザインシステム「Spindle」を構築しました。今回は、Amebaという大きく長い歴史を持つサービスで、どのようなプロセスでブランドを定義、デザインシステム構築までに至ったのかを今日のデザインの役割と共にご紹介します。

2016ba6b977a2e6691811fa66d5f4336?s=128

CyberAgent
PRO

March 24, 2022
Tweet

More Decks by CyberAgent

Other Decks in Technology

Transcript

  1. None
  2. ෢ຊහ࣏ #9σβΠφʔσβΠϯσΟϨΫλʔ 504)*)"365",&.050

  3. CHAPTER1 ޿͕ΔσβΠϯͷ໾ׂ CHAPTER2 "NFCBͰͷέʔε CHAPTER3 ϒϥϯυ࠶ఆٛͷશϓϩηε ɹ1IBTFະདྷߏ૝ɺՁ஋ͷݦࡏԽ ɹ1IBTFΒ͠͞ͷڞ௨ݴޠԽ ɹ1IBTFઓུͷઃܭͱσβΠϯγεςϜ ɹ1IBTFΒ͠͞ͷମݱ

    CHAPTER4 ޮՌଌఆ CHAPTER5 ·ͱΊ Contents
  4. ޿͕ΔσβΠϯͷ໾ׂ CHAPTER 1 Design

  5. None
  6. ڱٛͷσβΠϯ͔Β ޿ٛͷσβΠϯɺܦӦͷσβΠϯ΁

  7. σβΠϯ͔ΒσβΠϯࢥߟ΁

  8. ίϩφՒʹͳ͔ͬͯΒ͸ओʹ0OMJOFXIJUFϘʔυͷ NJSPΛ࢖ͬͯ·͢

  9. None
  10. ࢀߟจݙɿ-BOEPSࣄྫͰֶͿϒϥϯσΟϯά

  11. None
  12. None
  13. ϒϥϯυମݧ͸ετʔϦʔςϦϯά

  14. "NFCBͰͷέʔε CHAPTER 2 Case

  15. Why ͳͥϒϥϯυͷ࠶ఆ͕ٛඞཁͩͬͨͷ͔ʁ ͔Βͷ࿩Ͱ͢

  16. "NFCB͸ϒϩάΛத৺ͱͨ͠ ϝσΟΞϓϥοτϑΥʔϜ

  17. ೥ͷྺ࢙ʹΑΔ༷ʑͳมԽ Ξϝʔόϒϩά஀ੜ ϩΰϦχϡʔΞϧ प೥ "NFCB1JHH஀ੜ εϚϗγϑτ    

    
  18. ੒ख़ظ͔Β࠶ੜظ΁ ੒௕ظ ಋೖظ ੒ख़ظ ࠶ੜظ ϒϥϯυ੒ख़ظ ϒϥϯυ࠶ੜظ ϒϥϯυ੒௕ظ ϒϥϯυಋೖظ

  19. ଞαʔϏεͷ୆಄

  20. ͞Βʹྺ࢙ͷ௕͔͞Βݹ͍ػೳ΍γεςϜ͕ ଟ͘࢒͓ͬͯΓɺେ͖ͳෛ࠴΋๊͍͑ͯͨɻ ·͍ͬͨͶ

  21. ࢢ৔ͷมԽɺαʔϏ ε΍૊৫ͷมԽʹ߹Θͤ ͯ ϒϥϯυ΋Ξοϓσʔτ͕ඞཁɻ

  22. ݟ͖͑ͯͨ໰୊

  23. ಺ଆ͔ΒΞοϓσʔτ

  24. l"NFCBΒ͠͞zͱ͸Կ͔ʁΛ໰͍ ɺ αʔϏ εͷϕΫτϧΛఆΊͯɺ ڧݻͳΧϧν ϟʔͷ૑ग़Λߦ͏ɻ ϒϥϯυ࠶ఆٛͷ໨త

  25. ϒϥϯυ࠶ఆٛͷશϓϩηε CHAPTER 3 Process 1IBTFະདྷߏ૝ɺՁ஋ͷݦࡏԽ 1IBTFΒ͠͞ͷڞ௨ݴޠԽ 1IBTFઓུͷઃܭͱσβΠϯγεςϜ 1IBTFΒ͠͞ͷମݱ

  26. None
  27. ࣄۀ੹೚ऀ αʔόʔαΠυ ΤϯδχΞ ϑϩϯτΤϯδχΞ #9σβΠφʔ 1. ޿ใ ฤू $4 69ΤϯδχΞ

    σβΠφʔ ϒϥϯυఆٛͷڞ૑ϝϯόʔ ܾఆऀ ϑΝγϦςʔλʔ
  28. ࣾ಺ΠϝʔδΞϯέʔτ ݱঢ়ʹ͍ͭͯ஌Δ

  29. None
  30. lҙࢤzΛ࣋ͬͯɺlϫϯνʔϜzͰະདྷΛߟ͑Δ ڞ૑σβΠϯ 1IBTF·ͱΊ

  31. None
  32. None
  33. None
  34. None
  35. None
  36. ϒϥϯυͱͯ͠େࣄʹ͍ͨ͠Ձ஋Λఆٛ͢Δɻ ϒϥϯυόϦϡʔ

  37. None
  38. Ұ؏ͨ͠ମݧՁ஋Λಧ͚ΔͨΊͷ࣮ߦݪཧɻ ϒϥϯυίϯηϓτ

  39. None
  40. l͋Γ͍ͨ࢟zɺlΒ͠͞zΛݴޠԽ͠ɺ ໨ࢦ͢ࢦ਑Λͭ͘Δɻ 1IBTF·ͱΊ

  41. None
  42. None
  43. ࣄۀʷϒϥϯυਁಁΛମݱ͢ΔϑϨʔϜ

  44. None
  45. ϒϥϯυνʔϜͷฤ੒ ˞ʙͷମ੍

  46. ϒϥϯυΛಧ͚͍ͨྖҬʹର͠ ঢ়ଶ໨ඪΛఆٛͯ͠ɺΞΫγϣϯΛग़͢ɻ 1IBTF·ͱΊ

  47. σβΠϯγεςϜ Design System

  48. None
  49. ϒϥϯυΛମݱ͢ΔͨΊͷखஈɺ࢓૊Έͱͯ͠ σβΠϯγεςϜߏஙʹ౤ࢿ൑அɻ

  50. ϒϥϯυͷύοέʔδԽ

  51. ੜ͖ͨίϯςϯπΛͭΉ͙ ʲ4QJOEMFʳ εϐϯυϧ ωʔϛϯάͱϩΰ

  52. σβΠϯݪଇ

  53. None
  54. Brand Guidelines ϒϥϯυΨΠυϥΠϯΛ࡞੒ͯ͠ڞ༗ɻ ΞϓσͷϦΞϧλΠϜੑΛҙࣝ͠ɺ'JHNBͰ؅ཧɻ

  55. Style Component

  56. Accessibility Performance

  57. Spindle Site

  58. σβΠϯγεςϜl4QJOEMFz͸ l"NFCBΒ͠͞zΛମݱ͢ΔͨΊͷ࢓૊Έɻ 1IBTFσβΠϯγεςϜ·ͱΊ

  59. None
  60. None
  61. None
  62. None
  63. Illustration Systems

  64. ϓϩμΫτɺࣾ಺πʔϧͳͲ ͋ΒΏΔ৔ॴͰϒϥϯυΛମݱ͍ͯ͘͠ɻ Ξ΢τϓοτ͠ͳ͕Βɺվળɺચ࿅Λ൓෮ɻ 1IBTF·ͱΊ

  65. ϒϥϯσΟϯά΋σβΠϯγεςϜ΋૊৫ͷ ͢΂ͯͷਓͨͪͷڠྗʹΑͬͯ੒Γཱͭɻ 1IBTF·ͱΊ

  66. ޮՌଌఆ CHAPTER 4 Measurement

  67. ྖҬ͝ͱͷϒϥϯυਁಁͷධՁ

  68. ࣾ಺ͰΞϯέʔτΛ࣮ࢪ

  69. ϒϥϯυͷਁಁ౓ΛՄࢹԽ ʙ ʙ ݱࡏਐߦத ʙ

  70. ࣾ֎ͷఆྔௐࠪΛ࣮ࢪ

  71. ྆໘͔ΒΞοϓσʔτ͕ඞཁ

  72. ·ͱΊ CHAPTER 5 Summary

  73. lҙࢤz͔Β࢝ΊΔϒϥϯυମݧσβΠϯͷϓϩηε

  74. ϒϥϯυͷ࢝·Γ͸lҙࢤz

  75. ϒϥϯυͱ͸lΒ͠͞z

  76. ϒϥϯσΟϯάͱ͸ lΒ͠͞zΛҰ؏ͯ͠ମݱ͠ଓ͚Δ͜ͱɻ

  77. ݟ͑ΔϞϊ͚͕ͩՁ஋Ͱ͸ͳ͘ɺͦ͜ʹࢸ ΔlϓϩηεzɺΒ͠͞Λମݱ͠ଓ͚ΔͨΊ ͷl౔୆࡞Γzʹ΋Ձ஋͕͋Δɻ͜Ε΋σβΠ ϯͰ͋Γɺϒϥϯυମݧʹͭͳ͕ Δɻ

  78. ϒϥϯυମݧ͸ετʔϦʔςϦϯά

  79. None