プロジェクトが成功するかどうかは、デザインチームのアウトプットのクオリティに大きく左右されます。しかし、そのクオリティを決定づけるのは、デザイナー個々のスキルだけではありません。チームを取り巻く環境やプロセスが整っていなければ、デザイナーはその創造性を十分に発揮できず、結果としてアウトプットのクオリティが低下してしまいます。

では、デザインチーム全体のアウトプットのクオリティを底上げするためには、どのようなアプローチが必要なのでしょうか?

前回(第1弾)はデザインチーム内で行った施策を中心に紹介しましたが、今回は一歩踏み込んでビジネスや開発といった他チームとの連携強化を図るための施策を中心に紹介します。

 

ボトルネックを解消し、デザインの「ボトムライン」を引き上げる

前回の記事では、UIディレクションを行う目的として「デザインの一貫性と品質を保つ」ということを挙げました。これはデザインの「ボトムライン」を上げるということだと考えています。

言い換えれば、デザイナーが創造性を十分に発揮できる環境を整えることといえます。どれだけ美味しく見た目も素晴らしい料理を作っても、紙皿に盛り付けては料理の魅力は半減します。これは「料理」としての質を下げているとも言えるでしょう。

同様に、デザインを取り巻く環境が整っていなければ、デザイナーの創造性という「料理」を最大限に活かすことはできません。ボトムラインを上げることで、デザインチーム全体のアウトプットのクオリティ向上が期待でき、再現性も高まります。逆に環境が整っていない、つまりボトムラインが低いとデザインチームのみならず、他チームの生産性をも下げかねない、次のような課題が起こるリスクが出てきます。

デザインチーム内の問題
特定のデザイナーにタスクが集中し、負担が偏っていたり、同じようなタスクが続くことで新たな挑戦がしにくく、モチベーションが上がりづらい。

開発チームとの連携における問題
デザインのバージョン管理が不十分で、エンジニアがどれが最新のデザインか分からない状態となり、コミュニケーションコストや手戻りコストの増大。

ビジネスサイドとの連携における問題
デザインの一貫性を保つためにステークホルダーとの調整が必要で、その都度コミュニケーションコストが高まり、他のデザインタスクの圧迫。

プロジェクト全体での問題
職種間の「壁」があり、意思決定の優先順位が揃わず、意見のすれ違いが生じる。

これらの問題が相互に影響し合うと、プロジェクト全体の品質・効率低下につながります。そこで、デザインチームを起点にボトムラインの向上を図ることで、これらの課題を改善することが可能です。

ちなみに、品質の最高基準ともいえる「トップラインを上げる」ことは、個々のデザイナーのスキルやセンスに依存するため、仕組みでの再現性が難しい部分があります。だからこそ、まずはボトムラインを上げることに注力しましょう。チーム全体の基礎を固め、質の高いアウトプットを継続的に生み出せる環境を作ることが、プロジェクトの成功にとっては重要なことなのです。

ビジネスと開発とデザインを接続するプロジェクトで行ったUIディレクション「4つの施策」

私がUIディレクションを行ったプロジェクトは、新規サービスの開発ということで、デザインチームはビジネスサイドと開発サイドの双方と密にコミュニケーションを取る立場であり、両者の架け橋とも言えるポジションでした。

デザイナーがパフォーマンスを最大限に発揮できる環境を整えるために、チーム内の整備から他チームとの連携まで、以下の4つの施策を実施しました。

1. デザインチームの環境整備

まずはデザインチームの内部を整えるところからスタートです。チーム内のタスク分配やコミュニケーションの改善に取り組み、デザイナー全員がスムーズに業務を進められる環境を目指しました。

課題:

  • タスクの偏りとモチベーションの低下
  • スキル発揮機会の不足

施策:

  • デザイナーの体制を横断チームへ変更
    チームごとの専属デザイナーから、プロジェクト横断でタスクを担当する体制に変更しました。
  • タスク管理にポイントを導入
    タスクにポイントを設定し、1週間のタスク量を可視化しました。

効果:

  • タスクの偏りが解消
    タスクの分配が均等になり、特定のメンバーに負担が集中することがなくなりました。
  • モチベーションの向上
    メンバーが興味や能力に応じたタスクを選択できるようになり、新たな挑戦がしやすくなりました。
  • 育成への効果
    メンバーが自分のキャパシティを把握でき、自身のスケジュール管理や業務負荷の調整が可能になりました。

