デザインチームのクオリティコントロールに欠かせない「UIディレクション」とは？

デザインに関わる仕事をしたことがある方なら、誰しも一度は「クオリティコントロール」の問題に悩んだことはあるのではないでしょうか。近年は、多数のデザイナーが関わるプロジェクトやデザイン組織が立ち上がるケースも増えており、デザインの一貫性や品質を管理する「UIディレクション」が重要になってきています。

事業や組織の成長とともにデザインの役割も拡大し、デザイナーたちが各自のアイデアやセンスに基づいてデザインを行うと、バラバラなデザインになってしまうことがあります。特にスクラム開発のようなスピード感のある改修・改善サイクルのデザイン業務においては、デザインの一貫性を保つためのディレクションが必要になるのです。

今回ご紹介する事例では、多数のデザイナーが在籍し、複数のチームで共通のサービス開発を行う体制下で、デザインの「ばらつき」が課題として挙げられました。このため、デザインの一貫性と品質を保つために「マイナス→０」にする問題解決型のUIディレクションを行いました。この記事では、その具体的な施策とプロセスを説明していきます。

UIディレクションの準備〜設計プロセスまで

今回UIディレクションは6つのステップで実施しました。以下の図を見れば分かる通り、UIディレクションを実行する前に、まずは課題の特定と要因の探求が必要です。

課題の分析を通じてフォーカスしたのは、「ばらつき」です。複数のステークホルダーとのヒアリングを通じて、「認識のばらつき」と「UIのばらつき」の2種類があることがわかりました。

「認識のばらつき」では、スピード感あるスクラム開発で他チームに影響のある改修になりそうと分かっていても、どう連携してデザインを進めていくのかが課題でした。また、情報を独自で入手するのが困難な状態だったため、それぞれのデザイナーで情報や認識のばらつきが起こっていました。

「UIのばらつき」では、チーム毎に異なる施策を進めていたり、優先度の差異から足並みを揃えて横断的なUI改修を行えないことが課題でした。そのため、共通のコンポーネント自体をアップデートできずに、各自でカスタマイズを行っていました。

これらの積み重ねから、全体的な「ばらつき」という課題が顕在化していました。そこで問題の解決に向け、UIデザイナー間での横連携ができる仕組みと、形骸化しないデザインシステム運用の仕組みを作ることにしました。
打ち手の方向性が決まった後は、「いつ・どこで・どのように解決するのか？」という具体的な施策を決定し、以下の準備を行いました。

notionワークスペースの開設：
業務の可視化と集約、デザインシステムを頻繁に更新してもUIデザイナー同士で連携できるようなフローの作成

UIデザイナー用のSlackチャンネルの作成：
コミュニケーションや横連携の機会を創出し、デザインシステムの更新情報の共有をスムーズに行う

準備が完了したら、いよいよ施策の実行です。今回、デザインの品質と一貫性を図る上で必要な「横連携」と「デザインシステムの機能性担保」のため、ゴールとして以下の２つの状態を目指しました。

• 「どこ」で「誰に」合意・確認するのかが明確になっていること
• 自分を含めたUIメンバーの業務や意見を可視化できていること

プロジェクトで行ったUIディレクション「4つの施策」

ここからは実際に行った施策の詳細と目的、得られた効果について説明していきます。

①夕会とふりかえり会の実施

まずはコミュニケーションの齟齬をなくすため、振り返りや相談を中心としたコミュニケーションの確保を行いました。

☀️夕会
業務の進捗把握と相談（業務の妨げとなっているものについて）

