見出し画像

その作成過程に意味がある ー スタイルガイドの話

LTS Design

LTSデザインチームのおおきです。

デジタルプロダクトを作っているチームではデザインシステムという言葉がお馴染みになってきている感がありますが、その一環としてスタイルガイドを整備しているチームも多いと思います。
私たちLTSのデザインチームもスタイルガイドの作成・運用をしているので、そこで感じたメリットや課題をまとめたいと思います。

CS Clipスタイルガイドの紹介

私たちが作っているCS ClipというサービスはMVP（Minimum Viable Product）で検証を繰り返すフェーズであり、正直ブランディングにはまだ注力していません。
そのため、現状のCS Clipのスタイルガイドではブランドガイドラインに当たる内容よりもUIに関する内容に重点を置いていて、プロダクトに触れるユーザーへ一貫した体験を提供することを目的にしています。

ツールはFigmaを使用して、スタイルガイドとコンポーネントライブラリにページを分けつつ1ファイルにまとめて運用しています。

スタイルガイド
コンポーネントライブラリ

カラーやフォント定義の他、私たちのスタイルガイドでは、デザインパターンも整理しています。

デザインする時に、他の画面を参照しながら作っているといつの間にか微妙に違うパターンが増えている…というのはデザインあるあるですね。
文脈に沿ったデザインをすると、パターンを分けなければならない場面もあります。でも無駄にパターンが増えていくと、ユーザーに混乱を与えかねません。

スタイルガイドでパターンの整理をしておくと、無駄なパターンを増やさずに済む＆現在どのくらいパターンが増えてしまっているかというのが把握しやすくなります。

CS Clipのスタイルガイドではルールとともに、なぜそのルールにしているのかをメモしている場合があります。

スタイルガイドを使ってデザインしていても、ルールを見直したいタイミングが時々やってきます。その時に「なんでそのルールにしたんだっけ？」があやふやになっていると最初から考え直しで無駄に時間がかかるためです。

ルールを決めたデザイナー以外もルールの根拠を理解できるのもメリットです。

スタイルガイドを整備してよかったこと

一般的に言われるメリットは

  • 一貫性あるデザインが可能になる

  • デザイン、実装作業の効率化

が挙げられることが多いですが、私たちのチームではこの他にもメリットを感じた点がありました。

UIに関するチームでのコミュニケーションが活発になる

スタイルガイドを整備していた時期はZoomで顔を突き合わせながらデザインチームでじっくりと議論を交わすことが多く、なぜそのスタイルに決定したのかまですり合わせを行うことができました。

メンバーが多い場合は全員で議論することが難しいかもしれませんが、担当者を複数名おいて議論しながら整備することで、担当者間のUIに関する認識が揃ってくるのでおすすめです。
そしてその担当者たちがチーム全体に啓蒙することでメンバーに浸透することが期待できます。

「なんとなく」からの脱却

スタイルガイドを整備すると、どのコンポーネントを使用するか？やなど自分が「なんとなく」決めていたことがあったなと気づきました。

例えば、択一式（複数の項目から1つだけを選択する方式）のUIの使い分けルール。
プルダウン・ラジオボタン・ボタンをデザインする時に「なんとなく」使い分けていたんですが、スタイルガイド整備の際に明文化することができました。


現在のスタイルガイドで直面している問題

実装とデザインとの差分が埋めづらいのは事実です。
そもそもスタイルガイド通りの実装になっていないままリリースされてしまったり、スタイルガイドをアップデートするたびにエンジニアと連携してすぐ反映してもらう…ということが難しかったりします。

あとは、インタラクティブな表現をFigmaのみでカバーするのが難しいという点も挙げられます。
CS Clipでは今のところインタラクティブな表現をあまり用いていないので不便はないですが、そういった表現が出てくるとFigma以外のツールで補う必要も出てくると考えています。

こういった問題はStoryBookなどを用いてコードベースでのコンポーネントライブラリやパターンライブラリを整備すれば解消することができます。
やはりコードベースのスタイルガイドのニーズが出てくるのは必然だと感じました。

今後の展望

上述のような問題を解消するため、まずはコードベースのパターンライブラリを整備しようと準備中です。（その後にコード コンポーネントライブラリも整備する予定）
少しずつデザインシステムへの道のりを歩んでいきます。

まとめ

以上のように、私たちは作成過程でのメリットも大きかったのでスタイルガイドを整備してよかったと思っています。
業務でもデザイナーがデザイン時に参照したり、エンジニアが実装時に参照したり…といった具合に活用されています。

デザインシステムを構築するほどの規模ではない、というチームでもぜひスタイルガイドを作ってみることをおすすめします。


LTSでは一緒に働く仲間を募集しています。
少しでもご興味がある方はぜひ一度ご連絡ください！