チームで取り組んだ Faniconフロントエンドのアップデート THECOO株式会社 開発部 エンジニア 藤田智也 tomoya Fujita 

自己紹介 

自己紹介 名前 藤田 智也　@to_m0ya 会社 THECOO ←ヤフー 得意 WEBフロントエンド 趣味 趣味でWEBサービスを作ってます 

過去に取り組んだプロジェクト Yahoo! JAPAN Tech Conference 2022 詳細はTechブログにあります↓ https://techblog.yahoo.co.jp/entry/2022030930270087/ 

会社・サービス概要 

THECOOについて 名称 THECOO（ザクー）株式会社 沿革 2014年設立
 2021年東証マザーズ上場 事業 v 会員制ファンコミュニティアプリ
 「Fanicon」の運P v インフルエンサーマーケティング スタジオBlackbox3 原宿オフィス 

Faniconについて ' 完全会員制のファンコミュニティアプ ' コミュニティの運営機能 コミュニティ機能 グループチャット ライブ・ラジオ配信 タイムライン投稿 スレッド、クイズ 多言語翻訳 マネタイズ機能 デジタルガチャ 有料スタンプ 有料いいね EC（物販） チケット販売 運営機能 アプリ/WEB決済 カスタマーサポート 投稿監視 ミュート/BAN データ分析機能 

このLTでお伝えすること 

＼Webフロントエンドのモダナイズ／ 

Webフロントエンドに関わる皆様の 今後の参考になれば幸いです！ 

