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
Improve a service workshop
mastervicedesign
1
110
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
290
Night Shift concept 9/15/2024
cpineda57
0
740
デザインスプリントを活かすチームの在り方
mixi_design
PRO
2
790
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
3
170
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.4k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
480
(第1回) アーキテクト・テックリード育成講座
masakaya
0
100
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
For a Future-Friendly Web
brad_frost
175
9.4k
Thoughts on Productivity
jonyablonski
67
4.3k
Unsuck your backbone
ammeep
668
57k
A designer walks into a library…
pauljervisheath
204
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Embracing the Ebb and Flow
colly
84
4.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Raft: Consensus for Rubyists
vanstee
136
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
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 コーディング
よかったこと、課題
よかったこと • リリース終盤でも壊れずらいコーディングが 出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディ ングに集中できる Α͔ͬͨ͜ͱɺ՝
課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝
最後に
スタイルガイドを始めよてみませんか? • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい
ご静聴ありがとうございました!