投稿者: tomotaka@xenon.io

はじめに

この記事は、UXPinによって発行されたe-book『DesignOps 101: Guide to Design Operations』をYuki Yoshinaga (UXマン) 様に翻訳いただいたものを掲載しております。

DesignOpsとは？

デザインオペレーションは、デザインがWhatに集中できるように”How”に焦点を当てています。デザインオペレーションとは、デザインを意図的に運用し、最適化し、スケーリングすることを目的としたデザインにおける規律です。デザイナーがユーザーのためにデザインするのと同じように、デザインチームのために体験、システム、ツールをデザインします。デザインオペレーションは、デザイナーが最高の仕事をするための環境を整えます。つまり、デザイン組織の秘伝のタレというわけです。

 DesignOps とは？

 DesignOps は、クリエイティブ業界の新しいバズワードの1つです。

この言葉は、このデザイン分野の重要性を高めるきっかけとなったデザインエキスパートのDave Malouf氏による造語です。業界がDesignOpsの重要性に気づくにつれ、その人気はますます高まっています。

しかし、まだDesignOpsはかなり新しい分野であり、”DesignOpsとは何か？”と思われても不思議ではありません。

デザイン業界の方で知らない方もご安心ください。このガイドでは、DesignOpsの重要性、作業原則、始め方、後の章で紹介する成功のためのツールなど、DesignOpsについて知っておくべきことをすべて学ぶことができます。

では、その核となる質問に戻りましょう。
「DesignOpsとは何か？」

DesignOpsとは、クリエイティブな一貫性やユーザーエクスペリエンスを実現するための接着剤のようなもので、この接着のため仕事の進め方とプロジェクトに重要なこととを結びつけることです。

 DesignOps の紹介

昨今、UXデザイナーやプロダクトチームのメンバーは、より多くのことをやり続けなければならないというニーズが高まっています。

これは、Webサイトをはじめとするデジタル製品は、日に日に大規模化・複雑化しているからです。この時、プロセスや成功の尺度を管理する方法があれば、仕事をより進めやすくなります。

デザイン業務は、戦略的目標と戦術的目標の達成に向けて、3つの根本的な柱に分けることができます。
（戦略的目標=プロジェクト全体の目標、戦術的目標=そこに到達するための測定可能なマイルストーン）

デザインオプスの柱と戦略的目標は次の3つです。

1. Progress ： プロジェクトを効率的に完了させること
2. Process：目標を効率的に達成すること
3. People： 効率的に一緒に働くこと

そしてこれらのマイルストーンとしてプロジェクト内にいくつかのプロセスと測定可能な指標を設けることで、組織内で動くデザイン業務の流れを管理出来るようになります。

DesignOpsを行えば、デザイン思考やユーザー中心といったデザインコンセプトを活用してプロジェクトのためのより良いプロセスを構築し、またそのプロセスを拡張することができます。（デザインワークのためのキックスターターです！）

 DesignOps の役割と責任

DesignOpsはいま、重要であるばかりでなく成長している分野でもあります。

最近の検索データでは、米国だけでも13,000件以上の「DesignOps」の求人情報がLinkedinで公開され、募集されています。

これは1つの核心的なことを意味しています。

もしあなたがデザイン業界にいるのであれば、DesignOpsの役割は未来のあなたが担っているかもしれませんし、あなたの将来の上司の肩書きになるかもしれません。

デザインオペレーションの役割と責任は企業によって異なりますが 、多くの場合、共通しているのは次の3点です。

1. Projects
   DesignOpsの役割には、プランニング、リソーシング、財務、ロジスティックス、最適化のスキルが必要です。
2. Process
   DesignOpsの役割は、ビジネスや顧客のツール、システム、方法論、戦略、規模に根ざしています。
3. People
   DesignOpsという役割は、人に関するあれこれ（マネジメント、変革、教育、文化、パートナーシップ、政治）と相互に関係しています。

そして、デザインオプスの仕事と責任の第2レベルがあります。

Org Design for Design Orgsではデザイン業務の役割と責任について4つのレベルに分けて概説していますが、

これらにはジュニアプロダクトデザイン、コンテンツストラテジスト、UXリサーチャー、リードデザイナーなど、あらゆる職種が含まれています。

このようにチームの規模が大きくなればなるほど、その役割はより重要になります（すべての組織でデザインオプスマネージャーが必要なわけではありませんが）。

DesignOpsのリーダーシップに関連するコアスキルをすでに持っているチームのメンバーから始めて、この問題とソリューションに対する考え方を企業文化に導入していきましょう。

デザインとビジネスの課題を解決する DesignOps

DesignOpsはUXやウェブサイトのデザイン会社の中核となりつつありますが、それはクリエイティブとビジネスの課題を解決するためです。

ニールセンは、下記のようなものの解決もDesignOpsの一部であると定義しています。

1. どのように協力するか
   より効率的な仕事のために、チームを編成し、コラボレーションし、環境や集まりを人間的にする
2. どのように仕事をこなすか
   プロセスを、デザインインテリジェンスの理解を共有できるよう標準化・調和させ、プロジェクトの優先順位を決める。
3. どのようにインパクトを与えるか
   説明責任を果たすために仕事を測定し、デザインの価値を啓蒙するツールとして社会に広め、デザイン思考や関連する活動の利用を可能にする。

 DesignOps とDevOpsの比較

DesignOpsはDevOpsと混同されることがありますが、これらはデザインやプロダクトチームの中では全く異なります。

DesignOpsは比較的新しい分野であり、デザインのベストプラクティスをビジネス戦略やプロセスのより大きな範囲に統合するものです。

一方、DevOpsはより技術的なものです。DevOpsは、情報技術システムや組織を構築し、スケーリングするための方法論です。

どちらもビジネスのスケールに関連しており、意思決定の役割を担っていますが、実際にどのような機能を持つか、そして観点が大局的かどうかという点が異なります。

DesignOpsとDevOpsのチーム（および個人）は、製品デザインチームの全体的な成功にとって極めて重要です。これには、ウェブサイトやアプリのデザインから、SaaSやIoT企業まで、あらゆるものが含まれます。

