D E S I G N S Y S T E M 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 .

No content

# 0 1 About Spindle # 0 2 Spindle Case Study Icons / Illustrations / Components / Plugins # 0 3 After Spindle Contents 15min 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 .

#01 D E S I G N S Y S T E M 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 . Spindle About S p i n d l e と は

コラボレーションはデザイン システムを作るのに重要？ #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. Is collaboration important for creating a design system?

#01 D E S I G N S Y S T E M 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 . も ち ろ ん 。 チ ー ム で 使 え る も の に す る 必 要 が あ り ま す Yes. It needs to be something that can be used by the team.

チーム ガイドライン ライブラリ 抽 象 的 な 理 想 像 過去には様々な取り組みがありましたが、運用が続きませんでした There have been various challenges in the past, but they could not be overcome. #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.

チーム デザインシステム 問題を解決しチームを導くために、デザインシステムというツール(仕組み) を制作しました The design “system” was created to solve those problems and provide direction for the team. らしさ像 #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.

#01 D E S I G N S Y S T E M 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 . 文 化 ブ ラ ン ド ユ ー ザ ビ リ テ ィ 品 質 マ ー ケ テ ィ ン グ デ ザ イ ン 原 則 ブ ラ ン ド ガ イ ド ラ イ ン e t c ス タ イル ガ イ ド パ タ ー ン ラ イ ブ ラ リ ボ イ ス & ト ー ン プ ロ ダ ク ト デ ザ イ ン シス テム S p i n d l e は プ ロ ダ ク ト の 構 築 に 必 要 な ガ イ ド ラ イ ン や そ れ ら を 効 率 的 に 浸 透 さ せ る た め の 仕 組 み で す Spindle is a system that sets up guidelines for teams to produce products more efficiently.

使われて なんぼ Spindleで大事にしていること いくらよい思想やガイドライン、実装があっても 使われていなければ効果は減ってしまいます #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. It's only valuable when it's used.

必要になったもの からつくる 課題があり、必要とされている時がベストタイミングです すでに使われることが確定しているため、あとは作るだけです #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. Spindleで大事にしていること The best timing is when problems need to be solved.

積極的に公開 ブランド化 デザインシステム自体もブランド化して一貫性や信頼性を担保しました 情報を探しやすくもなりました #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. Spindleで大事にしていること The design system itself has also made open source and branded to ensure consistency and reliability.

#01 D E S I G N S Y S T E M 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 . そ の た め に 公 式 サ イ ト 運 営 、 記 事 執 筆 や X 投 稿 も 積 極 的 に 行 な って い ま す For that reason, we are actively managing official websites, writing articles, and making X posts.

Case Study Spindle S p i n d l e で の 作 成 事 例 #02 D E S I G N S Y S T E M 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 .

Example 1 Icons #02 D E S I G N S Y S T E M 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 .

#02 D E S I G N S Y S T E M 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 . Utilize 現場で利用 Web, iOS, Android 利用 Design SpindlerなDesignerが Adobe Illustrator Figma デザイン Publish SpindlerなDesignerとEngineerが 公開 GitHub Actions Build SpindlerなDesignerとEngineerが 生成 Figma Plugin Figma API

カスタムフォントAmebaSans からの計算結果に基づいて、線の 太さと角度が自動的に決まるよう にガイドラインを作成。 誰でもアイコンを作れるようにな りました #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. We have created guidelines so that the thickness and angle of lines are automatically determined based on calculation results from the custom font, ‘AmebaSans’. Now, anyone can create an icon.

#04 D E S I G N S Y S T E M S p i n d l e C o p y r i g h t @ 2 0 2 1 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 . 書き出す 「heart」を選択 [{“id”: “177:4”, “name”: “heart”}] F i g m a P l u g i n で 書 き 出 す ア イ コ ン を 指 定 し 、 G i t H u b A c t i o n の ワ ー ク フ ロ ー を 実 行 し ま す You can specify the icon to export and to execute a GitHub action workflow in a Figma Plugin.

