UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Design System】AmebaのSpindle

Amebaのデザインシステム「Spindle」の作成舞台裏について@hilokiさんの記事が参考になったのでメモ

note.com

始まりについて

  • ブランド設計や、その中身の設計や開発のところは強力なメンバーがいた
  • ブランディングを動機として始められた
  • 設計・開発の効率化や生産性を高めるというのが事業課題として顕在化していたので、投資するには絶好の機会だった
  • メンバーの兼業で、実体として個々人のキャパシティでいえば100%を越えている
  • 設計・開発するときに作らないといけないものをちゃんとドキュメントにして、ある程度の再利用性と拡張性を見込んだものをつくる、ということにちゃんと向き合った

自分のプロジェクトに照らし合わせた時に、「ブランディングの動機」は確かめる必要があると感じた

例えば、デザイナーから新しくスタイルガイドを作りたいといわれたとき、ちゃんとその動機を確認したい

デザイン原則について

  • Amebaのデザイン原則は「敬意・軽快・情緒・歓迎」
  • ワーディングはいまでも良いか悩んでいる
  • 教科書的な「デザイン原則」というものに縛られずに発想した
  • デザイン原則の内容やその在り方が変わる時が来ると思っている

デザイン原則は話し合われたことはない

1エンジニアではなかなか手が出しにくいが、デザイン原則なくしてデザインシステムはできないのでとりあえずでもなんとか明文化したい

ガイドラインについて

  • コンポーネントライブラリようなもの以外にも、アクセシビリティに関するガイドライン等、デザイナーや開発者ためだけのものではない重要なコンテンツがある
  • 順当に中心メンバー、デザイナーでやれることから進めていった
  • 早めに進めたかったことはコンテンツガイドライン
  • ただ単純に表記ゆれや「です・ます調」のような基準だけではなく、どういうときにどういう語りかけをするのか・そこにどういった「らしさ」を持つかといったところまでのガイドライン
  • 単純に文章に関するガイドだけでなく、エラーページやデータが0件の時のデザインといったものも含まれてくる

デザインシステムという表現について

  • 「デザインシステム」という呼称は内部ではほぼ使っていない
  • 日常的には「それSpindleにあるよ」とか「これはSpindleで定義したいね」などとやりとり
  • 万能ではないので「Spindleでは解決しないもの」というような定義もあると良いかも

継続について

  • Spindleではデザインシステムに関するチームモデルの考え方でいうと「連合モデル+中央集権モデル」のハイブリッド型
  • ガイドラインやライブラリといった成果物のデザイン以上に、組織をどうデザインするか・組織でどうデザインするか
  • スター的な人の頭の中にしかなかったものが、Spindleの中で資産化することによって受け継がれていくものしたいと考えている

他参考

https://spindle.ameba.design/

https://developers.cyberagent.co.jp/blog/archives/31641/