ただ、この2つの役割は、企業を成長させ規模を拡大する方法を考えるという基本的な課題解決に向け働くという点では似ています。

 DesignOps の重要性

DesignOpsはデザイン思考の延長線上にあります。

そのため、この用語を初めて耳にする方でも、ベストプラクティスやUXデザインの進め方についてはすでにご存知かもしれません。

デザイン業界の中核をなすのは、「作ること」が「体験そのもの」と同じくらい重要であるという理解です。Opsは、デザイナーが「What」にもっと時間を割けるように、デザイン作業の「How」に焦点を当てています。

デザインオプスの重要性は、この分野の先駆者の一人であるAlana Washington氏（Uber社のHead of Shipping Experience Design）の言葉が最もよく表していると思います。

デザインオプスの実践者の真の強みは、パラシュートで飛んできて感情を収集し、組織の課題や進歩を妨げる最大のペインポイントを把握することです。

そのペインが開発チームにあり、それがデザインに染み出ていることもあります。また、デザインの価値を理解し、それをリーダーシップに伝道することもあります。強力なデザインオプス担当者は、より良い方向に影響を与えるための知識と経験を持つものです。

また、次の言葉についても考えてみてください。デザインオプスとは、単なる効率化のためのプロセスではなく、より良いものを生み出すためのものなのです。

私たちが成長するにつれ、デザインシステムもそれに合わせて拡張し、デザイナーがプロジェクトに必要なものを基本的に入手できるようにしたいと考えています。

── Rasha Abdou, Product Experience Design Lead, Johnson & Johnson

課題とソリューション

DesignOpsの核となるのは、既にチームに存在する課題です。そして、それに対してスケーラビリティを確保するためのソリューションを生み出していきます。

つまりデザインオペレーションは、デザインチームが直面する課題を軽減してくれます。

例えば、

• 仕事量の増加やデザインチームの時間に関する要求
  （訳注：「デザインチームのリソース不足」という意味でよいかと）
• ワークフローや手順がサイロ化したり孤立している事態
• デザインチームがよりスマートに働くためのデザインツールがない
• プロジェクトの初期戦略に組み込まれていないことによる誤解や衝突
• スピードと効率を追求して早く作りたいという欲求

デザインオプスは、クリエイティブチームがこれらの課題に対するソリューションを生み出すための規律、管理ツール、考え方として急速に発展してきました。

世界中の企業でDesignOpsの役割の人気が高まっていることは、デザインの課題に対するアプローチを合理化するためにヒトやプロセスをまとめることにメリットがある証左です。

スケーラブルなシステムとチームを持ち、原則をドキュメント化し、説明責任を果たすことで、デザイナーはデザインイノベーションのための時間とエネルギーを増やすことができます。
── Theresa Neil, Top Designer in Technology, O’Reilly Author, Founder of Guidea

ここでソリューションが出てきます。

DesignOpsがうまく機能すれば、デザインチームと外部から来る邪魔者との間にバリアを設置し、デザイナーが目の前の仕事に集中できるようになります。

これには様々なものが含まれます。

• オペレーションマネジメント
• プロセスデザイン
• プロジェクトマネジメント
• コミュニケーション戦略
• オンボーディングとチームカルチャー
• 予算配分と管理
• 調達の管理
• 法務、IT、セキュリティ

シームレスなコラボレーション

コラボレーションはDesignOpsの中核をなすものです。また、多くの設計・開発組織で常に課題となっており、このための方法論は実行可能なソリューションを提供するのに役立ちます。

多くの場合、開発チームとデザインチームの間にはコミュニケーションが不足しています。プロジェクトの背景にある包括的な戦略は必ずしも全員に完全には透明ではありません。それが課題なのです。

DesignOpsのソリューションは、各プロジェクトの全体的な管理の一環として、より良いコミュニケーション戦略を作ることです。

それは、チーム内に息づく文化的な現象です。例えば新入社員のオンボーディングから始まり、チームが仕事に使うツールやプロセスにまで影響を与えます。

このような状況を成功に導く要素は、コラボレーションがシームレスに感じられることです。

デザインのハンドオフは非常に重要なステップであることは間違いありませんが、ハンドオフは瞬間的なものではなくプロセスであり、早い段階でプロセスに組み込まれるべきです。

Talabatでは、設計プロセスにコラボレーションを組み込みました。デザイナー、PM、エンジニアが一緒にプロトタイプを開発し、当社のデザインシステムを使ってHi-Fiなアウトプットまでイテレーションを回していきます。

この時エンジニアは、デザインがコード化されるまでに何を作ればいいのか大まかに把握しており、サプライズはありません。

コラボレーションに加えて、UIの80％を占めるデザインシステムのコードライブラリは、ハンドオフをシームレスに行うための非常に重要なツールであることが証明されています。
── Amber Jabeen, Sr. Manager, DesignOps, Delivery Hero MENA — Talabat

コラボレーションして働きましょう。

組織におけるDesignOpsの役割は、使いやすく適用可能なプロセスとツールを通じて、クリーンなデザインを促進することです。

デザインプロセスの拡張性

企業やデザインチームがDesignOpsの役割を検討し始める主な理由の1つは、スケールアップしたいという願望です。

チームや企業が成長するにつれ、デザイナーと開発者のデスクが並んでいなかったり、同じビルや国にいないこともあります。

このような状況では、全員が情報、デザイン基準、ツール、ワークフロー、品質管理に同じようにアクセスできるような構造とプロセスが必要です。

Airbnbは、“プラットフォーム間でデザイン言語を統一し、デザイナーとエンジニアがより大きな全体の一部としてソリューションを構築できるようにするとともに、デザインと開発のプロセスを加速させる”ことを目的として、デザイン言語システムからデザインオプスプロセスを開始しました。

そしてチームが成長するにつれ、より多くの情報や統一性が必要となり、当初はデザインされた基準だったものが、より大きなデザインオプスチームへと変化していきました。

こうしてスケーリングのためのデザインは、ユーザーエクスペリエンスやデジタルプラットフォームに関連するすべての人を含む、Airbnbの複数のチームに拡大しました。