AGENDA (5 デザインシステムの導" !5 Storybookの導" É5 Chromaticの導" 5 その他 

 デザインシステムの導入 

デザインシステムとは？ B8 ブランド・アイデンティテ& #8 スタイルガイ) 8 パターンライブラ% $8 運用のための仕組み https://zenn.dev/poteboy/articles/4739b882e22961 

Color / Primitives Primitives Black & White Black #000000 System black Black #000000 System black White #ffffff System white Label Primary Dark background secongary light White #ffffff System white Label Primary Dark background secongary light Gray colors.gray 50 #F9FAFB 50 #F9FAFB 100 #F5F6F7 Background Primary 100 #F5F6F7 Background Primary 200 #F2F2F2 200 #F2F2F2 300 #DCDCDC Separator Light 300 #DCDCDC Separator Light 400 #B6B5B5 Label Secondary dark 400 #B6B5B5 Label Secondary dark 500 #999999 Label Secondary light 500 #999999 Label Secondary light 600 #555555 Separator Dark 600 #555555 Separator Dark 700 #262626 Label Primary Dark 700 #262626 Label Primary Dark 800 #1C1C1E background secondary dark 800 #1C1C1E background secondary dark 900 #121212 BG Primary Dark 900 #121212 BG Primary Dark Red colors.red 50 #FEF2F2 50 #FEF2F2 100 #FEE2E2 100 #FEE2E2 200 #FECACA 200 #FECACA 300 #FCA5A5 300 #FCA5A5 400 #F87171 400 #F87171 500 #EF4444 System red dark 500 #EF4444 System red dark 600 #DC2626 System red Light 600 #DC2626 System red Light 700 #B91C1C 700 #B91C1C 800 #991B1B 800 #991B1B 900 #7F1D1D 900 #7F1D1D Orange colors.orange 50 #FFF3E1 50 #FFF3E1 100 #FFDFB4 100 #FFDFB4 200 #FFCB84 200 #FFCB84 300 #FFCB84 300 #FFCB84 400 #FFA532 400 #FFA532 500 #FF961D Primary Dark 500 #FF961D Primary Dark 600 #FF8B1C Primary Light 600 #FF8B1C Primary Light 700 #F87A1B 700 #F87A1B 800 #E46215 800 #E46215 900 #D34613 900 #D34613 Yellow colors.yellow 50 #FEFCE8 50 #FEFCE8 100 #FEF9C3 100 #FEF9C3 200 #FEF08A 200 #FEF08A 300 #FDE047 300 #FDE047 400 #FACC15 System yellow Light 400 #FACC15 System yellow Light 500 #EAB308 System yellow Light 500 #EAB308 System yellow Light 600 #CA8A04 600 #CA8A04 700 #A16207 700 #A16207 800 #854D0E 800 #854D0E 900 #713F12 900 #713F12 Green colors.green 50 #F0FDF4 50 #F0FDF4 100 #DCFCE7 100 #DCFCE7 200 #BBF7D0 200 #BBF7D0 300 #86EFAC 300 #86EFAC 400 #4ade80 400 #4ade80 500 #34C759 System Green dark 500 #34C759 System Green dark 600 #16A34A System Green light 600 #16A34A System Green light 700 #15803D 700 #15803D 800 #166534 800 #166534 900 #14532D 900 #14532D Blue colors.blue 50 #E3F1FF 50 #E3F1FF 100 #BCDCFF 100 #BCDCFF 200 #90C6FF 200 #90C6FF 300 #63B0FF 300 #63B0FF 400 #449EFF 400 #449EFF 500 #308DFF Secondary dark 500 #308DFF Secondary dark 600 #3680FC Secondary light 600 #3680FC Secondary light 700 #386CE7 700 #386CE7 800 #3859D4 800 #3859D4 900 #2942A0 900 #2942A0 Indigo colors.indigo 50 #FFF3E1 50 #FFF3E1 100 #FFF3E1 100 #FFF3E1 200 #FFF3E1 200 #FFF3E1 300 #FFF3E1 300 #FFF3E1 400 #FFF3E1 400 #FFF3E1 500 #FFF3E1 500 #FFF3E1 600 #FFF3E1 600 #FFF3E1 700 #FFF3E1 700 #FFF3E1 800 #3730A3 800 #3730A3 900 #312E81 900 #312E81 Purple colors.purple 50 #FFF3E1 50 #FFF3E1 100 #FFF3E1 100 #FFF3E1 200 #FFF3E1 200 #FFF3E1 300 #FFF3E1 300 #FFF3E1 400 #FFF3E1 400 #FFF3E1 500 #FFF3E1 500 #FFF3E1 600 #FFF3E1 600 #FFF3E1 700 #FFF3E1 700 #FFF3E1 800 #FFF3E1 800 #FFF3E1 900 #FFF3E1 900 #FFF3E1 Pink colors.pink Tailwind側に持たせてる一番低い階層の値 Figmaでコンポーネント化はしない 三角がついているものがTailwindのデフォルトプロパティを上書きするもの Color / Semantics Foundation Light Mode Background Content Inverse Inverse Border Background Dark Mode Background Content Border Background Core Extension La bel Pri ma ry #262626 gray 700 La bel Pri ma ry #262626 gray 700 La bel Sec onda ry #999999 gray 500 La bel Sec onda ry #999999 gray 500 La bel Te rtial y #555555 gray 600 30 % La bel Te rtial y #555555 gray 600 30 % Back ground Pri ma ry #F5F6F7 gray 100 Light mode の再背面に使用する色 Back ground Pri ma ry #F5F6F7 gray 100 Light mode の再背面に使用する色 Back ground Sec onda ry #FFFFFF White Light mode の背面に使用する色 Back ground Sec onda ry #FFFFFF White Light mode の背面に使用する色 Back ground Te rtia ry #FFFFFF White Light mode の最前面に使用する色 Back ground Te rtia ry #FFFFFF White Light mode の最前面に使用する色 Cont rol -back ground- c ol or #FFFFFF white 10 % Cont rol -back ground- c ol or #FFFFFF white 10 % La bel Pri ma ry #FFF white La bel Pri ma ry #FFF white La bel Sec onda ry #B6B5B5 gray 400 La bel Sec onda ry #B6B5B5 gray 400 La bel Te rtial y #B6B5B5 gray 400 40 % La bel Te rtial y #B6B5B5 gray 400 40 % Back ground Pri ma ry #121212 gray 900 dark mode の再背面に使用する色 Back ground Pri ma ry #121212 gray 900 dark mode の再背面に使用する色 Back ground Sec onda ry #1C1C1E gray 800 dark mode の背面に使用する色 Back ground Sec onda ry #1C1C1E gray 800 dark mode の背面に使用する色 Back ground Te rtia ry #262626 gray 700 Light mode の最前面に使用する色 Back ground Te rtia ry #262626 gray 700 Light mode の最前面に使用する色 Pri ma ry #FF8B1C Orange 600 Pri ma ry #FF8B1C Orange 600 Sec onda ry #3680FC blue 600 Sec onda ry #3680FC blue 600 Pri ma ry #FF961D Orange 500 Pri ma ry #FF961D Orange 500 Sec onda ry #308DFF blue 500 Sec onda ry #308DFF blue 500 Positive #16A34A green600 Positive #16A34A green600 Ne gative #DC2626 red 600 Ne gative #DC2626 red 600 Wa rni ng #EAB308 Yellow 500 Wa rni ng #EAB308 Yellow 500 Positive #34C759 green 500 Positive #34C759 green 500 Ne gative #EF4444 red 500 Ne gative #EF4444 red 500 Wa rni ng #FACC15 Yellow 400 Wa rni ng #FACC15 Yellow 400 Sepa rat or #DCDCDC Gray300 Sepa rat or #DCDCDC Gray300 Sepa rat or #555555 Gray300 Sepa rat or #555555 Gray300 iOS では実装の都合上、同じ値を以下の近似のカラーコンポーネントとして定義 tabbar-background-color navibar-background-color iOS では実装の都合上、同じ値を以下の近似のカラーコンポーネントとして定義 tabbar-background-color navibar-background-color back ground Ove rla y #000000 black 40 % モ ーダ ル背景のオ ーバ ーレイ などに使用 back ground Ove rla y #000000 black 40 % モ ーダ ル背景のオ ーバ ーレイ などに使用 back ground Ove rla y #000000 black 40 % モ ーダ ル背景のオ ーバ ーレイ などに使用 back ground Ove rla y #000000 black 40 % モ ーダ ル背景のオ ーバ ーレイ などに使用 Cont rol -back ground- c ol or #000000 black 5 % Cont rol -back ground- c ol or #000000 black 5 % La bel Inve rse Pri ma ry #FFF white La bel Inve rse Pri ma ry #FFF white La bel Inve rse Sec onda ry #B6B5B5 gray 400 La bel Inve rse Sec onda ry #B6B5B5 gray 400 La bel Inve rse Te rtia ry #B6B5B5 gray 400 40 % La bel Inve rse Te rtia ry #B6B5B5 gray 400 40 % La bel Inve rse Pri ma ry #262626 gray 700 La bel Inve rse Pri ma ry #262626 gray 700 La bel Inve rse Sec onda ry #999999 gray 500 La bel Inve rse Sec onda ry #999999 gray 500 La bel Inve rse Te rtia ry #555555 gray 600 30 % La bel Inve rse Te rtia ry #555555 gray 600 30 % Typography / Bland Bland Font Family iOSのシステム設定を踏襲 JP Hiragino Kaku Gothic Pro N EN Hurme Geometric Sans 3 

Typography / WEB App Primitives Font Family Primitives Tailwindの設定を踏襲 font-sans font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-serif font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 1rem // 16px text-xs font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。こ の 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in text-sm font-size: 0. 875rem; /* 1 4px */ line-height: 1.25rem; /* 20px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌 の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore text- base font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 2 4px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち 上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim text-lg font-size: 1.125rem; /* 1 8px */ line-height: 1.75rem; /* 2 8px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも 思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みなら Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. text-xl font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 2 8px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何 という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure text-2xl font-size: 1.5rem; /* 2 4px */ line-height: 2rem; /* 32px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々 我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。こ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad text-3xl font-size: 1. 875rem; /* 30px */ line-height: 2.25rem; /* 36px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中 で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワし Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum text- 4xl font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。し かもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt text- 5xl font-size: 3rem; /* 48px */ line-height: 1; 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい る。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate text-6xl font-size: 3.75rem; /* 60px */ line-height: 1; 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo text- 7xl font-size: 4.5rem; /* 72px */ line-height: 1; Typography / WEB App Semantics Display Heading La bel Paragraph Caption Display Medium text-6xl 60px Bold font-size: 3.75rem; /* 60px */ line-height: 1; 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間 Display Small text- 5xl 48px Bold font-size: 3rem; /* 48px */ line-height: 1; 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい る。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは Display x-Small text- 4xl 36px Bold font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。し かもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも Heading 2 text- 4xl 36px Bold font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。し かもあとで聞くとそれは書生という人間 中で 一番獰悪な種族であ ったそうだ。この書生というのは 時々我々を 捕えて 煮て 食うという 話である。しかしその当 時は何という 考も なか ったか ら別段恐しいとも La bel Medium text- base 16px Bold font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 2 4px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間 中で 一番獰悪な種族であ ったそうだ。この書生というのは 時々我々を 捕えて 煮て 食うという 話である。しかしその当 時は何という 考も なか ったか ら別段恐しいとも 思わなか った。ただ 彼の 掌に載せられて スーと 持ち 上げられた 時何だか フワフワした 感じがあ った ばか りである。 掌の 上で 少し 落ちつい dて書生の 顔を見たのがい わゆる人間というものの見始であ ろう。この 時妙なものだと 思った 感じが 今でも 残っている。 第一毛をも って 装飾され べきは ずの 顔がつるつるしてまるで 薬缶だ。その 後猫 にもだい ぶ逢ったがこん な片輪には 一度も 出会わした事が ない。の みならず顔の 真中があま りに突起している。そうしてその 穴の 中か ら時々ぷう ぷうと 煙を吾輩は猫である。 Paragraph Medium text- base 16px Regular font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 2 4px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち 上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。 Caption Medium 10px Regular font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 2 4px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。そ の 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。 La bel Small text-sm 1 4px Bold font-size: 0. 875rem; /* 1 4px */ line-height: 1.25rem; /* 20px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌 の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい Paragraph Small text-sm 1 4px Regular font-size: 0. 875rem; /* 1 4px */ line-height: 1.25rem; /* 20px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌 の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい Caption Small 9px Regular font-size: 0. 875rem; /* 1 4px */ line-height: 1.25rem; /* 20px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず 顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい Heading 1 text- 5xl 48px Bold font-size: 3rem; /* 48px */ line-height: 1; 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい る。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間 中で 一番獰悪な種族であ ったそうだ。この書生というのは La bel Large text-lg 1 8px Bold font-size: 1.125rem; /* 1 8px */ line-height: 1.75rem; /* 2 8px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも 思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみなら Paragraph Large text-lg 1 8px Regular font-size: 1.125rem; /* 1 8px */ line-height: 1.75rem; /* 2 8px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも 思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。この 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みなら Heading 4 text-2xl 2 4px Bold font-size: 1.5rem; /* 2 4px */ line-height: 2rem; /* 32px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々 我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。こ La bel x-Small text-xs 12px Bold font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間 中で 一番獰悪な種族であ ったそうだ。この書生というのは 時々我々を 捕えて 煮て 食うという 話である。しかしその当 時は何という 考も なか ったか ら別段恐しいとも 思わなか った。ただ 彼の 掌に載せられて スーと 持ち上げられた 時何だか フワフワした 感じがあ った ばか りである。 掌の 上で 少し 落ちついて書生の 顔を見たのがい わゆる人間というものの見始であ ろう。こ の 時妙なものだと 思った 感じが 今でも 残っている。 第一毛をも って 装飾され べきは ずの 顔がつるつるしてまるで 薬缶だ。その 後猫 にもだい ぶ逢ったがこん な片輪には 一度も 出会わした事が ない。の みならず顔の 真中があま りに突起している。そうしてその 穴の 中か ら時々ぷう ぷうと 煙を吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間 中で 一番獰悪な種族であ ったそうだ。この書生というのは 時々我々を 捕えて 煮て 食 Paragraph x-Small text-xs 12px Regular font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。こ の 時妙なもの だと思った感じが今でも残っている。第一毛を もって装飾されべきはずの 顔がつるつるしてまるで薬缶だ。その 後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。の みならず顔の 真中があまりに突起している。そうしてその 穴の 中から時々ぷうぷうと煙を 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々我々を 捕えて煮て食 Heading 5 text-2xl 2 4px Regular font-size: 1.5rem; /* 2 4px */ line-height: 2rem; /* 32px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを 見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この 書生というの は時々 我々を 捕えて煮て食うという話である。しかしその 当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の 掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の 上で少し落ちついて書生の 顔を 見たの がいわゆる人間というものの 見始であろう。こ Heading 6 text-xl 20px Bold font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 2 8px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間 中で 一番獰悪な種族であ ったそうだ。この書生というのは 時々我々を 捕えて 煮て 食うという 話である。しかしその当 時は何 という 考も なか ったか ら別段恐しいとも 思わなか った。ただ 彼の 掌に載せられて スーと 持ち上げられた 時何だか フワフワした 感じがあ った ばか りである。 掌の 上で 少し 落ちついて書生の 顔を見たのがい わゆる人間というものの見始であ ろう。この 時妙なものだと 思った 感じが 今でも 残っている。 第一毛をも って 装飾され べきは ずの 顔がつるつるしてまるで 薬缶だ。 Heading 3 text-3xl 30px Bold font-size: 1. 875rem; /* 30px */ line-height: 2.25rem; /* 36px */ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間 中 で 一番獰悪な種族であ ったそうだ。この書生というのは 時々我々を 捕えて 煮て 食うという 話である。しかしその当 時は何という 考も なか ったか ら別段恐しいとも 思わなか った。ただ 彼の 掌に載せられて スーと 持ち上げられた 時何だか フワフワし Display Large text- 8xl 96px Bold font-size: 6rem; /* 96px */ line-height: 1; 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何 でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい 

デザインシステムを導入するべきか？ 導入しなくていいケーG S 小規模チームで単一のサービスを
 開発していF S 小規模なプロジェクト 

デザインシステムの技術的な要素 ( 再利用可能なコンポーネン ( デザイントーク2 ( ドキュメント https://storybook.js.org/tutorials/design-systems-for- developers/react/en/introduction/ 

コンポーネント駆動開発（CDD）とは コンポーネントをボトムアップに 組み合わせてUIを作り上げる開発手法 https://www.componentdriven.org/ 

コンポーネント駆動開発の利点 利点 0 品% ( 耐久" & 開発速  開発効率 

No content

デザインシステム導入の流れ 1.現状のデザインとプロダクトを整理 2.進め方を決める 3.実施 

デザインシステム導入の流れ 1.現状のデザインとプロダクトを整理
 →WEBアプリ、ネイティブアプリ、運用系プロダクト 2.進め方を決める BIの確立 → Figmaでデザイン作成 → Vueでコンポーネントライブラリ作成 3.実施 

2. Storybookの導入 

Storybookとは？ UIコンポーネントをストーリーという単位 で管理することができるソフトウェ  コンポーネント単位で見た目・動作確  ドキュメント作成 https://storybook.js.org/ 

Storybook導入の流れ 1.何ができるか、どう使うと良さそうか練る 2.導入の意思決定 3.実装 

Storybook導入の流れ 1.何ができるか、どう使うと良さそうか練る →後述のChromaticと組み合わせて運用す ることに 

Storybookとa11y Storybookのa11yアドオンを導入すること で、自動的に問題を検出してくれる 

3. Chromaticの導入 

Chromaticとは？ E Storybookを簡単に公開でき& E UIテストで実装ミスを発 E UIレビューで変更の承認 https://www.chromatic.com/ 

Chromatic導入の流れ 1.できることの調査 2.GitHub Actionsの実装 3.運用方法の議論 4.周知 

Chromatic導入の流れ 1.できることの調査 W Storybookを簡単に公開でき8 W UIテストで実装ミスを発) W UIレビューで変更の承認 

Chromatic導入の流れ 2.GitHub Actionsの実装 

Chromatic導入後のワークフロー 現在 PM：仕様決め → デザイナー：デザイン作成 → エンジニア：実装 → PMチェック → QA 来年以降 PM：仕様決め → デザイナー：デザイン作成 → エンジニア：モック作成 → デザイナーチェック → エンジニア：API繋ぎこみ → PMチェック → QA 

その他 

その他 &2 テス% $2 リンター、フォーマッタ Ç2 TypeScripà 2 Vue 3 

まとめ a StorybookとChromaticを導入しつつCDDで
 開発することで開発体験を高めU a デザイナー、エンジニア、PMの効率的な
 ワークフローを構築すU a 新しいことをやるときは人を巻き込む 

ご清聴ありがとうございました！