entry-header-eye-catch.html
entry-title-container.html

entry-header-author-info.html
Article by

チームごとに色づいたピクシブのStorybook運用

こんにちは、pixivでUX/UIエンジニアをやっている@do7beです。今回はピクシブ株式会社の各チームで採用しているStorybookの運用体制についてご紹介したいと思います。

Storybookについて

StorybookはUIのカタログようなツールで、コンポーネントの一覧表示や、デザインの保証や動作検証に役立ちます。

このStorybookを採用することが、割れ窓に対する解答なのではないかとこの頃は思っています。Storybookの詳細な説明については他のアドベントカレンダーなどの記事にまとまっていますので割愛して、今回は社内でのStorybookの運用についてお話したいと思います。

チームごとの特色が出る運用体制

まだ導入してから日は浅いですが、pixivだけでなくピクシブ株式会社の様々なサービスでStorybookを採用しています。Storyの設計、コンポーネントの分割、担保したい要素などチームごとに重視している点が異なり、運用体制に特徴があります。今回はpixivのDesktop版, Mobile版, pixivFANBOXでのケースについてお話しします。

この3つのプロダクトは共通レポジトリで運用しており、StorybookはGitLab Pagesにてホスティングされています。masterに変更が加わるとGitLab CIにてStorybookの静的ビルドをし、GitLab Pagesにデプロイしています。ブラウザでアクセスするだけで、社内の誰でも常に最新のコードのUIを試すことが出来る体制となっています。

pixivのDesktop版でのケース

pixivにはデザイナーが作り上げているデザインガイドラインというものが存在しています。Figmaにより作成されていて、カラートーンやグリッドルールなどのFoundationIcons、ボタンやタブなどのComponentsの3つのカテゴリに分かれています。Desktop版では主にこのデザインガイドラインに沿った実装を担保することに注力しています。

StorybookではStoryを階層構造に組むことが出来ます。まだ全てのコンポーネントをStoryに落とし込むことは出来ていませんが、Desktop版では骨組みとしてStoryを大きく3つに分けています。

UI

デザインガイドラインのComponentsに当たるボタンなどのコンポーネントのStoryをまとめています。ここで保証するのは、コンポーネントのスタイルと動的なスタイル変化です。

OTHERS

ガイドラインには存在していないコンポーネントをまとめています。イラストや小説のサムネイル、カルーセルなどの状態変化が多くデザインが崩れやすいコンポーネントの動作を保証しています。

FOUNDATION

デザインガイドラインのFoundationとIconsに当たる範囲を担っています。カラーやテーマ、各種アイコンを保証しています

pixivのMobile版でのケース

Mobile版では主にStorybookファーストでの開発による開発スピードの向上と、共通コンポーネントをStorybookで網羅することで、Mobile版のコンポーネント群のカタログとし、ドメイン理解度の低い人の参入障壁を下げることを重視しています。モバイル開発のため、Viewport AddonによりiPhoneXサイズで描画するようにしています。

また、コンポーネントのテストとしてStoryShotsを導入しており、変更を検知し、バグをなるべく防ぐための運用に注力しています。

pixivFANBOXでのケース

pixivFANBOXでは、カタログとしての運用に加えて、コンポーネントに起こりうるパターンを網羅的に検証できるようにStoryを作ることで、テスティングツールのように運用をしています。

pixivFANBOXにStorybookを導入したきっかけとして、pixivFANBOXが提供するブログ投稿のエディタの開発を行うためだったという経緯があります。エディタ内のコンポーネントごとの挙動の確認と保証を行うのにStorybookが適していたとも言えます。

Storybookを導入してみて

チームによって運用体制に違いはありますが、どのチームでもStorybookを導入した結果下記のようなメリットが得られたのではないかと考えています。

  • デザインガイドラインの担保に役立つので、デザイナーとのコミュニケーションに繋がる
  • UIのドキュメントとしてメンテナンスすることで、プロダクトの属人化に歯止めをかけることが出来る
  • Storybookファーストで開発を行うことで早い段階でコンポートネントの動作を保証出来るため、結果として開発速度が向上する

それぞれのチームで様々な運用を模索していて、やってみて良かった運用などをピクシブフロントエンド互助会で共有しています。

おわりに

ここまで読んでくださってありがとうございました!!

ピクシブ株式会社では、Storybookのようなツールを活用してチームとプロダクトにシナジーをもたらして、ユーザーに価値を届けたいフロントエンドエンジニアを募集しています!

20191219010503
do7be
2016年中途入社。主にpixivでUX/UIやってます。好きなものを好きと言える世界をつくりたい。