Airbnb社のDesignOps担当ディレクターであるAdrian Cleave氏は、「私たちの使命は、仕事の速度と品質を向上させる集中型のツール、システム、サービスを通じて、プロダクトチーム全体の速度を上げることです」と、その進化について述べています。

私たちの機能には、デザインプログラムマネジメント、デザインツール、ローカリゼーション、プロダクトデザイン、チームコーディネーターなどがあります。
私たちは、マーケティング、プロダクト、デザイン、エンジニアリングと密接に連携し、最高のユーザーエクスペリエンスを実現します。

現在、Airbnbでは5つのチームがDesignOpsに専念しており、小さな会議室で一緒に働く小さくフレキシブルなチームから、世界的な業界リーダーへと企業が進化していく様子を示しています。

急速に変化するデザインニーズに直面しているこのような企業は、DesignOps哲学を導入することで最大の利益を得ることができます。

ニーズの把握

チームがDesignOpsの役割やツールを充実させるために必要なスケジュール感は、組織によって大きく異なります。

ニーズは多くの場合、チームが成長し、構造、プロセス、および品質について疑問を持ち始めたときに起こります。

デザインオプスのワークフローに移行する準備ができたチームは、社内で以下のような質問をしているかもしれません。

• 時間をかけて成長していくにはどうしたらいいか？
• 質の高いデザインを優先させるには？
• デザインに長けた人材を確保するには？
• より効率的なデザインプロセスを構築するには？
• デザインを改善するためのマイルストーンを作るには？
• どうすれば、社内でのより良いコラボレーションを実現できるか？
• ツールスタックをシンプルにするにはどうしたらよいか？

これらの質問に答え、ニーズを満たすことが、ほとんどの組織におけるDesignOpsプロセスの基礎です。

DesignOpsは次のような結果をもたらしてくれます。

• システムの構築によって必要な作業時間を短縮
• 組織をコラボレーティブにする
• DesignOpsの推進者と支持者に光があたる
• 採用や文化的変化の機会を生み出す
• 部門間のワークフローを管理し、より良いプロジェクトを実現する

DesignOpsによって得られる影響

（訳注：このセクションは、翻訳の都合上意図的に省いた箇所が多く、原文よりも文量がかなり少なくなっています。気になる方は原文を参考されることをおすすめします）

では、組織にDesignOps構造を導入すると何が期待できるのでしょうか？

ここからは、DesignOpsが人にどのような影響を与えるのか、会社のどの領域に影響を与えるのかをご紹介します。

もし、DesignOpsが今日のようになるとわかっていたなら、私は標準的な指標を構築することにもっと時間をかけて、その効果を定量化し、認知度を高めることで、DesignOpsが正式なキャリアパスとして広く受け入れられるまでの時間を短縮しようとしたと思います。
── Roxann Adams, DesignOps Manager, CIO Design, IBM

あなたの組織がDesignOpsを経験し、影響を与えるには、この役割に飛び込む動機から始める必要があります。

あなたは…

• 根っからの人好きで、人が輝く姿を見たいと思っていますか？
• あるいは、プロセスや方法を追求するのが好きな方でしょうか
• 不可能を可能にすることでエネルギーを得ることができますか？
• 人の話を聞くのが好きで、混沌とした状況から秩序や構造を作り出すのが好きな方ですか？
• 人、ビジネス、テクノロジーの交差点で活躍したい方でしょうか
• それとも、簡単に出世する方法を探しているのでしょうか？

あなたの個性は、あなたが想像する以上にあなたの成功を左右します。自分の中にあるファシリテーターや支援家の気質を呼び覚ましてください。そこに「エゴ」は共存できません。

知識を発見し、それを活用して組織全体の点と点を結びつけ、サイロを打ち破るのです。あなたが身につけているマインドセット、ストレスを処理する能力、そして過去の仕事の経験が、組織内の異なる分野やレベルの人々を結びつけることを可能にします。

他の人が障害と感じるところにユニークな機会を求め、コラボレーションへの道を切り開く。そして古い対立を解消し、人々に愛される職場を作りましょう。

デザイナーズ・ウェイを実現するための機会

大規模な組織の再編成を経験した人は、この再編成というアプローチが、それ自体に対する不満や不信感によって、ポジティブな面を上回る大きなダメージをもたらすことを知っているでしょう。

トップダウンのアプローチは、一握りの人が組織全体の考え方や決定を微調整し、他の人の意見をほとんど聞きません。

組織というのは、1頭のクジラに見えても、近づいてみると実は何千匹もの魚の群れ。それぞれに過去、性格、課題、目標があります。

一つにまとまり、適応するためには、体の各部分（部門）が調和して動き、同じ言葉を話し、隣の人を信頼し、より大きな利益のために妥協することが必要です。

DesignOpsは、デザイナーらしいやり方でそれを行うユニークな機会です。

私たちは聴衆（メンバー）に耳を傾け、ボトムアップとトップダウンで一緒に作り、使い、祝うのです。

例えば、DesignOpsを通じて、CxOレベルのディレクターがデザイナーのワークショップやトレーニングセッションに参加し、デザインシステムの複雑さを深く理解し、最新のプロダクトをデザインするために何が必要か理解することに興味を示しているのを目にしました。

またDesignOpsは、多くの組織で典型的に見られる、マーケティングvsプロダクトデザイナーなどの部門間の衝突も解決します。DesignOpsは衝突するチームを共通の目標に向かってまとめ、仕事のプレッシャーを軽減し、中立的な立場でブランドを統一します。

人への影響

DesignOpsは、ルーチンワーク、ストレス、燃え尽きを減らし、スキル開発を通じてチームメンバーを育成します。

信頼と明快さを基盤に

DesignOpsは、ワークフローを再設計することで時間を節約し、スケールと成長を促進します。

人員不足のチームが急成長することは、精神的においても仕事上においても、メンバーに多大な負担を強いることになります。組織のサイロ化、お互いの仕事への理解不足、ミスコミュニケーションが、膨大な仕事量をさらに増やします。

その結果、チームメンバーは仕事や職場に不満を抱くようになります。

