デザインシステムを普及させるためには?

evangelize design system

デザインシステムの採用と拡張は簡単ではありません。ステークホルダー、プロダクトマネージャー、開発チーム、デザイナーを説得し、デザインシステムの価値を伝えるために、組織全体から得なければなりません。

デザインシステムの構築は、最初の一歩にすぎません。デザインシステムが使われて最適な成熟度に到達するには、多くの時間と費用がかかります。 デザインシステムを伝えるということは、そのデザインシステムで、チームがより効率的で生産性が高く、複雑な課題に自由に取り組めるようになるということを証明しなければならないということです。

ExxonMobileがデザインシステム「Unity」を作成したとき、同社は10か月で50以上ものWebアプリを構築しました。 このように、デザインシステムがどのようにビジネス価値を生み出し、投資収益率(ROI)をもたらすかを実証することが目標です。

この記事では、デザインシステムをステークホルダーや投資家に売り込む際に役立つ実用的な情報・ヒントなど、組織の賛同を得るための方法についてご紹介します。

ゼロから始める・既存のデザインシステムを使用する場合でも、UXPinには、プラグインやエクステンションのない単一のプラットフォームを使用した、デザインシステムを構築、拡張、成熟させるためのソリューションがあります。 

なぜデザインシステムの普及が必要なのか?

多くのステークホルダーは、デザインシステムの構築と管理を、収益を生み出す製品のデザインと最適化から外れた、やたらコストのかかるものと見なしています。 彼らは、デザインシステムがどのようにROIを生成するかをわかっていません。

デザイナーには、他のデザインチーム、プロダクトマネージャー、およびエンジニアにデザインシステムを採用するよう説得するという壁も立ちはだかります。 Spotifyが2018年にデザインシステム「Encore」を構築したとき、彼らは「22種類のデザインシステムが浮遊していた」といいます。

したがって、デザイナーにとってデザインシステムの普及が必要な主な理由は2つです。

  • ステークホルダーにとってのビジネス価値を証明する。
  • デザイナー、プロダクトチーム、およびエンジニアの作業負荷を軽減および生産性の向上。

デザインシステムのバイインを取得において誰が責任を担うのか?

responsive screens prototyping

誰がデザインシステムのバイインで責任を担うのかは、組織とデザイン設計部門の構造によって異なります。 製品マネージャー、Webマネージャー、デザインリーダー、DesignOpsリーダー、またはスタートアップ会社の業務を受け持つUXデザイナーから任されることもあり得ます。

Eightshapesの創設者であるネイサン・カーティス氏は、3つのよくあるデザインチームの構造と、デザインシステムの拡大にどのように関与しているかを識別しています。

  • 独立型チームモデル:一般的に、スタートアップの環境では、契約社員やフリーランサーと仕事をするUXデザイナーが一人いる。彼らは、一貫性を管理し、契約社員(および将来の社員)のオンボーディングを最小限に抑えるために、デザインシステムの必要性を説くこともある。
  • 集権型チームモデル:中規模から大規模の組織で典型的なチーム構成で、集権化されたチームによって設計上の意思決定が行われる。複数の製品の設計決定を管理することが多い。
  • 連合型チームモデル:米国上院の代表と同じように、さまざまなプラットフォームおよび製品ラインの設計者の部署が協力して、設定された期間、集合的に設計上の意思決定を行う企業構造。

ステークホルダーにデザインシステムを提案するタイミングは?

デザインシステムの構築が遅れるほど、そのデザインシステムの実行に時間と費用が掛かります。 問題は、AirbnbSpotifyなどの多国籍企業を含むほとんどの組織が、これに気付くのが遅すぎるために、結局は多額の費用がかかってしまうということです。

Airbnbのデザイン担当副社長であるアレックス・シュライファー氏は、「単純なことです。まず製品の製造方法を導入しないことには、製品を導入することはできません。」 と述べています。

UXPinがデザインシステムのスペシャリストである、Superfriendlyダン・モール氏に話を聞いたとき、どの規模の会社がデザインシステムから利益を得るのかを尋ねました。 ダン氏は、「私が特定できるような規模あるとは思いませんが、その会社の維持している、または維持しようとしているデジタル資産の数に左右されることだと思います。」と答えました。

デザインシステムがないと、ソフトウェア開発プロセスが徐々に遅くなり、ユーザーエクスペリエンスが低下します。 デザインを拡張するために設計者の雇用を増やすことはできません。 デザイナーが増えるのは「キッチンで調理する人」が増えるということであり、その結果、デザインプロセスに収拾がつかず、一貫性がなくなり、デザインにズレが生じます。

以下は、タイミングをみるためのチェック事項です:

  • 製品開発のスピードに満足していますか?
  • 自身のインターフェースは、同じデザインパターン、色、文字デザイン、およびその他のスタイルを共有していますか?
  • KPIを満たす高品質の製品を提供するのに十分な時間は常にありますか?
  • 部門のサイロは設計にどのように影響しますか?
  • 余分な設計またはコードタスクにどのくらいの時間とお金をかけていますか?
  • 設計や技術的負債の整理にどのくらいの時間とお金をかけていますか?

このような質問に答え、設計上の問題を浮き彫りにすることで、組織がデザインシステムを導入する時期だということを提案できるきっかけになります。

デザインシステムをどのように普及するか?

search files 1

無料のツールキットであるデザインシステムの普及に、デザイナーからバイインを得るための実証済みのテンプレートがあります。 デザインシステムが解決する問題と、それがどのようにROIをもたらすかを特定するための内部リサーチが必要です。

以下は、プレゼンを準備し、デザインシステムを広めるための5つのステップです。

ステップ1ー リサーチの実施

最初のステップは、リサーチを実施して、設計における社内の問題点を見つけることです。例えば、もしかしたら、UIキットやスタイルガイドの方が、より現実的で費用効果の高いソリューションかもしれません。

この方法は直感に反するように聞こえるかもしれませんが、ステークホルダーや他のチームメンバーからの抵抗や精査に直面する可能性が高いことを頭に入れておいてください。 あなたの目標は、難しい質問に備えるためにあらゆる可能性を確実に探っておくことです。

プロダクトマネージャー、デザインリーダー、カスタマーサポートマネージャー、エンジニア、およびその他のチームメンバーが直面している問題と課題を把握するために、リサーチには彼らへのインタビューも含まれるべきです。

  • 手直し率は?
  • デザインの引き渡しの問題は何ですか?
  • ユーザビリティの問題に関連するサポートチケットはいくつありますか? そして、ユーザーへの影響は何ですか?
  • どのくらいの頻度で設計と開発にズレが生じますか?

この段階での目標は、デザインシステムが解決できる問題を特定し、ROIがプラスになるのを実現することです。 最も重要なことは、これらの社内の問題が顧客にどのような影響を与えるかということです。

ステップ2–調査に基づいてプレゼンの準備

デザインシステムを広めるテンプレートには、4つのセクションに40を超えるスライドがあり、デザインシステムを実施するための強力なプレゼンを作成するために必要なものがすべて含まれています。

以下がプレゼンに含まれます:

  • ユースケースと調査からの事実による導入
  • デザインシステムとは何か、そしてそれがどのように機能するかの概要
  • ROIを計算して提示するためのテンプレート
  • 次のステップのセクションと、設計システムの実施を計画する方法

また、デザインシステムの一貫性と整合性を維持するために、ガバナンスのシステムとデザインシステムチームが必要になります。 そうしないと、Spotifyのように、22のデザインシステムが世界中に広がってしまいます。

デザインシステムチームの規模は、会社と製品数によって異なります。 以下は、Superfriendlyが集権型チームモデルに推奨するデザインシステムチームの例です(上記の「誰がデザインシステムのバイインを得るために責任を担うのか?」をご参照ください)。

  • プロダクトオーナー
  • デザインマネージャー
  • テクニカルディレクター
  • シニアデザイナー
  • シニアエンジニア
  • シニアアナリスト
  • コンテンツストラテジスト
  • アソシエイトデザイナー
  • アソシエイトエンジニア
  • QA

規模が小さめの企業やスタートアップ企業では、これらの役割のうち2〜5つしか果たしていない場合があります。

ステップ3–味方を見つけてチームを教育する

ステークホルダーに提案する前に、チームメンバーの教育をすることが不可欠です。 プロジェクトの背後にいるチームメンバーが多いほど、ステークホルダーを説得できる可能性が高くなります。

Abstractのシニアプロダクトデザイナーであるジョーダン・スタニシア氏は、デザインシステムに対するあなたの情熱とビジョンを共有する他の部門から「味方」を見つけることを勧めています。 こういった味方の伝道者は、あらゆる部門がどのようにデザインシステムを使用するか、そしてそのチームメンバーにアピールするための最善の方法を教えてくれます。 SurveyMonkey、HubSpot、WeWorkの従業員はすべて、この戦略でチームメートの教育をしてきました。

このプロセス中で、ステークホルダーへのプレゼンを強化するためのより深い見識が得られるかもしれません。

ステップ4ー ステークホルダーへのプレゼン

ステークホルダーへのプレゼンでは、次のことを提示することが重要です。

  • デザインシステムが、これまで他社や競合他社にどのように役立ったか
  • 自社が抱えている問題点、ペインポイント
  • これらの非効率性から生じるコスト
  • 顧客への影響
  • チームメンバーからのフィードバック
  • デザインシステムによる非効率性の低減・解消とそれに伴うROIの算出方法
  • 会社特有の利点
  • 提案するデザインシステムの構造の基本的な概要
  • デザインシステムのチームとガバナンスの概要

無料のテンプレートであるデザインシステムの普及には、こういったポイントをステークホルダーに簡潔に提示するための余白スペースがあります。

ステップ5–継続的な伝導とアウトリーチ

デザインシステム自体のように、あなたがする伝導と教育は進化の途中です。なので、 デザインシステムチームは、引き続きチームメンバーと連携していなければいけません。

  • 問題点の洗い出しと解決策
  • インプット、提案、オーナーシップの奨励
  • 更新、拡張およびベストプラクティスに関するチームへの教育

デザインシステムを拡張するにつれて、より多くの資金とリソースが必要になるので、デザインシステムをステークホルダーに継続的に伝道することが重要です。

  • デザインシステムが非効率性をどのように改善したか実証
  • チームメンバーからのフィードバック
  • デザインシステムに関連するユーザーリサーチからのフィードバックの共有
  • デザインシステムによるユーザビリティとアクセシビリティの改善方法
  • ROI
  • デザインシステムのロードマップと、将来の変更がビジネス価値をもたらす方法

UXPinを使用したデザインシステムの構築、拡張、および成熟

design system atomic library components

UXPinのデザインシステムの機能を使用して、最小限の投資でデザインシステムを始めてみませんか。 色、アセット、文字デザイン、コンポーネントを使用して、デザインシステムをゼロから設計してみましょう。 ドキュメントを使用してデザインシステムを管理し、新しいコンポーネントの権限を設定して、不正な変更を防ぐこともできます。

UXPinは、UXPi Mergeを使用した、拡張および成熟したデザインシステム向けのソリューションもあります。 マージを使用すると、リポジトリからデザインシステムをUXPinのデザインエディタに同期できます。 設計者は、完全に機能するコードコンポーネントを引き出して移動させるだけで、新しい製品やユーザーインターフェースを構築できるのです。

Mergeを使用すると、UXデザイナー、プロダクトチーム、およびエンジニアは皆まったく同じコードコンポーネントを使用するため、組織全体で信頼できる唯一の情報源が作成されます。

UXPinを使用してゼロからデザインシステムの構築を開始する無料トライアルにサインアップするか、成熟したデザインシステムについては、Mergeのページにアクセスして詳細をご覧ください

アプリデザイン – UXを向上させるには

App design UX

最近の研究では、ユーザーが携帯電話のアプリに費やす時間は1日あたりこれくらいです。これは、過去2年間で30%もの大幅な伸びです。技術革新、アプリのデザインUI UXの理解向上、そしてもちろんコロナ禍が推進力となっています。

しかも、4.2時間はあくまで世界平均であり、ある地域では、モバイルユーザーのアプリの平均利用時間は5時間を超えています。

アプリの使用量が増え、デジタル機器を使う時間も増え、iPhoneをはじめとするスマートフォンの販売台数も伸びています。デジタル空間は、日を追うごとに競争が激化しており、多くの企業がオーディエンスの注目を集めようとしている今、最高のモバイルアプリデザインの作成は不可欠です。ユーザーの注目を集め、ニーズを満たし、そして最も重要なのは、ユーザーが何度も足を運ぶような、最高のモバイルアプリのデザインです。それについてこれからお話しましょう。

モバイルアプリのプロトタイプを作成しませんか? UXPinを使用して、完成品のように見えるアプリのプロトタイプをデザインしてみてはいかがでしょうか。変数、ステート、コンディションを使ってプロトタイプに命を吹き込み、プロトタイプをインタラクティブなデザインに変換しましょう。UXPinの無料トライアルをぜひお試しください

モバイルアプリのUXデザインとは

モバイルアプリデザインのUX(ユーザーエクスペリエンス)とは、一言で言えば「エンドユーザーを第一に考えること」です。AppleやAndroidの携帯電話、タブレット端末、さらにはスマートウォッチなどの身体に装着するウェアラブルデバイスなど、ターゲットとなるユーザーが求めるものを、どのように実現するか、シームレスでユーザーに優しく、かつ直感的な体験を生み出すことが重要なのです。

screens process lo fi to hi fi mobile 1

最高のモバイルアプリデザインは、見た目、使い心地、ユーザーの生活における必要性など、アプリの機能を考慮したものです。

Twitterのアプリを例に挙げてみましょう。多くの大手ハイテク企業がそうであるように、TwitterにはアプリのUXデザインを正しく理解するためのマスタークラスがあります(もちろん、ユーザーの半分を悩ませるような絶え間ない改ざんやアップデートを無視すればの話ですが……)。世界中のほぼ誰でも、誰であろうと、どんなデバイスを使っていようが、Twitterのアプリを手に取り、効率的に使うことができるのです。

ユーザーをわくわくさせるアプリデザインのUXを実現するために、モバイルアプリデザインのベストプラクティスをご紹介します。

モバイルアプリデザインの5原則

1. ユーザビリティ

モバイル画面のスペースは限られています。なのでそれを無駄にしないでください。画面いっぱいに表示されるアプリや、ポップアップの×印が小さすぎて押せないアプリ(そしてアプリ全体が使えなくなり、アンインストール候補になる)に遭遇したことがあるでしょう。ユーザーが見るべきものと、ユーザーが目的を達成するために見せるべきものとののバランスが大事です。 

2. 馴染み

ユーザーは、自分が知っているものを好みます。そのことは、将来のアップデートでアプリのデザインが変わっても、意識するかしないかにかかわらず、それは変わりません。筋肉の記憶かもしれませんし、無意識のうちにそうなっているのかもしれません。そのいい例が、「検索」アイコンです。ほとんどすべてのアプリやウェブサイトで、このアイコンを画面の右上隅で見つけることができることから、私たちは本能的に、画面の右上隅にあるアイコンを探します。このことから、データを使って、何が有効かを確認するところから構築していくのです。ユーザーが既存のデザインに慣れていることが明らかであれば、わざわざ最初から作る必要はありません(よりスマートなデザインにすればよいのです)。

3. 一貫性

シームレスなUXを実現するには、一貫性は重要です。デザインの一貫性とは、アプリが確実に全体を通して一つの原則に従うようにすることです。たとえば、特定のアクションを表すは常に同じであるか、同じ単語が使われ、緑色の「✓(チェックマーク)」は「承認」を意味し、赤の「X(バツ)」は「いいえ」を意味します。これによって、ユーザーは何も考えずに、あるいは間違った画面にいることを気にせずに、アプリを操作することができます。

4. アクセシビリティ

最新のアプリは、本当に幅広いユーザーへのアピールが必要です。つまり、特定のユーザーの物理的・身体的制限だけでなく、使われているさまざまなデバイスや使われている場所(誰もが超高速インターネットにアクセスできるわけではないですよね)も考えなければいけません。また、ユーザーのアクセス法も考慮が必要です。例えば、55歳以上のユーザーの51%は、アプリ内のサービスにアクセスする際に音声機能を利用しています。アクセシブルなアプリは、できるだけ多くのユーザーに届くべきなのです。

5. アピール性

ユーザーには、アプリで楽しく過ごしてもらいたいものです。そのため、「アピール性」はモバイルアプリデザインのニーズの上位に位置づけられるべきものです。アプリは、単なる手段ではなく、その目的がユーザーにもっとお金を使わせることであれ、単にあなたともっと長い時間を過ごすことであれ、ユーザーが何度も使いたくなるような体験を提供したいものなのです。

最高のモバイルアプリデザインを実現するには

1. 学びやすい環境をつくる

ユーザーは、自分が必要とすることを、必要な方法で、考えなくてもできる体験を好みます。簡単に学べる体験の構築は、ユーザーのサイト利用を「訓練」する方法なのです。

 テレビゲームに例えて考えてみましょう。『スーパーマリオブラザーズ』では、プレーヤーは目標を達成するために「訓練」されます。Aボタンでジャンプ、敵に飛び乗ってしまえば怖くない、敵を倒すとコインがもらえる(やった!)など、プレーヤーはラスボス戦までに、ゲームに勝つために必要な仕組みをすべて身に付けているのです。

best mobile app design creates a great user experience – just like the Super Mario game
出典: Prima Games 

アプリの優れたUXも同じことが言えます。

学習曲線が急だと、わからなさからどうしてもイライラしてしまい、アプリを使う気が失せてしまいます。そのため、物事を本当に明確かつ効率的にするような必要最小限のアプリデザイン原則を適用するといいでしょう。例えば、検索バーやホームページへのリンクなど、主要な機能に簡単にアクセスでき、視認性が高いようにするといいですね。

このような、よく使われる操作に行き着くのに、ユーザーに複数のメニューオプションを探し回らせたくはないでしょう。同時に、必要だがあまり知られていない機能を折りたたみ式メニューに追加することで、画面の散らかりを減らすことができます。

2. プッシュ通知を賢く使う

プッシュ通知は、モバイルアプリのコアな部分ではないかもしれませんが、それでユーザーエンゲージメントが高まるため、アプリ全体のデザインUXにおいて重要な役割を果たします。

ただし、アプリのユーザーに常にプッシュ通知で迷惑をかけないようにすることは、本当に重要なことです。なのでプッシュ通知は、関連性があり、ユーザーが価値を見いだせる場合にのみ導入するようにしましょう。例えば、Uberでは、特定の日に特定のキャンペーンを実施する際に、ユーザーの携帯電話にプッシュ通知を送信しています。また、Duolingoでは、ユーザーが特定の日数を過ぎてもログオンしないと、練習のリマインダーが送信されます。