// code figma.on(' ', () => { const selection = figma.currentPage.selection.map(node => ({ id: node.id, name: node.name })); ({ type: 'selection', selection }); }); // ui window.addEventListener(‘message’, event => { if (event.origin !== 'https://www.figma.com') return; textField.value = JSON.stringify( , null, 0); }, false); button.addEventListener(click, () => { fetch(' /repos/openameba/spindle/actions/workflows/..., {...}) }, false); selectionchange figma.ui.postMessage event.data.pluginMessage.selection https://api.github.com D E S I G N S Y S T E M 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 .

Github Action workflowでは アイコンの書き出しと Pull Requestの作成 がおこなわれます name: build icon from Figma on: workflow_dispatch: inputs: selection: description: type: string default: '[]' required: true jobs: build_icons: runs-on: ubuntu-latest steps: - name: run: | npm run build svgr - name: Stringified array of the selected nodes (id, name) Build Icons Create Pull Request In the Github Action workflow, the icon is exported and a Pull Request is created. #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.

Figma APIを使って SVGとPDFを ダウンロードします import * as Figma from 'figma-api'; const api = new Figma.Api({ personalAccessToken: 'my token' }); const svgNode = await (fileKey, { ids: nodeId, scale: 1, , svg_simplify_stroke: true, }); const svgUrl = svgNode.images[nodeId]; await download({ destination: `${dest}/svg-unoptimized/${name}.svg`, url: svgUrl, }), figma.getImage format: 'svg' SVG and PDF files are downloaded with the Figma API. #02 Copyright @2024 CyberAgent All Rights Reserved.

書き出されたアイコンは npm, 公式サイト, GitHub で配信され、どの職種でも いつでも利用できます The exported icons are distributed through npm, the official website, and GitHub. They can be used by anyone at any time. ※ The icon is licensed under Creative Commons BY-NC-ND 4 #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.

Example 2 Illustrations #02 D E S I G N S Y S T E M 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 .

イラストをつくることでなく ブランドバリュー（親しみやすさ・多様性） をあらわすことが目的 #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. The purpose is not to create illustrations, but to express our brand values, such as approachability and diversity.

#02 D E S I G N S Y S T E M 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 . Utilize 現場で利用 Figma 利用 Set Up SpindlerなDesignerとEngineerが 準備 Figma Design SpindlerなIllustratorが Adobe Illustrator デザイン

#02 D E S I G N S Y S T E M 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 .

#02 D E S I G N S Y S T E M 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 .

#02 D E S I G N S Y S T E M 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 . We have set up a playground where anyone can try out combinations of illustrations. Playgroundを用意して 誰でもイラストの組み合わせを 試せるよ うにし ました

#02 D E S I G N S Y S T E M 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 .

というわけで現在進行系で プロダクトにいろんなイラストが増殖中、 情緒や親しみやすさが広がりつつあります 記事が公開されました 公開した記事を確認する 本日も投稿お疲れ様でした アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤ…さんの 素敵な記事をもっと見てもらいませんか？ 記事を共有する Twitter Facebook リンクをコピー 生きたコンテンツをつむぐ その人らしさ、感情、気持ちがありのままに書かれたブログ。 心を揺さぶる漫画や、励ましてくれる占い。 Amebaにあるのは、そんな「生きたコンテンツ」です。 さまざまなコンテンツとAmebaで出会い、その時の心情をブログにつづる。 そのブログを見た誰かが、また新しい価値にめぐりあう。 Amebaブログでは現在、 メンテナンスを行っております。 メンテナンスの詳細については「メンテナン スについて」ページをご確認ください。 メンテナンスについて Our product is full of friendly illustrations. #02 Copyright @2021 CyberAgent All Rights Reserved.

Example 3 Components #02 D E S I G N S Y S T E M 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 . Button Background Color Text Color / Font Size / Labeling Height Width

#02 D E S I G N S Y S T E M 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 . Suggest 提案 Spindler or 現場から Design SpindlerなDesignerが Figma 要件定義とスタイリング Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Publish 現場で利用 Spindle.ameba.design 公開 アウトプット

Design Docにはコンポーネントが作 られた背景や設計のポイントが記載され ます レビューを通じて考慮できていない箇所 を洗い出したり、合意形成の役割もかね ています # コンポーネント名 ## 背景・概要 ## 使用例 ## デザイントークン ## プロパティ ## 実装例 ## 関連リンク ## アクセシビリティ The Design Doc contains the background and key design points of the components. During the review process using the doc, we identify areas that have not been considered and also serve the role of forming consensus. #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.