また、彼らは、手を動かすのを止めたらプロジェクトが崩壊してしまうと感じており、肝心な知識を頭の中に溜め込んでしまい、その効果的な配布方法を見つけられていません。

あなたがすべきことは、信頼と明確さに基づく文化を構築することであり、組織的にそれらを支援することです。

（DesignOpsの結果として）作業プロセスやドキュメント作成方法を共有しているので、常に誰かが誰かをカバーしてくれます。

あなたの組織の中にも、この効果を利用して人々に落ち着きと安らぎを与えることができる人がいるのではないでしょうか。

人材の維持・確保

働き方を共有することで、チームのローテーションが可能になり、異なるチームと一緒に仕事ができることで、状況が一変します。

これにより、デザイナーは新しいスキルを学び、新しい挑戦をし、気分転換をすることができます。

この方法は、人材の確保と維持に役立ちます。人が辞めてしまう主な理由の1つは、飽きてしまうこと。単調さは致命的です。

多くの大企業は、引き継ぎやオンボーディングのプロセスが不十分なため、人の移動を恐れています。しかしこのような企業では、退屈のために人材が辞めてしまうことの方が問題です。

ここで、DesignOpsが大きな違いを生み出します。刺激的な職場環境を作ることで、優秀なチームメンバーの維持と採用が容易になります。

レベルアップしよう

忙しいスケジュールの中では、コンピテンシー開発が疎かになってしまうことがあります。DesignOpsでは、学習のための時間を確保し、各人の学習目標や情熱に合ったプロジェクトに割り当てることができます。

• チームのローテーションにより、常に新鮮でエキサイティングな状態を保つ
• 新たな信頼関係と確立された共有セッションなど、人々が知識を共有する動機を作る
• デザイナーを政治などの不要な雑念から守り、技術を磨く
• デザインシステムにより、知識を組織全体に拡大し、深い仕事に時間を割くことができます。ベストプラクティスのコンポーネントとガイドラインは、反復的なデザイン作業に取って代わるものです。
• また、開発者とデザイナーが同じ言語で会話できるようになったため、アイデアを共有しやすくなり、引き継ぎの際の退屈な会話に費やす時間が減りました。
• そうして生まれた時間で、イノベーティブな機能やプロジェクトに着手できます。

ご覧のように、学習しながら会社に価値を提供することは、両立することができます。体験とロードマップを正しく設計すれば、双方にメリットがあります。

重要な仕事のための時間を増やす

フォーチュン100に選ばれた金融会社にDesignOpsを導入したところ、暗黙のデザイン作業に必要な投資額を75％削減することができました。

これにより、ミッションクリティカルなUXリサーチ、デザインシンキング、プロダクトイノベーションへの投資に必要なリソースが大幅に削減されました。
── Theresa Neil, Top Designer in Technology, O’Reilly Author, and Founder of Guidea on delivering DesignOps for enterprise organizations

人もお金も増えるかもしれませんが、時間は限られています。週に4〜8時間の時間を取り戻すことで、何ができるか想像してみましょう。

DesignOps の仕組み

では、組織にDesignOpsを導入し機能させるにはどうすればよいのでしょうか。

DesignOpsには、マインドセットとチームの機能（役割や責任とも言える）という2つの側面があります。

本章ではマインドセットに焦点を当て、チームの機能や役割については第5章で詳しく説明します。

DesignOpsの考え方は、どのような規模のチームにとっても重要であり、フリーランスのデザイナーが一人で仕事をする場合であっても、長期的なプロセスと効率性を生み出し、より良い一貫した仕事を実現するのに役立ちます。

デザインオプス・マインドセット

UX CollectiveのGus Correia氏は、DesignOpsの考え方についてこのように書いています。

DesignOpsは新しいデザイン部門ではなく、デザイン、製品、エンジニアリングの間のインターフェースを「どのように」管理するかということです。
また、デザインオプスとは、時間をかけてユーザー中心主義とアジリティの文化を創造することであり、デザインを単なる工程の一つとしてではなく、引き渡しとフィードバックのイテレーティブな儀式として位置づけることが出来ます。

DesignOpsの考え方は、デザインプロジェクトに取り入れるのと同じ戦略や考え方を、会社の構造や仕事のメンタリティに適用することです。

DesignOpsの考え方は、インパクトのあることを成し遂げるため協力して仕事するのに役立ちます。

これは個人でも、40〜50人のデザイナーで構成されるチームでも同じです。

個人レベルでは、ファイルやフォルダに共通の名前を付けるのもDesignOpsの1つです。ファイルやフォルダの名前を共通化すれば、何かを探す際の効率を上げることができます。

チームレベルでは、DesignOpsの考え方は「DesignOps Manager」という肩書きを持つ人から始まるのではなく、共通のツール、テンプレート、ワークフロー、デザイン関連の作業のプロセスや手順を使用することから始めます。

協働する

ニールセンのモデルでは、チームがどのように連携するかがマインドセットの基礎となっています。このマインドセットの部分は、複数のチームや人が関わるほとんどすべてのケースに共通しています。

• チームは、タスク・構造・役割を整理して一緒に仕事する
  組織化されたチームは、適切な機能とチーム構造を割り当て、人々がそれぞれの役割を成功させるのを助けます。
• チームは独自のプロセス、文化的規範、コミュニティを作る
  ミーティング、職場環境、さらには組織のガバナンスに関する不文律などもこの要素となります。
• チームは人間（もしくは人間的）である
  DesignOpsでは、タスクや役割を割り当てるコンピュータやアルゴリズムとは異なり個人やチームの成長を促進しながら、職場での人材の雇用と維持に重点を置いています。

調和させる

上記のモデルはDesignOpsの出発点ですが、マインドセットを定義する際には、仕事を成し遂げるための「調和」という要素が鍵となります。

デザインチームが調和していれば、成功の可能性が高まり、効率的な仕事ができるようになります。これは生産性の金字塔です。

仕事の過程で、職場にどんな調和が存在し得るか考えてみてください。

• 作業を容易にするプロセスとツールの基準
• デザインシステムの活用
• 資産の一貫した管理
• データ開発・収集のための研究拠点の構築 データ開発・収集の拠点づくり
• ワークフローとリソース配分のバランスをとること