uolingo as a great example of beautiful app design
出典: Google Play 

もし、相応なデータにアクセスできるのであれば、注文しやすい日にプッシュ通知を送ったり、以前購入したことのある商品のセールを行うなど、同じことを試してみてはいかがでしょうか。

できれば、アプリのユーザーがプッシュ通知を受け取るタイミングや理由をコントロールできるようにしましょう。

3. 「馴染み」を中心に置く

美しいアプリのデザインは、うまくいっているものやユーザーが快適に使っているものをベースにしましょう。新しい方法で、まったく新しい体験を作りたいと思うのは簡単ですが、実は、最高のモバイルアプリデザインのコンセプトとなると、これまでのものをベースにするのがベストであることが多いのです。

使い慣れたものだと、ユーザーはあなたのアプリの使い方を考える必要さえないですもんね。だってユーザーは、すでに何千ものアプリやウェブサイトで、そのような使い方をしたことがありますから。そのようにデザインするコツは、ユーザージャーニーを邪魔することなく、新しく、魅力的で、ブランドらしいものに”思える”ようにすることです。

mobile screens

例えば、どんなeコマースアプリに行っても、画面右上にあるバスケットのアイコンや商品画像、説明文、そして「今すぐ購入する」というオプションなど、Amazonが提供するものと非常によく似たエクスペリエンスが見つかります。アプリユーザーは、Amazonの商品の購入方法を「訓練」されていますから、eコマースアプリはAmazonに倣うことで、コンバージョンを増やし、世界中のユーザーに親しまれる体験を構築できるのです。

4. ユーザーが移動中であることを意識する

モバイルアプリのデザインとは、単に小さな画面のための体験を作るということではありません。ユーザーの環境に合わせたエクスペリエンスを構築するのです。ユーザーが外出先でモバイル機器を使うことを責めたり止めることはできませんが、持ち運び可能な風景に「フィット」する最小のアプリデザインの体験を作ることはできます。

確かに、あなたのアプリを使っているかもしれませんが、ショップのウィンドウでシャープなドレスが目に留まったり。友人に呼び出されたりすると、ユーザーの集中力は途切れがちです。そんなとき、元の場所に簡単に戻れるようにすれば、ユーザーフローを崩すことはありません。また、ユーザーは何時間も楽しみたいのか、それとも現実の仕事の合間に2分程度の気晴らしをしたいのか、ユーザーがモバイルアプリをどのように使っているかも見てください。

デザイン面では、移動中のユーザーは精密なコントロールができにくいため、ボタンやアクションが煩雑にならないような配慮が必要です。そのため、ボタンや操作に手間がかからないよう、タッチ操作やジャイロを意識しましょう。そして、ユーザーの視線も意識しましょう。ウェブサイトであれアプリであれ、デザインは常に、一目で理解できるシンプルなものであるべきであり、歩きながら頭を振って、周りの世界に気を取られるような、外出中のユーザーにとってはさらに重要なことです。

5. デザインをごちゃごちゃさせない

モバイルUXデザインは、シンプルさを最優先しましょう。ユーザーがモバイルアプリケーションに本当に求めているのは、これだけです。どのアプリストアでも、ダウンロード数の上位を見ればわかるでしょう。

これを美しいアプリのデザインに生かすには、ごちゃごちゃしたデザインは絶対に避けましょう。ユーザーを混乱させ、イライラさせる恐れがあります。

例えば、スマートな翻訳アプリを開発したとします。ページには、辞書、今日の単語、音声とテキストの翻訳オプション、テストなど、さまざまな要素が盛り込まれています。ただ、どの画面でもメインにしたいアクションは何かを決めましょう。

明確な焦点を持つことで、画面は散らからなくなります。この必要最小限のアプリデザインは、片手で操作できることを基本にしており、テキストフィールドであれ、CTAボタンであれ、親指一本で見やすく、読みやすく、手が届きやすいものでなければなりません。

視覚的な階層を常に意識してしましょう。ユーザーを的確な場所に誘導すべく、画像、色、さまざまなフォント、サイズを使いましょう。Googleカレンダーのスケジュール表示などは、そのいい例です。グラフィックデザインは、UIデザインにおいても重要なのです。

6. できるだけオートコンプリートやワンクリックアクションを使う

シンプルなデザインは、摩擦を減らすことができます。

process problems error mistake

フォームのオートコンプリート、自動サインインの提供、ワンクリック操作などは、特にeコマースアプリを展開する場合、いい例と言えるでしょう。

例えば、携帯電話の画面上で住所を正しく入力することがいかに難しいか、誰でもわかります。また、そうでない場合でも、正しく入力するために連絡先アプリ、財布、小さな黒い電話帳など、他の場所を探さないといけないかもしれません。オートコンプリートは、このような問題を解決します。また、「もう一度注文しますか?」のようなクイックアクションも同様に、ワンタップで、ユーザーはユーザージャーニーを完了することができます。

7. VUI(音声UI)について覚えておく

美しいアプリのデザインを重視する場合、タッチを中心に構築するのは簡単です。美しさは見る人の目の中にあるので、まずはデザインの視覚的要素を考えます。「見た目はいいか」「必要最小限なアプリデザインか」と問いかけ、ユーザーが目的を達成するためにどのボタンを押せばいいかを考えます。ただし、音声ユーザーインターフェースをおろそかにしてはいけません。

VUI(音声UI)は、あらゆるスマートスピーカーや最新のスマートフォンに搭載されており、ユーザーが口頭で対話することを可能にします。VUIは、今後、ビジュアルデザインと同じくらい重要になるかもしれません。

タッチはもちろん、画面を見る必要すらありません。それによりアプリのアクセシビリティが上がり、運動機能障がい者や運転しながらアプリを使いたい人の利用者が増加します。

VUIを企画するデザインプロセスは、アプリの開発プロセスになると、企画と実行に長い時間がかかることがあります。このようなユーザーインターフェースのデザインには、多くのUX調査、テスト、そして大規模なプロトタイピングの段階が必要です。それでも、特にユーザーインターフェースデザインをアクセシブルにしたいのであれば、やる価値はあります。

次回のアプリデザインUXに活かそう

ユーザーほど大切なものはありません。あなたのアプリをダウンロードし、毎日戻ってきてくれるのはユーザーなのですから。競争の激しいデジタル空間では、デザイナーやデベロッパーは、満足のいかないUXを作るわけにはいかないのです。それはユーザーを圧倒し、迷わせ、秒で「アンインストール」させるようなものですからね。

優れたモバイルアプリのデザインUXは、私たちみんなに、アプリが私たちのニーズに応えてくれることを期待するよう教育してきました。ユーザー中心のデザインは、直感的に操作でき、シンプルに使えることが必要です。メールを開いたり、ドアを閉めたりするのと同じように自然なことですが、ユーザーにとっては、その100万倍も楽しいことなのです。

UXPinをモバイルアプリのデザインに活用しよう

モバイルアプリデザインのヒントをお試しになりませんか?UXPinのトライアルにサインアップして、モバイルアプリのプロトタイピングを始めましょう。UXPinは、インタラクティブなプロトタイピングを迅速かつ簡単に行うことができる強力なデザインツールです。変数、ステート、コンディションを使ってデザインに生命を吹き込み、ステークホルダーと共有し、アプリの外観に感心するだけでなく、アプリの周りをどのように移動するかを確認しましょう。

インタラクションデザイン とは

インタラクションデザインは、製品のインターフェースがユーザーの行動に反応し、人間とコンピューターの相互作用を支援することで、UXデザインにおいて重要な役割を果たします。

主なポイント:

  • インタラクションデザインは、ユーザーとデジタル製品、システム、インターフェイスとの相互作用に焦点を当てた学際的なデザイン分野である。
  • ユーザーがどのように製品に関わり、体験するかをデザインし、そのインタラクションを直感的で効率的なものにすることを目的としている。
  • 「IxD」とよく略される。

インタラクションデザインはUXデザインプロセスで特に難しい段階のひとつですが、UXPinのコードベースデザインツールにより、忠実でインタラクティブなプロトタイプを構築することで、この課題を軽減できます。無料相談およびトライアルはこちらから。

インタラクションデザインとは

インタラクションデザインとは、HCI(人間対コンピュータのインターフェース)を人間らしく感じさせるプロセスです。インタラクティブなデジタル製品で、エンドユーザーにフィードバックを与えられることによって、この「人間的」なつながりが作り出されます。そしてそのフィードバックは、スクロールによって誘発されるアニメーション、ボタンのクリック状態、別のページへの遷移などを通じて行われます。

インタラクションデザインはよく「IxD」と略され、トランジション、マイクロインタラクション、アニメーションなどの適切なインタラクティブ要素を使いますが、テキスト、色、ビジュアル、レイアウトもユーザーの感情や行動にも影響を与え、それによって、適切な反応を引き出すために戦略的にインタラクションをデザインできるようになります。

インタラクションデザインをうまく活用することで、以下のようなポジティブなユーザー体験がもたらされます:

  • 製品満足度の向上
  • ユーザビリティの深い理解
  • より速い学習性
  • より深い個人的なつながり
  • 繰り返し使用される可能性が高まる

HCI におけるインタラクションデザイン

HCI(Human-Computer Interaction:ヒューマンコンピュータインタラクションの略)におけるインタラクションデザインとは、ボタン、メニュー、その他のインターフェースコンポーネントなどの製品のインタラクティブな要素を、直感的で使いやすく、ユーザーの操作に応答し、ユーザーとシステム間のコミュニケーションが円滑になるようにデザインすることです。

インタラクションデザインは、テクノロジーとのシームレスなインタラクションを促進する魅力的なユーザー体験を作ることが目標であり、それにはユーザーのニーズ、行動、期待を理解し、機能的であるだけでなく、使っていて楽しいインターフェースをデザインすることが含まれます。

また、HCI におけるインタラクションデザインは、ユーザーがテクノロジーとどのように相互作用するかに焦点を当てることで、ユーザビリティ、アクセシビリティ、総合的な満足度を高めることを目的としています。

インタラクションデザインと UI デザイン

インタラクションデザインは、例えば「ユーザーがある要素をタップしたときに何が起こるか」などのアニメーション、マイクロインタラクション、トランジション、検索、その他のモーションベースのデザインなど、人間とコンピュータのインタラクションに焦点を当てています。

対する UI デザインは、UI がどのように見えるかを決める色、フォント、図像、レイアウトなどのビジュアルデザインと見た目の美しさに重点が置かれています。

つまり、以下のようになります:

  • インタラクションデザインは相互作用と動きに関するもの
  • UI デザインはビジュアルデザインと見た目に関するもの

これは多くの場合は、中小企業やスタートアップ企業では UI デザイナーが両方を担うい、大企業では別々です。デジタル製品デザインでは何でもそうですが、役割と責任が相乗効果を生むことがあり、すべては企業、製品、組織構造によりけりです。

インタラクションデザインと UX デザイン

インタラクションデザインは、UX デザインの中でも専門的な分野であり、UX がユーザーエクスペリエンス全体と、すべてがどのように結びついているかに注目するのに対し、インタラクションデザイナーはユーザーのインタラクションとモーションに焦点を当てます。

UX デザイナーは、デザイン思考HCD(人間中心デザイン)ユーザーリサーチといった UX の基礎を応用して意思決定を行い、ユーザーのタスクやアクション、環境に特を気にかけます。対するインタラクションデザイナーは、デジタル製品がユーザーのアクションに適切に反応することに重点を置き、ユーザーがボタンをクリックしたとき、検索バーにフレーズを入力したとき、画像にカーソルを合わせたときに何が起こるかを考えがちです。

インタラクションデザインの原則とは

ドン・ノーマン氏(ニールセン・ノーマン・グループの共同創設者)の著書『The Design of Everyday Things』から、お気に入りの「IxD 原則」をピックアップしてみました。

可視性

多くの機能と限られたスペースの中で、可視性を優先させるのはデザイン上の重要な課題であり、ドン・ノーマン氏の理論によると、何かが目に見えるほど、ユーザーがそれを見て操作する可能性が高くなります。なのでインタラクションデザイナーは、ユーザーのニーズとビジネス目標に基づいて、可視性の優先順位のバランスを取らないといけません。

可視性の典型的な例として、モバイル端末でのナビゲーションリンクの優先順位付けが挙げられます。アプリバーから表示されるリンクは何であり、デザイナーはハンバーガーメニューの背後にあるナビゲーションドロワーに何を配置するのでしょうか。

フィードバック

フィードバックとは、デジタル製品やシステムがユーザーとどのようにコミュニケーションをとるかということであり、インタラクションデザイナーには、動きやアニメーション、触覚、音声、コピーなど、このフィードバックを表現するための方法があります。

testing user behavior pick choose 1

また、アクセシビリティや、製品がどのようにあらゆる種類のユーザーや支援技術にフィードバックを伝えるかついても考えないといけません。

制約条件

可能性が多すぎる乱雑な UI だと、ユーザーは戸惑い、ユーザビリティの問題が生じますが、いいインタラクションデザインだと、ユーザーの行動を制限(制約)して、製品を通じてユーザーをより効率的に導きます。

このような制約は、ランディングページで最もよく見られます。デザイナーは、ナビゲーションやリンクなど、ユーザーがページ外に誘導されてしまいそうなものをすべて取り除き、目立つボタンの CTAフォームだけを残します。それでユーザーは、1つのアクションに絞られることでコンバージョンにつながるコンテンツに集中できるようになるというわけです。

マッピング

インタラクションデザイナーは、デジタル製品における操作とその効果の間に明確な関係を作り出さないといけません。つまり、その関係を、ユーザーにとって自然に感じられるようにマッピングするということです。

たとえば、iPhone の上のボタンで音量が上がり、下のボタンで下がります。この直感的なレイアウトだと、ユーザーはどのボタンがどのアクションを実行するかを考える必要がありません。

製品が直感的でわかりやすいほど、より簡単で楽しい体験になるのです。

一貫性

インタラクションや UI デザインには一貫性が不可欠であり、一貫性がないとユーザーは戸惑い、ユーザビリティの問題が起こります。なのでデザイナーは、一貫性のある UI やインタラクションをデザインするだけでなく、さまざまな画面サイズやデバイスにおける一貫性も考慮しないといけません。

多くの組織は、承認された UI パターンやインタラクションとの一貫性を上げるのに、デザインシステムを構築したり、オープンソースのコンポーネントライブラリを採り入れたりしていますが、デザイナーはこのような選択について考える必要がなくなれば、UX に集中できるようになり、ユーザーが望ましい結果を達成できるよう適切なパターンを適用することができます。

アフォーダンス(インタラクションの可能性)

アフォーダンスは、ユーザーに何かの使用方法やアクションの実行方法を伝えるものであり、UI 要素を使ってタスクを完了する方法が、ユーザーにとって明白であることを保証するのがインタラクションデザイナーの仕事です。

button interaction click hover

例えば、送信ボタンの無効状態で、ユーザーは送信する前にフォームの必須項目を入力しないといけないことがわかります。また、リンクにさまざまな色と下線を使うことで、ユーザーはどのテキストをクリックできるかがわかります。

認知

インタラクション デザイナーは、UX デザインにおける認知心理学注意と知覚、記憶、問題解決、創造的思考)の基礎を理解しておかないといけません。そしてこれは、この精神プロセスに過負荷をかけない製品と体験をデザインすることを目的としています。

認知は、以下などのデザイン心理学の原則を扱っています:

  • ゲシュタルトの原理:人間の脳がどのように視覚を認識し、馴染みのある構造を作り出すか。
  • フォン・レストルフ効果:物体の集団の中で、異なるものが目立つ、あるいは最も記憶に残りやすいという予測。
  • ヒックの法則:相手に選択肢を与えれば与えるほど、決断に時間がかかる。
  • 最小努力の原則:利用者は最小限のエネルギーで済む選択や行動をとる。
  • 直列的位置づけ効果:人間は、リスト、文章、またはコンテンツの最初の項目(初頭効果)と最後の項目(新近効果)を最もよく覚えている傾向がある。
  • 永続的な習慣の原則:人は馴染みのあるルーティンや習慣に依存する ‐ だからこそ、ユニバーサルデザインパターンを使うことが重要。
  • 感情伝染の原理: 人間は、動物やアニメーションなどの他人の感情や行動の模倣や共感をする。なので、デザイナーは気持ちや感情を強調するのに顔(絵文字も含む)を使う。
  • フィッツの法則:目標地点まで移動するのに要する時間は、その距離と目標の大きさの関数である。

以下の2記事では、認知について深く掘り下げられています: 

これらの原則は、すべての UX 分野に適用されます。

インタラクションデザインチェックリスト

米国政府の Technology Transformation Services(技術変革サービス)の Web サイトである usability.gov から、有用なインタラクションデザインチェックリストを見つけました。このチェックリストには、インタラクションをデザインする際に考慮すべき質問が含まれています。

task documentation data
  • ユーザーがインターフェースと対話する方法を定める:クリック/タップ、プッシュ、スワイプ、ドラッグ&ドロップ、キーボードコントロールなど。
  • ユーザーが行動を起こす前に、行動に関するヒントを提供する:正しいラベル付け、リンクの色の違い、クリック可能なUI要素の一貫性の使用など。
  • エラーを予測して軽減する:エラーを防ぐと同時に、問題を修正するために役立つメッセージをどのように提供するか。
  • システムのフィードバックとレスポンスタイムを考慮する:ユーザーがアクションを完了した後に何が起こり、フィードバックはどのくらいで表示されるのか。
  • 各要素について戦略的に考える:適切な要素/パターンを選択したか、エラーを避けるためにクリック可能な要素の間に十分なスペースがあるか、先述のデザイン心理学の原則に従っているかなど、すべての決定をユーザーの視点から精査する。
  • 習得しやすいようにシンプルにする:UI やタスクをできるだけシンプルにし、馴染みのあるパターンを使い、認知力を消耗するタスクや機能を最小限に抑えることで、ユーザー体験をシンプルにする。

また、アーロン・レガスピ氏とアミット・ジャクー氏による IxD チェックリストもチェックしてみてください。

インタラクションデザインのリソース

インタラクションデザイナーの仕事

インタラクションデザイナーの役割は、ユーザーが製品、特に Web サイト、アプリ、ソフトウェアインターフェースのようなデジタル製品とどのようにインタラクションするかということに焦点が当てられ、そういったインタラクションが直感的で、シームレスで、楽しいものであることを保証することを担っています。

インタラクションデザイナーの仕事の内訳は以下のようになります:

1.ユーザーのニーズを理解する

