Upgrade to Pro — share decks privately, control downloads, hide ads and more …

チームで取り組んだWebフロントエンドのアップデート

 チームで取り組んだWebフロントエンドのアップデート

Tomoya Fujita

November 18, 2022
Tweet

Other Decks in Programming

Transcript

  1. Faniconについて ' 完全会員制のファンコミュニティアプ ' コミュニティの運営機能 コミュニティ機能 グループチャット ライブ・ラジオ配信 タイムライン投稿 スレッド、クイズ

    多言語翻訳 マネタイズ機能 デジタルガチャ 有料スタンプ 有料いいね EC(物販) チケット販売 運営機能 アプリ/WEB決済 カスタマーサポート 投稿監視 ミュート/BAN データ分析機能
  2. 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
  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; 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何 でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶してい
  4. Chromatic導入後のワークフロー 現在 PM:仕様決め → デザイナー:デザイン作成 → エンジニア:実装 → PMチェック →

    QA 来年以降 PM:仕様決め → デザイナー:デザイン作成 → エンジニア:モック作成 → デザイナーチェック → エンジニア:API繋ぎこみ → PMチェック → QA