これらが一体となって、ワークプレイスとデザインの流れが調和し、効率的なものになります。

コンセプトを描くのは簡単ですが、それを実践するのは少し難しいものです。特にデザインオプスのワークスペースをサポートする初期段階では、優先順位をつける必要があります。

あなたが最後に手がけたデザインプロジェクトを思い出してみてください。

• チームメンバー間のワークフローはバランスが取れていたか？
• 完成させるべき作業に適切な時間が見積もられていたか？
• 効果的に作業するためのツールやリソースは適切に配分されていたか？

上記の質問のいずれかに「いいえ」と答えた方は、DesignOpsの考え方における優先順位付けの価値を理解しています。

そしてDesignOpsの考え方がチームのロードマップとなっていれば、これらの要素は標準化されたプロセスの一部となり、二度と「いいえ」と答えることはないでしょう。

チームの能力の計測

変化と目標は、測定可能なものがなければ達成するのは不可能です。

DesignOpsの効果を最大限に引き出すためには、結果を測定し、定義された目標を達成するための価値体系を構築し、さらなる開発を可能にする必要があります。

これらの指標やマイルストーンは、チームの能力や効率、デザインの品質や一貫性に影響を与えます。デザインチームの指標候補には次のようなものがあります。

• プロジェクトの終了時期を明確にするための評価制度またはチェックリスト
• 標準規格やプロジェクトの目標を達成するためのデザイン品質の指標
• 制作過程のプロセスやシステムの使用
• チームで共有する成功事例のメモ・ドキュメント
• 新しいツールやシステムを学んだ社員のトレーニング時間
• プロジェクトの開始から終了までのタイムライン

これらの指標を長期的な目標をもって追うことで、チームにおけるマインドセットの有効性を判断できます。

また、プロセスをより自然に感じられるものにするために、DesignOpsのルールを明文化するよりも先に文化や考え方を整えておくことも有用です。

DesignOpsを導入するには

さて、そろそろあなたの会社や組織でDesignOpsの役割や機能がどのように役立ち、機能するかを考え始めましょう。

適切なツールとリソースをDesignOpsをチーム構造に組み込んでみましょう。といっても、一朝一夕で解決できるものではありません。

DesignOpsのマネージャーやチームメンバーを加えるには、計画、予算、プロセス管理が必要です。

問題を見極める：DesignOpsの始め方

もしあなたが自分のチームにDesignOpsを導入することを検討しているのであれば、それは何らかの問題を感じているからでしょう。

例えば成長のため、リモートでの作業のため、仕事の機能や成果物の変更のため、あるいは業務パートナーとの問題のため、などなど。

その感じている問題こそが、DesignOps導入の出発点です。解決策に取り組む前に、問題をよく見極めましょう。

DesignOpsが最も適しているのは、作業を効率化し、一貫性を持たせるためのプロセスや手順で改善できる類の問題です。

クライアントやユーザーのプロジェクトと同じようにこの問題に取り組んでください。探索的リサーチを行い、現在の課題と将来の懸念を把握します。このプロセスの中で、DesignOpsが最も効果を発揮できる分野を考えます。

そして、より良いワークフローと効率性を実現するために、チームの一部をどのように配置するかを検討します。

価値を定義：あなたのチームはDesignOpsからどのような恩恵を受けるか

DesignOpsが真の価値を提供し企業の中で成功するためには、利益を提供する必要があります。そのため問題を見極めた後にくる第2のステップは、チームにとっての価値を定義することです。

私が学んだ最も重要な教訓は、チームの規模を拡大する前にDesignOpsの戦略的価値を確立することでした。

そのためには、文化、人材、そしてDesignOpsが組織にもたらす独自の戦略的価値を真に理解する必要があります。

私は、DesignOpsはあらゆるデザインチームの競争上の優位性であり、競争が激しく要求の厳しいプロダクトの世界で成功するための準備だと考えています。
── Amber Jabeen, Sr. Manager, DesignOps, Delivery Hero MENA — Talabat

あるべき価値は日々移ろっていきます。

例えば課題が組織の成長にあれば、採用と定着が問題の中核かもしれません。あるいはデザインの一貫性やスピードが問題であれば、ツールやチーム内での作業方法を合理化することが価値あることかもしれません。

DesignOpsを始めるにあたり、こういったすべての課題を同時に解決しようとしないでください。

解決可能な問題に一度に取り組むことで、マインドセットに大きな価値を生み出し、後で別の問題にも応用できるようにします。

ほとんどのチームにとってDesignOpsは、1つの問題から始まってプロセスへと進化し、しだいにDesignOpsに特化したチームを持つようになるなど、時間をかけて導入されます。

優先順位付けとロードマップ：導入戦略

最後に、どのような課題に取り組むかをピックアップし、ロードマップを作成しましょう。

• 目標をどのように達成しようとしているのか？
• そのプロセスには誰が関与するのか？
• 変化を実行するためのスケジュールは？
• どのようにして、より大きなチームに興奮と賛同を与えるのか？
• 成功の指標は何か？

このロードマップを、主要な目標、プロセス、測定可能なもので設計し、掲示します。進捗状況を把握しましょう。ニールセンはこれを視覚化するためのワークシートを用意していますし、チーム内で配布できるようにプリントアウトして使うこともできます。

ニールセンによるワークシートの一部

あなたの会社でDesignOpsを始めることを考える上でもう一つの重要な要素は、必要性です。

あなたのチームはDesignOpsの恩恵を受けることができますか？

50人以上のデザイナーのチームがある大規模な組織では、すべてのデザイナーと彼らが取り組んでいるさまざまなプロジェクトを調整するために、デザインオペレーションの役割が必要です。

デザイナーの数が少なく、複数のチームに分かれて仕事をしている組織では、異なるデザインチームを調整するためのDesignOpsマネージャーが必要です。

デザイナーの数が少ない小規模な組織では、DesignOpsマネージャーは必要ないかもしれませんが、DesignOpsの考え方は有益です。デザインプロセスやワークフローを標準化することで、より良い仕事ができるようになるでしょう。これはスケーラビリティの基礎にもなります。