インタラクティブデザイナーは、誰がユーザーで、何が必要なのかをリサーチすることに多くの時間を費やします。これには、ユーザーリサーチ、インタビュー、データ分析などの実施や、ユーザーが直面している問題と、製品がそれをどのように解決できるかの把握などが含まれます。このようなニーズを理解するのは、ユーザーにとって意味のあるインタラクションをデザインする上で非常に重要です。

2.ユーザーフローの作成

インタラクションデザイナーは、ユーザーに何が必要なのかがわかったら、例えば EC アプリの場合だと、カートに商品を追加し、チェックアウトプロセスを経て、確認を受け取るまでといったようなユーザーフローをデザインします。これは、そういったステップを可能な限り簡単かつ効率的にすることを目標としています。

3.インタラクティブな要素をデザインする

ここは、クリック、タップ、スワイプなど、すべてのインタラクティブな要素である、ボタン、ナビゲーション、フォームに焦点を当てるところであり、デザイナーはこのような要素を、わかりやすく、機能的で、アクセスしやすいようにデザインします。そして彼らは「このボタンは目立つだろうか?ユーザーはクリックすると何が起こるか分かるだろうか?」といったことを常に考えています。

4.試作とテスト

インタラクティブデザイナーは、プロトタイプ(製品の初期モデル)を作り、実際にそれがどのように使われるかをテストします。この段階は、仮定のテストに関するものであり、ユーザーやステークホルダーからのフィードバックを集め、何がうまくいっていて、何がうまくいっていないかを確認し、それに基づいてデザインを改良していきます

5.他のチームと連携する

インタラクティブデザイナーは、UX デザイナー、デベロッパー、プロダクトマネージャーと密接に協力し、デザインが実現可能で、ビジネス目標に沿ったものであることを確認します。その際デベロッパーは、インタラクションがどのように機能すべきか(ボタンにカーソルを合わせるとどうなるかなど)を正確に知る必要があります。

6.一貫性を確保する

彼らの役割の大部分は、製品全体で確実にデザインが一貫しているようにすることです。それでユーザーは、さまざまなセクションを移動するときに、慣れ親しんだ感覚を持つはずです。つまり、同じようなタスクやインタラクションに対しては、同じデザインパターンにこだわるということです。

7.ユーザーニーズとビジネスニーズのバランス

インタラクティブデザイナーは主にユーザー体験に焦点を当てますが、デザインをビジネスの目的に合わせる必要もあります。例えば、登録者数を増やすことが目的であれば、ユーザーが押し付けがましく感じたり、ページを巡るのを妨げられたりすることなく、登録ページに誘導されるようなインタラクションをデザインするかもしれません。

8.最新情報の入手

あと、インタラクションデザイナーは、デザインのトレンド、ツール、ベストプラクティスを常に把握しています。インタラクションデザインは急速に進化するため、製品の競争力ユーザーに対する使いやすさの維持には、常に先を行くことが重要です。

つまり、その製品が見た目だけでなく、ユーザーにとって簡単で満足のいく方法で機能することを保証するために彼らはここにいるのであり、ユーザーと製品とのインタラクションを改善することに常に焦点を当てているのです。

UXPin – 究極のインタラクションデザインツール

従来の画像ベースのデザインツールでは忠実さや機能性が不足し、インタラクションデザイナーは複数のフレームを作成する手間がかかりますが、UXPinのコードベースデザインツールを使えば、少ない労力でより優れた結果を得られます。

以下でその方法を見てみましょう:

ステート

UXPin では、1つのコンポーネントに対して複数のステートを作成できます。例えば、デフォルト状態、ホバー状態、アクティブ状態、無効状態のボタンを作成し、それぞれに個別のプロパティとトリガーを設定することができます。

UXPin の ステートでは、カルーセルアコーディオンメニューマルチレベル・ドロップダウンメニューなど、より複雑な UI パターンを1つのフレームで作成することもでき、その UI パターンはコードのように動作するため、インタラクションデザイナーはテスト中に正確な結果とフィードバックを得ることができます。

インタラクション

UXPin のインタラクションがあれば、デザイナーは画像ベースのデザインツールの能力をはるかに超えた、没入感のあるコードのような体験を構築できます。また、UXPin にはトリガー、アクション、アニメーションが幅広く備わっており、完全に機能するアニメーションプロトタイプを作成できます。

また、条件付きインタラクションで、デザイナーは Javascript のような 「if-then 」や 「if-else 」の条件を使って、プロトタイプをさらに一歩進め、ダイナミックなユーザー体験を作り出すことができます。

Variables(変数)

UXPinでは、フォームフィールドは最終製品のように見えて機能します。そして Variables(変数)により、デザイナーは、例えば「オンボーディングフォームを完了した後に、個別化されたウェルカムメッセージを表示する」など、ユーザーの入力を取得してそのデータをプロトタイプの別の場所で使うことができます。

Expression

UXPin の Expression で、フォーム検証や計算コンポーネント(ショッピング カートの更新)などのコードのような機能によって、プロトタイプが新たなレベルに上がります。

この強力な機能により、インタラクションデザイナーはコードを学んだりエンジニアに頼ることなく、機能するプロトタイプを作成できます。

UXPin を使うことで、デザイナーは構築、テスト、反復をより速やかに行うことができ、大幅に優れた結果を得ることができます。無料相談およびトライアルはこちらから。

UXハニカム – 7つの デザインフレームワーク

UXハニカム

ピーター・モービル氏の【 UXハニカム 】は、2004年に発表され、今でも現代の製品開発プロジェクトに非常に適したデザインフレームワークであり、デザインチームにUX(ユーザーエクスペリエンス)の7つの側面から製品を評価させ、改善すべき領域を特定させるものです。  

本記事では、 UXハニカム の概要と、それが最も効果的になる状況についてお話します。問題を解決してプロジェクトの成果を上げる【UXモデル】については、こちらの記事が特におすすめです。  

主なポイント:

  • UXハニカムは、UXを測るための最も一般的なUX デザインフレームワーク の1つである。
  • UXハニカムは、情報アーキテクチャに関する書籍を多数執筆しているピーター・モービル氏による考案である。
  • UXハニカムには、「有用性」、「使いやすさ」、「見つけやすさ」、「好ましさ」、「アクセス性」、「信頼性」、「価値」、という、優れたUXの実現に向けて一体となる7要素がある。
  • 製品の再デザイン時やUXの負債を測る際のチェックリストとして、また教育ツールとして使われる。

  世界最先端のUXデザイン&プロトタイピングツールで、ワークフローに革命を起こしませんか。無料相談およびトライアルはこちらから。

 UXハニカム とは

  UXハニカムは、2004年にピーター・モービル氏によって開発された デザインフレームワーク です。このフレームワークは、UXの7つの側面を用いて、デザインチームが優れたCX(カスタマーエクスペリエンス)を提供するためのガイドとなるものであり、ユーザー中心のデザインや顧客に愛される製品をデザインする方法について、若いデザイナーを教育するための素晴らしい教育ツールでもあります。  

「UXハニカム」の著者であるピーター・モービル氏とは

  ピーター・モービル氏は、米国バージニア州スコッツビル出身の情報アーキテクト及びUXデザイナーであり、ベストセラーになった著書に『Web情報アーキテクチャ―最適なサイト構築のための論理的アプローチ 』、『Intertwingled – 錯綜する世界/情報がすべてを変える』、『検索と発見のためのデザイン- エクスペリエンスの未来へ』、『アンビエント・ファインダビリティ』などがあります。  

彼は、世界中の会議やワークショップで情報アーキテクチャやUXについて講演し、自身の会社であるSemantic Studioを通じて多くのフォーチュン500社のコンサルティングを手がけています。  

さらに彼は、ミシガン大学、AIIP(Association of Independent Information Professionals)、STC(Society for Technical Communication)、国立がんセンター などからいくつかの賞を受けています   自身のブログである「Intertwingled」では、彼の貴重な知識やインサイトが紹介されています。  

UXハニカムの7面

  ピーターのUXハニカムは、ユーザーのニーズをきちんと満たす製品を提供するために、デザイナーが満たさなければならないUXの7つの側面を以下のように特定しています:

  1. 有用性
  2. 使いやすさ
  3. 好ましさ
  4. 見つけやすさ
  5. アクセス性
  6. 信頼性
  7. 価値

  この7つの側面について、より詳しく見ていきましょう。  

1. 有用性

  有用な要素について問うべきは、「この製品や機能はユーザーにとって価値があるか」、「需要や必要性があるか」「ユーザーの問題を解決する製品か」などです。

user laptop computer

製品や機能が有用でなければ、製品に目的はありませんし、そもそもそれを作る理由もありません。有用かどうかは、徹底したユーザー調査とエンドユーザーへの理解から来るものなのです。  

2. 使いやすさ

  使いやすさ」は、UXデザインの重要な要素です。製品が便利でも、ユーザーにストレスを与えるものであれば、それは「使いやすい」とは言えません。  

デザイナーは、直感的なUI(ユーザーインターフェース)と情報アーキテクチャを構築し、タスクの実行や機能の使用をしやすくしながら、学習曲線を最小限に抑えなければいけません。  

プロトタイプとテストは、ペインポイントの特定やUXの向上に不可欠であり、デザイナーは、新しいリリースがユーザーニーズを満たしながらプロジェクトの要件を満たしていることを確認するのに、UX監査の実施が必要です。  

3. 好ましさ

  デジタル製品を堪能するには、美的感覚とデザイン性が必要です。なのでデザイナーは、レイアウト、ビジュアルデザイン、インタラクションデザインなど、ユーザーを惹きつけ、わくわくさせるUIデザインの要素を考えなければいけません。  

ユーザビリティテストやインタビューにおいて、デザイナーはユーザーの感情や感覚を考慮して製品の望ましさを判断する必要があり、問題を難なく解決する製品や機能によって、ユーザーを喜ばせることを目的としています。  

4. 見つけやすさ

  「見つけやすさ」とは、コンテンツや機能を見つけやすくすることです。製品を「見つけやすい」ものにするには、情報アーキテクチャ、検索、ナビゲーションが不可欠であり、デザイナーは、ユーザーのニーズとビジネスの目標に応じて、ナビゲーションの優先順位を決めなければいけません。

例えば、モバイルアプリをデザインする場合、デザイナーはどのメニューをタブバー上に配置するか、ナビゲーショナルドロワーの後ろに配置するかを決めなければいけません。  

「見つけやすい」というのものには、アラートメッセージやエラーメッセージも含まれます。例えば、フォームフィールドのエラーメッセージのように、ユーザーができるだけ早く問題を解決できるよう、デザイナーは案内しなければいけません。  

5. アクセス性

  アクセスしやすい製品をデザインすることは、現代の製品開発において不可欠であり、デザイナーやエンジニアは、身体的・精神的な能力に関係なく、誰もが効果的にサイトを閲覧し、その内容を消化できるようにしなければいけません。

accessibility

アクセス性は、こうした身体的・精神的な制約にとどまらず、状況や環境による制約にまで広がっています。例えば、VUI(音声ユーザーインターフェース)は、目の不自由なユーザーがアプリケーションを使う際に便利ですが、車を運転する人にとっても重要です。  

デザイナーは、製品がどのような人に使われ、どのような状況や環境でどのような問題に遭遇するかを考えなければなりません。また、ハンディキャップについて考え、サポート技術に匹敵する体験をどのようにデザインするかを考えることも不可欠です。  

6. 信頼性

  信頼と信用は、顧客の獲得や維持に不可欠であり、 ユーザーは、「期待に応え、ごまかしのない、信頼できる一貫した製品」を期待しているのです。

例えば、有料サービスのダウングレードやキャンセルの難易度はどの程度でしょうか。こういった作業を簡単にすることは、信頼を生み、有料顧客として戻ってくる可能性を高めます。一方、難しい操作をされると、人々はフラストレーションを感じ、製品やブランドの信頼性が損なわれます。  

デザイナーは、CTA(Call To Action)と指示の内容を確実に実行するようにしなければいけません。曖昧な言葉を使ったり、ユーザーを騙してタスクを完了させたりすると、あっという間に顧客はいなくなってしまいますよ!  

7. 価値

  ユーザーは、あなたの製品を使いたい、もしくは使わなければいけないはずです。価値ある製品とは、問題を解決し、投資に対するリターンをもたらすものですが、そのリターンは金銭的なものである必要はありません。時間の節約や、他の方法ではできないことの実現、あるいは待ち時間の気晴らしになったり、喜びを与えてくれるものであってもいいでしょう。

heart love like good

例えば、フードデリバリーアプリは、多くの国の人々にとって、ロックダウン時に非常に貴重な存在となりました。それにより多くのレストランが営業を続けられ、客に食事を提供することができたのです。  

ユーザーを理解し、その欲求を満たすサービスの提供が、「製品の価値」となります。  

UXハニカムの使用法

  UXハニカムは、評価のための優れたフレームワークであり、ゼロからのデザインよりも、既存の製品に最も効果的です。ここでは、デザインチームがUXハニカムのフレームワークを使用する可能性のあるシナリオをいくつかご紹介します:

  • デザイン負債の解消: デザイン負債には簡単に修正できるものもあるが、ユーザビリティの問題では、体系的なアプローチで問題の核心を特定する必要があり、UXハニカムで、デザイナーは問題を多角的にとらえ、根本的な原因を突き止められるようになる。
  • UXチェックリストUX監査やその他のデザイン評価において、デザイナーに基礎となるUXのチェックリストを提供。
  • 教育ツール:デザイナーは、ジュニアデザイナー、クライアント、ステークホルダー、CFT(部門横断的なチーム)に対して、UXとユーザビリティの問題がユーザーに与える影響について教育するためのフレームワークとして、UXハニカムを使うことができる。
  • 再デザイン:デザイナーは、再デザインの前にUXハニカムを使って、既存製品におけるUXの欠陥を特定することができる。

UXPinで、より高い忠実度とコードのような機能でテストや実験を実施しませんか。無料相談およびトライアルはこちらから。

UXPin でデザインシステムを構築 – 3分でわかるガイド

3 Minute Design System Guide

2016年、筆者たちは徹底的なユーザーリサーチキャンペーンを実施し、デザインとエンジニアリングのリーダーたちとの40回以上のインタビューと、3,100人以上のデザイナーとデベロッパーを対象とした調査の結果、従来のデザインツールでは現代の製品開発に対応できないという結論に達しました。 ワークフローはあまりにも断片化され、分断され、焦点が定まっていません。デザインシステムツールは、デザインと開発のための完全なハブでないといけないのに。 そこで、UXPin のデザインシステムの最初のリリースでは、調査結果を以下の 3つのシンプルなルールでまとめました。:

  • 静的な文書ではなく、動的な環境
  • 参照ドキュメントではなく、実行可能なシステム
  • 単なるデザインパターンのライブラリではなく、デザインと開発のつながりを促す。

この原則を念頭に置き、2017年6月13日に最初のデザインシステムプラットフォームがリリースされました。

UXPin のデザインシステムライブラリは、デザインシステムの様々な成熟段階に対応しており、最終段階では、デザインと開発を同期して、デザイナーとエンジニアが1つのコンポーネント ライブラリ(信頼できる唯一の情報源 ‐ Single source of truth)を共有する完全に統合されたシステムを作成します。 UXPin Merge では、デザインシステムのレポジトリからコードコンポーネントをビジュアルデザイン要素としてインポートできます。そしてデザイナーはそのコンポーネントを使って、簡単なドラッグ&ドロップのワークフローでプロトタイプを作成できます。Merge コンポーネントは UXPin のキャンバス上でレポジトリとまったく同じようにレンダリングされるため、デザイナーは最終製品と見分けがつかないほど完全に機能するプロトタイプを作成できるのです。UXPin Merge へのアクセスリクエストはこちら

UXPin でデザインシステムを作成する方法

まず、UXPin ダッシュボードのトップバーにある Design System(デザインシステム)タブを開きます。ここで、新しいデザインシステムの作成や、既存のデザインシステムの表示ができます。まずは[Create Design System(デザインシステムの作成)]ボタンをクリックしてみましょう。 デザインシステムの構築には以下の2つの方法があります:

  • 既存のライブラリを使う:UXPin には、基礎として使える事前構築済みのライブラリがある。
  • ゼロから始める:この方法では、[Create from Scratch(ゼロから作成)]をクリックして白紙の状態から始める。

:ここでの例はすべて UXPin 内で作成されていますが、UXPin のデザインシステムは Sketch と Figma のインポートにも対応しています。

スタイルのライブラリを作成する

しっかりとしたデザインシステムは、最も一般的なデザイン要素であるテキストスタイルカラーパレットから始まります。UXPin を使うと、デザインプロジェクトからこの要素を直接取得して共有デザインシステムライブラリに保存でき、これは、製品のデザインシステム用の実用的なツールキットとして機能します。

カラーおよびテキストスタイルの追加

カラーやテキストスタイルの追加には、Sketch または UXPin で関連するレイヤーを選択します。UXPin が自動的にスタイルを取得してシステムに追加し、そのスタイルは UXPin または Sketch のライブラリと同期され、システムはダイナミックで最新の状態に保たれます。

  • タイポグラフィ:[Editor(エディタ)]から直接テキストスタイルを追加できることから、すべてのデザインで一貫したタイポグラフィシステムが維持されます。
  • カラー:HEX コードを入力して「Enter」キーを押すか、Web サイトの URL から色を取り入れるか、CSS ファイルに直接リンクして色を追加できます。これにより、カラーパレットがすべて一元化されて簡単に更新できます。

アセットライブラリの作成

次に、グラフィックデザインアセットを保存し、ロゴや承認済みストックフォト、アイコンライブラリなどのカラーやテキストスタイルと一緒に共有します。このアセットはデザインシステムライブラリに保存できることから、チーム全員が一元化されたデザインツールキットに簡単にアクセスできるようになります。 アセット:SVG などの様々な形式の画像やアイコンをアップロードできます。これにより、さまざまなプロジェクトで再利用できるデザインアセットのライブラリをすべて簡単に管理できるようになります。

実用的なパターンライブラリを作る

デザインパターンは、デザインシステムに非常に重要なコンポーネントおよび要素であり、UXPin では、Sketch からインポートしたものも含め、パターンの作成、保存、共有ができます。また、インタラクティブ機能やアニメーションを追加できるので、デザイナーは新しいプロジェクトごとにゼロから始めることなく、パターンを再利用できます。 UI パターン: UXPin でデザインされてプロトタイプ化された再利用可能なコンポーネントや要素であり、それをデザインシステムに追加して一貫性が確保されることで、デザインプロセスの効率化が実現します。

システムを生成して同期を保つ

