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
370
CSS Houdiniであそぶ
myoshiro
0
190
Template Literal Typesであそぶ
myoshiro
1
200
Selector-2-regexp というツールを作った
myoshiro
0
250
わたしたちのコーディングのUX
myoshiro
1
300
Data Studio Community Visualizationを触ってみた
myoshiro
1
580
UIデザインと関わろう
myoshiro
0
550
Other Decks in Design
See All in Design
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
380
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
490
What makes a great Director?
_limex_
0
260
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
110
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
130
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
210
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
minpaku-community-scrum-patterns
norinity1103
1
420
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
390
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Writing Fast Ruby
sferik
629
62k
How GitHub (no longer) Works
holman
315
140k
Being A Developer After 40
akosma
90
590k
Music & Morning Musume
bryan
46
6.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Facilitating Awesome Meetings
lara
56
6.6k
Designing for humans not robots
tammielis
254
25k
Become a Pro
speakerdeck
PRO
29
5.5k
Agile that works and the tools we love
rasmusluckow
330
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
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 コーディング
よかったこと、課題
よかったこと • リリース終盤でも壊れずらいコーディングが 出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディ ングに集中できる Α͔ͬͨ͜ͱɺ՝
課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝
最後に
スタイルガイドを始めよてみませんか? • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい
ご静聴ありがとうございました!