あなたの会社は取り残されているわけではない

世界で最も大きなチームのいくつかは、やっとこのレベルでDesignOpsについて考え始めました。Airbnbはもともと今日のような有名企業ではありませんでしたが、DesignOpsの導入戦略により、俊敏に進化と拡大を遂げることができました。

The Very Groupも、COVIDパンデミックの初期段階で、成長と変化を促進するためにDesignOps計画を作成し、それを実行した会社です。

デザイナーがプロジェクトを遂行する際には、それぞれが独自のセンスやツール、手法を持っているのは当然のことであり、そのような自由と個性を持つことは創造性の基本的な側面です。

実際には、デザインチームの規模が大きくなるにつれ、作業方法も変化し、ここから問題が発生することがあります。

デザインドキュメントといっても、UI仕様書やスタイルガイドだけではありません。デザイナーの責任が重くなるにつれ、成果物の複雑さも増していきます。
── wrote Liam Charnock, a senior product developer.

この言葉こそが、チームが長期的な成功を確保するためにDesignOpsが非常に重要になる理由です。たとえ考え方を変えることが困難であっても、全体的な結果はそれに見合うものになります。

The Very GroupのDesignOpsの構造は、上記のアウトラインに似ていますが、彼らのワークモデルに合わせて簡略化されています。

• Design it
  望ましい結果が得られ、プロジェクトがうまくいったら、それを文書化してプロセスを作る。
• Contextualize
  プロジェクトやプロセスの基盤となるリソースのフレームワークを作成する。
• Store it
  ファイルの命名、保存、検索性をよりシームレスにするために、明文化されたファイル構造を設定します。

DesignOps のためのツール

マインドセットとチーム体制が整えば、あとはデザインオプスのプロセスを円滑に進めるためのツールが必要になります。

ツールの多くは、すでに使用しているものや慣れ親しんだものですが、中にはあなたのチームにとって新しいものもあるでしょう。

自分のチームに合ったツールを見つけ出すことは、DesignOpsの哲学とワークフローによって長期的な成長と成功への道を歩むための最終的なステップとなります。

 DesignOps にまつわる情報は理論や戦略に焦点を当てたものが多いのですが、便利なデザインツールや開発ツールの助けを借りれば、さらに簡単にビジュアライズしたり、プロセスやワークフローを、自分に合った方法でチームに導入することができます。

ここでは、ほぼすべてのDesignOps思考の人に役立つ、さまざまなオプションを紹介します。作業用のツールから、パフォーマンスの最適化、プロジェクトの管理、デザインチームの構築まで、 DesignOps の考え方を深めたいすべての人に役立つものがあります。

デザインツール

適切なデザインツールは、DesignOpsの思考とプロセスを促進します。UXPinとMergeテクノロジーにより、デザイナーは開発者によってコーディングされたコンポーネントを使ってプロトタイプを作成できます。

すべての要素がインタラクティブで、(チーム内の)標準に沿っているため、プロジェクトのアップタイムを短縮し、デザインの一貫性を高めることができるツールです。

このツールでは、デザイナーは開発者のGitリポジトリやStorybookからコンポーネントをインポートまたは同期できます。

このツールはDesignOpsの考え方を前面に押し出していて、共通のコンポーネント、コード、ユーザーインターフェースの一貫性を生み出すことができます。

私たちの成功には、プロジェクトチーム間のシームレスなコラボレーションが不可欠です。

さらなる認知度向上とエンゲージメントを図るために、デザイナーと開発者が共同でデザインを作成できる、デジタルデザイン、ホワイトボード、プロジェクトトラッキングツールのコアセットをサービスとして活用しています。

デザインはリアルタイムで更新され、ステークホルダーからのフィードバックを受けて必要に応じて進化させることができます。

── Marc W. Wisniewski, Design Producer & STSM CIO Design, IBM

このデザインツールは次のように活躍します。

• デザインシステムを統一する
  UXPinで完全なシステムを構築し、Mergeを使用して、インタラクティブで制作可能なUI要素やコンポーネントと同じ一貫性を持ってデザインすることができます。
• コードディングされたコンポーネントを使ってデザインする
  コードで出来たものを使ったデザインプロセスを導入します。デザイナーは開発チームとフィージビリティについて何度もやりとりせずに、すでに開発されたものを使用することができます。
  準備が整ったコンポーネントは、UXPinのエディタと同期させ（新しいライブラリに追加し）、キャンバスにドラッグ＆ドロップするだけで新しいデザインを作ることができます。
  これにより開発者は、これまでのようにすべてのコンポーネントをゼロから開発する必要がなく、既にGitリポジトリやStorybookに保存されているコンポーネントのコードを使うことができます。
• このプロセスによって、設計チームと開発チームの時間と労力を節約します。
  プロダクトチームは、UXPinでプロトタイプを作成し、それをデザイナーに見せて最終的な調整をしてもらった後、開発に移ることができるのです。

パフォーマンスの最適化

パフォーマンスは、DesignOpsの戦略とチームのメンタリティを成功させるための重要な指標です。しかし、自分が最高のパフォーマンスを発揮できているかどうかは、どうすれば分かるのでしょうか？

Level Upは7つの質問に答えるアセスメントです。
また、同規模の他のチームをベンチマークすることで、自分のチームにとって何が有効なのか（あるいは有効でないのか）を考えることができます。

そして、自分たちのチームが何に優れているのか、何をすべきなのかを明確にするためのレポートと、それをチームで試すためのワークシートを手に入れることができます。

Level Upフレームワークは、Designer FundのデザインマネージャーであるHeather Phillipsによって開発されました。

プロジェクトマネジメントのためのツール

DesignOpsがチームの効率を大幅に向上させる分野のひとつに、プロジェクト管理があります。プロジェクト管理に適したツールは、チームにとって使いやすく、確立されたプロセスや手順と連動します。

このテンプレートには、ファイル構造、ワークフロー、プロジェクトのトップシートデータなどの詳細なスタートアップ情報が含まれており、チームで共同制作を行う際に利用することができました。