共有資産のライブラリを持つのは素晴らしい第一歩ですが、ソフトウェア開発のスケーリングの問題を解決するには十分ではありません。 大抵のソリューションはここで止まってしまい、開発には向かいません。そこで筆者たちは、このまま突き進むことにしました。 UXPin のデザインシステムでは、ワンクリックでどんなカラー、テキストスタイル、アセット、パターンも生きたシステムになります。新しいパターン、テキストスタイル、アセット、カラーを追加すると、UXPin は自動的にデザインシステムを更新してドキュメントを生成します。そしてその変更は、チームメンバーやステークホルダー全員がすぐに利用できます。

デベロッパー向けドキュメントの追加

システムを構築したら、パターンやコンポーネントのコードスニペットなどのドキュメントを追加できます。それでデベロッパーはプロトタイプやモックアップとともにこのドキュメントを閲覧でき、スタイルガイド、アセット、指示が1つのプラットフォームで管理されることで、デザインのハンドオフがより速くスムーズになります。

ドキュメントを実用的にする

デザインシステムのドキュメントは、単なる参考文書でなく、行動が起きる場所、つまりデザインプロジェクトの中身でないといけません。 UXPin だと、デザインシステムのドキュメントはプロジェクトに追従します。 例えば新しいリリースが提供されると、UXPin は製品のデザインシステムからマークアップ、インポート、Javascript コンポーネントの名前などのドキュメントが自動生成されます。

UXPin Merge によるデザインシステムの拡張

UXPin のデザインシステムライブラリで、デザインシステムの成熟度は第1段階から第3段階まで上がります。そして最終段階は、デザインと開発を同期させ、デザイナーとエンジニアが1つのコンポーネントライブラリを共有する、完全に統合されたデザインシステム(信頼できる唯一の情報源 ‐ Single source of truth)の構築になります。 そこで UXPin Merge の出番です。 Merge は、デザイナーが簡単なドラッグ&ドロップのワークフローを使ってプロトタイプを作成するのに使える視覚的デザイン要素として、コードコンポーネントをデザインシステムのレポジトリからインポートします。 Merge のコンポーネントは、UXPin のキャンバス上でレポジトリとまったく同じようにレンダリングされるため、デザイナーはコードと区別できないような完全に機能するプロトタイプを作成できます。 この高度な忠実度とコードのような機能性により、デザインチームは、ユーザビリティテストや、最終製品と同じようにプロトタイプと対話し関わることができるステークホルダーから、有意義で実用的なフィードバックを得られます。

信頼できる唯一の情報源(Single source of truth)

Merge では、デザインシステムの管理と配布が単一のレポジトリから一元化されることで、製品開発プロセスが大幅に強化されます。なので、もう UI キットやコンポーネントライブラリの管理は必要ありません。 レポジトリへの変更は自動的に UXPin に同期され、チームにその更新が通知されます。また、UXPin のバージョン管理により、デザイナーは更新するプロジェクトを選択でき、必要に応じて以前のデザインシステムのリリースに戻すこともできます。 そして チームは、Merge デザインシステムドキュメンテーション または Storybook の DocsMerge の Storybook 統合用)を使ってチームメンバー全員のドキュメントを管理できることから、最も時間のかかるガバナンスとメンテナンスの手順がシンプルになります。

パターンによるスケーリングと効率化

UXPin のパターンにより、デザインチームは Merge コンポーネントを組み合わせて新しいパターンやテンプレートを作成することができます。また、デザインシステムの要素を使ったり、他のデザインシステムのコンポーネントを組み合わせることもできます。 UXPin のパターンは、コンポーネント、テンプレート、またはスクリーンの複数のバージョンや状態を保存するのにも便利で、それでデザイナーは、テスト中やステークホルダーとのフィードバックセッション中に、さまざまなバリエーションを入れ替えて試すことができます。このような 「その場での」変更により、デザイナーはより速やかに反復し、貴重なテスト時間を最大化することができます。

まとめ

まとめると、UXPin でデザインシステムをセットアップするには、以下が必要です:

  • カラー、タイポグラフィ、アセット、UI パターンなどのデザイン要素の作成と整理。
  • 説明、コード、リンクで各要素を文書化。
  • スペックモードを使って要素を検査し、プロジェクト全体で一貫した実装を確認。
  • UXPin Merge を使ってデザインと開発をスケーリングおよび同期し、信頼できる唯一の情報源(Single source of truth)を維持。

このガイドに従うことで、デザインから開発までチームをサポートする総合的なデザインシステムを作成、管理、拡張できるようになります。Merge のページをご覧いただき、UXPin がデザインのワークフローをどのように変革できるかをぜひご確認ください!UXPin Merge へのアクセスリクエストはこちら

UX デザインプロセス – 実用的な7ステップ ガイド

UXデザインプロセス - 7ステップ【実用ガイド】

UXデザインプロセスは、製品のUX(ユーザーエクスペリエンス)をデザインするうえで必要な「体系的、反復的、構造化」された一連のアクションです。 これによって、チームは再現しやすいプロトコルに従って、組織の品質基準を満たしながら製品を提供できるようになります。

デベロッパーがアプリを構築するのと同じUIコンポーネントを使ってプロトタイプを構築することで、デザインプロセスのスピードを上げませんか。 厳しい納期を守り、高品質の製品をリリースしましょう。詳細は UXPin Mergeのページをぜひご覧ください。

UX デザインとは

UX (ユーザー エクスペリエンス )デザインとは、人間の問題を解決するためのデジタル製品のデザイン方法論であり、 この人間中心のデザインアプローチによって、デザインチームは仮定ではなくユーザーのニーズに基づいた意思決定を行うことができます。

この人間中心のアプローチの中核となるのは「共感」であり、UX デザイナーは「ユーザーがデジタル製品を使って達成したいこと」と、「その過程で遭遇する可能性のあるペインポイント(問題点)」を理解しないといけません。

UX デザインプロセスとは

UX デザインプロセスは、UXデザインチームがプロジェクトを完了するのに使う反復的な段階的な方法論であり、デザイン思考プロセスから派生したものです。 デザイン思考のプロセスと同様に、UX デザイナー時間をかけてユーザーに共感し、ビジネスや背景について学び、問題の範囲を確定します。

UXデザインプロセス と デザイン思考プロセス の違いとは

デザイン思考プロセスは、人間の問題に対するユーザー中心のソリューションを開発するための5段階のプロセスです。対する UXデザインプロセスは、UXプロジェクトを実現するためのデザイン思考を組み込んだ、多段階のエンドツーエンドの方法論です。

企業は UXデザインプロセスはデザイン思考の原則を基にしていますが、手順や方法は若干異なる可能性があります。

UX デザインプロセスが重要な理由

企業が UX デザイン プロセスを標準化するのには、以下のような理由があります:

  • プロジェクトが確実に品質と一貫性の基準を満たしているようにする
  • デザイナーが偏見や思い込みを持たずにソリューションをデザインできるようにする
  • デザイナーが多くのアイデアをテストおよび反復して、最適なソリューションを見つけることができるようになる
  • チームや部門間の連携を促す
  • 設定されたプロトコルに従うことで手戻りのリスクを軽減する
  • ステークホルダーがプロジェクトの進捗状況を追跡できるようにする
  • 隠れたリスクと機会を特定する

UX デザインプロセスの7ステップとは

UXデザインプロセス - 7ステップ【実用ガイド】 - 7つのステップ

一般的な UXデザインプロセスには、製品の目標の確定からデザインハンドオフ、すべてが想定通りに動作することの確認まで、7つのステップがあります。

ステップ 1: プロジェクトと範囲の確定

UX デザインプロセスの最初のステップでは、複数の部門のチーム メンバーとステークホルダー (通常は以下の部門の代表者で構成) とともにプロジェクトの目標と範囲を確定します:

この初期のデザインフェーズは、新しい製品や機能が解決しなければいけない問題を特定することを目的としています。製品チームは、プロジェクトの範囲、計画、成果物、納期についても概説します。

ステップ 2: UXリサーチの実行

次に、デザイナーは問題を調査して、考えられる解決策を探します。 そしてこのリサーチ段階では、UX デザイナーは次のようなタイプのリサーチを実施します。

  • ユーザー調査:潜在的なユーザーを調査して、ユーザーが誰であるか、何を必要としているか、どのようなコンテキストで操作しているかを理解する。 また、ユーザーのニーズを調査したり机上調査を行ったりするために、フォーカス グループを招待する場合があり、 UX リサーチの結果は、ユーザーペルソナユーザージャーニーマップなどがある。
  • 市場調査:市場を分析して、市場の細分化と製品の差別化を決定する
  • 競合調査:競合他社が同様の問題をどのように解決し、機会を特定するかを理解するための競合分析
  • 製品調査既存の製品からのインサイトとアナリティクスを分析して、ユーザーの行動を理解する。

ステップ 3: ソリューションの下書きを作成する

UXデザインプロセス - 7ステップ【実用ガイド】 - 大まかな計画書を作成

ユーザー、市場、競争環境を明確に理解した上で、デザイナーは、ソリューションがどのようなものになるかについての初期の下書きを作成すべくブレインストーミングのセッションを実行でき、これは、多くの場合「アイデア出しの段階」と呼ばれます。そしてデザイナーは、初期のビジュアル デザイン計画中に紙とペンを使うことも、デジタル UX ツールに直接移行する場合もあります。

低忠実度の手法には、以下のようなものがあります。

また、チームは、デザインスプリントを使って、ステークホルダーや他のチーム メンバーと特定の問題を解決することもあります。

ステップ 4: 高忠実度のモックアップとプロトタイプをデザインする

次に、UIデザイン チームはワイヤーフレームをモックアップに変換し、最終製品と同様の外観と機能を備えた忠実度の高いプロトタイプを構築します。 企業にデザインシステムがある場合、デザイナーは UIコンポーネントライブラリを使ってインタラクティブなプロトタイプを構築します。

ステップ 5: ユーザビリティテストを実施する

UXデザインプロセス - 7ステップ【実用ガイド】- ユーザビリティテスト

高忠実度プロトタイプの主な目的はユーザビリティテストであり、UX デザイナーは、以下の目的でそのプロトタイプを実際のユーザーでテストします:

ステップ 2〜5は反復可能であり、デザイナーはテスト結果を使って、ステージ 2または3に戻り、有用性、実行可能性、実現可能性の基準を満たすソリューションが見つかるまでアイデアを繰り返します。

ユーザーテストは第5段階ですが、デザインチームはUXデザインプロセス全体を通して複数のテストを実施し、アイデアや仮説を検証することに注意することが重要です。 そしてこのようなテストには、チームメンバーとの内部テスト、またはフィードバックのためにアイデアやプロトタイプをステークホルダーと共有することが含まれます。

ステップ 6: デザインハンドオフを手配する

UXデザインプロセスの最後から 2番目の段階はデザインハンドオフです。ここでは、デザインチームが最終デザインとそのドキュメントを開発チームに引き渡し、エンジニアリング プロセスを開始します。

デザインハンドオフは UXプロセスの終盤に近いですが、デザイナーとエンジニアの連携は、デザインが技術的な制約を満たしていることを確認しながら、デザインから開発への移行を効率化するためのアイデア作成中に始まります。そして彼らの連携は、やり取りがしやすくなる色々なツールを通じて促されます。

関連記事:デザイナーとデベロッパーの連携をダメにする5つの間違い

ステップ 7: 製品を起動する

UXデザインプロセスの最終段階は、新しいリリースの起動と明確な検査です。 新しいリリースがプロジェクトのビジネス目標、UX、アクセシビリティ要件を満たしていることを確認する時期が来ました。

いいUXデザインプロセスのベスト プラクティス

UXデザインプロセス - 7ステップ【実用ガイド】 - 優れた UX デザインのプロセスのベストプラクティス

UXデザインプロセスはすべての組織、プロジェクト、チームで同じではありませんが、プロセスを効率化するためにデザイナーが従うことができるベスト プラクティスがいくつかあります。

ユーザー中心の思考を適用する

デザイナーは、デザインが確実にユーザーのニーズを満たすものであるようにするために、デザイン決定の中心にエンドユーザーを置かないといけません。 そしてこの人間中心の考え方により、無関係なコンポーネントや機能のコストを削りながら、ユーザーが望む製品を提供できます。

共感を実践する

ユーザー中心の考え方を維持する方法の 1 つに、ユーザーへの共感があります。しかし、デザイナーがUXデザインプロセスを進めていくと、ユーザーを重視することから、見栄えは良くても特定のユーザーニーズには応えられない機能のデザインに移ってしまうことがあります。

なので、UXデザインプロセス全体を通じて共感を実践することで、デザイナーはユーザーのペインポイントの解決に集中できるようになります。

デザインシステムを構築する

デザインシステムは、組織全体の一貫性と整合性を強化しつつ、市場投入までの時間を大幅に短縮できます。 デザインシステムを最初から構築する余裕がない場合は、MUIや Bootstrapなどのテーマ対応のオープンソース コンポーネントライブラリの使用を検討しましょう。

ちなみに、UXPinには、マテリアルデザインUI、Bootstrap、iOS、Foundationなどのデザインライブラリが組み込まれているため、デザイン チームはモックアップやプロトタイプをサッと作成できます。

デザイナーが開発コンポーネントの完全に機能するプロトタイプを構築できるように、UXPinのデザインエディタをコンポーネントライブラリに連携するツールであるUXPin Merge を使ってプロトタイプを次のレベルに引き上げましょう。

デベロッパーとの連絡および連携

UXデザインプロセスを成功させるには、連絡と連携が非常に重要であり、 デザイナーは他のデザイン チームとつながり、エンジニア、ビジネス マネージャー、製品チーム、ステークホルダーとオープンなコミュニケーションをとらないといけません。

DesignOpsで、他の時間のかかる運用タスクや管理タスクを効率化しながら、より良い連携と連絡が促されます。

UXPinによるUXデザインプロセスの強化

UXPin による UXデザインプロセス の強化

UXプロセスを成功させるには、デザインチームが変更の追加や迅速な反復ができるようにするツールが必要であり、 UXPinは、エンドツーエンドのデザインソリューションであり、デザイナーは UX デザインプロセスのあらゆる段階での機能を得られます。

完全にインタラクティブなプロトタイプ

デザイナーは、UXPin のビルトインデザイン ライブラリの 1 つを使うか、デベロッパーのコンポーネントライブラリをインポートして、すぐにプロトタイプを開始できます。 UXPinはコードベースであるため、プロトタイプは画像ベースのデザインツールよりも忠実度が高く、機能が豊富です。

高品質のユーザーテスト

コードベースのプロトタイプで、UXデザイナーは正確でより包括的なテストを実行できます。テストの品質が上がると、最終製品に反映されるエラーやユーザビリティの問題が少なくなります

ステークホルダーの有意義なフィードバック

UXデザインの反復プロセスでは、ステークホルダーのフィードバックが非常に重要です。 プロトタイプが直感的でないと、ステークホルダーは賛同と資金調達に影響を与える可能性のあるデザインコンセプトを理解するのが大変になりますからね。

UXPin を使っているかどうかに関係なく、プロトタイプは他の一般的なデザインツールよりもはるかに高い忠実度と対話性を備えています。 その結果、デザイナーはステークホルダーから有意義で実用的なフィードバックを得ることができるのです。

UXデザインプロセスをレベルアップしよう

UXPin Mergeを使うと、デザイナーはテスト中にデザインハンドオフを効率化しながら、より良い結果を得ることができるため、市場投入までの時間とコストが削減されます。

そしてデザイナーは、ゼロからデザインするのではなく、コンポーネントをドラッグ &ドロップして、最終製品のように見えて動作する、完全に機能するコードベースのプロトタイプを構築できます。詳細は UXPin Mergeのページを是非ご覧ください。

デザイン提唱とは?

デザイン提唱

UXデザイナーがデザイン以外のチームやステークホルダーに、ユーザー中心のソリューションとUXの重要性について教育しようとするにつれて、デザイン提唱は過去10年間で人気が高まっています。

デザインの提唱者には、さまざまな形態があり、組織全体にリプルを広げてユーザー中心の価値観へと思考を転換させることを目標としています。

UXPinのコードベースデザインで製品のUXを向上させませんか?最終製品を正確に再現する忠実度の高いプロトタイプを作成し、ユーザビリティテストやステークホルダーからの有意義なフィードバックを得ることができます。ぜひ無料トライアルにごサインアップしてUXPinがあなたのUXデザインプロセスにどのような革命をもたらすかご覧ください。

UXデザイン提唱者とは

デザイン提唱者とは、デザインの関心、ユーザー中心のデザインアイデアデザイン思考を促しながら、UX(ユーザーエクスペリエンス)についてデザイン以外のチームやステークホルダーを教育し、連携することに専念するUX専門家のことです。

デザイン提唱者は通常、デザインチーム、ステークホルダー、および他の部門とデザイン関連事項での共同作用における内輪向きの役割になります。

  • デザインチームでは、主に組織のデザインバリューを浸透させ、企業文化の構築のために活動する
  • ステークホルダーや非デザイナーに対して、デザインの価値を示し、連携の機会を探っている

場合によっては、デザイン提唱者は、オンラインフォーラムやライブイベントを通じてエンドユーザーと外部でつながることもあり、彼らが社内で働くか社外で働くかは、製品や組織によって異なります。

提唱と説得の違い

提唱とは、デザインの利益のために立ち上がってテーブルにつくことであり、一方、説得とは、自分のように考えたり行動するよう人々を説得しようとすることです。

デザイン提唱者とは、人々にデザインの実践を強制することではなく、仕事の中にデザイン思考や原則を取り入れることです。目標は、デザイン以外のチームメンバーやステークホルダーに立ち止まってもらい、”この決定は「我々の利益」「顧客」のためになるか?”と考えてもらうことです。

UXデザイン提唱 が重要な理由

多くのステークホルダーや非デザインチームはUXを理解しておらず、UXは見た目の美しさだけを追求するものだと考えています。これは些細なことに思えるかもしれませんが、デザインプロジェクトに悪影響を及ぼし、”デザインの失敗 “と認識される結果になりかねないのです。

例えば、ステークホルダーがデザイナーにビジネス上の利益のためにコンテンツとCTA(Call To Action)を優先するように指示するアプリを構築しているとします。ところが、ユーザー調査やテストの結果は、顧客は違うコンテンツや機能を優先すると出ています。

search observe user centered

直感的に操作できなかったり、必要なものを見つけるのにメニューやサブメニューに移動しなければならず、その結果、単純な作業なのに必要以上に時間がかかってしまうようになり、ユーザーは製品に不満を感じるようになります。そうなると、以下のようなことが結果として起こる可能性があるのです:

  • 顧客が製品を使わなくなり、競合他社に乗り換える
  • 顧客問い合わせの増加
  • コンバージョン数および売上高の減少
  • 否定的なレビューがブランドの評判に傷をつける

