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として アクセシビリティ、パフォーマンス、デザインシステムな どを活用したプロダクトの品質向上に従事しています。 おせち探しています
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」の今と未来 デザインシステム運用の課題
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 .
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 .
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 .
子を録画してまとめても良いかもしれません。 また、タイミングも重要で、自身が良いと思うこととプロ ダクトや組織の状況のすり合わせも必要です。一番効果的 なのは必要とされているタイミングに素早く解決すること です。 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 .
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 .
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 」
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 ら し さ
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 .
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 .
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 」 の 制 作 過 程
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 .
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 .
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 .
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 .
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 .
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 .
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 .
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 .
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 .
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 .
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 .
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 .
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 .
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 」 の 事 例
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 .
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 デ ザ イ ン ト ー ク ン
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 .
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 .
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 .
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 ア イ コ ン
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 .
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 .
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 .
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 イ ラ ス ト
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 .
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 .
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 .
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
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 .
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 .
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 . # コ ン ポ ー ネ ン ト 名 # # 背 景 ・ 概 要 # # 使 用 例 # # デ ザ イ ン ト ー ク ン # # プ ロ パ テ ィ # # 実 装 例 # # 関 連 リ ン ク # # ア ク セ シ ビ リ テ ィ
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 .
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 .
す。今後はこの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 .
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 .
は要望を満たせないことも出てきました。 現在「拡張パック」として複数のシチュエーションに対応 できる構想を練っています。 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 .
spindle
zakkerooni
takumasaito
hayashirine
tak073
motokoishida
ashapiro
gdgmontreal
haruki556
magi1125
okakasoysauce
cyberagentdevelopers
findyinc
sugarenia
addyosmani
smashingmag
csswizardry
hannesfritz
sonatard
rmw
thekraken
jonrohan
keathley
bkeepers
3n