なぜするのか？(目的）
デザインチーム全体の進捗把握と相談
デザイナー同士の連携を促進し、各チームが自律的にスプリントを回せる状態を作る

何を解決するのか？（課題）
複数チームに跨るデザイン修正に対応する上で、他チームの業務内容やスケジュールについて把握しきれず、足並みが揃わない

得られるものは？（効果）
他チームの業務内容を把握することで、協力すべき課題を特定できた
チーム間の連携機会を創出し、スプリント対応を迅速化することができた

 

🪄ふりかえり会
デザイン業務に影響を与えるものに関する振り返り

なぜするのか？(目的）
業務に関する振り返りを通して、Figma運用や定例の進め方など、自己解決が難しい課題の改善サイクルを回す

何を解決するのか？（課題）
業務を進める上で障壁が発生することがあり、原因特定や対策者の確定などが遅れる

得られるものは？（効果）
運用のPDCAを回せる状態を作ることができ、課題解決のための具体的な対策内容や担当者を決定できた
業務の効率化やチームメンバー同士のコミュニケーションを促進できた

 

②デザインシステム改善の仕組みづくり

2つ目はデザインシステムの改善です。更新要望の共有と進捗の可視化を行う仕組み構築および、運用方法の確立に着手しました。

なぜするのか？(目的）
デザインシステムの更新や改善をスムーズに行うことで、全体のデザイン品質の向上を図る
チーム全体でデザインシステムを適切に運用し、共通コンポーネントの管理を一元化する

何を解決するのか？（課題）
各チームが共通コンポーネントを解除して上書きしてしまうことで、デザインシステムが形骸化

得られるものは？（効果）
デザインシステム更新や改善の速度を上げ、デザイン品質の向上を図ることができた
デザインシステムの適切な運用方法を確立することで、チーム全体でデザインシステムの適切な使い方を共有し、全体のデザイン品質の統一が図られた

【関連記事】【事例あり】デザインシステムとは？作り方を5ステップで解説！事例や導入メリットも

③Figma運用のアップデート

デザインシステム改善に関係する部分ですが、同時にFigmaの運用についても改善を進めていきました。具体的に行った施策は、以下の2つです。

📐 デザインシステムのファイル構成の更新
適切な粒度にファイルを分割し、デザインシステムを更新しやすくするiOS/Androidそれぞれのデザインが可能なLibraryを再設計

🗂 各チームのファイル構成と運用方法の統一
各チームのデザインファイルの構成を統一
UIメンバーで各チームのLibraryのスワップ会を実施

 

なぜするのか？(目的）
適切な粒度にファイルを分割し、デザインシステムの更新を容易にする
デザインの検索性や運用の統一を促進し、横連携を促進する
クロスプラットフォームデザインが可能な状態にする

何を解決するのか？（課題）
各チームが異なる方法でデザインファイルを管理していることから、画面デザインが検索しづらい状況
デザインシステムの変更による影響範囲が大きく、インスタンスを切って上書きしていた
Publishしていいのか分からず、更新したものが公開されずに溜まってしまっていた

得られるものは？（効果）
デザインを見つけやすくし、リアルタイムで他チームの取り組みを把握できた
「他チームはどうなっているの？」の質問に対しても、素早く検索・対応できるようになった
デザインシステムが正しく機能することで、デザインの品質を確保し、全体のデザインを統一できた

 

④合意形成フローの確立

最後は意思決定のフローについて。全体に関わるUI改修の足並みを揃えて対応をするため、サービスブループリントを参考に合意形成フローを作成しました。

なぜするのか？(目的）
全体に関わるデザインシステムの更新を足並みを揃えて行える状態にし、デザイン品質を保つ

何を解決するのか？（課題）
チームを横断した全体に関わるUIの改修をする際に、どこと連携して横断開発を進めていいのか分からない（意思決定の基準やフローも含む）
各チームの開発進捗の足並みが揃わないと、画面によっては同じ要素でもUIがばらけてしまう可能性がある

得られるものは？（効果）
全体に対して一律UIアップデートを行えることで、デザインの品質管理がスムーズになった
誰に何を聞けばいいのか分からない状況がなくなることで、課題が放置されなくなった
さらにチーム間での足並みが揃うことで、全体のデザイン品質を一貫して高めることができた

 

まとめ

私は仕組みづくりやフローの確立といった施策を進める中で、「制約」を多く用いました。「制約」と聞くとデザインがしにくくなる印象を持つかもしれませんが、デザインシステムにおける「制約」とは、無駄な考慮を減らして素早くUIを構築することができる拠り所であるべきだと思っています。

そのため、不変ではなく可変なものであり、柔軟性と規則性の両面を持つ「仕組み」を確立することが、イテレーティブ（反復的）かつインクリメンタル（増加的）なスクラム開発において、デザインシステムが形骸化することを防ぐことにつながります。

今回のUIディレクションの役割は、それぞれのUIデザイナーが最大限のパフォーマンスを発揮できる環境を作るために、交通整備のおばちゃんマインドで行いました。プロフェッショナルなメンバーが業務をしやすく、パフォーマンスを発揮できる環境を整えることで、デザイン品質も自ずと向上すると考えています。

デザイン領域でますます存在感を増すUIディレクション

デザインがますます重要視され、デザイン組織の立ち上げや複数デザイナーでの開発が増える中、異なるスキルを持ったメンバーとの協業や、デコ（得意）とボコ（不得意）をうまくFitさせながら、プロジェクトを推進できるディレクションの役割やスキル、専門知識はこれからさらに求められるようになるでしょう。

抽象フェーズやプロジェクト全体に関わりたいUIデザイナーにとっては、UIディレクションに取り組むことで、全体像の把握や戦略的な設計力を身につけ、PdMへのキャリアパスの可能性もあります。機会があれば、ぜひ挑戦してみてください。

グッドパッチでは、UIデザイナーが自己成長とともに、協力してプロダクトの成長に向き合える環境があります。複数のUIデザイナーでのプロジェクトも多く、UIデザインに加えて、UIデザイナーチームのマネジメントナレッジも得る機会があります。新しいものを創る楽しさや、プロダクトの成長を育んでいく喜びを味わいたい仲間を、積極的に募集しています。

UIデザイナー