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
130
デザイントークンの適用率計測とその活用
myoshiro
0
1.1k
画像の減色処理とOctree
myoshiro
1
300
CSS Houdiniであそぶ
myoshiro
0
150
Template Literal Typesであそぶ
myoshiro
1
180
Selector-2-regexp というツールを作った
myoshiro
0
230
わたしたちのコーディングのUX
myoshiro
1
270
Data Studio Community Visualizationを触ってみた
myoshiro
1
530
UIデザインと関わろう
myoshiro
0
510
Other Decks in Design
See All in Design
Dinosaur Mayhem
storyartist
PRO
0
150
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
210
OLTA株式会社/デザイン紹介資料
taxy
0
120
発表資料テンプレート / My slide template
thatblue
0
220
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
320
Dive Deep into Communication
yomtsu
0
220
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
120
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
270
「デザイン」を信じるには
iflection
0
120
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
930
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
GitHub's CSS Performance
jonrohan
1030
460k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Producing Creativity
orderedlist
PRO
344
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
BBQ
matthewcrist
87
9.5k
Why Our Code Smells
bkeepers
PRO
336
57k
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 コーディング
よかったこと、課題
よかったこと • リリース終盤でも壊れずらいコーディングが 出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディ ングに集中できる Α͔ͬͨ͜ͱɺ՝
課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝
最後に
スタイルガイドを始めよてみませんか? • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい
ご静聴ありがとうございました!