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
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
110
デザイントークンの適用率計測とその活用
myoshiro
0
1k
画像の減色処理とOctree
myoshiro
1
260
CSS Houdiniであそぶ
myoshiro
0
120
Template Literal Typesであそぶ
myoshiro
1
160
Selector-2-regexp というツールを作った
myoshiro
0
210
わたしたちのコーディングのUX
myoshiro
1
240
Data Studio Community Visualizationを触ってみた
myoshiro
1
510
UIデザインと関わろう
myoshiro
0
490
Other Decks in Design
See All in Design
アフォーダンスとシグニファイア
ryokanakai
1
320
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
410
Dreamia
elsh
0
170
Yahoo Newsletter Clicker Template
xuechunwu
0
290
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k
Slip N Slime - Character Design Ideation
thebogheart
0
310
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
150
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
Первая беседа о Карте реализации историй
ashapiro
0
290
太田博三(@usagisan2020)
otanet
0
190
Fleet Gas Station
joshtang
0
140
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Visualization
eitanlees
145
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
Gamification - CAS2011
davidbonilla
80
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Adopting Sorbet at Scale
ufuk
73
9.1k
Become a Pro
speakerdeck
PRO
25
5k
Building an army of robots
kneath
302
43k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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 コーディング
よかったこと、課題
よかったこと • リリース終盤でも壊れずらいコーディングが 出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディ ングに集中できる Α͔ͬͨ͜ͱɺ՝
課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝
最後に
スタイルガイドを始めよてみませんか? • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい
ご静聴ありがとうございました!