このような問題は組織に悪影響を及ぼし、ステークホルダーはUXを責め立てます。本当の問題は、ユーザーリサーチやユーザー中心のデザインよりも、ビジネスの目標や前提を優先させることだったのです

ステークホルダーは必ずしも悪くないのですが、UXに対する基本的な理解が欠けています。そこでデザイン提唱者の出番です。

デザイン提唱 の例

今回は、PayPalとGMの2つの企業組織におけるデザイン提唱の事例を紹介します。

PayPalにおけるUXの提唱

PayPalのUX Lead EPXであるエリカ・ライダー氏は、デザインバリュー会議2020の講演で、いかにUXの原則を製品やエンジニアリングチームに提唱し、UXだけでなく全員がユーザー体験に責任を負うようにしているかを語っています。

彼女は、製品開発プロセスにおける制御と責任の大きな不均衡を以下のように実感しました:

  • UXデザイナーは、ユーザーに提供されたUXについて担うコントロールは0なのに責任は100%を負う
  • エンジニアは、ユーザーに提供されたUXに対して負う責任は0なのに、コントロールは100%担う。

エリカは、責任を負うべきは提供するチームであると信じており、エンジニアがUXを理解できるように教育し、専用のウィザードでその成功を測定することに取り組んでいます。

デザインとUXの原則を提唱することで、彼女はユーザーへの製品提供を改善すべく、エンジニアリング担当者との中間点を見出したのです。

エリカのアプローチについては、デザインバリュー会議での30分間の講演「DesignOps 2.0 – Scaling Design」をご覧ください。

デザインの提唱 に一番いい方法

ここでは、パートナーシップから、デザイン活動へのステークホルダーの参加、さらには新しいデザイン手法の導入まで、組織全体でデザインを提唱する方法をいくつかご紹介します。

process direction 1

1. 部門を超えた連携

連携は、デザイン提唱を成功させる鍵の1つです。デザイン提唱者は、各部門と協力して、情報やユーザーリサーチの価値を共有する方法を見つけなければなりません。

ここでは、デザインチームが他の人と協力して、組織の他の部分に価値を提供する方法をいくつかご紹介します:

  • セールスチームとマーケティングチームが情報を共有することには、大きなの価値があり、どちらのチームもユーザーの行動を見ますが、それぞれ違うレンズ越しに見ています。
  • セールスやマーケティングは、リサーチをサポートするのに貴重なデータを持っていることが多く、UXはキャンペーンの最適化のために既存のユーザー調査を提供することができます。
  • ​​ユーザーリサーチで、ビジネスチームが新しいユーザーや市場の機会を特定しやすくなります。デザイン提唱者は、この貴重な情報を共有することで、製品と市場の適合性を向上させ、ユーザーと組織のためになるビジネス上の意思決定におけるUXの影響力を高めることができるのです
  • データサイエンティストは、ユーザーの行動、UXが解決できる問題、それに応じた優先順位の付け方について、貴重な見解を持っており、UXの提唱者は、アナリストが顧客の行動をより明確に把握し、理解するためのもう一つのデータポイントとして、ユーザーリサーチデータを共有することができます。

デザインの提唱者となり、組織内での部門の価値を高めるには、このような連携の機会を見つけることは不可欠な部分です。

2. ワークショップ

デザイン思考のワークショップは、デザインプロセスやデザイン思考による問題解決の方法について、デザイン部門じゃないチームやステークホルダーを教育するのにとてもいいです。デザインワークショップは、ジェラ・マーフィー氏がGMで魔法をかけた方法の1つです。その結果を見たらワークショップという方法のすばらしさが分かるでしょう!

3. ユーザーインタビューへ招く

ユーザーインタビューでは、ユーザビリティ・テストのプロセスや、UXデザイナーがどのようにユーザーの問題に対するソリューションを開発し、機会を特定するかをステークホルダーに見てもらうことができます。

また、ユーザーインタビューは、ユーザビリティの問題やデザインの悪いUIでユーザーがどのように苦労しているかをステークホルダーが見る絶好の機会であり、今後の意思決定に共感をもたらします。

4. デザインスプリントに招く

デザインスプリントでは、ステークホルダーとデザイン部門でないチームのメンバーが、1週間以内にエンドツーエンドのデザインプロセスを直接体験することができ、そこでデザイン思考やプロセスを学び、自分たちのソリューションに対するユーザーの反応を見ることができます。

5. ストーリーテリング

GMのジェラ・マーフィー氏は、ユーザーストーリーやUXの成功例を伝えるために、ストーリーテリングをよく利用しますが、UXの成果物を共有することは、こういったストーリーをステークホルダーに提示するにはベストな方法ではないことに、彼女は長い間わかっていました。デザイナーにとっては意味のあるものですが、ステークホルダーにとっては十分なビジュアルではないのです。

彼女は、ユーザーとビジネスゴールの接点を示すビジュアルを多用し、聞き手にとって適切なUXストーリーを語る方法を探しています。

ユーザーやUXのストーリーを語るときは、聴衆のことを考え、適切な言葉やビジュアルを使ってメッセージを伝えましょう。

6. DesignOpsでの提唱

DesignOpsは、デザイン提唱を推進するための一般的な手段であり、DesignOpsの専門家は、デザインの中で効率化を図り、組織の他の部分への影響を測定します。

彼らは、デザインの価値を高めるのに、以下のようないくつかの取り組みを行っています(これらの中には、デザイン提唱者の仕事と類似しているものもあります)。

  • 部門を超えた情報共有の推進と促進
  • 部門を超えた情報共有
  • スキル開発
  • デザイン理念の浸透とチーム文化の構築
  • キャリア開発およびコーチング
  • デザインチームの目標設定とメンタリング
  • 結束と一貫性を高めるためのツールやプロセスの開発

このトピックにの詳細については、「DesignOps 101: Guide to Design Operations」と題した電子ブックをご覧ください。

UXPin – ユーザーのための究極のデザイン提唱

ユーザーテストは、デザインプロセスの重要な部分ですが、プロトタイプが製品体験を再現できなければ、正確な結果を得ることはできません。UXPinのコードベースのデザインツールを使えば、デザイナーはコードのような忠実性と機能性を備えたプロトタイプを作成し、より良いユーザーテストを行うことができます。

uxpin collaboration comment mobile design

UXPinのプロトタイプは、ステークホルダーからのより良い、より有意義なフィードバックももたらします。UXPinのコードベースのプロトタイプは、何かをすることを「想像」するのではなく、高度な機能を提供し、ステークホルダーが好む没入型の体験を「創造」します。

UXPinのコードベースのデザインソリューションに切り替えて、デザイン提唱者が話題にする価値と効率性をより多く生み出しましょう。無料トライアルにサインアップして、UXPinがどのように顧客のためにより良いUXを生み出すかをぜひご体験ください。

ダブルダイヤモンドのデザインプロセス – 製品デザインを成功に導くおすすめのフレームワーク

 ダブルダイヤモンド のデザインプロセス - 製品デザインを成功に導くベストなフレームワーク

ダブルダイヤモンドのデザインプロセスは、問題の特定や、ソリューションの開発のために広く使われている方法論であり、この成果ベースのフレームワークは、核となる問題とエンドユーザーへの影響に焦点を当てながら、創造性と革新性を促します。

世界最先端のプロトタイピングツールで、より良い製品をユーザーに届けませんか。無料トライアルにサインアップして、UXPin によるインタラクティブなプロトタイピングをぜひお試しください。

ダブルダイアモンドとは

ダブルダイアモンドモデルは、2003年にブリティッシュデザインカウンシルによって開発されたイノベーションとデザインのためのフレームワークです。デザインカウンシルは、どのような手法やツールを用いても、プロジェクトを実現するためのシンプルなデザインプロセスを求めていました。

idea design brainstorm 1

デザインのフレームワークには2つのダイヤモンドが以下のようにあしらわれています:

  • 問題を表すダイヤモンド
  • ソリューションを示すダイヤモンド

デザイナーはこのダイヤモンドの中で仕事をし、このダイアモンドで彼らは問題を真に理解し、ソリューションを徹底的にテストすることができます。

デザイナーは、最初のダイヤモンドで核となる問題を特定すると、2番目のダイヤモンドの基礎となるデザインブリーフを作成します。2つ目のダイヤモンドでは、プロトタイプを作成し、リリース準備が整うまでソリューションをテストすることに重点が置かれます。

ダブルダイヤモンドデザインプロセスの起源

私たちがデザインフレームワークとして知っているダブルダイヤモンドは、ブリティッシュデザインカウンシルから生まれたものですが、このプロセスは、ハンガリー系アメリカ人の言語学者であるベーラ・H・バーナシー氏の「発散-収束モデル」から影響を受けています。

ベラのモデルは、最初のダイヤモンドを使って問題を広く深く探求し(発散的思考)、次に適切な集中的な行動をとる(収束的思考)というデザインフレームワークと非常によく似ています。

ダブルダイヤモンドデザインプロセスにおける4つのフェーズ

ダブルダイヤモンドのデザインプロセスは、2つのダイヤモンドと「4D」とも呼ばれる以下の4つのフェーズで構成されます:

  1. 発見(Discover)
  2. 確定(Define)
  3. 開発(Develop)
  4. 提供(Deliver)

ダイヤモンド1 – 問題の発見と定義

最初のダイヤモンドは、UXリサーチと探索に関するもので、多くの場合「問題空間」と呼ばれます。 ‐ デザイン思考プロセスの共感と確定のステージに似ていますね。

process brainstorm ideas

デザイナーはまず、問題とユーザーのニーズを調べることから始めますが、このフェーズには、アナリティクスや UX成果物のレビュー、エンドユーザーへのインタビュー、サービスサファリの実施、その他の初期段階のリサーチ方法が含まれる可能性があります。

第2フェーズでは、デザイナーは「発見」フェーズでのリサーチを用いて、問題とそれがユーザーに与える影響を確定しますが、デザインチームは、核となる問題にたどり着くまで、第1フェーズと第2フェーズを何度か繰り返すことがあります。そしてデザイナーが作成する UX 成果物には、以下のようなものがあります:

  • ユーザーペルソナ:対象とするユーザーの架空の人物像で、その特徴やニーズを概説する。
  • カスタマージャーニーマップ: タッチポイント間のユーザー体験を可視化した成果物。
  • 問題ステートメント:取り組むべき具体的な問題を簡潔に表現したもの。
  • 共感マップ:理解と共感を促進するために、ユーザーの思考、感情、行動を図示したもの。

第2フェーズの最後では、デザイナーはデザインブリーフを作成して、それをデザインプロセスの後半で適切なソリューションを見つけるための指針とします。

ダイヤモンド2- ソリューションの開発と提供

 2つ目のダイヤモンドでは、適切なソリューションを見つけるためのアイデア出し、プロトタイプおよびテストを行います

開発のフェーズでは、ダブルダイヤモンドのフレームワークの中でも、チームが以下のようなさまざまなツールや手法を用いる忙しいフェーズです:

  • ワークショップとブレーンストーミング:チームとして集まって、アイデア出しや仮説立て、実験の実行、可能性のあるソリューションについての話し合いを行う。
  • 低忠実度(Lo-Fi)デザイン:スケッチ、ワイヤーフレームペーパープロトタイプなど、デザイナーが多くのアイデアをサッと開発してテストするのに使われる、忠実度の低い(Lo-Fi)メソッド。
  • 部門横断での連携:デザイナーは、エンジニア、プロダクトオーナー、その他のステークホルダーとミーティングを行い、可能性のある課題や制約に関するフィードバックを得るためにアイデアを話し合う。
team collaboration talk communication

開発のフェーズは、デザイナーが以下の点において最も可能性の高いソリューションを1つ特定するまで、アイデア出しやプロトタイプ、さまざまなアイデアのテストを繰り返すプロセスです:

状況によっては、デザイナーはソリューションを1つ選ぶか、いいと思うアイデアを2つ3つ選んで、提供のフェーズで忠実度の高いプロトタイプとテストを行います。まずは、1つのソリューションにたどり着くまで、うまくいかないものを排除することを目標にします。

testing observing user behavior

それでデザイナーは、1つのソリューションにたどり着くと、最終的なプロトタイプを改良すべくさらにテストを行います。この一連のテストにおいて、デザイナーは、最終的な結果でデザインブリーフとステークホルダーが確実に満足できるように、ユーザビリティと UX(ユーザーエクスペリエンス)に焦点を当てます。

また、デザイナーは問題に遭遇すると、ソリューションを見つけるために開発のフェーズに戻り、ソリューションが見つかるまで反復とテストを繰り返します。

プロトタイプとテストが完了すると、デザインチームは、ドキュメント、注釈、アセット、他にもエンジニアがリリースのために最終製品を開発するのに使う指示など、デザインハンドオフに備えます。

code design developer

あとは、デザインチームは UX監査と QA(品質保証)を実施し、最終リリースが確実にプロジェクトの要件、ビジネス目標、ユーザーニーズを満たしているようにする必要があります。

ダブルダイヤモンドデザインプロセスの使い方

ダブルダイアモンデザインプロセスをワークフローに活用する実践例を見ていきましょう。

第1フェーズ:発見

  • ユーザーリサーチ:ターゲットユーザーへのインタビューやアンケートを実施する。
  • 市場調査:競合他社や業界動向の調査
  • ステークホルダーへのインタビュー:ステークホルダーからインサイトを得る。
  • 共感マップ作成:共感マップを作成して、ユーザーの感情や動機を理解する。

第2フェーズ:確定

  • データの統合:親和図を使ってパターンを特定する。
  • 問題提起:明確で簡潔な問題ステートメントを作成する。
  • ユーザージャーニーマップ:ユーザージャーニーをマッピングして、ペインポイントを特定する。
  • デザインブリーフ:プロジェクトの目標と制約をまとめたブリーフを作成する。

第3フェーズ3:開発

  • アイデア出し:共同ワークショップを通じてソリューションをブレインストーミングする。
  • プロトタイプ:ワイヤーフレームやスケッチを作成する。
  • ユーザーテスト:実際のユーザーとプロトタイプをテストする。
  • イテレーション(反復):フィードバックに基づいてデザインを改良する。

第4フェーズ:提供

  • 高忠実度(Hi-Fi)プロトタイプ: 忠実度の高いモックアップでデザインの詳細を最終決定する。
  • 開発:デザイナーとデベロッパーの密接な連携により、サイトを構築する。
  • 品質保証:広範なテストを実施する。
  • 立ち上げと監視:サイトを立ち上げ、継続的にパフォーマンスを監視し、さらなる改善を図る。

ダブルダイヤモンドデザインプロセスに従うことで、徹底したユーザー中心のアプローチで新しいサイトをきちんとデザインできることから、ユーザーのニーズを深く理解し、ソリューションを探って改良を重ね、最終製品を効果的に実装して立ち上げることによる、成功の可能性の最大化につながるのです。

UXPin でエンドツーエンドのUXデザインを試してみよう

プロトタイプとテストは、ダブルダイアモンドフレームワークなどのエンドツーエンドのデザインプロセスにおいて重要な意味があります。デザイナーは、潜在的なソリューションの徹底的なテストや正確な結果の獲得のために、高品質のプロトタイプの使わないといけません。

残念ながら、高忠実度のプロトタイプは、特定のツールでは時間がかかることがあり、ダブルダイヤモンドのデザインプロセスで多くのアイデアをテストするには理想的ではありません。

UXPin の完全インタラクティブデザインなら、デザイナーはスピードのために品質を妥協する必要はなく、最終製品のような外観と機能を備えた、忠実度の高いプロトタイプを作成できます。そしてより良いプロトタイプだと、テスト時に正確な結果がもたらされることで、デザイナーは画像ベースのデザインツールでもっと色々できるようになります。

uxpin collaboration comment mobile design

UXPin には組み込みのデザインライブラリも標準装備されていることから、デザインチームはコンポーネントをドラッグ&ドロップして、忠実度の高いモックアップを数分で作ることができます。数回クリックすれば、インタラクションを追加して、以下のコードのような機能を持つプロトタイプを作成できます:

  • ステート:任意の要素に対して複数のステートを作成し、それぞれに個別のプロパティとインタラクションを設定できる。
  • 変数:ユーザーの入力を捉えてデータに基づいたアクションを実行することで、ダイナミックで個別化された UX(ユーザーエクスペリエンス)をテスト中に作成する。
  • 条件付きインタラクション: 「if-then 」と「if-else 」のルールを作成し、ユーザーのアクションや入力に対してさまざまな反応を実行する。
  • Expression:フォームのバリデーション、計算コンポーネント、パスワード認証のシミュレーションなど、従来はコードでしか実行できなかった複雑な操作を実行する関数をデザインする。

どんなフレームワークでも、UXPin だとデザインプロセスを強化して、顧客により良いユーザー体験をお届けできます。無料トライアルにサインアップして、UXPin によるコードベースのデザインの可能性をぜひご体験ください。

【UI/UX デザイナー向け】プログラミング言語とフレームワークガイド

【UI/UX デザイナー向け】プログラミング言語とフレームワークガイド

何百ものプログラミング言語がある中で、UX デザイナーやプロダクトデザイナーにとって、どれを理解してどれを学ぶべきなのかの判断が大変になることがあります。また、コードを学ぶのは UXデザイナーの仕事に欠かせないというわけではありませんが、技術的な制約の理解や、開発チームとの連携の向上につながることがあります。

そこで本記事では、UI/UX デザイナー向けの6つのプログラミング言語と、コーダーが1つを使う理由について説明します。そしてプログラミング言語やフロントエンドフレームワーク、コンポーネントライブラリの違いと、それらがデザインプロジェクトにどのような影響がもたらすのかについても見ていきます。

UXPin Mergeによって、コンポーネント駆動型プロトタイプにより、デザインプロジェクトをより高いレベルへと押し上げることができます。この画期的なUXテクノロジーへのアクセス方法と詳細については、こちらのページをぜひご覧ください。

プログラミング言語とは

code design developer

プログラミング言語は、デベロッパーが Web サイトやアルゴリズム、デジタル製品を書くために使うコードであり、それぞれのプログラミング言語には、独自のマークアップ、ルール、構造、パッケージ・マネージャーなどがあります。

数百ものプログラミング言語がありますが、そのほとんどはプロダクトチームが触れることはないでしょう。ちなみに、重要なコーディング言語のリストを絞り込みましたので、これらをさらに調べたい場合には何から手を付ければいいかがわかります。

プログラミング言語が製品開発プロセスにもたらす影響

プログラミング言語は、製品の技術的制約を決定し、UX(ユーザーエクスペリエンス)のデザインプロセスを含などの製品開発に大きな影響を与えます。

