Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サイトリニューアルでのスタイルガイドの活用
Search
m-yoshiro
December 08, 2018
Design
3
1.1k
サイトリニューアルでのスタイルガイドの活用
Frontend Conference Fukuoka 2018 のLTで発表した資料です。
m-yoshiro
December 08, 2018
Tweet
Share
More Decks by m-yoshiro
See All by m-yoshiro
雑に出してみるデザイントークン適用率
myoshiro
0
170
デザイントークンの適用率計測とその活用
myoshiro
0
1.1k
画像の減色処理とOctree
myoshiro
1
350
CSS Houdiniであそぶ
myoshiro
0
170
Template Literal Typesであそぶ
myoshiro
1
200
Selector-2-regexp というツールを作った
myoshiro
0
250
わたしたちのコーディングのUX
myoshiro
1
300
Data Studio Community Visualizationを触ってみた
myoshiro
1
570
UIデザインと関わろう
myoshiro
0
540
Other Decks in Design
See All in Design
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.5k
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
330
「UXとUIの違い」v2
shirasu3
0
140
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
300
minpaku-community-scrum-patterns
norinity1103
1
170
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
210
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
370
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
320
portfolio_YumiYasuda
yum0418
0
300
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
710
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Faster Mobile Websites
deanohume
308
31k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Side Projects
sachag
455
43k
Embracing the Ebb and Flow
colly
86
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
What's in a price? How to price your products and services
michaelherold
246
12k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
サイトリニューアルでの スタイルガイドの活⽤ 松本 芳郎 2018 / 12 / 8 Frontend
Conference Fukuoka 2018 - 懇親会LT
松本 芳郎 デザイナー GMOペパボ株式会社 ホスティング事業部 ムームードメイングループ @bennkyougirai マツモト ヨシロウ
話のネタ元 • ムームードメインのリニューアル! • スタイルガイドを導⼊してコンポーネント 開発を⾏った。 ロゴもカッコよくなりました。
Contents • なぜ、スタイルガイドを導⼊したのか? • スタイルガイドの導⼊ • よかったこと、課題 サイトリニューアルでのスタイルガイドの活⽤
なぜ、スタイルガイドを導⼊したのか?
開発時の3つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが重複・バラバラ 1 Button Button Button .btn { }
.button{ }
開発時の3つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コーディング環境がない デザイナの コーディング着⼿ 2 エンジニアの 開発着⼿ デザイナーのコーディング着⼿時期が、エンジニアの着⼿より先⾏していた
開発時の3つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ 開発環境が3つある Nuxt.js PHP Rails 3 リニューアル したページ 購⼊フロー・ログイン
古いページ
3つの課題を解決するために ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが 重複・バラバラ 開発環境が3つある コーディング環境がない 1 2 3
3つの課題を解決するために ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが 重複・バラバラ 開発環境が3つある コーディング環境がない 1 2 3 各コンポーネントを管理しやす
くしたい 独⽴してコーディングできる環 境が欲しい スタイルを⼀元管理したい くわえて、
デザイナー視点で サービスの成⻑を⽀えるため、 ⼀貫したデザインを提供する仕組みが欲しい ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ
スタイルガイドを導⼊!!
ελΠϧΨΠυͷಋೖ ムームードメインのスタイルガイド
Fractal IMBのCarbon Design Systemでも使われてる ελΠϧΨΠυͷಋೖ • スタイルガイドツール • スタンドアローンで動作する •
以前の機能リリースで利⽤経験があった https://fractal.build/
開発フロー ελΠϧΨΠυͷಋೖ デザイン Nuxt.js PHP Rails スタイルガイド 3つの環境に配信 コーディング npm
install
開発フロー ελΠϧΨΠυͷಋೖ デザイン Nuxt.js PHP Rails スタイルガイド 3つの環境に配信 1.コンポーネントをきちんと管理 3.スタイルを⼀元管理
2.独⽴したコーディング環境 npm install コーディング
よかったこと、課題
よかったこと • リリース終盤でも壊れずらいコーディングが 出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディ ングに集中できる Α͔ͬͨ͜ͱɺ՝
課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝
最後に
スタイルガイドを始めよてみませんか? • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい
ご静聴ありがとうございました!