　情報や関係性を明確にする[必須] 　色だけで伝えない[必須] 　テキストのコントラストを確保する[必須] 　キーボード、タッチデバイスで操作できる[必須] 　現在位置を確認できる[できれば] #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. Ensure clear information and relationships [Required] Do not communicate only with colors [Required] Ensure text color contrast [Required] Ability to operable with keyboard and touch devices [Required] Ability to confirm current location [If possible]

#02 D E S I G N S Y S T E M 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 . S p i n d l e 使 って い れ ば ア ク セ シ ブル Using Spindle, it becomes accessible.

#02 D E S I G N S Y S T E M 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 . We b 向 け の コ ン ポ ー ネ ン ト は デ ザ イ ン ト ー ク ン ( C S S ) と ス タ イ ル ( C S S ) 、 実 装 ( R e a c t ) で 作 ら れ て い ま す C S S を 使 え ば R e a c t で な く て も あ る 程 度 の ス タ イ ル ・ 動 作 の 一 貫 性 は 担 保 で き ま す // Design Tokens (CSS Version) :root { : var(--primary-green-80); } // React < variant=”contained”> Go Go --color-text-accent-primary Button spui-Button spui-Button--large spui-Button--contained The components for the web are created with design tokens (CSS), styles (CSS), and implementation (React). With CSS, we can ensure a certain level of style and behavior consistency, even without React.

#02 D E S I G N S Y S T E M 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 . F i g m a や S t o r y b o o k で 公 開 さ れ て い る た め 、 簡 単 に 利 用 で き ま す Spindle is published on Figma and Storybook for ease of use.

Example 4 Plugins #02 D E S I G N S Y S T E M 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 . 文章をリセット チェックする チェック結果 あめーば Ameba つくる、つむぐ、つづく つくる、つむぐ、つづく、 一つの文で"、"を3つ以上使用しています “することができます"は冗長な表現です。"することが"を省き 簡潔な表現にすると文章が明瞭になります。 解説: https:// github.com/textlint-ja/textlint-rule-ja-no-redundant- expression#dict2

#02 D E S I G N S Y S T E M 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 . Create SpindlerなDesignerとEngineerが 作成 GitHub Utilize 現場で利用 Figma Plugin 利用

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（スピンドル）は"Amebaらし さ"を一貫してユーザーに届けるための仕組みで す。"Amebaらしさ"がユーザーに届き、共感が生まれるこ とで、サービスの信頼へとつながります。 "つくる、つむぐ、つづく、"を体現するために、Spindleを 軸にして"あめーばらしさ"をつくりますすることができま す。 文章をリセット チェックする Ameba Text Linterへようこそ 使い方 ¦ チェックしたいtextレイヤーを選択してください£ œ 「チェックする」ボタンを押してください£ ‰ 結果が出力されるので、必要に応じて本文を修正し てください。 F i g m a で T e x t N o d e を 選 択 す る と プ ラ グ イ ン の t e x t a r e a に 反 映 さ れ ま す W h e n a Te x t N o d e i s s e l e c t e d i n F i g m a , i t i s r e fl e c t e d i n t h e p l u g i n ' s t e x t a r e a .

// code if (['figma', 'figjam', 'dev'].includes(figma.editorType)) { figma.on(' ', () => { const TextNodes = figma.currentPage.selection.filter(node => node.type === 'TEXT'); const text = TextNodes.map(node => node.characters).join('\n'); figma.ui.postMessage({type: 'text', text}); } } // ui window.addEventListener(‘message’, event => { if (event.origin !== 'https://www.figma.com') return; if (event.data.pluginMessage.type === 'text') { ; } }, false); selectionchange textarea.textContent = event.data.pluginMessage.text D E S I G N S Y S T E M 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 .

#02 D E S I G N S Y S T E M 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 . A Spindle illustration is displayed during the text check. The person who appears is Mr. J, the Creative Director of Spindle. 文章をリセット チェックする Ameba Text Linterへようこそ 使い方 „ チェックしたいtextレイヤーを選択してくださいŠ ƒ„ 「チェックする」ボタンを押してくださいŠ p„ 結果が出力されるので、必要に応じて本文を修正し てください。 Jチェック中... テキストチェック中には Spindleイラストが表示され ます。 登場するのは Spindleのク リエイティブディレクター Jさんで す