メンバーからの声

「タスクとポイントで週のやることと物量が明確になり、達成感が増しました」

「タスク量の調整やヘルプの判断がしやすくなりました」

「可視化されることで相談しやすく、状況を把握してもらいやすくなりました」

2. ビジネスサイドとの連携を強化するガイドライン作成

次はビジネスサイドとの連携です。プロジェクトでは、運用コンテンツの制作などでビジネスサイドとの協働が多く、デザインの一貫性を保つための課題がありました。

課題:

  • 運用コンテンツのトンマナのばらつき
  • コミュニケーションコストの増加

施策:

  • 運用コンテンツ用のガイドライン作成
    UIデザインとは別に、サムネイルやバナーなどの運用コンテンツ用ガイドラインを作成しました。
  • カラーパレットの差別化
    運用コンテンツ用のカラーパレットを定義し、UIカラーパレットとの差別化を図りました。

カラーレイヤー

効果:

  • デザインの一貫性向上
    ガイドラインにより、誰が作成しても一定のクオリティを保てるようになりました。
  • コミュニケーションコストの削減
    レビューや修正の回数が減り、他のデザインタスクを圧迫することが少なくなりました。

3. 開発チームとの連携を強化するブランチ戦略

開発サイドとの連携については、「デザインシステム」などのトピックでもよく触れられることが多いでしょう。効率的な開発のためには、デザイナーとエンジニアの協働は不可欠です。このプロジェクトでも、開発とデザイン間でよく発生する「最新のデザインがどれか分からない」という問題が生じていました。

課題:

  • 最新デザインの不明瞭さ
  • デザイナーとエンジニア間の連携コストの増加

施策:

  • Figmaのブランチ機能とDevモードの活用
    デザインのバージョン管理と更新作業を効率化しました。
  • GitFlowを参考にしたブランチ運用の設計
    開発チームと協力して、マージのタイミングなどを共通認識で進められるよう運用フローを構築しました。
  • ステークホルダーへの全体周知
    運用フローを関係者全員に周知し、デザインと開発環境の整備を行いました。

効果:

  • 業務時間の短縮
    デザイナーもエンジニアも更新コストが削減され、業務効率が向上しました。
  • 手戻りの削減
    デザインと開発の連携がスムーズになり、確認コストや手戻りが減少しました。

4. 職種間の壁をなくす、共通認識づくり

ビジネスと開発、双方の連携を強化した後、仕上げに3チーム全体の連携を強化する施策にも着手しました。チーム間のコミュニケーションを円滑にし、プロジェクト全体での一体感を高めることを目指します。

課題:

  • ビジネスサイドと開発サイドの「壁」
  • 意思決定の優先順位の不一致

施策:

効果:

  • 共通認識の醸成
    お互いの価値観や優先事項を理解し、目線合わせができました。
  • コミュニケーションの活性化
    対話の機会が増え、障壁が解消されました。

一朝一夕に実現できるものではありませんが、これらの施策を通じてデザイン品質の向上だけでなく、チームの生産性向上、他部門との連携強化、プロジェクトの成功率向上といった組織全体のパフォーマンスを高めることができます。

その結果、デザイナーが創造性を最大限に発揮できる環境が構築され、継続的に高品質なアウトプットを生み出すことが可能になります。そのためUIディレクションは、プロジェクト全体の成功を支える重要な役割と言えるでしょう。

困難なプロジェクトも、どうせなら楽しもう!

今回は「0→1」にするUIディレクションという目的で、「向上・拡張」を目指した施策に取り組みました。デザイナーがパフォーマンスを最大限に発揮できる環境を整えることで、アウトプットの品質向上を図ることができたと感じています。

チームメンバーの「ギブ(Give)」の精神は素晴らしく、何度も助けられ、支えられました。環境という器を作っても、それだけでは意味がありません。その中で働くメンバーのマインドこそが重要であると日々実感しています。

そのため、施策を実行する前や途中でも「なぜそれを行うのか」を何度も伝え、メンバーからの意見を積極的に取り入れ、柔軟に変化させながら進めています。

どうせなら楽しもう。では、どうすれば楽しめるか。これを常に考え、周囲のステークホルダーを巻き込みながら、デザイナー一人ではできないさまざまなことにこれからも挑戦していきたいと思います

UIデザイナー募集。中途メンバー積極採用中!募集要項はこちら