大規模なマルチプラットフォームサービスのためのデザインシステム-成功を導く3原則
こんにちは、プロダクトデザイナー@ShikiCheriです。2024年5月よりTVerのプロダクト開発におけるデザイン内製化計画、デザイン基盤の土台作りを担当しています。今回は、今取り組んでいるデザインシステム構築プロジェクト事例について紹介します！
こちらはTVer Advent Calendar 2024 の参加記事です。前回は@t-arai1228さんの「GitHubを活用したプロジェクトのIssue管理」でした🎉
TVerは、複数のデバイス、表示モード（ライト/ダーク、縦向き/横向き）に対応しており、1画面あたり15以上の表示パターンが存在する時もあります。この多様性によりデザイン制作と実装の複雑さを引き起こし多くの課題が起きていました。
さらに社内にはUIデザインの元データがなかったため、内製チームはまず元データの整備から取り組む必要がありました。
これらを解決し体験を統一するため、2024年5月からFigmaを活用したデザインシステム構築プロジェクトを始動しました。来年から順次プロダクトに反映されていく予定です。
"持続可能な"デザインシステム構築のために何が重要？「〜しやすく」の3原則
デザインシステム構築は、作ること自体が目的ではありません。つまり、「作って終わり」にならない仕組みも重要です。これまでさまざまなプロジェクトに携わりながら多様なデザインシステムを構築し、時には失敗も経験しました。
そこから得た教訓として、デザインシステムをチームで長く活用し、プロダクトの成長に貢献できるものにするためには、次の3つのポイントが大事ということがわかりました。
1.展開しやすく
初期フェーズのみ視野に入れコンパクトなデザインシステム設計にすると、プロダクト成長に適応できず「初めのうちに考慮すべきだった」となる事態も発生します。長期的・短期的両観点で最適な設計が重要です。
2.変更しやすく
デザインシステム構築も、プロダクト開発のためのデザインも、細かな検証を繰り返し何度も変更が発生します。最初から変更に強いデザイン設計にすることで、スムーズに制作を行うことができます。
3.運用しやすく
苦労して構築したデザインシステムは、浸透しなければ組織で十分に活用されず、やがて形骸化してしまうことも多々あります。こうした状況を防ぐため、運用しやすい仕組み作りやそのための行動が必要です。
TVerにおけるデザインシステム構築でもこの3原則を重視しています。その具体的事例を紹介します。
1.展開しやすく：理想型から逆算して小規模な今のうちからやっておくべき構造を考える
プロダクトが小規模なうちから将来のあらゆる方向への成長を見据え、デザインシステムの理想状態を計画します。
しかしながら、初めから完璧を目指すとコストが大幅にかかりますし、逆に最低限にしすぎると後から拡張が難しくなります。
そのためデザインシステムを展開しやすくするためには、長期的視野と短期的視野の両方を正しく使い分けることが重要です。
長期的ゴールから逆算し、今やるべき設計を考える
デザインシステムの長期的ゴールとして、「チームメンバー全員がデザインシステムを活用し、TVerらしさを表現できる状態を目指す」というビジョンを掲げました。
短期的には既存プロダクトへのデザインシステム適用を最優先に実行することですが、長期的には新しいプラットフォームへの展開のしやすさや、プロダクトデザイン以外のクリエイティブでもTVerらしさの表現を描きやすい場所づくりを目指します。
このステップを見据えたゴールはメンバーに共有し、現時点で最も集中すべき優先事項・見送る項目を明確にしています。
「今すぐやる」は最も課題になっていたルール統一と視聴体験や操作性の改良を最優先に行いました。
「今はやらない」と決めたOS準拠に関しては現在の状態に少しずつデザインシステムを導入するには差分が大きすぎたためでした。また、カラー変更に関してはまたデザインシステム構築と同時に進めるにはブランド観点・数値など検証すべき要素が多かったため、まずは全体を整え終わってからまとめて変更できる設計を今はすることにフォーカスしました。
デザインデータは適切に分けて、必要なものだけを引用しやすく
デザインシステムをさまざまなクリエイティブで活用しやすくするため、1つのデータですべてをまかなうのではなく、以下のようにデータを適切に分けました。
PrimitiveTokens
LightBlueをキーカラーに、上下左右にグラデーションを展開したTVerの原色。すべてのクリエイティブに使用可能
Icons
SVGデータで活用できるTVerオリジナルのアイコン集。塗りタイプと線タイプを用意。全てのクリエイティブに使用可能
Images
画像として扱える素材集。イラスト素材、写真素材やロゴ素材などを格納。必要な時だけ引用できるようにストック
Foundations
マージン、角丸、罫線の太さ、ブラーなど表現の定義集。プロダクト開発でしか使わないが、あらゆる端末で使える要素を網羅した設計にしている
Master(App/Web)
アプリとWebのMasterComponent集。UIが同じデザインのため、共通化し、要素を置換している(後述で説明)。使用はアプリ/Webのデザインのみ
Master(TV)
TV専用のMasterComponent集。TV特有の独特なUIデザインのため、独自Componentを用意。使用はTVのデザインのみ
一例として、構築初期にはスコープから外していたTV端末向けデザインシステム導入も途中から開始しました。
用途に応じて必要なデータを柔軟に引用できる仕組みが整っていたためスムーズな構築が可能となり、TV端末におけるデザインシステム構築コストを大幅に省略できました。
また、今後LPやバナーといったグラフィック以外の制作物を表現するためには、プロダクトの定義やComponentは不要であり、カラーパレット・アイコン・画像やイラスト素材のみを引用することができます。
このように、長期的な目標を見据えつつ柔軟に対応できる仕組みを整えることが、展開しやすいデザインシステムを実現する鍵となります。
2.変更しやすく：最小限の制作コストで同時に展開できる定義の共通化
デザインシステム構築では、細かな検証と微調整を繰り返しながら進めます。特にマルチプラットフォーム対応では、1つの修正が複数パターンに影響するため、変更に強いシステムを作るには「1つの定義で多くのパターンを網羅する設計」が重要です。
よく他社の事例でも取り上げられているのは、他のOSへの展開をVariablesで切り替える工夫ですが、加えてTVerでは3つのモードの切り替えで多くのパターンを効率よく展開できるように構築をしています。
SmallとLargeのパターンをComponentとVariablesに用意する
画面サイズ展開を効率化するため、スマートフォン用のSmallサイズとタブレット・PC用のLargeサイズの定義を作成しました。この定義はfont-size・line-height、marginのVariables設定、UIComponentのVariant設定など、画面の大きさで最適化したい要素で活用されています。
Title・Body・Captionのように用途別に命名した定義のfont-size・line-height、画面全体のMarginに対してそれぞれSmallとLargeのVariables定義を設定しています。
同様にComponentにも、Smallサイズ用とLargeサイズ用のパターンを作成し、Variant設定でSmallからLargeに切り替えられるようにしています。
このパターンを活用すれば、スマートフォン用デザインをベースに、要素をSからLに置換するだけで、他の画面サイズへの展開がスムーズに行えます。
この方法により、施策の意思決定をスマートフォンサイズに集中させ、他のサイズ展開にかかる作業時間を大幅に短縮できます。
カラー定義は「使用する場所×使用目的」別に用意する
TVerのデザインシステムでは、カラーを「使用場所」（Content、Border、Backgroundなど）と「使用目的」（Primary、Accent、Error、Liveなど）の組み合わせで定義しています。例えば、Primaryは最もメインで使うもの、Errorは警告に、Liveはライブ配信を表す要素に使用されます。
定義はあくまでどんな色でも入れることができる「パレット」や「箱」のようなものです。LightBlueという具体的な定義にしなかったのも、この先ブランドリニューアルなどで全部のカラーテイストが変わっても定義名を変えることなくすべてのUIカラーを変更することができます。
また、それぞれにダークモード用のカラーも当てているため、ダークモード用のデザインは別途作る必要がなく自動で生成できます。
デザインシステム構築中に、色の見直しは画面を検証しながら何度も行いましたが使用場所×使用目的ごとに定義されていたため、一括で画面の全体の印象を見ながら同時に調整することができました。
3.運用しやすく：目的の目線合わせ、誰でも使える状態にするための浸透活動
デザインシステムはチーム全体で活用して初めて価値を発揮します。TVerでは、過去にデザインシステムを制作した自分しか活用できてなかった時期もありました。
その結果、UIデザイン制作が属人化してしまい、他メンバーが参加できないという致命的な課題が生じました。
「なぜデザインシステムが必要なのか」の原点からレクチャーする
TVerでは、デザインシステムを誰でも閲覧できるドキュメントとして公開していますが、これを単に配布するだけでは「ルールに縛られている」と感じられてしまい、本当のメリットとして活用されません。
そのため、デザインシステムの必要性や導入しない場合の課題、効率向上のための推奨事項を、実際のデザインデータをもとにレクチャーする機会を設けました。動画は録画され、以降ジョインしたメンバーでもみられるようになっています。
「なぜこの組織でデザインシステムを活用する必要があるのか」を理解することで、開発観点のUIデザインスキルを習得していきました。
また制作に必要なスキルは日々お互い相談しながら学び直すチームとなったため、デザインチームビルディングとしてもいい機会となりました。
ペアデザイニングで、デザインシステムの習得と改善を同時に実施
デザインメンバーがデザインシステムを使って作ったUIデザインは、通常のレビューとは別に構造部分にフォーカスを当てたレビューも行いました。
合わせてデザインシステムを活用してわからなかった点や使いづらい点をフィードバックしてもらっています。
一緒にペアデザイニングを行うことで相手にとっては疑問点を解消できますし、自分にとってはデザインシステムの構築における課題を早めに把握することができ解消できる仕組みとなりました。
「雰囲気でUIデザインしてきた」を解消するエンジニアとの連携強化
デザインシステムをより実装しやすいものにするため、エンジニアとの情報交換タイムを定期的に設け、実装観点からデザインを見直しています。
この連携の効果は素晴らしく、今まで自己流で制作していたUIデザインの失敗にも気づくことができ、より実装しやすいデザインデータを追究することができるようになりました。その知見は改めて参加していなかったデザインメンバーにも共有するようにしています。
このように、実装しやすさを追究することでデザインと実装の距離を縮めることができ、より使いやすいデザインシステムを構築できるようになります。
デザインシステムはできたものをただ配布するだけでは絶対に浸透しません。メンバーに対してこれらの小さな行動を地道に積み重ねることで、少しずつチーム全体に着実に浸透していきます。
デザインシステムは一人で作るのではなくチームで育てていくものであり、そのためにはメンバーみんなで運用の大切さを正しく理解し、取り組みのハードルを下げていく工夫が重要です。
まとめ：自社の開発組織の状況を熟知し、最適なデザインシステム構築をみんなのものにする
1.展開しやすく
理想型から逆算し、今の小さな規模のうちからやっておくべき構造を考える
2.変更しやすく
広く網羅できるやり方で共通化し、1つの修正で一度に反映できる構築方法を一番に考える
3.運用しやすく
「デザインシステムをなぜ作る必要があるのか？」から目線合わせ、誰でも活用できる、浸透のための活動に徹する
デザインシステムに「これが最適解」という形はありません。大切なのは、プロダクトの規模と組織の状況を見極めた上で、今はどこに注力し何を割り切るかを明確にしてチームに共有することです。
そしてその過程の中で、構築や浸透は1人だけで実施するものではなく同じ志を持つ仲間を作り協力しながら、一緒に育てていく姿勢が必要です。
お知らせ：巨大なデザインシステム構築とプロダクト開発に挑戦してみませんか？
TVerではプロダクトデザイン領域において、デザインシステムやプロダクトの未来をリードできるシニアUIデザイナーを募集しています！
累計8,000万DL(2024年11月時点）、月間ユニークブラウザ数4,100万(2024年9月時点）、老若男女問わず多くの人に愛用されているプロダクトサービスのデザインに挑戦できるチャンスです。
興味がある方はこちらの詳細をご覧いただき、是非ともご応募ください！
引き続きTVer Advent Calendar 2024では、エンジニア・デザイナー・PdMがブログを書いていきます。次回は@pikopiko_hammerさんの「Webディレクター目線でダークモード対応の思い出を振り返る」です。こちらもお楽しみに！
いいなと思ったら応援しよう！
