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
940
サイトリニューアルでのスタイルガイドの活用
Frontend Conference Fukuoka 2018 のLTで発表した資料です。
m-yoshiro
December 08, 2018
Tweet
Share
More Decks by m-yoshiro
See All by m-yoshiro
雑に出してみるデザイントークン適用率
myoshiro
0
51
デザイントークンの適用率計測とその活用
myoshiro
0
720
画像の減色処理とOctree
myoshiro
1
150
CSS Houdiniであそぶ
myoshiro
0
58
Template Literal Typesであそぶ
myoshiro
1
110
Selector-2-regexp というツールを作った
myoshiro
0
150
わたしたちのコーディングのUX
myoshiro
1
160
Data Studio Community Visualizationを触ってみた
myoshiro
1
420
UIデザインと関わろう
myoshiro
0
380
Other Decks in Design
See All in Design
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
UIをもたらすコンテクストの考察
securecat
8
2.4k
UXデザイナーというものが アジャイルに入ってみた!
muture
2
2k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
230
Wolf and the seven goatkids
_limex_
PRO
0
300
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
23
2.1k
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.2k
意志と、デザインと、ときどきお金
transit_kix
2
1.9k
Product-Writing
aguringo
5
2.7k
ウェブディレクターを救うBacklog
wattlaa
0
250
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.1k
リリース1ヶ月後で機能をなくした話
hinofu
1
650
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
71
5.1k
Music & Morning Musume
bryan
39
5.5k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Navigating Team Friction
lara
177
13k
Web Components: a chance to create the future
zenorocha
304
41k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
What the flash - Photography Introduction
edds
64
11k
What's in a price? How to price your products and services
michaelherold
236
11k
A Philosophy of Restraint
colly
195
15k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Docker and Python
trallard
33
2.6k
Building Your Own Lightsaber
phodgson
97
5.6k
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 コーディング
よかったこと、課題
よかったこと • リリース終盤でも壊れずらいコーディングが 出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディ ングに集中できる Α͔ͬͨ͜ͱɺ՝
課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝
最後に
スタイルガイドを始めよてみませんか? • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい
ご静聴ありがとうございました!