Slide 1
Slide 1 text
デザインシステムの力
Webデザイナーとエンジニアのための実践
ガイド
M T DDC M e et u p TO KYO 2 0 2 4 2 0 2 4 / 1 1 / 2 3
株 式 会 社 サ イ バ ー エ ー ジ ェ ン ト 原 一 成 ( @ h e r a b l o g )
Slide 2
Slide 2 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
スライドシェア
OKです！
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
原 一成 @herablog
Kazunari Hara
Amebaデザインシステム「Spindle」のテックリード。株
式会社サイバーエージェントのDeveloper Expertsとして
アクセシビリティ、パフォーマンス、デザインシステムな
どを活用したプロダクトの品質向上に従事しています。
おせち探しています
Slide 3
Slide 3 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
今日のトピックは、チームでのプロダクト開発のお話です
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 4
Slide 4 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
デザインとエンジニアリングの協働についてはCADC 2024でお話ししています
https://cadc.cyberagent.co.jp/2024/sessions/figma-with-engineering/
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 5
Slide 5 text
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . #MTDDC 2024.11.23
Ameba Design System ｜ Spindle
デザインシステムとは？
Amebaデザインシステム「Spindle」
Amebaデザインシステム「Spindle」の制作過程
Amebaデザインシステム「Spindle」の事例
デザインシステム「Spindle」の今と未来
デザインシステム運用の課題
Slide 6
Slide 6 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
What is
Design System?
デザインシステムとは？
Slide 7
Slide 7 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
一 般 的 に は 、 統 一 さ れ た デ ザ イ ン と ユ ー ザ ー 体 験 を 提 供 す る た め に 使 用 さ れ る
一 連 の ガ イ ド ラ イ ン 、 コ ン ポ ー ネ ン ト 、 ツ ー ル の 集 合 体 と 言 わ れ て い ま す
---
Button
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 8
Slide 8 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
プ ロ ダ ク ト 開 発 の た め の
イ ン フ ラ ス ト ラ ク チ ャ ー の ひ と つ
私 た ち は 、 デ ザ イ ン シ ス テ ム を プ ロ ダ ク ト 開 発 の た め の イ
ン フ ラ ス ト ラ ク チ ャ ー の ひ とつ だ と 考 えて い ま す。
ブ ラ ン ド と し て、 プ ロ ダ ク ト と し て、 目 指 し た い 方 向 に 向
か う た め の 第 一 歩 と し て 整 備 し 、 ス タ ー ト ラ イ ン を 定 義 し
た り ス ム ーズ に す る こ と を 目 指 し て い ま す。
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 9
Slide 9 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
FAQ
デザインシステムはどのように
作るとよいですか？
Slide 10
Slide 10 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
「 デ ザ イ ン シ ス テ ム 」 の イ メ ー
ジ を す り 合 わ せ ま し ょ う
「 デ ザ イ ン シ ス テ ム 」 は 誤 解 を 生 み や す い 用 語 の 一 つ で
す。 一 般 的 な そ の 定 義 や 成 果 物 は 結 果 的 に 構 成 さ れ た も の
か も し れ ま せ ん 。
ま ず は 、 ど の よ う な 課 題 が あ り、 ど の よ う に 解 決 す る と 良
い か 考 えて み ま し ょ う。 「 デ ザ イ ン シ ス テ ム 」 を つ く る こ
と は 目 的 で は あ り ま せ ん 。
※ 一方である程度大きい組織では「デザインシステム」があることを前提に話が進ん
だりもします
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 11
Slide 11 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
FAQ
上長や他の職種に協力してもらう
にはどうするとよいですか？
Slide 12
Slide 12 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
課題を共有しましょう
プロダクトやその開発における課題を分析し、客観的に共
有しましょう。数値のデータやユーザーインタビューの様
子を録画してまとめても良いかもしれません。
また、タイミングも重要で、自身が良いと思うこととプロ
ダクトや組織の状況のすり合わせも必要です。一番効果的
なのは必要とされているタイミングに素早く解決すること
です。
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 13
Slide 13 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
FAQ
デザインシステムの効果は
どれくらいですか？
Slide 14
Slide 14 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
S p i n d l e 3 x
デ ザ イ ン シ ス テ ム の 効 果 を 定 量 的 に 表 す の は と ても 難 し い
の で、 同 じ プ ロ ト タ イ プ を S p i n d l e ( デ ザ イ ン ト ー ク ン ・
U I ラ イ ブ ラ リ ) あ り ・ な し で 実 装 し 、 完 了 時 間 を 比 較 し て み
ま し た 。
結 果 は ・ ・ S p i n d l e を 使 う と な ん と 3 倍 は や く 開 発 で き ま し
た ！ さ ら に アク セ シ ビ リ ティ の 考 慮 な ど 漏 れ が な く 実 装 で
き ま し た 。
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 15
Slide 15 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
デ ザ イ ン シ ス テ ム が あ る と
開 発 を 委 託 す る と き も コ ミ ュ ニ ケ ー シ ョ ン や 実 装 が ス ム ー ズ で し た
Slide 16
Slide 16 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Ameba
Design System
Spindle
A m e b a デ ザ イ ン シ ス テ ム 「 S p i n d l e 」
Slide 17
Slide 17 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
デ ザ イ ン 原 則
ブ ラ ン ド ガ イ ド ラ イ ン
ビ ジ ュ ア ル ア イ デ ン テ ィ テ ィ
ア ク セ シ ビ リ テ ィ ガ イ ド ラ イ ン
イ ラ ス ト シ ス テ ム
U X ラ イ テ ィ ン グ ガ イ ド ラ イ ン
パ フ ォ ー マ ン ス ガ イ ド ラ イ ン
ス タ イ ル ガ イ ド
パ タ ー ン ラ イ ブ ラ リ ボ イ ス & ト ー ン
A m e b a ら し さ
Slide 18
Slide 18 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 19
Slide 19 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
グ ッ ド デ ザ イ ン 賞 受 賞
“ デ ザ イ ン シ ス テ ム は 、 概 念 と 現 実 の 不 整 合 が 起 こ り、 矛 盾
と ぶ つ か る こ と も 少 な く な い 。 で も そ れ を デ ザ イ ン 原 則 は
「 約 束 事 」 で あ って 強 く 縛 る ル ー ル で は な い と 明 示 し 、 わ
ず か 2 年 足 ら ず で 実 装 し た の は 見 事 で あ る と い え る 。 デ ザ
イ ン の 範 疇 が 、 色 形 な ど の 具 象 だ け で な く 、 企 業 価 値 を 問
い 、 表 現 す る も の と し て 捉 え ら れ る 今 、 A m e b a S p i n d l e
が 他 事 業 へ の 展 開 だ け で な く 、 他 業 界 を も リ ー ド す る 先 駆
け と し て、 デ ザ イ ン 業 界 全 体 を 前 進 さ せ て く れ る も の と 強
く 期 待 し て い る 。 ” 審査委員の評価コメントより
h t t p s : / / w w w. g - m a r k . o r g / g a l l e r y / w i n n e r s / 1 5 5 8 7 ? y e a r s = 2 0 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 20
Slide 20 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
O p e n S o u r c e
デ ザ イ ン シ ス テ ム 自 体 も 積 極 的 に 公 開 し 、 ブ ラ ン ド 化 。
品 質 を 維 持 し 、 継 続 的 に 更 新 す る こ と で 信 頼 性 を 担 保 す る
の に 役 立 って い ま す。
ア ウ ト プ ッ ト は 主 に 公 式 サ イ ト ( s p i n d l e . d e s i g n ) 、 F i g m a
C o m m u n i t y ( @ s p i n d l e ) , G i t H u b ( @ o p e n a m e b a /
s p i n d l e ) , S p e a k e r D e c k ( @ s p i n d l e ) , X
( @ A m e b a S p i n d l e ) で 公 開 し て い ま す。
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 21
Slide 21 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Development
Process
A m e b a デ ザ イ ン シ ス テ ム 「 S p i n d l e 」 の 制 作 過 程
Slide 22
Slide 22 text
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Ameba Design System ｜ Spindle
#MTDDC 2024.11.23
なぜ必要？
デザインシステムの必要性
Slide 23
Slide 23 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
時 は 2 0 1 9 年
Back to the past
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 24
Slide 24 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
異 動 し て き た ク リ エ イ テ ィ ブ デ ィ レ ク タ ー は 困 っ て い た の で あ っ た
( 何 を 軸 に し て 作 っ た ら い い ん だ ・ ・ み ん な ど う し て る ん だ ？ )
ク リ エ イ ティ ブ ディ レ クタ ー
まいったね
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 25
Slide 25 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
エ ン ジ ニ ア も 解 決 策 を 模 索 し て い た の で あ っ た
( ス タ イ ル ガ イ ド や ラ イ ブ ラ リ も あ る も の の 個 別 最 適 さ れ て い る な ぁ ・ ・ )
エ ン ジ ニ ア
もう一歩
踏み込みたい・・
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 26
Slide 26 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
1 6 年 の 歴 史 に お け る さ ま ざ ま な 変 化
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 27
Slide 27 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
A m e b a 像 が 抽 象 的 に な り
そ れ ぞ れ が 思 い 描 く A m e b a に 向 か っ て 開 発 が 進 ん で い ま し た
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 28
Slide 28 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
主 に 海 外 で デ ザ イ ン シ ス テ ム が 取 り 入 れ ら れ る 事 例 が 出 て き ま し た
エ ン ジ ニ ア
ク リ エ イ ティ ブ ディ レ クタ ー
デザインシステムの
エッセンス取り入れ
られないだろか
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 29
Slide 29 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
デ ザ イ ン ・ エ ン ジ ニ ア リ ン グ 両 方 に 詳 し く
海 外 ・ 国 内 の デ ザ イ ン シ ス テ ム に 知 見 が あ る 人 物 の 登 場 で あ る
デ ザ イ ン エ ン ジ ニ ア
デザインシステム
やっちゃいましょう
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 30
Slide 30 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
U I 大 好 き な デ ザ イ ナ ー も 加 わ り
デ ザ イ ン シ ス テ ム 開 発 プ ロ ジ ェ ク ト が 始 動
デ ザ イ ン エ ン ジ ニ ア B X デ ザ イ ナ ー U I デ ザ イ ナ ー エ ン ジ ニ ア
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 31
Slide 31 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
事 業 開 発 と 並 行 し て 、 ま ず は ブ ラ ン ド 構 築 フ ロ ー か ら ス タ ー ト
( デ ザ イ ン シ ス テ ム を つ く リ た い 気 持 ち を ぐ っ と 堪 え て )
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 32
Slide 32 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
チ ー ム で 「 A m e b a ら し さ 」 と は 何 な の か
デ ィ ス カ ッ シ ョ ン を 重 ね ま し た
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 33
Slide 33 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
そ う し て う ま れ た 、 ブ ラ ン ド コ ン セ プ ト や デ ザ イ ン 原 則 な ど な ど
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 34
Slide 34 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
そ う し て う ま れ た 、 ブ ラ ン ド コ ン セ プ ト や デ ザ イ ン 原 則 な ど な ど
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 35
Slide 35 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
準 備 完 了 ！
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 36
Slide 36 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Spindle
Case Study
A m e b a デ ザ イ ン シ ス テ ム 「 S p i n d l e 」 の 事 例
Slide 37
Slide 37 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
A m e b a の た め の デ ザ イ ン シ ス テ ム
A m e b a デ ザ イ ン シ ス テ ム 「 S p i n d l e 」 は A m e b a 向 け の デ
ザ イ ン シ ス テ ム な の で、 A m e b a で 利 用 さ れ て い る ツ ー ル や
技 術 ス タ ッ ク に 最 適 化 さ れ て い ま す。
特 に 、 F i g m a ・ G i t H u b ・ R e a c t の 利 用 を 前 提 に つ く ら れ て
い ま す。
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 38
Slide 38 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Design Tokens
デ ザ イ ン ト ー ク ン
Slide 39
Slide 39 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
A m e b a ら し い カ ラ ー パ レ ッ ト
ま ず 最 初 に 取 り 組 ん だ の は デ ザ イ ン ト ー ク ン、 特 に カ ラ ー
パ レ ッ ト で し た 。 当 時 新 し い 色 が 無 秩 序 に 生 ま れ て い た
り、 色 名 が 曖 昧 で 伝 達 ロ ス が あ る と い っ た 課 題 が あ り ま し
た 。
そ こ で、 A m e b a ブ ラ ン ド を 体 現 し た 構 造 的 で、 アク セ シ ブ
ル ( 十 分 な コ ン ト ラ ス ト 比 担 保 、 命 名 な ど ) な カ ラ ー パ レ ッ
ト を デ ザ イ ン ト ー ク ン 化 す る こ と を 試 み ま し た 。
h t t p s : / / d e v e l o p e r s . c y b e r a g e n t . c o . j p / b l o g / a r c h i v e s / 2 6 7 5 4 /
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 40
Slide 40 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
U t i l i z e
現 場 で 利 用
CSS
利 用
B u i l d
S p i n d l e r な E n g i n e e r が
生 成
F i g m a A P I と
St y l e D i ct i o n a r y で 書 き 出 し
D e s i g n
S p i n d l e r な D e s i g n e r が
F i g m a Va r i a b l e s で 定 義
デ ザ イ ン
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 41
Slide 41 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C S S と し て 書 き 出 し
F i g m a の 「 V a r i a b l e s 」 に 定 義 さ れ た デ ザ イ ン ト ー ク ン は
F i g m a A P I か ら 取 得 し D e s i g n To k e n s C o m m u n i t y
G r o u p s p e c に 変 換 さ れ た の ち 、 C S S で は カ ス タ ムプ ロ パ
ティ と し て 利 用 で き ま す。
カ ラ ー 以 外 に も 「 影 」 「 ア ニ メ ー シ ョ ン 」 も 定 義 さ れ て い
ま す。
/ / D e s i g n To k e n s ( C S S )
/ / P r i m i t i v e C o l o r s
/ / T h e m e C o l o r s
: r o o t {
}
- - p r i m a r y - g r e e n - 8 0
- - c o l o r - t e x t - a c c e n t - p r i m a r y
: # 2 3 7 b 3 1 ;
:
v a r ( - - p r i m a r y - g r e e n - 8 0 ) ;
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 42
Slide 42 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Icons
ア イ コ ン
Slide 43
Slide 43 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
A m e b a ら し い ア イ コ ン
A m e b a ブ ラ ン ド に 則 り、 「 A m e b a ら し い 」 形 状 ( 角 丸 、 精
密 よ り 過 度 な 省 略 ) の ガ イ ド ラ イ ン を 策 定 。 ま た 、 F i g m a や
実 装 で も 使 い や す く アク セ シ ブ ル な アイ コ ン を 出 力 で き る
仕 組 み を 作 成 し ま し た 。
具 体 的 に は 、 A m e b a S a n s を 基 に し た 曲 線 ガ イ ド ラ イ ン、
アク セ シ ビ リ ティ を 考 慮 し た 塗 り アイ コ ン の 併 用 、 アイ コ
ン フ ォ ン ト か ら S V G 画 像 へ の 移 行 な ど が あ り ま し た 。
h t t p s : / / d e v e l o p e r s . c y b e r a g e n t . c o . j p / b l o g / a r c h i v e s / 3 0 0 4 8 /
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 44
Slide 44 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
U t i l i z e
現 場 で 利 用
W e b, i O S , A n d ro i d
利 用
D e s i g n
S p i n d l e r な D e s i g n e r が
A d o b e I l l u st rato r
F i g m a
デ ザ イ ン
Pu b l i s h
S p i n d l e r な D e s i g n e r と E n g i n e e r が
公 開
G i t H u b A ct i o n s
B u i l d
S p i n d l e r な D e s i g n e r と E n g i n e e r が
生 成
F i g m a P l u g i n
F i g m a A P I
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 45
Slide 45 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
ア イ コ ン は F i g m a P l u g i n で 誰
で も 書 き 出 せ ま す
アイ コ ン を 書 き 出 す た め の プ ラ グ イ ン を F i g m a で 作 成 し ま
し た 。 従 来 の フ ロ ー で は アイ コ ン 作 成 後 、 デ ザ イ ナ ー か ら
エ ン ジ ニ ア に 依 頼 し な け れ ば な り ま せ んで し た 。
デ ザ イ ナ ー で も エ ン ジ ニ ア で も そ の 他 の 職 種 で も アイ コ ン
が で き た ら 書 き 出 せ 、 プ ロ ダ ク ト で す ぐ 使 え る よ う に な り
ま し た 。
書き出す
「heart」を選択
[{“id”: “177:4”, “name”: “heart”}]
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 46
Slide 46 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Illustrations
イ ラ ス ト
Slide 47
Slide 47 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
イ ラ ス ト レ ー シ ョ ン シ ス テ ム
イ ラ ス ト を つ く る こ と で な く ブ ラ ン ド バ リ ュ ー （ 親 し み や
す さ ・ 多 様 性 ） を あ ら わ す こ と を 目 的 に 作 成 し ま し た 。
さ ら に シ ス テ ム 化 す る こ と で、 誰 で も イ ラ ス ト を 作 成 し 、
プ ロ ダ ク ト や プ レ ゼ ン テ ー シ ョ ン に 利 用 で き る よ う に な り
ま し た 。
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 48
Slide 48 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
U t i l i z e
現 場 で 利 用
F i g m a
利 用
S e t U p
S p i n d l e r な D e s i g n e r と E n g i n e e r が
準 備
F i g m a
D e s i g n
S p i n d l e r な I l l u st rato r が
A d o b e I l l u st rato r
デ ザ イ ン
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 49
Slide 49 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 50
Slide 50 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
F i g m a で の イ ラ ス ト 作 成 は と て も 簡 単 で す
Slide 51
Slide 51 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
ア イ テ ム は 増 え 続 け 1 3 , 4 1 9 , 5 9 5 , 2 0 0 通 り
の パ タ ー ン が 作 成 可 能 で す ( 2 0 2 4 年 1 1 月 時 点 )
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 52
Slide 52 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Components
コ ン ポ ー ネ ン ト
Button
B a c k g r o u n d C o l o r
Te x t C o l o r / F o n t S i z e / L a b e l i n g
H e i g h t
W i d t h
Slide 53
Slide 53 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
A m e b a の た め の コ ン ポ ー ネ ン ト
コ ン ポ ー ネ ン ト は デ ザ イ ン ト ー ク ン や アイ コ ン を 活 用 し て
A m e b a ブ ラ ン ド を 体 現 し て い ま す。
初 期 段 階 で は ボ タ ン や フ ォ ー ム な ど プ リ ミ ティ ブ で ペ ー ジ
内 の 操 作 性 に 関 連 が 高 い も の か ら 作 成 し ま し た 。
A m e b a で の 利 用 を 想 定 し て、 R e a c t 版 と H T M L 版 が 用 意 さ
れ て い ま す。
/ / R e a c t
/ / H T M L
< B u t t o n >
< / B u t t o n >
< b u t t o n
>
< / b u t t o n >
v a r i a n t = S p i n d l e
c l a s s =
S p i n d l e
"c o n t a i n e d "
" s p u i - B u t t o n
s p u i - B u t t o n - - c o n t a i n e d "
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 54
Slide 54 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
S u g g e s t
提 案
S p i n d l e r o r 現 場 か ら
ア ウ ト プ ッ ト
D e s i g n
S p i n d l e r な D e s i g n e r が
F i g m a
要 件 定 義 と ス タ イ リ ン グ
D o c u m e n t
S p i n d l e r な D e s i g n e r と E n g i n e e r が
D e s i g n D o c s を 書 く
G i t H u b
D e v e l o p
S p i n d l e r な E n g i n e e r が
開 発
Sto r y b o o k & A p p
Pu b l i s h
現 場 で 利 用
S p i n d l e . a m e ba .d e s i g n
公 開
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 55
Slide 55 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
D e s i g n D o c
コ ン ポ ー ネ ン ト 作 成 時 に は 、 「 D e s i g n D o c 」 と 呼 ば れ る
設 計 書 を エ ン ジ ニ ア が デ ザ イ ナ ー と 協 力 し て 作 成 し ま す。
D e s i g n D o c に は コ ン ポ ー ネ ン ト が 作 ら れ た 背 景 や 設 計 の
ポ イ ン ト な ど ソ ース コ ー ド で は 表 現 で き な い 項 目 を 中 心 に
記 載 し ま す。
レ ビ ュ ー を 通 じ て 考 慮 で き て い な い 箇 所 を 洗 い 出 し た り、
合 意 形 成 の 役 割 も か ね て い ま す。
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
# コ ン ポ ー ネ ン ト 名
# # 背 景 ・ 概 要
# # 使 用 例
# # デ ザ イ ン ト ー ク ン
# # プ ロ パ テ ィ
# # 実 装 例
# # 関 連 リ ン ク
# # ア ク セ シ ビ リ テ ィ
Slide 56
Slide 56 text
A m e b a D e s i g n S y s t e m ｜ S p i n d l e
# M T D D C 2 0 2 4 . 1 1 . 2 3
は じ め か ら ア ク セ シ ブ ル で す
特 に 、 コ ン ポ ー ネ ン ト 実 装 の 初 期 段 階 か ら アク セ シ ビ リ
ティ を 考 慮 し て い ま す。
例 え ば ナ ビ ゲ ー シ ョ ン の コ ン ポ ー ネ ン ト を 作 成 す る 際 に は
「 A m e b a A c c e s s i b i l i t y G u i d e l i n e s 」 を 参 照 し 以 下 の よ
う な 項 目 を 考 慮 し て 要 件 と し て 定 義 し ま す。
情 報 や 関 係 性 を 明 確 に す る [ 必 須 ]
色 だ け で 伝 え な い [ 必 須 ]
現 在 位 置 を 確 認 で き る [ で き れ ば ]
h t t p s : / / a 1 1 y - g u i d e l i n e s . a m e b a . d e s i g n /
C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
Slide 57
Slide 57 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
One More Thing
Slide 58
Slide 58 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
このスライドもSpindleで
つくられています
Figma Slidesを使ってこれまでSpindleで作成した要素、
テキスト、カラー、イラストなどを取り込んで作成されて
います。
例えば、イラストの人物はスライド上でいくらでも変更で
きます。そのため、デザインに一貫性があり、作業効率も
格段に向上しました。
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 59
Slide 59 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Now and Future
デザインシステム「Spindle」の今と未来
Slide 60
Slide 60 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
#01
デザインとエンジニアリング
協働ワークフローの進化
Slide 61
Slide 61 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
開発拠点としての Figma
デザインフローの中でFigmaはチームの中に浸透していま
す。今後はこのFigmaを開発拠点としてその機能を最大限
活用し、プロダクト開発のワークフローのアップデートを
試みています。
直近では、FigmaのプラグインやDev Modeを活用し、デ
ザイナーとエンジニアのコミュニケーション改善、開発効
率化をおこなっています。
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 62
Slide 62 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
デザインからCodeの自動生成
Figma Dev Modeの中のCode Connectという機能を利用
して、実装済みコンポーネントのコード自動生成をおこ
なっています。プロパティやテキストが変わると同時に
ソースコードに反映されます。
最終的にコピー & ペーストで実装できることを目指してい
ます。将来的に生成AIの学習データとしても役立つことを
期待しています。
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 63
Slide 63 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
Figma Dev Modeに関しては、これまたCADC 2024でお話ししています
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 64
Slide 64 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
#02
デザインシステムの拡張構想
Slide 65
Slide 65 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
Spindle拡張計画
Spindleの利用が広がり、ある程度拡張性は持たせていた
ものの、「Amebaブログ」での利用を前提とした成果物で
は要望を満たせないことも出てきました。
現在「拡張パック」として複数のシチュエーションに対応
できる構想を練っています。
Spindleは新たな段階に・・！
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Slide 66
Slide 66 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
Challenges
デザインシステム運用の課題
Slide 67
Slide 67 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
#01
デザインシステムのメンテナンス
コスト
Slide 68
Slide 68 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
#02
初期の過剰な標準化や
創造性・柔軟性の欠如
Slide 69
Slide 69 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
#03
新しいツールやプロセスを学ぶた
めの時間が必要
Slide 70
Slide 70 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .
#04
組織全体への周知、コミュニケー
ションの課題
Slide 71
Slide 71 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
デザインシステムはチームの成果物です
Slide 72
Slide 72 text
#MTDDC 2024.11.23
Ameba Design System ｜ Spindle
Thank you!
@AmebaSpindle
続きは
Ask the Speakerでお
話ししましょう！
C o p y r i g h t @ 2 0 2 4 Cy b e rA ge n t A l l R i g h t s R e s e r v e d .