デザインチームはその制限を理解していないと、プログラマーが構築できないソリューションや機能のデザインに時間を無駄に費やすことになるリスクがあります。

プログラミング言語は、最終的に UX に影響を与える他の製品開発の決定にも以下のような影響を与えます:

  • 市場投入までの時間
  • バックエンドの技術インフラ(予算とパフォーマンスへの影響)
  • エンジニアの人材(人材の確保とコスト)
  • APIと統合による機能性/拡張性

プログラミング言語とフロントエンドフレームワークの比較

「プログラミング言語」と「フロントエンドフレームワーク」をの識別は重要です。例えば、Javascript はプログラミング言語ですが、React、Angular、Vue はすべて Javascript のフレームワークです。

フレームワークはプログラミング言語を使って構築され、それによってソフトウェアエンジニアはオートメーションやツール、ライブラリ、機能、テンプレート、セッション管理などを得られ、ゼロからコーディングするよりも効率的に Web サイトやアプリケーションを開発することができます。

コンポーネントライブラリとは

コンポーネントライブラリは、コードのスキルが限られている人々にとって、さらなる混乱が加えられることになります。

design system atomic library components 1

コンポーネントライブラリは、エンジニアが UI(ユーザーインターフェース)の構築に使う既製の UI 要素を備えたデザインシステムのコードコンポーネントです。一般的な例としては、Google の Material Design UI に基づいて構築された React コンポーネントライブラリである MUI が挙げられます。

コンポーネントライブラリは、デザイナーにとっての、デザインツールで使われるベクターベースのグラフィック要素を集めた UIキットに当たります。それでもいまいちピンとこないであれば、こちらの記事でデザインシステム、パターンライブラリ、スタイルガイド、コンポーネントライブラリの違いが説明されています。

UX デザイナーが出会うプログラミング言語

これは、デザイナーはその背後にある個々のプログラミング言語よりも、フロントエンド フレームワーク(通常は Javascript ベース)やコンポーネントライブラリに遭遇する可能性が高いので、答えにくい問題です。これまで学んだように、これらはまったく別のものなのです。

なので、以下の2つのカテゴリーを作りました:

  • プログラミング言語
  • フロントエンドフレームワーク

プログラミング言語

ここでは、UX デザイナーがキャリアの中で遭遇する可能性の高い1つのプログラミング言語を見ていきます。

1. HTML

HTML とは HyperText Markup Language の略で、Web ブラウザで使われるマークアップであり、Web サイトや Web アプリの構築では、全エンジニアが学ばないといけない基礎的な言語です。フロントエンドフレームワークを使うか使わないかはさておき、Web ブラウザは常に HTML をレンダリングし、スタイリングやインタラクティブ性のために CSS や Javascript もレンダリングします。

UX デザイナーとして基本的な HTML を学ぶことは、フロントエンドのコーディングの基礎を理解する上では決して悪くありません。

2. CSS

CSS(Cascading Style Sheets)は、色、レイアウト、フォントなどでコンテンツをスタイル設定するのに使われるスタイルシート言語です。CSS がなければ、HTML によってレンダリングされる基本的なスタイルプロパティを備えた  Web サイトはどれも同じように見えるでしょう。

CSS は比較的わかりやすく、UI デザインに大きな影響を与えるため、UI デザイナーにとって非常に重要なもう一つの言語です。

3. Javascript

Javascript は、Web サイトや Web アプリケーションのもうひとつの中核となるインターネット言語であり、Web 開発において、HTML や CSS と並んでインタラクティブ性と機能性を提供することを主に担います。

また、Javascript は、React、Vue、Ember、Angular など、多くのフロントエンドフレームワークにも広く使われており、企業はこのようなフレームワークを使って、日々使われている Web アプリやモバイルアプリの多くを構築しています。

4. Java

Javascript と混同されがちですが、Java はソフトウェア大手のオラクルによって管理されているプログラミング言語で、主にエンタープライズアプリケーションの構築に使われており、スマートウォッチ、冷蔵庫、スマートTV、ウェアラブルなど、多くのハードウェアデバイスの動力源にもなっています。

5. PHP

PHP は、広く使われているコンテンツ管理システムである WordPress を支えるプログラミング言語として最もよく知られています。また、SNS の 一大勢力が React を開発する前は、初期の Facebook を支えたオリジナルの言語でもありました。

6. Python

Python もまた、Meta が Instagram のために使っている人気のフロントエンドプログラミング言語です。この言語は、無駄のないコードとあらかじめ組み込まれたアルゴリズムライブラリにより、AI(人工知能)や ML(機械学習)アプリケーションにも広く使われています。

Web デザインに最適な言語は?

Web デザインに便利なストレートスタックを以下で見てみましょう。

  • HTML(Hypertext Markup Language): 会社情報、製品/サービス、サインアップフォームを表示するセクションなど、Web サイトの構造を提供する。
  • CSS(カスケーディング・スタイル・シート): CS Sを使って HTML 要素をスタイル化することによって、Web サイトが視覚的に魅力的でまとまりのあるものになる。
  • JavaScript: サインアップフォームのクライアントサイドのバリデーションに JavaScript を使って、ユーザーが有効なメールアドレスなどの必要な情報を確実に入力できるようにする。また、スムーズなスクロール、インタラクティブなアニメーション、通知の表示など、UX(ユーザーエクスペリエンス)を上げるのに JavaScript を使うこともできる。
  • PHP(ハイパーテキスト・プリプロセッサ)または Node.js: サインアップ情報を収集および保存するバックエンド機能には、PHP または Node.js のいずれかを使うことができる。PHP は簡単で、フォーム送信の処理やデータベースとのやりとり、メールの送信によく使われ、対する Node.js は、よりモダンでスケーラブルなバックエンドソリューションを提供できる。
  • SQL (Structured Query Language): 集めたサインアップ情報を保存するデータベースとのやり取りには SQL を使う。

このスタックを使えば、メールとサインアップを効果的に集めるシンプルで機能的な企業 Web サイトを作成できます。まずは HTML と CSS を使ってレイアウトとスタイルをデザインし、JavaScript を使ってクライアントサイドのバリデーションとインタラクティブ性を実装して、最後に PHP または Node.jsと SQL を使ったデータベースを使って、サインアップデータを収集および保存するためのバックエンド機能をセットアップします。

フロントエンドフレームワークとは

本記事では、Web やモバイルアプリケーションでよく使われる4つの Javascript フレームワークに焦点を当てていきます。

uxpin merge component sync 1

そしてこのフレームワークは、UXPin Merge とも互換性があります。UXPin Merge は、デザイナーがデザインシステムから既製の UI コンポーネントを使って、完全に機能するプロトタイプを構築できるようにする技術です。詳しくは Merge のページをぜひご覧ください

1. React

React は、Web アプリケーションとモバイルアプリケーション(iOS および Android)を開発するための一般的な Javascript フレームワークです。‐ ただし、組織では通常、後者に React Native が使われます。 また、コンポーネントベースのマークアップとクロスプラットフォーム アプリケーションを作成する柔軟性により、世界中の製品開発で人気の選択肢となっています。

2. Ember

Ember は Web アプリケーションを構築するための Javascript フレームワークであり、Netflix、Square、LinkedIn、Twitch など、多くの人気アプリで Ember が使われています。

3. Angular

Google によって開発および維持されている Angular は、クロスプラットフォームアプリケーションの構築向けの広く使われているフレームワークであり、このフロントエンドフレームワークを使っているプラットフォームのほんの一部を挙げると、PayPal、GMail、Upwork、Forbes の Web サイトがあります。また、Angular のすぐに使えるインタラクティブ性と機能性により、このフレームワークは複雑なアプリケーションに人気があります。

4. Vue

Vue は、シングルページの Web アプリケーションを構築するための Javascript フレームワークです。HTML を包含することができるため、HTML、CSS、Javascript のコーディングスキルがある人にとって習得しやすいフレームワークとなっており、優れたパフォーマンスと、アプリケーションを拡張するための包括的なエコシステムもあります。

プログラミング言語を使うメリット

デザインやプロトタイプのプロセスでプログラミング言語を使うことは珍しいことではなく、デザイナーはコードを使ってライブデータのプロトタイプを作成し、それで最終製品のユーザー体験を正確に再現することができます。

そしてこのようなコードプロトタイプにより、デザイナーは最終製品と同じ忠実度と機能性で機能をテストできるため、より質の高い結果とフィードバックが得られます。

process direction 1

ただ、プロトタイプとテストにコードを使う際に、デザインプロセスに時間がかかったり、貴重なリソースではあるけれどプロジェクトのコストが増えてしまうフロントエンドデベロッパーや UX エンジニアのスキルが要ることなどの問題があります。

なので、組織は複雑なユーザビリティの問題を解決するのにコードプロトタイプを準備したり、大体はリソースを節約するのに単一の画面やユーザーフローを構築します。

UXPin Merge – コードをレンダリングするデザインツール

UXPin Merge のようなコードベースのデザインツールを使えば、デザイナーはコードを一行も書かずに(コードを書く場合と)同じ結果を得ることができます。Mergeでは、デザインチームがレポジトリから UXPin のエディタにデザインシステムを同期できるため、デザイナーとエンジニアはデザインおよび開発プロセスで同じ UI 要素を使うことができるのです。

uxpin merge react sync library git

Merge は React、Vue、Ember、Angular など、多くの一般的なフロントエンドフレームワークで動作します。デザイナーは他のデザインツールでこのようなコンポーネントを使いますが、それはデザインシステムによって定められたステート、アニメーション、およびプロパティがあらかじめ用意されています。

より速やかなプロトタイプ、よりよい連携

コンポーネント駆動型のプロトタイプは、デザイナーが UI のエレメントを一からデザインするのではなく、UI を構築することだけに集中するため、画像ベースのデザインよりも圧倒的に速くなります。

そしてこの「信頼できる唯一の情報源(Single source of truth)」により、みんなが同じ言語を話して同じ制約内で作業するため、デザイナーとデベロッパーの連携が強化されます。また、Merge でのデザインハンドオフはシームレスで、エンジニアに同じコンポーネントライブラリがあるため、ほとんど存在しません。UXPin  からのデザインを一致させるだけですからね。

拡張可能(スケーラブル)

Merge だと、パターンによるコンポーネントライブラリの拡張と成熟がしやすくなります。デザイナーは複数の要素を組み合わせて、新しい UI コンポーネントやパターンを構築でき、デザインシステムに必要なものがない場合は、UXPin の npm 統合を使ってオープンソースライブラリからコンポーネントをインポートし、新しいパターンを構築できます。

テストの強化

Mergeを 使うことで、デザインチームは最終的な製品体験を正確に再現する没入型のダイナミックなプロトタイプを作成し、ユーザーテストやステークホルダーからの有意義なフィードバックを得ることができます。

デザインチームはステークホルダーにプロトタイプへのリンクを送り、UXPinのコメント機能を使って実用的なフィードバックを受け取ることができます。また、ステークホルダーは、特定のチームメンバーにコメントを割り当てることもできます。

UXPin を使うことで、ステークホルダーはかなり速やかにフィードバックを提供できるようになります。また、UXPinを使うことで、プロトタイプに対して直接コメントを提供することができます。」Erica Rider, PayPal – Senior Manager for UX – Developer tools and platform experience at PayPal

UXPin Merge を使うと、デザインチームはプログラミング言語の習得や、プロトタイプ中のエンジニアとの共同作業を行ったりしなくても、コードの恩恵を受けることができます。この画期的なテクノロジーと、それがエンドツーエンドの製品開発プロセスをどのように改善するかについて、UXPin Merge のページでぜひ詳しくご覧ください。

コンポーネントを素早く構築 & 保存できる「 Patterns 」とは?

コンポーネントを素早く構築 & 保存できる「 Patterns 」とは?

このブログでは、UXPin Mergeにある「Patterns」機能をご紹介いたします。Patternsを使うことで、簡単に新しいコンポーネントや変数の作成や再利用が可能です。これによって、デザインプロセスでのスピード感と一貫性の向上につながります。さらに、新しいUI要素を試してみたり、デザインシステムの拡張したり、同じプロパティを何度も設定する時間を節約することもできるんです。

 Pattern を試してみたい方は、まずはUXPinの14日間の無料トライアルをお試しください。

UXPin Mergeが選ばれる理由

UXPin Mergeは、コードコンポーネントをUXPinのデザインエディタに取り込むことができる技術を提供します。この技術により、デザインチームは完全に機能する要素を使って、インタラクティブなプロトタイプを構築することができます。たとえデザイナーのよりもデベロッパーの数が大きく上回っていたとしても、UXPin Mergeを使用するチームはデザインの拡張だけでなく、デザインシステムの高い成熟度も実現できることがわかったのです。

UXPinはこのMergeテクノロジーを日々進化させており、デザイナーがUXPinにコンポーネントをインポートしたり、エディタで使用できる方法を研究しています。そこで、複雑なコンポーネントをUXPinで構築・保存可能にする機能「 Patterns 」を発表しました。

堅牢なデザインライブラリをスピーディに構築できる

UXPinでは、StorybookGitNPMパッケージ経由でコードコンポーネントライブラリをUXPinにインポートできるだけでなく、プロトタイプですぐに再利用可能で、定義済みのUIコンポーネントを備えたデザインライブラリがあります。

この新しいMerge機能によって、デザイナーの生産性を向上につながり、デザインシステムの拡張、コード化していない新しいコンポーネントのテストができます。これにより、以下のことがずっと楽になりました:

  • コンポーネントのバリエーションとプロパティの保存及び再利用
  • Mergeコンポーネントをより大きく、より高度な要素と結合
  • まだコード化されていない、定義済みのプリセットを持つ新しいコンポーネントの作成及び共有

 

 Patterns は標準的なUXPinライブラリとして機能しますが、原子や基本的なコンポーネントだけではなく、より複雑なものを作成することができます。また、MergeコンポーネントとClassicコンポーネントと合わせて、開発者にコーディングを依頼することなく新しい要素を試すこともできます。

 Patterns の使い方

 Patterns は、Mergeのアカウントをお持ちの方で、Git、Storybook、およびNPMパッケージなどすべてのMerge統合にてお使いいただけます。

UXPin日本語公式ドキュメントにあるPatternsの使い方をご参照ください。

 Patterns はStorybook統合お試しいただけますUXPinの無料トライアルで、デザインプロセスでコードコンポーネントを使ってみて、そのスピード感と迅速さをぜひご体験ください。

コンポーネント駆動型 プロトタイプとは?

コンポーネント駆動型 プロトタイプとは?

コンポーネント駆動型のプロトタイプは、UXデザインの次なるイテレーションです。デザイナーはもはやゼロからデザインすることはなく、エンジニアが書くコードはより少なくなっています。  

これによってもたらされることは、機能横断的な連携の強化、市場投入までの時間短縮、一貫性、エラーの減少、より良いテスト、ステークホルダーからの有意義なフィードバック、そしてスムーズなデザインのハンドオフが実現します。  

UXPin Mergeを使うことで、これらのメリットがすべて実現可能です。詳しくはこちらのページをご覧ください。  

 コンポーネント駆動型 プロトタイプとは

  コンポーネント駆動型のプロトタイプは、デザイナーが既製のUI(ユーザーインターフェース)要素を使ってUIを構築する製品デザイン手法の1つです。ゼロからデザインするのではなく、インタラクティブなコンポーネントをドラッグ&ドロップしてプロトタイプを作成します。  

このデザイン手法は、フロントエンドエンジニアがゼロからコーディングするのではなく、既存のコンポーネントライブラリを使ってUIを構築するコンポーネント駆動開発に由来するものです。  

Storybookはこの開発方法でよく使用されるツールであり、エンジニアはコンポーネントを分離して構築・管理することができます。

design prototyping collaboration interaction

コンポーネント駆動型プロトタイプも同様に、ゼロからデザインするのではなく、オープンソースのUIライブラリや製品のデザインシステムを使って、既製のコンポーネントでUI構築に集中することができます。  

コンポーネントは通常、色、タイポグラフィー、サイズ、スタイルなどの定められたプロパティで完全にインタラクティブであり、それによってデザイナーはプロトタイプ作成、テスト、イテレーション、デザインプロジェクトの提供をより速く、より正確に行えるようになります。  

 コンポーネント駆動型プロトタイプ の手法

  コンポーネント駆動型のプロトタイプはコンポーネント駆動開発からヒントを得たものですが、ブラッド・フロント氏のアトミックデザイン原則がデザイン手法の基礎となります。  

アトミックデザインにおいては、UI構築の際に最小のUI要素から始めて徐々に規模を拡大していく段階的な取り組み方法を採用しています。ゼロからデザインするのではなく、要素を組み合わせ、より大きなコンポーネントやテンプレート、UI(ページ)を作成します。

design system atomic library components