#02 D E S I G N S Y S T E M 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 . このFigma pluginは、 HTML・CSS版のSpindle UIと Lintサーバー(textlint)で作られてい ます。 こだわりポ イントは、 scrollIntoView()メソッド を使った該当箇所の強調表示で す デザインシステムSpindle（スピンドル）は"Amebaらし さ"を一貫してユーザーに届けるための仕組みで す。"Amebaらしさ"がユーザーに届き、共感が生まれる ことで、サービスの信頼へとつながります。 "つくる、つむぐ、つづく、"を体現するために、Spindle を軸にして"あめーばらしさ"をつくりますすることができ ます。 文章をリセット チェックする チェック結果 あめーば Ameba つくる、つむぐ、つづく つくる、つむぐ、つづく、 一つの文で"、"を3つ以上使用しています “することができます"は冗長な表現です。"することが"を省き 簡潔な表現にすると文章が明瞭になります。 解説: https:// github.com/textlint-ja/textlint-rule-ja-no-redundant- expression#dict2 This Figma plugin is made with the HTML/CSS version of the Spindle UI and a Lint server (textlint).  The key point is the emphasis of the relevant section using the scrollIntoView() method.

function handleItemHover() { ... highlightedElement. ({ behavior: 'smooth', block: 'center' }); } scrollIntoView デザインシステムSpindle（スピンドル）は"Amebaらし さ"を一貫してユーザーに届けるための仕組みで す。"Amebaらしさ"がユーザーに届き、共感が生まれる ことで、サービスの信頼へとつながります。 "つくる、つむぐ、つづく、"を体現するために、Spindle を軸にして"あめーばらしさ"をつくりますすることができ ます。 文章をリセット チェックする チェック結果 あめーば Ameba つくる、つむぐ、つづく つくる、つむぐ、つづく、 一つの文で"、"を3つ以上使用しています “することができます"は冗長な表現です。"することが"を省き 簡潔な表現にすると文章が明瞭になります。 解説: https:// github.com/textlint-ja/textlint-rule-ja-no-redundant- expression#dict2 #02 D E S I G N S Y S T E M 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 .

#02 D E S I G N S Y S T E M 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 . Slack版も用意されてお り、 開発者ではない方も活用しています。 Slack上で議論、即改善することもあり ます A version running on slack is also available, which is used by people who are not developers. Discussions are held on Slack, and improvements can be made immediately.

#03 D E S I G N S Y S T E M 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 . Spindle After S p i n d l e そ の 後

#03 D E S I G N S Y S T E M 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 . デ ザ イ ン シス テム が で き た 後 、 品 質 担 保 の た め の 不 必 要 な 実 装 や コ ミ ュ ニ ケ ー シ ョ ン の 時 間 が 減 り ま し た 事 業 的 要 件 体 験 設 計 ク リ エ イ テ ィ ビ テ ィ プ ロ ダ ク ト 品 質 担 保 負 債 解 消 コ ミ ュ ニ ケ | シ ョ ン The design system “Spindle” has reduced unnecessary designing, programming and communication in the team.

#03 D E S I G N S Y S T E M 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 . チ ー ム デザインシステム S p i n d l e は F i g m a や O S S 等 コ ラ ボ レ ー シ ョ ン し や す い 方 法 で 作 ら れ て い る た め よ り 生 産 的 に な り 続 け ま す ら し さ Spindle increases the productivity of the team because it works in conjunction with collaborative tools such as Figma and OSS.

D E S I G N S Y S T E M 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 . 以 上 で 発 表 を 終 了 し ま す 、 ご 清 聴 あ り が と う ご ざ い ま し た Thank you for your attention. If you have any questions or comments, please feel free to ask. @spindle @openameba/spindle S p i n d l e U I の つ く り か た A m e b a ブ ロ グ B r a n d G u i d e l i n e s 「 A m e b a 」 ア イ コ ン 刷 新 　 一 貫 性 と 再 現 性 追 求 の た め の 設 計 術 事 業 と カ ル チ ャ ー を 進 化 さ せ る 、 A m e b a の ブ ラ ン ド 戦 略 と デ ザ イ ン シス テム