また、テンプレートだけでなく、デザイナーは複数のデザインシステムライブラリにアクセスでき、プロジェクトの種類に応じて簡単に有効/無効を切り替えることができます。

デザイナーのツールチェーンにおいては、重複するツールや不要なツールの数を減らし、コアとなるツールセットを用意することが重要です。このツールチェーンを減らすという目標により、ハンドオフの時間が大幅に短縮され、テンプレートやデザインシステムライブラリの更新を簡単に行うことができるようになりました。
── Marc W. Wisniewski, Design Producer & STSM CIO Design, IBM

プロジェクト管理ツールは数多くありますが、その中から選ぶのは大変です。すでにお気に入りのツールがある場合は、それを最大限に活用して、チームができるだけ効率的に管理プロセスを行えるようにしましょう。

まだプロジェクト管理ツールを使用していない場合は、この機会にいくつかのツールを試してみて、自分たちに最適なものを見つけてください。重要なのは、チームが実際に使用し、ワークフローを迅速化し、会社の規模に合わせて成長できるツールを選ぶことです。

• Trello
  カンバン方式のカードを使ってプロジェクトを視覚的に整理するツールです。タスクの割り当て、タイムライン、生産性の指標、カレンダーなど、ツールを拡張することができます。
• Asana（アサナ）
  リスト、タイムライン、ボードなど、課題を管理するための複数のビューが用意されており、各ユーザーがプロジェクトや仕事の見え方を管理することができます。さらに、このツールには、一般的なフローやプロセスを高速化するための自動化機能もあります。
• Jira（ジラ）
  ソフトウェア分野でよく使われているツールで、計画、追跡、実施のために作られており、リリーススケジュールやフィルターも備えています。
• Confluence
  Jiraと同じメーカーが開発したワークスペースで、リモートチームでの共同作業に特化しており、DesignOpsの考え方の核となる、チームのための単一の情報源として設計されています。
• Monday
  プロジェクトの戦略立案、計画、実行、レビュー、納品を一貫して期限内に行う必要があるチームのためのワークフローを構築、実行、拡張するプロジェクト管理ツールです。

チームビルディングのためのツール

DesignOpsのコンセプトに基づいてチームを構築することも重要です。デザインや開発のプロセスや計画において、人は最も重要な要素です。

これらのツールは、チームの結束力を高め、士気を高め、より多くのチームメンバーがあなたの活動に賛同するために作られています。

• TriviaMaker
  このツールでは、グリッド、リスト、トリビア、ホイールなどのゲームを、仮想環境やオンライン環境で開催することができます。あらかじめ用意されているゲームもあれば、自分でゲームを作ることも。チームに活力を与えることができます。
• Pizzatime
  ピザパーティは、COV前に可能だった最強の（そして最も簡単な）チームビルディングの1つでした。ピザパーティは、COVID以前の時代には、最も強力な（そして最も簡単な）チームビルディングのためのエクササイズでした。Pizzatimeを使えばどこにいてもチームメンバーにピザを送ることができ、遠隔地やバーチャルで楽しむことができます。
• Virtual Zoom Games
  借り物競争からビンゴゲームまで、チームでオンラインで遊べる簡単なゲームやアクティビティが満載で、より協力的な職場を作ることができます。
• Game Word Generator
  ワードゲームは楽しく、ブレインストーミングや思考を促進します。このツールを使えば、どこからでも参加できる簡単なワードゲームを企画することができます。

これで、あなたのチームや会社にDesignOpsを統合する方法について考え始めるために必要なツールやリソースがすべて揃いました。

たとえ小さな組織であっても、DesignOpsの考え方を前面に押し出して仕事をすることはできます。そのメリットは、コラボレーションや結束力の向上、一貫性や効率の向上、必要に応じて拡張可能な全体的なパフォーマンス最適化など、計り知れないものがあります。

これらの手法や考え方は、役職名にDesignOpsと入っていなくても、1人のチームでも活用できます。） DesignOpsとは、一言で言えば、大規模なプロジェクトやスケールに合わせてデザイン思考を体系化する方法です。

いったんツールと考え方を手に入れれば、DesignOpsの考え方は生活や仕事のやり方として定着していきます。

Mergeについて

Design process simplified

UXPinを使用すると、開発者がプロダクトを構築するための完全にインタラクティブなコンポーネントを使用して設計できます。これで、エラーの余地のないプロトタイプを作成し、より迅速にリリースできるようになります。Meregeテクノロジーを使用してDesignOpsを拡張します。

Scale your Design Operations

信頼できる統一された情報源を使用することでデザイナーと開発者を結びつけ、プロダクトがブレるのを防いだりベロシティを向上します。

Mergeテクノロジーを備えたUXPinを試して開発者が使用するのと同じコンポーネントを使ってデザイナーにプロトタイプを作成してもらいましょう。

https://www.uxpin.com/merge

これは何

• この記事は、綿貫様にご執筆いただきました。
• この記事には、Part 1とPart 2の続きになります。
• UXPin Merge をTypeScriptとともに導入するための記事となります。
  • こちらのPull Requestに今回の記事で変更した部分が全て載っています
• 前回はCSS Modulesを導入しましたが、筆者はCSS in JSの方が好みなため更に入れ替えます
  • 使い慣れているのもあり、Emotionの導入を説明します

Emotionを使う準備

ライブラリのインストール

まずはこちらのコマンド。

yarn add -D @emotion/react

（Emotionにはstyled-component記法でスタイルを書くための@emotion/styledもありますが、筆者がstyled-component記法をあまり好まないためこの記事では省略しています。）

JSX Pragmaを省略するために

yarn add -D @emotion/babel-preset-css-prop

  {
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "skipLibCheck": true,
-     "jsx": "react"
+     "jsx": "react-jsx",
+     "jsxImportSource": "@emotion/react"
    }
  }

  module.exports = {
    stories: [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    ],
    addons: [
      "@storybook/addon-links",
      "@storybook/addon-essentials",
      "storybook-css-modules-preset",
    ],
+   babel: async (options) => ({
+     ...options,
+     presets: [...options.presets, "@emotion/babel-preset-css-prop"],
+   })
  }

