サイトリニューアルでのスタイルガイドの活用

by m-yoshiro

Slide 1

Slide 1 text

サイトリニューアルでのスタイルガイドの活⽤松本芳郎 2018 / 12 / 8 Frontend Conference Fukuoka 2018 - 懇親会LT

Slide 2

Slide 2 text

松本芳郎デザイナー GMOペパボ株式会社ホスティング事業部ムームードメイングループ @bennkyougirai マツモトヨシロウ

Slide 3

Slide 3 text

話のネタ元 • ムームードメインのリニューアル！ • スタイルガイドを導⼊してコンポーネント開発を⾏った。ロゴもカッコよくなりました。

Slide 4

Slide 4 text

Contents • なぜ、スタイルガイドを導⼊したのか？ • スタイルガイドの導⼊ • よかったこと、課題サイトリニューアルでのスタイルガイドの活⽤

Slide 5

Slide 5 text

なぜ、スタイルガイドを導⼊したのか？

Slide 6

Slide 6 text

開発時の３つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが重複・バラバラ１ Button Button Button .btn { } .button{ }

Slide 7

Slide 7 text

開発時の３つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コーディング環境がないデザイナのコーディング着⼿ 2 エンジニアの開発着⼿デザイナーのコーディング着⼿時期が、エンジニアの着⼿より先⾏していた

Slide 8

Slide 8 text

開発時の３つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ 開発環境が３つある Nuxt.js PHP Rails 3 リニューアルしたページ購⼊フロー・ログイン古いページ

Slide 9

Slide 9 text

3つの課題を解決するために ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが  重複・バラバラ開発環境が３つあるコーディング環境がない１ 2 3

Slide 10

Slide 10 text

3つの課題を解決するために ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが  重複・バラバラ開発環境が３つあるコーディング環境がない１ 2 3 各コンポーネントを管理しやすくしたい独⽴してコーディングできる環境が欲しいスタイルを⼀元管理したいくわえて、

Slide 11

Slide 11 text

デザイナー視点でサービスの成⻑を⽀えるため、⼀貫したデザインを提供する仕組みが欲しい ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ

Slide 12

Slide 12 text

スタイルガイドを導⼊!!

Slide 13

Slide 13 text

ελΠϧΨΠυͷಋೖ ムームードメインのスタイルガイド

Slide 14

Slide 14 text

Fractal IMBのCarbon Design Systemでも使われてる ελΠϧΨΠυͷಋೖ • スタイルガイドツール • スタンドアローンで動作する • 以前の機能リリースで利⽤経験があった https://fractal.build/

Slide 15

Slide 15 text

開発フロー ελΠϧΨΠυͷಋೖ デザイン Nuxt.js PHP Rails スタイルガイド 3つの環境に配信コーディング npm install

Slide 16

Slide 16 text

開発フロー ελΠϧΨΠυͷಋೖ デザイン Nuxt.js PHP Rails スタイルガイド 3つの環境に配信 1.コンポーネントをきちんと管理 3.スタイルを⼀元管理 2.独⽴したコーディング環境 npm install コーディング

Slide 17

Slide 17 text

よかったこと、課題

Slide 18

Slide 18 text

よかったこと • リリース終盤でも壊れずらいコーディングが出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディングに集中できる Α͔ͬͨ͜ͱɺ՝୊

Slide 19

Slide 19 text

課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝୊

Slide 20

Slide 20 text

最後に

Slide 21

Slide 21 text

スタイルガイドを始めよてみませんか？ • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい

Slide 22

Slide 22 text

ご静聴ありがとうございました！