アトミックデザインの5つの要素には、以下のようなものがあります:  

  1. 原子(Atoms:HTMLタグ、フォント、アニメーション、カラーパレットなど、UIの基礎となる要素。デザイナーはこれらの要素を分解することはできない。
  2. 分子(Molecules:原子が組み合わさって、フォームのラベルや入力フィールドのような小さなインタラクティブなコンポーネントを作る。
  3. 生体(Organisms:ユーザビリティやアクセシビリティの問題を解決するために、デザイナーが使うインタラクティブ性の高い複雑なUIコンポーネントであり、ロゴ、検索フィールド、プライマリーナビゲーションなどが例として挙げられる。
  4. テンプレート:ブログのフィード、カルーセル、導入事例、フッターなど、さまざまなウェブサイトやアプリケーションの部門の構造を定めるものであり、テンプレートには、このような大きな構造を作成するための原子、分子、生体のグループ化が含まれている。
  5. ページ:ユーザーのニーズとビジネスゴールを一致させ、まとまりのあるUIを作成するためのテンプレート集を使った完全な画面。

コンポーネント駆動型プロトタイプにおける8つのメリット

1. 信頼できる唯一の情報源(Single source of truth)

  コンポーネント駆動型のプロトタイプの最も大きなメリットは、デザインと開発の連携の強化であり、デザイナーとエンジニアは、レポジトリやnpmパッケージ、Storybookでホストされている同じコンポーネントライブラリを使って作業します。  

UXPin Mergeのようなツールは、デザインと開発の間の繋がりを促し、各部門が単一のコンポーネントライブラリにアクセスできるようにします。デザインチームが視覚的なUIコンポーネントを使う一方で、エンジニアはその背後にあるコードを見るというように、同じ要素を異なる視点から見ることができます。   

2. デザインの一貫性

  この信頼できる唯一の情報源(Single source of truth)は、デザインと開発全体の一貫性の維持に優れており、インタラクティブ機能とスタイリングが組み込まれているため、デザイナーはUIコンポーネントを組み合わせてUIを作成することだけを考えればよく、色、タイポグラフィー、サイズ、境界線の半径、正しいアイコンの使い方などのバリエーションといったよくある問題を排除することができます。  

また、デザインの一貫性は、複数のチームが同じ製品に取り組む際に重要な、承認され統一されたコンポーネントやUIを受け取るエンジニアにも利点があります。

3. 共有可能

  デザインチーム間でコンポーネントを共有することで、デザインの一貫性を維持しながら、UXワークフローとデザイナーの連携を効率化することができます。  

静的なUIキットで、デザイナーはUI要素の共有ができますが、そのようなキットは忠実性と機能性に欠けています。そうなると、デザイナーが自らセットアップしなければならず、それがインタラクションデザインの矛盾やドリフトにつながります。  

そこでコンポーネントライブラリを共有すれば、デザイナーはビジュアル要素、インタラクション、スタイリング、その他デザインシステムが設定するあらゆる制約を受けることができます。  

4. よりスムーズなデザインハンドオフ

  デザインハンドオフは、デザイナーとエンジニアにとって、本来はストレスの多い、虚構に満ちたプロセスであり、デザイナーは、ツールやビデオ、ドキュメントや静的なデザインを使って、プロトタイプが「何をするはずなのか」を示します。  

UXPin Mergeでデザインハンドオフを行うと、エンジニアが同じコンポーネントを使うため、不確実性がなくなり、文書化を減らすことができます。デザイナーは、各コンポーネントのインタラクションやスタイリングのプロパティで技術的な制約を受けないようにできるので、エンジニアが再現できないデザインを目にすることはほとんどありません。  

5. 有意義なフィードバック

  ユーザビリティの参加者やステークホルダーも、コンポーネント駆動型のプロトタイプの恩恵を受けます。完全にインタラクティブなプロトタイプは、最終的な製品とその能力について、誰もが現実的に期待することができ、デザインチームは、より高い忠実度と機能性により、ステークホルダーとエンドユーザーから有意義で実用的なフィードバックを得ることができるのです。

コンポーネント駆動型 プロトタイプとは? - フィードバック

6. より高速なイテレーション

コンポーネント駆動型のプロトタイプのワークフローにより、デザイナーはテストやステークホルダーからのフィードバックに対して、より速やかにイテレーションを行うことができます。ドラッグ&ドロップによるデザインプロセスと簡単にできるプロパティへのアクセスにより、デザイナーはその場で変更を加えることができるのです。ちなみにPayPalは、UXPin Mergeに切り替えた後、以下のようにその効率性の向上を実感しました

忠実度の高いプロトタイプをより早く作り、セッション後にすぐにフィードバックが得られます。すぐに修正できることがあれば、次の参加者の前にその変更を行い、以前よりずっと早くフィードバックを得ることができます。」- PayPal, UXシニアマネージャー、エリカ・ライダー氏

UXPin Merge のユーザーはPatternのようなツールの恩恵を受け、デザインチームは1つのコンポーネントが持つ複数のバージョンを共有のパターンライブラリに保存することができます。そしてデザイナーは、UXPinのPropaties Panel(プロパティパネルを使う代わりに、UI要素とパターンを切り替えて、より速くイテレーションを行うのです。  

7. レスポンシブデザイン機能

  レスポンシブデザインは、デザイナーにとって時間のかかる作業です。1つの画面に対して複数のレイアウトの作成が必要があり、それによってデザインプロジェクトに多大な時間が費やされることになります。そこで、レスポンシブコンポーネントを開発することで、デザイナーはプロトタイプを1つ作成するだけで、すべてのレイアウトに対応できるようになります。  

Merge のコンポーネント駆動型のプロトタイプのソリューションでは、デザイン システムチームはコンポーネントをiFrameでラッピングして、複数のビューポートに対応させることができ、デザイナーはデザインをプレビューする際に、ドロップダウンを使ってこのようなレイアウトを切り替えることができます。  

8. デザインの拡張性

  コンポーネント駆動型のプロトタイプのドラッグ&ドロップの特性とは、非デザイナーが、画像ベースのデザインツールを使う熟練のUXデザイナーよりも、高い忠実度と機能性でプロトタイプを構築することができるということです。  

PayPalが2019年にUXPin Mergeを使い始めた際に、製品チームをトレーニングすることでデザインプロジェクトの90%を完了させることができました。UXデザイナーは製品チームを指導し、複雑なユーザビリティの問題をサポートすることで、UX専門家を増やす必要性が下がるとともに、ハイレベルなUXの取り組みに集中できるようになりました。  

コンポーネント駆動のワークフローは、学習曲線を大幅に短縮し、プロトタイプを高速化することで、非デザイナーにもデザインプロセスがより身近なものになっているのです。  

コンポーネント駆動型のプロトタイプのワークフローを導入している会社

  PayPalとTeamPasswordは、コンポーネント駆動型のプロトタイプを使って不整合を排除し、顧客にポジティブなユーザー体験を提供しています。  

PayPalが巨大な多国籍企業であるのに対し、TeamPasswordは小規模なチームで運営されていることから、今回この2社を例に選びました。  

両社とも、UXPin Mergeに切り替え、コンポーネント駆動型のプロトタイプのワークフローを採用することで、大きなメリットを得られました。  

PayPal

  PayPalは、コンポーネント駆動型のプロトタイプのとてもいい成功例です。同社はUXPin Mergeに切り替えた後、画像ベースのデザインツールを使っていたときよりも8倍速くデザインプロジェクトを完成させました。  

PayPalで使っている別のデザインツールで、1ページのベクターベースのデザインを行い、その後、UXPinでMergeコンポーネント ライブラリを使って全く同じプロトタイプを作成しました。Merge だと、デザイナーは約 8分間でできますが、他のデザインツールでは1時間以上かかりました。

社内でよくある問題は、製品チームがUXデザインをボトルネックと捉えていることです。まずはそのボトルネックを取り除き、製品チームが自分たちでデザインを行えるようにする戦略を実行しました。 – Paypal、エリカ・ライダー氏  

PayPalのコンポーネント駆動型のワークフローでは、製品開発に関わるすべての人がUXに責任を持つようになります。最も大きな影響として、コンポーネント駆動型のプロトタイプによって、PayPalの製品チームはより多くのデザイン責任を担うことができるようになった点です。  

Teampassword

  パスワード管理は、組織が顧客の確保および維持のために信頼を勝ち得なければならない、競争の激しい業界であり、デザインは、ブランドの強化や、顧客の信頼とロイヤルティを獲得する一貫したユーザー体験を生み出す上で、重要な役割を担っています。  

お客様は私たちに「ログイン記録」という重要な情報を託しています。矛盾や時代遅れのデザインは、当社がその情報を安全に保つのに十分な最先端の技術を備えているかどうか、一部のお客様に疑念を抱かせてしまうことになります。フロントエンド開発は、バックエンドのパフォーマンスに対する信頼と自信を築くのです。」トニー・カッチャーボ氏、TeamPasswordオペレーションディレクター  

TeamPasswordはゼロからデザインする代わりにオープンソースのコンポーネント ライブラリを使い、プロトタイプとテストのためのデザイン チームは設けられてません。その代わりに、TeamPasswordのフロントエンドのデベロッパーは UXPin Merge を使って新しいUIや機能のプロトタイプとテストを行っています  

このコンポーネント駆動ワークフローによって、TeamPasswordは製品のデザイン、テストなどが高い整合性で行うことができ、市場競争の中での運営において欠かせないものとなっています。  

コンポーネント駆動型のプロトタイプの始め方

  デザインと開発の間に信頼できる唯一の情報源(Single source of truth)を作成することはこれまで以上に簡単になります。UXPin Mergeでを使用することで、組織はコンポーネント ライブラリをインポートでき、デザイナーとエンジニアは同じ UI 要素を使えるようになります。  

コンポーネントの取り込み

  デザイナーは、UXPinのNPM統合を使ってオープンソースのコンポーネントライブラリをインポートしたり、エンジニアの協力を得て、MergeのGitまたはStorybookの統合を使って製品のデザインシステムを同期させたりすることができます。

コンポーネント駆動型 プロトタイプとは? - UXPin Mergeを使ってみると?

プロトタイプ

どの方法でUXPinとコンポーネントを同期させても、デザインの流れは同じです。

  • MergeのUI 要素をキャンバスにドラッグして、プロパティパネルで変更する。また、より大きく、より複雑なコンポーネントを作成するのにUXPin Pattern(パターン機能)を使って要素を組み合わせることも可能。
  • コンポーネントを接続してプロトタイプを作成し、ユーザビリティテストやステークホルダーへのプレゼンテーションを行う。
  • 完璧なソリューションを見つけるまで、テストとイテレーション行う。UXPinでは、【プレビューと共有】を使ったブラウザでのテストや、【UXPin Mirror】を使ったモバイルでのテストが可能。
  • プロジェクトに【ドキュメンテーション】を追加し、デザインハンドオフの時にコメント機能を使ってエンジニアと共同作業を行う。

Mergeの信頼できる唯一の情報源(Single source of truth)

UXPin Mergeは組織全体での「信頼できる唯一の情報源(Single source of truth)」として機能し、それによって製品のデザインシステムの管理および拡張のお手伝いをします。さらに、コンポーネントライブラリのレポジトリに変更があると、UXPinのデザインエディタに自動的に同期され、チームに更新が通知されます。

UXPin Mergeのバージョンコントロール機能で、リリースの追跡や、デザイナーによる以前のバージョンへの切り替えができるため、アップデートを完全にコントロールすることができます。

UXPin Mergeが提供するコンポーネント駆動型のプロトタイピングを試してみませんか?詳細とこの革新的なテクノロジーへのアクセス権のリクエスト法については、Mergeのページをぜひご覧ください。

UXエンジニア って具体的にどんな人?

UXエンジニア って具体的にどんな人?

UXエンジニアは、現代のソフトウェア開発チームにおいて重要な役割を担っており、デザインと開発の間の連携を強化するためのスキルと言語を持ち合わせています。

UXエンジニアは、大抵は部門を超えたチームで働き、デザイナーとエンジニアの間を明確にしてサポートする役割を担っています。UXエンジニアとデザイナーが協力して、デザインのアイデアを機能コードに変換することで、分野間のギャップが埋まり、フロントエンドエンジニアとバックエンドエンジニアは、このコードを基盤として最終製品を開発します。

​​UXPin Mergeにより、デザインと開発の間のギャップを埋めることがこれまでになく簡単になりました。デザイナーの皆さん、コードコンポーネントをUXPinのデザインエディタに同期して、完全に機能するプロトタイプを構築しましょう。無料トライアルにサインアップして、無料の MUI 統合により Merge をお試しください。

UXエンジニアとは?

UXエンジニア って具体的にどんな人? - UXエンジニアとは

UXエンジニアは、UIエンジニアまたはUI/UXエンジニアとも呼ばれ、UXデザイナーとUXデベロッパーのハイブリッド的な位置づけになりますが、一般的には、デザイン思考デザイン原理を理解したフロントエンドのデベロッパーです。

UXエンジニアは、デザインチーム、エンジニアリングチーム、またはその中間で、デザインと開発の橋渡し役として働き、通常は、レイアウト、ボタン、リンク、その他のインタラクティブなコンポーネントなど、UI要素の構築と最適化を行うフロントエンド開発を専門としています。

UXエンジニアは、静的なデザイン要素をインタラクティブなコードコンポーネントに変換する、デザインシステムを扱うことが多いです。

UXエンジニアのスキルセットと業務内容

UX Engineers: What We Are」内で、UXエンジニアのブライリー・サンドリン氏は、UXエンジニアの職責をグラフィックで表現しています。

UXエンジニア って具体的にどんな人? - UXエンジニアのスキルセットと業務内容

UXデザイナーが行う:

  • UXリサーチ
  • アセット作成・管理
  • ワイヤーフレーム作成

UXエンジニアとUXデザイナー両方が行う:

  • アイデア出し
  • デザインテスト
  • 再デザイン

UXエンジニアが行う:

  • プロトタイピング
  • UIコンポーネント開発
  • UIメンテナンス
  • スタイリングのアーキテクチャ

UXエンジニアとフロントエンドエンジニア両方が行う:

  • 実装
  • 技術的実現性
  • バックログ管理

フロントエンドエンジニアが行う:

  • パフォーマンス
  • クエリのアーキテクチャ
  • 検索エンジンの最適化

UXエンジニアは、デザインプロセスや原則に関する知識と理解を持ち、フロントエンドのプログラミングの高い能力が備わってなければいけません。ここでは、ソフトウェア開発プロセスにおけるUXエンジニアのスキルや責任について説明します。

UXエンジニア にコードは必要か

はい、UXエンジニアはコーディングの方法を知っておかければならず、最低でもHTML、CSS、Javascriptといった主要なフロントエンドのプログラミング言語についての高い能力が必要です。

フロントエンド開発 – HTML、CSS、Javascript

UXエンジニアの主な業務はフロントエンドの開発であり、他のフロントエンド開発と同様、HTML、CSS、Javascriptに関する高い能力と経験が求められます。

製品によっては、React、Angular、Vueなど、特定のフロントエンドフレームワークの経験を求める企業もあります。

パッケージ管理

プログラミング言語によっては、Node.jsプロジェクトで使用されるNPM(Node Package Manager)やYarnなどのパッケージマネージャの操作法を知っておかなければいけません。

バージョン管理(Git)

フロントエンドの開発は、常に変化し、進化しています。UXエンジニアは、Gitなどのバージョン管理システムを使って、変更と更新を管理し、バージョン管理によって、他のプログラマーと同時にプロジェクトに取り組むこともできます。

デザイン思考

UXエンジニアがデザイナーと連携するには、デザイン思考プロセスの理解が不可欠であり、エンドユーザーへの共感や、UXデザインの原則の理解が必要です。

ユーザーインターフェース(UI)デザインとインタラクションデザイン

UIデザインインタラクションデザインは、UXエンジニアにとって重要なスキルです。UXエンジニアは、デザイナーと協力してアイデアを出し合い、プロトタイプを機能コードに変換します。UXエンジニアはユーザーインターフェースをデザインしませんが、デザインファイルをコードに変換するため、UIデザインの原則を理解しておかないといけません。

ヒューマンコンピュータインタラクション(HCI)

ヒューマンコンピュータインタラクション(HCI)は、インタラクションデザインと似ていますが、デザインの原則よりもコードに重点を置いており、UXエンジニアの仕事は、デザイナーのプロトタイプを基にした、直感的なフロントエンド体験の構築になります。

デザインシステム

UXエンジニアは、デザイナー、リサーチャー、その他のエンジニアからなる、職域を超えたチームと共にデザインシステムに携わることが多く、デザインファイルから新しいコンポーネントを構築する役割を担っています。

デバッグとテスト

UXエンジニアは、リリース前にフロントエンドのバグを発見して修正する責任を担っていることから、デバッグとテストは、UXエンジニアの重要な作業の一部といえます。又、UXエンジニアは、コードのプロトタイプを作成してデザイナーやエンジニアに提示します。

デザイナーがプロトタイプがデザインと一致していることを確認し、UXエンジニアと一緒に働くデベロッパーがベストプラクティスや命名規則などを確認しながらコードをチェックします。

UXエンジニアは、このようなコードプロトタイプを構築することで、デザインのハンドオフプロセスを効率化し、エンジニアが最終製品を開発するための基盤を構築しています。

ナビゲーションと情報アーキテクチャ

UXエンジニアは、画面、モーダル、ページをつなぐ役割を担っているため、ナビゲーションと情報アーキテクチャを理解しておかなければいけません。

レスポンシブデザイン

レスポンシブデザインは、フロントエンドの開発において非常に重要であり、UXエンジニアは、CSSメディアクエリを使って、モバイル、タブレット、デスクトップなど、複数の画面サイズやデバイスに対応したブレイクポイントの設定が必要です。

ワイヤーフレームとモックアップ

UXエンジニアは必ずしもワイヤーフレームやモックアップを作るわけではありませんが、これらのデザインのコードへの変換が必要です。

UXエンジニアは、上記で挙げた必須スキルとは別に、デザインチームとの連携のために、以下の基本的なデザイン原則を理解しておかなければいけません:

UXエンジニアの実際の仕事内容

UXエンジニアの担当は、組織や製品によって異なりますが、通常はデザインプロセスとエンジニアリングプロセスを行き来して仕事をし、4つのステージにUXエンジニアのプロセスが定められます:

  1. アイデア出し
  2. デザイン
  3. 構築
  4. テスト

1. アイデア出し

process brainstorm ideas

UXエンジニアは、ユーザーリサーチャーやデザイナーと協力して、ユーザビリティの目標の確定や、解決策のブレインストーム、初期デザインの技術的な実現性についての助言をします。

アイデア出しの段階では、ブレインストーミングとアイデアのスケッチが非常に重要であり、UXエンジニアは、アイデアがどう働くかや製品の技術的制約の範囲内であるかどうかについて、技術的なインサイトを提供します。

アイデア出しの段階でUXエンジニアがいれば、デザイナーやリサーチャーはエンジニアリングの能力を超えたソリューションを回避できるため、企業の貴重な時間を節約することができるのです。

2. デザイン

prototyping design drawing pencil tool

UXエンジニアは、ワイヤーフレームや低忠実度のプロトタイピングからモックアップや高忠実度のプロトタイピングまで、デザインプロセスで積極的な役割を果たし、デザインシステムを使う場合は、デザイナーと協力してUXPinなどのツールでコンポーネントのライブラリをデザインします。

UXエンジニアは、デザイナーのデザインのハンドオフのためのデザインファイル、ドキュメント、プロトタイプの準備をサポートする役割を担っており、デベロッパーに言葉や指示を確実に理解させ、デザイナーとエンジニアのコミュニケーションを円滑にします。

3. 構築

settings

UXエンジニアは、静的なデザインをコードに変換する役割を担っています。役割はレイアウトUI要素に及び、データ統合、API、パフォーマンス、分析などのその他のフロントエンド開発はエンジニアリングチームに任せます。

UXエンジニアは、開発段階を通じてエンジニアリングチームと協力し、意図したとおりにデザインを実行します。

4. テスト

testing observing user behavior 2

UXエンジニアは、デザイナーと密接に協力して、デザインプロセスでのアイデアのテストや、ソリューションの開発、エンジニアと協力してコードのバグの特定や修正をします。

UXエンジニア になるには

大手の企業でUXエンジニアとして就職したい場合、通常、コンピュータサイエンス、ヒューマンコンピュータインタラクション(HCI)、またはUXデザインのいずれかの学位が必要とされます。

UXエンジニアになる方法はいくつかあります:

  • UXデザイナー:HTML、CSS、Javascriptなどのプログラミング言語と、Git、Chrome Developer Tools、NPM/パッケージマネージャ、コマンドラインなどのフロントエンドスキルの習得が必要
  • フロントエンドデベロッパー:フロントエンド開発からの移行が、UXエンジニアになるための最も一般的なルートであり、フロントエンドデベロッパーは、UXエンジニアに必要なほとんどのスキルをすでに持っているが、さらにUXデザインのプロセスや原則の習得が必要
  • プロダクトデザイナー:プロダクトデザイナーからUXエンジニアへの道もまた、単純明快であり、プロダクトデザイナーは、デザイン思考を仕事に応用し、ほとんどがプロトタイプを作るための基本的なプログラミングスキルを持つ

UXエンジニアもまた、多様なツールキットを使って仕事をします。デザイナーとデベロッパーの2足のわらじを履いているため、デザインツール、DevOps、デベロッパー用ツールキットを熟知しておかなければいけません。ここでUXエンジニアのツールをチェックしましょう。

UXエンジニアの多くはデザインシステムを扱う職種であるため、高収入のUXエンジニアを目指すのであれば、デザインシステムの知識と経験が不可欠です。

UXエンジニアの給与

Glassdoorによると、2022年の米国におけるUXエンジニアの平均給与は116,625ドルです。

UXPin MergeによるUXエンジニアリングワークフローの最適化

UXPin Mergeで、UXエンジニアがデザイナーやデベロッパーと1つのツールで連携できるようになり、レポジトリからUXPinのデザインエディタにコンポーネントを同期させることにより、デザイナーとエンジニアが同じUI要素で作業できるようになります。

UXエンジニアがプロトタイプをコーディングする代わりに、UXデザイナーはUXPinでコンポーネントをドラッグ&ドロップして完全に機能するプロトタイプを構築することができます。また、デザイナーはUXPinのプロパティパネルでコンポーネントを編集し、これにより、UXエンジニアがコピー&ペーストで変更できるようJSXを簡単にレンダリングすることができます。

UXエンジニアがレポジトリに加えた変更は、自動的にUXPinのデザインエディタに同期され、デザイナーは新しいコンポーネントで作業することができます。この信頼できる唯一の情報源(Source of truth)により、UXエンジニアは毎回プロトタイプを一から構築するのではなく、コードにわずかな調整を加えるだけで済み、市場投入までの時間が大幅に短縮されます。

UXPin Mergeでは、デザイナーとエンジニアがすでに同じ言語で会話しているため、デザインのハンドオフが効率的であり、UXエンジニアは、レポジトリからスターターコードを使用してUIを開発した後、フロントエンドおよびバックエンドのデベロッパーに引き継いで最終製品を完成させることができます。UXPin Mergeのリクエストはこちらから

プロダクトデザイナー とUXデザイナーの比較分析

 プロダクトデザイナー とUXデザイナーの比較分析

デジタルプロダクトデザインの役割として、プロダクトデザイナーとUXデザイナーという2つの職種があり、よく混同されます。基本的には、どちらも製品開発に焦点を当て、問題解決にデザイン思考プロセスを用いる職種です。 では、プロダクトデザイナーとUXデザイナーの違いは何なのでしょうか?あなたはどちらのポジションに向いているのでしょうか?また、あなたの会社では両方の役割を果たす必要があるのでしょうか?

  UXPinは、UXチームとプロダクトチームのコラボレーションを強化するために作られたデザインツールです。UXデザイナーとプロダクトデザイナーは、UXPinを使用して、デザインプロセスを通してコメント、タスクの割り当て、コミュニケーションを行うことができます。無料トライアルに登録して、デザインチームのためのUXPinのコラボレーション機能をお試しください。

 プロダクトデザイナー とUXデザイナーの比較分析

UXデザイナーとは?

UXデザイナーは、ユーザビリティの問題を解決し、製品が論理的な流れに沿っていることを確認することに重点を置きます。UXデザイナーは、お客様が個々の要素やコンポーネントをどのように操作するかを検討するユーザーインターフェースデザイン(UIデザイン)も担当します。 UXデザイナーは初期のユーザー調査や市場調査に深く関わり、ユーザーの問題を特定して理解し、それを解決するためのデザインソリューションを開発します。

新製品や新機能の場合、UXデザイナーは、UI要素やコンポーネントのデザインを含め、コンセプトを実用的なプロトタイプに仕上げる責任があります。 UXデザイナーは、認知心理学を学び、UXデザイナーは、顧客が個々の要素やコンポーネントとどのように相互作用するかを検討するユーザーインターフェース(UI)のデザインも任されることがあります。

UXデザイナーの職務内容と責任

UXデザイナーのスキルセット

米国におけるUXデザイナーの平均給与

Glassdoorによると、2021年における米国のUXデザイナーは平均年収95,944ドルを得ています。

UX Designer

プロダクトデザイナーとは?

プロダクトデザイナーは通常、既存のデジタル製品を扱う仕事です。UXデザイナーと同じような仕事をしますが、既存の製品の開発、新機能の設計、メンテナンスに重点を置きます。

また営業やマーケティングチームと密接に連携し、競合他社や市場、ユーザーの調査を通じてビジネスバリューの機会を見出します。デジタル製品が市場のトレンドやお客様の要望に合わせて進化し、競争力を維持するために重要な役割を担っています。

プロダクトデザイナーは、新しい要素やコンポーネントを設計するのではなく、ドラッグ&ドロップ式のデザインツールを用いて、既存のデザインシステムを利用してユーザーインターフェースを構築するのが一般的です。

PayPalのプロダクトチームは、UXPin Mergeを使用して製品インターフェースを構築しています。UXPin のデザインエディタを会社のリポジトリに同期させることで、製品デザイナーは完全に機能するコードコンポーネントを使用して新製品や機能を設計しています。 PayPalの製品デザイナーは現在、Mergeテクノロジーの力を利用して、1 ページで完全に機能するプロトタイプを 10分以内に構築しています。これは、経験豊富な UXデザイナーが一般的なベクトルベースのデザインツールを使用した場合の 8 倍の速さです。

UXPin Mergeの詳細と、サインアップして貴社へのアクセスをリクエストする方法については、こちらをご覧ください。

プロダクトデザイナーの仕事内容と責任

  • 製品管理
  • 定期的なユーザー、市場、競合他社の調査
  • ユーザーのニーズに沿ったビジネスチャンスを特定するためのリサーチ
  • 製品が常に適切で最新の状態であることの確認
  • 製品ロードマップの作成と管理
  • 製品戦略の策定と実行
  • 製品の設計・開発が予算に見合ったものであることの確認
  • 製品による市場シェア、収益の増加、新規ユーザーの獲得方法の特定
  • 製品設計のための設計・開発プロセスおよび関連する制約条件の理解
  • 営業およびマーケティングチームとの連携 
  • ユーザーエクスペリエンスデザイン、ビジュアルデザイン
  • UXデザイナー、開発者、その他の関係者にアイデアや仕様を提示
  • UXデザイナーとのコラボレーションによるカスタマーエクスペリエンスの設計
  • ユーザビリティテスト
  • プロトタイプ(主にハイフィデリティ)のデザイン

プロダクトデザイナーのスキルセット

  • HTML、CSS、Javascriptの理解
  • クリエイティブでクリティカルな思考
  • 長期的な計画と戦略
  • プロダクトデザイン
  • 問題解決
  • プロジェクトマネジメント
  • 共感する能力
  • パブリック・スピーキング(インタビュー、プレゼンテーション)
  • 技術的に優れている
  • ビジネスの洞察力
  • データサイエンス
  • リサーチ力

米国におけるプロダクトデザイナーの平均給与

Glassdoorによると、2021年における米国でのプロダクトデザイナーは平均年収105,448ドルを得ています。

 プロダクトデザイナー とUXデザイナーの比較分析 - 米国におけるプロダクトデザイナーの平均給与

類似点と相違点

UXデザイナーとプロダクトデザイナーの間には、相違点よりも類似点の方がたくさんあります。 UXデザイナーとプロダクトデザイナーの最も大きな違いは、製品のライフサイクル(開発、導入、成長、成熟、飽和、衰退)における特定のタスクではなく、そのデザインの役割にあります。 UXデザイナーは、市場に出る前の製品や機能を開発します(製品ライフサイクルの開発段階)。一方、プロダクトデザイナーは製品の寿命が尽きるまで製品を管理し、改良し進化させます。 UXデザイナーは、デザインシステムの更新が必要な場合や、プロダクトデザイナーがユーザビリティの問題を解決するのに苦労している場合に、プロジェクトに戻ることが多い。

デザインアプローチ

  • UXデザイナーとプロダクトデザイナーは、人間中心のアプローチでデザイン思考プロセスを適用します。ユーザーのニーズに基づいて製品を設計します。
  • よくあることとして、UXデザイナーはユーザーを重視し、プロダクトデザイナーはビジネスニーズを重視すると勘違いされます。しかし、UXデザイナーもプロダクトデザイナーも、リサーチやデザインの際には常にユーザーとビジネスの両方を考慮します。
  • UXデザイナーやプロダクトデザイナーは、クロスファンクショナルなチームで仕事をすることが多いので、優れたコミュニケーションスキルが求められます。

リサーチ

  • UXデザイナーとプロダクトデザイナーは同じようなリサーチを行いますが、UXはユーザーや行動をより深く追求するのに対し、プロダクトデザイナーは市場や競合他社の分析に重点を置きます。
  • UXデザイナーは、製品がリリースされる前の早い段階でリサーチとユーザーテストを行います。
  • プロダクトデザイナーは新機能の実装やユーザーの課題解決、ビジネスチャンスの模索など、既存製品のテストを行います。

ツール

  • UXデザイナーは、主にプロトタイピングツールとテストツールを使用します。
  • 一方、プロダクトデザイナーはジェネラリストであり、デザイン、開発、マーケティング、ユーザーテストなど、さまざまなツールを使用します。

プロトタイピング

  • UXデザイナーはデザインプロセスを通じて、やデジタルを含むさまざまなプロトタイプを作成します。
  • 一方プロダクトデザイナーは、紙などの低忠実度のプロトタイプを使用することは少なく、製品のデザインシステムを利用して高忠実度のプロトタイプを作成することがほとんどです。

テスト

  • UXデザイナーは、製品や機能の発売前にユーザビリティテストを行い、ユーザーエクスペリエンスの要件を満たします。
  • プロダクトデザイナーは既存の製品をテストし、ユーザビリティの問題やビジネスチャンスを特定します。また、自らが設計した新製品やインターフェースのテストも行います。

 まとめ

2つのデザインの役割にはいくつか重なる役割もありますが、プロダクトデザイナーとUXデザイナーはどちらも組織に大きな価値をもたらす存在です。UXデザイナーは製品の初期デザインを完成させた後、製品デザイナーにバトンタッチします。製品デザイナーは基本的に製品の管理者となります。

製品設計の初期段階ではUXデザイナーはユーザーとそのニーズに焦点を当て、デザインソリューションを見つけなければなりません。その解決策は、組織のビジョンやビジネスゴールに沿ったものでなければなりません。

プロダクトデザイナーもユーザーに焦点を当てますが、彼らは通常、UXデザイナーがユーザビリティの問題を特定して修正した製品を継承します。そのため、プロダクトデザイナーはビジネス価値や、製品の魅力と関連性を維持することに重点を置きます。

プロダクトデザイナーはジェネラリスト(デザイン、マーケティング、データ分析、コーディング、ユーザー行動)であり、UXデザイナーはユーザーエクスペリエンスのスペシャリストであると言えるでしょう。

UXPinによるデザインコラボレーション

UXPinは内蔵のドキュメントデザインシステムコメント(タグ付けと割り当てを含む)、プロトタイプのプレビューと共有などの機能により、UXチームと製品チームのデザインコラボレーションを強化します。

また、Mergeはデザインと開発のギャップを埋める強力な機能であり、製品チームのようなデザイナーではない人でも、完全に機能する高忠実度なプロトタイプを簡単に作成することができます。 UXPin Mergeは、デザインエディタとリポジトリからのコードコンポーネントを同期させることで、組織全体が同じデザインシステムコンポーネントを使って作業できるようにし、単一の情報源を提供します。

エンジニアがリポジトリに変更を加えると、組織全体のデザインシステムが更新されます。全員が同じバージョンを使用しているため、DesignOpsは各部門のデザインライブラリやシステムの更新を気にする必要がなくなります。 UXPin Mergeの詳細と、GitStorybookとの統合を通じてデザインエディタをお好みのテクノロジーと同期させる方法については、こちらをご覧ください。

UXPinを始めよう

UXデザイナーやプロダクトデザイナーにとって、コードベースのデザインがどのようにプロトタイピングやテストを向上させるかを知る準備はできていますか? UXPinの4つの強力な機能により、プロトタイプの忠実性と機能性を高めることができます。

  • ユーザーやキャンバスのアクションに応じて、要素やコンポーネントの異なるステートやプロパティをデザインできます。
  • 変数使用してユーザーデータを取得・保存し、その情報に基づいて要素を更新する。
  • 条件付きインタラクションやルールを設定して、二次的なインタラクションやアニメーションを引き起こします。
  • Expressionを使用すると、ショッピングカートの更新やユーザー入力の検証など、プロトタイプにJavascriptのような関数を作成することができます。

今すぐチームでUXPinをお試しください。UXPinのコードベースのテクノロジーでデザイナーのコラボレーションを改善し、プロトタイプを強化するための無料トライアルにお申し込みください。

0から作るUXPin Merge + TypeScript + Storybookの環境

0から作る UXPin Merge + TypeScript + Storybookの環境

 

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

デザインツールであるUXPin Mergeを導入するにあたり、TypeScriptでの環境構築の仕方をまとめた記事です

また、今回の記事内のコードはこちらのリポジトリに全て載せています。

前提

UXPinを導入する場所は、アプリケーションのコードが全て入っているリポジトリよりも、UIライブラリやデザインシステムといった単位で管理しているリポジトリの方が良いでしょう。

UXPin専用のコードを書かないといけない箇所もあるので、ライブラリを開発するためのリポジトリ内で管理した方が取り回しがしやすそうです。

というわけで、ライブラリとして開発するため実質的にStorybookはセット。
そのためこの記事ではStorybookの導入まで説明します。

0. 初期化

この記事ではyarnを使っていますが、npmを使っている方は適宜読み替えてください。

ターミナルでコマンドを叩きます。

yarn init -y

このような内容のpackage.jsonが生成されました。

{ "name": "uxpin-with-typescript", "version": "1.0.0", "main": "index.js", "author": "Keisuke Watanuki", "license": "MIT" }

1. React + TypeScriptの準備

ターミナルでコマンドを叩きます。

yarn add -D react @types/react react-dom @types/react-dom typescript


{
 "name": "uxpin-with-typescript",
"version": "1.0.0",
"main": "index.js",
"author": "Keisuke Watanuki",
 - "license": "MIT" + "license": "MIT",
+ "devDependencies": {
+ "@types/react": "^17.0.34",
+ "@types/react-dom": "^17.0.11",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "typescript": "^4.4.4"
 + }
  }

更にコマンドを叩きます。

npx tsc --init

tsconfig.jsonが生成されるので適宜設定して使います。
今はコメントアウトを消すなど、最低限にとどめておきました。

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react",
}
}

https://www.typescriptlang.org/tsconfig

2. Storybookの準備

ターミナルでコマンドを叩きます。

npx sb init

プロジェクトのルートに.storybookstoriesというフォルダが追加されたり、package.jsonにdependenciesやscriptsが追加されたり、TypeScript + React用のコードが自動で追加されます。

※コンポーネント類が「stories」というディレクトリに格納されていて、実際の運用では「components」などにリネームすると思われますが、話を簡単にするためにこのまま進めます。

この段階で以下のコマンドを叩くと、localhost:6006でStorybookが起動します。

yarn add -D @uxpin/merge-cli

package.jsonにscriptsを追加しておきましょう

{ "name": "uxpin-with-typescript", ... "scripts": { "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook" + "build-storybook": "build-storybook", + "uxpin": "uxpin-merge --disable-tunneling" } }
yarn add -D babel-loader ts-loader@^8.2.0 style-loader@^2.0.0 css-loader@^5.2.7

@uxpin/merge-cliの2.7.9においてはloaderのバージョンが最新だと動きませんでした。根本解決ではありませんがこれらのバージョンを指定してインストールすると動作することは確認したため、ひとまずこちらをお試しください。

追加でコマンドを叩きます。

touch uxpin.config.js uxpin.webpack.config.js

それぞれのファイルには以下を記載します。

module.exports = { components: { categories: [ { name: 'General', include: [ 'stories/Button.tsx', 'stories/Header.tsx' ] } ], webpackConfig: 'uxpin.webpack.config.js' }, name: 'UXPin Merge + TypeScript + Storybook' }

StorybookのイニシャライズでPage.tsxというファイルも生成されていますが、

ここでは登録していません。説明すると少し長くなってしまうので次回の記事で紹介します。

</p>
preconst path = require('path')


module.exports = {
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
modules: [__dirname, 'node_modules'],
extensions: ['*', '.tsx']
},
devtool: 'source-map',
module: {
rules: [
{
loader: ['babel-loader', 'ts-loader'],
test: /\.tsx$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 2
},
},
],
},
]
}
}
<p>