上記の設定はしなくても動くのですが、そうするとtsxファイルの先頭に毎回

/** @jsxImportSource @emotion/react */

と記載しないといけなくなってしまいます（JSXプラグマというもので、詳しくはこちらをご覧ください）

毎回書くのは地味に面倒ですし、うっかり忘れて動かなくなることもあるので対策しておくためのコードでした。

（2021年11月現在、実はEmotion公式は@emotion/babel-preset-css-propではなく@emotion/babel-pluginを推奨しているのですがStorybookで上手く動いてくれませんでした。そのためこの記事では@emotion/babel-preset-css-propを使用しています。）

Emotionを使う

ここまで来たら各コンポーネントのスタイル指定をCSS Modulesの記法からEmotion式に変えるだけでOKです。

こんな記事を書いておいて何ですが、実はEmotionを使うにあたりUXPin自体の設定変更は必要ありません笑
ただ、自分が導入しようと思ったときは「実質セット」であるStorybook側の設定に色々悩まされたのでこのタイトルで記事を投稿しています。

お片付け

前回導入したCSS Modules用の記述がいくらか残っていますので綺麗にします。

  ...
  module: {
    rules: [
      {
        loader: ['babel-loader', 'ts-loader'],
        test: /\.tsx$/,
        exclude: /node_modules/
      },
-     {
-       test: /\.css$/,
-       use: [
-         {
-           loader: 'style-loader',
-         },
-         {
-           loader: 'css-loader',
-           options: {
-             importLoaders: 2,
-             modules: true
-           },
-         },
-       ],
-     },
    ]
  }
  ...

  ...
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
-   "storybook-css-modules-preset",
  ],
  ...

yarn remove @types/css-modules css-loader storybook-css-modules-preset style-loader

あとは module.css ファイルを消せばOKです。

最後に

この記事からUXPinに興味をお持ちいただけた方は、 14日間の無料トライアルにサインアップして、今日からより是非ご利用を開始してみてください。また、UXPin Mergeをご希望の方は、こちらよりデモをご予約ください。

この記事は、綿貫様にご執筆いただきました。元記事は、こちら。

これは何

• この記事は、綿貫様にご執筆いただきました。
• この記事はこちらの記事の続きとなり、UXPin Mergeを TypeScript とともに導入するための記事です。
  • こちらのPull Requestに今回の記事で変更した部分が全て載っています
• 前回はStorybookのイニシャライズで自動生成されたコードをそのまま使っていましたが、今回はそれらをCSS Modules化します

CSS Modulesを使う準備

ライブラリのインストール

まずはこちらのコマンド。

yarn add -D @types/css-modules storybook-css-modules-preset

https://www.npmjs.com/package/@types/css-modules

https://www.npmjs.com/package/storybook-css-modules-preset

@types/css-modulesの説明

TypeScript の環境でCSS Modulesを使うと、以下のようなエラーが出ます。

Cannot find module './foo.module.css' or its corresponding type declarations.

これを解消するためにインストールしています。

中身は実質これだけなので、自分でd.tsをどこかに用意しても良いんですが……笑

interface CSSModule {
    /**
     * Returns the specific selector from imported stylesheet as string.
     */
    [key: string]: string;
}

Storybookの準備の続き

storybook-css-modules-presetをインストールしただけでは駄目なので、.storybook/main.jsを以下のように編集します。

  module.exports = {
    "stories": [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
      "@storybook/addon-links",
-     "@storybook/addon-essentials"
+     "@storybook/addon-essentials",
+     "storybook-css-modules-preset"
    ]
  }

ライブラリを使わずmain.jsの中に以下のような記述をしても良いのですが、使う方が簡単なので今回は採用しています。

webpackFinal: (config) => {
  // webpackの設定
}

https://storybook.js.org/docs/react/configure/webpack

UXPinの準備

uxpin.webpack.config.js を編集します。

  {
    test: /\.css$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
-         importLoaders: 2
+         importLoaders: 2,
+         modules: true
        },
      },
    ],
  },

css-loader の modules を true にするだけでOK。

CSS Modulesの適用

あとはひたすら同じ作業なので、Button.tsxを例にして説明します。

CSSのimportをCSS Modulesの作法にならって変更。

- import './button.css';
+ import styles from './button.module.css';

classNameが単なる文字列として指定されている箇所をCSS Modulesの作法にならって変更。

- const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+ const mode = primary ? styles['storybook-button--primary'] : styles['storybook-button--secondary'];

ちなみに一般的には styles.foo の書式だと思いますが、今回のようにクラス名がケバブケースになっている場合は styles.['foo-bar'] とすることで回避可能です。

そもそもハイフンで繋がなければ良いじゃん……というのはごもっともですが、ときには使えるテクニックかもしれません。

あとはひたすら同じ作業を繰り返していけば完成です！

ちなみに

前回の記事では uxpin.config.js からしれっと Page.tsx を抜いていました。

module.exports = {
  components: {
    categories: [
      {
        name: 'General',
        include: [
          'stories/Button.tsx',
          'stories/Header.tsx'
          // StorybookのイニシャライズでPage.tsxも生成されているけど登録していない
        ]
      }
    ],
    webpackConfig: 'uxpin.webpack.config.js'
  },
  name: 'UXPin Merge + TypeScript + Storybook'
}

じつは page.css の中では h2 や p などタグに対して直接スタイルを指定していたんですね。
そのためUXPinのGUIの画面のスタイルが崩れてしまいます。

その説明を前回の記事の時点でするのは話がややこしくなるな……と思って省略していました。

今回CSS Modulesを適用したので Page.tsx を登録しても問題なく動きます。

次回

今回はCSS Modulesを導入しましたが、筆者はCSS in JSの方が好みなため更に入れ替えます。使い慣れているのもあり、Emotionの導入を説明します。

この記事からUXPinに興味をお持ちいただけた方は、 14日間の無料トライアルにサインアップして、今日からより是非ご利用を開始してみてください。また、UXPin Mergeをご希望の方は、こちらよりデモをご予約ください。

この記事は、株式会社Incrementsの綿貫様にご執筆いただきました。元記事は、こちらから。