ここまで来たら、ターミナルで以下のコマンドを叩くとUXPinのexperimental modeが起動します。

</p>
yarn uxpin
<p>

https qiita image store.s3.ap northeast 1.amazonaws.com 0 214677 1192a92e 03da 5cb6 19fc ef01a07551d6

ターミナル上に表示されたURLにアクセスすればexperimental modeで挙動を試せます。

https qiita image store.s3.ap northeast 1.amazonaws.com 0 214677 5b1ad599 2839 11a6 e75f b1984ba9f877

次回

この記事で作った環境にCSS Modulesを適用します。

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

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

UXPinによる DesignOps のためのガイドライン

はじめに

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

UXPinによる DesignOps のためのガイドライン - DesignOps 1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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つのレベルに分けて概説していますが、

UXPinによる DesignOps のためのガイドライン - 4つのデザイン業務
ピーター・マーホルツ、クリスティン・スキナー著「デザイン組織のための組織デザイン」のレベルフレームワーク

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

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

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

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

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

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

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

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

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

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

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

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

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が正式なキャリアパスとして広く受け入れられるまでの時間を短縮しようとしたと思います。
── 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には、マインドセットとチームの機能(役割や責任とも言える)という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が真の価値を提供し企業の中で成功するためには、利益を提供する必要があります。そのため問題を見極めた後にくる第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の思考とプロセスを促進します。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の考え方は生活や仕事のやり方として定着していきます。

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

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

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

https://www.uxpin.com/merge