2024.02.29

UX向上につながる「デザイン駆動型開発」とは？

井駒遥香

UXPin Inc　担当

はじめに

みなさん、こんにちは。UXPinの井駒です。今回は「デザイン駆動型開発」についてお話しします。UX（ユーザーエクスペリエンス）と機能性を優先させることで、ソフトウェア制作におけるアプローチ方法は大きく変わり、デザイン駆動開発は台頭しました。このアプローチは美的感覚を追求するものではなく、エンドユーザーを理解し、共感し、心に響くソリューションを提供するものです。

本記事では、UXPin Mergeを使ってどのように上手くデザイン駆動型開発を実現できるのかも含めて紹介しますので、ぜひ最後までご覧ください！

デザイン駆動型開発とは

※ここでのブログではデザイン駆動型開発の頭文字をとって「DDD」と表現します。

デザイン駆動型開発（DDD）は、デザインを製品開発の最優先事項として考えます。デザインを単なる美しさの後付けとして扱うのではなく、ソフトウェアの方針であり機能性を左右する極めて重要な役割と考えます。

業界では厳格な「ウォーターフォールモデル」から適応的な「アジャイルプロジェクトマネジメントのフレームワーク」にシフトしたことで、迅速なイテレーション（反復）とユーザー中心であるソリューションの必要性を浮き彫りにしました。

DDDは、迅速な反復のためにもデザインの力を活用することで、確実に製品が機能、エンドユーザーの共感を得ることにつながります。

DDDを理解するには、ソフトウェア開発のライフサイクルにおける影響を認識する必要があります。新機能、アーキテクチャ、コード自体にも影響することから、開発者は早期段階でデザインチームから明確なロードマップを受け取ります。

これによって、ターゲットのユーザーに愛される製品、修正回数の減少、市場投入までの時間の短縮、開発プロセスの効率化が実現します。

デザイン駆動型開発の例

例えば、ターゲットは都会でウォーキングをする人向けの運動追跡を目的とした「FitStride」というサービスを提供するスタートアップ企業があったとします。

従来の手法を用いると、開発者がステップを追跡するアルゴリズムを作成し、その周りに基本的なUI（ユーザーインターフェース）を構築することから始まるかもしれません。

しかしながら、この手法では最終製品とその機能性について多くの仮定が必要になることが問題になってしまいます。最終的に、元に戻したり、再デザインしたりすることになる可能性があるからです。

そこで、ユーザーのニーズを理解し、適切なソリューションをデザインするために、"デザイン駆動型開発"アプローチを採用します。

まずはユーザーリサーチから始めましょう。都会のウォーキング愛好家は「のんびりとした散歩」と「長い通勤」を識別できないことに不満があることがわかったとします。

このインサイトに基づき、UXデザイナーはユーザーがウォーキングのタイプや気分をタグ付けできるインターフェースを作成し、歩くペース、「リラックス」または「急ぎ」といった気分・目的に応じて、最適なルートを提案する機能も組み込めることができます。

これで開発者にとって明確な設計図を受け取れたので、歩き方の区別、またはルートを提案するアルゴリズムを作成し、その機能をインターフェースにスムーズに統合します。

そして発売と同時に、FitStrideは直感的なデザインとユニークな機能で賞賛を集め、デザイン駆動型のアプローチの有効性を確信できるでしょう。

これは１つの例ですが、製品開発チームがUXリサーチとデザインのインサイトを活用して、実際にユーザーのニーズを満たしたことを示せるものです。

デザイン駆動型開発の仕組みとそのステップ

デザイン駆動型開発を理解する上で、その段階的な手順を詳しくわかる必要があります。各フェーズは、ユーザーが開発サイクルの中心にいることを確実にするためにも重要です。

以下で詳しく見てみましょう：

ステップ１：ユーザーリサーチ

DDDの基礎は、ユーザーを理解するために主に以下の方法を用います：

アンケートおよびインタビュー：ユーザーとの直接の会話（対面またはリモート）やアンケートによって、本質的なインサイトを集める。何を求めているかを聞くのではなく、彼らのペインポイント、ニーズ、願望を理解する。情報は意思決定のための生データとなる。
ユーザーペルソナ：データを集めた後、代表的なユーザープロファイルに合成する。このペルソナは単なる架空のキャラクターではなく、実際のフィードバックに基づいている。ペルソナによってチームは誰のためのデザインかを視覚化し、ユーザーに焦点を当てて明確な方向性を確保することができる。
ジャーニーマップ：デザイナーはペルソナを使ってユーザーのジャーニーをマッピングする。各ユーザー体験をマッピングすることで、摩擦や感動の場面を特定することができる。このエクササイズは、UXの全体的な見通しを得る。

ステップ２：要件の収集

このフェーズでは、リサーチの段階で集めた幅広いインサイトの絞り込み、並べ替え、優先順位付けを行い、次のステップとデザイン決定の指針とするので、明確さが大切です。

ステークホルダーとの連携：製品の成功は、全員のビジョンを一致させることが肝心。開発者、デザイナー、ビジネス関係者の間で定期的に話し合いを行い、ユーザーニーズとビジネス目標について全員が同じ意見かを確認することが不可欠。
機能一覧の作成：常にユーザーのニーズに基づいて、機能をリストアップする。数を重視するのではなく、真にユーザー体験を向上させるものを選ぶ。

ステップ３：デザインおよびアイデア出し

スケッチおよびアイデア出し：部門横断的なチームが協力してアイデアを出す。多様なスキルセットと組織目標を持つチームメンバーからの意見で、デザイナーは確実にユーザーと会社のためになるデザインを作成する。
デザインの作成：デザイナーはデザインツールに切り替え、ワイヤーフレームとモックアップを作成する。ワイヤーフレームはナビゲーションやアーキテクチャを決定し、モックアップでボタンやメニュー、色やフォントなどのUIデザイン要素が洗練される。

ステップ４：プロトタイプおよびユーザーテストのデザイン

プロトタイプのためのツールとプラットフォーム：正確なユーザーフィードバックを得るには、適切なプロトタイピングツールの活用が不可欠である。デザイナーはUXPin Mergeを使うことでReactコンポーネントをデザインエディタにインポートし、最終製品同様のインタラクティブなプロトタイプを作成できる。
ユーザーのフィードバックを集める：インタラクティブなプロトタイプを使いユーザーとデザインを触れさせる。ユーザーからのフィードバックによってユーザビリティの問題点、ビジネスチャンス、改善点が明らかになる。

ステップ５：デザインハンドオフおよび開発

デザイナーとデベロッパー間のハンドオフ：最終製品がユーザーのニーズに合致するよためにも、効果的なコミュニケーションによって、開発者はデザインの意図を確実に理解する必要がある。
デザインシステムとコンポーネントライブラリ：共通のデザインシステムを確立させることで、製品全体の統一性が確保され、ユーザビリティが向上する。

ステップ６：反復的フィードバックのループ

UAT（ユーザー受け入れテスト）：開発した製品をユーザーに実際の環境で操作してもらう。フィードバックによって決定したデザインが受け入れられるかを確認および検証する。
A/Bテスト：ユーザーにさまざまなバージョンを提示し、変更を加え、反復することで、どのデザイン要素が最もうまく機能するかを見極めることができる。

ステップ７：市場投入および反復

発売で終わりではなく、製品チームは最終製品や実体験にデザインが与える影響を評価しましょう。

リリース戦略：段階的なロールアウトを選ぶにせよ、完全なリリースを選ぶにせよ、その戦略はユーザーからのフィードバックとビジネス目標に依存する。
継続的フィードバックと反復的開発：発売後にも製品を成長させる。フィードバックのループを繰り返すことで、製品は常にユーザーのニーズや市場の需要に合致し、反復するたびに改良、改善される。

デザイン駆動型開発の課題

デザイン駆動の開発を取り入れることで、ユーザー中心の製品が保証される一方で、課題はあります。

形と機能のバランスを取る

課題：見た目の美しさは重要だが、精巧なデザインすぎると機能性は薄まってしまう。ユーザーのニーズは満たせないが「ただ美しい製品」として提供してしまう可能性がある。
解決策：ベースとなる機能を優先する。基礎となるレイヤーを設定し、使いやすさを損なうことなくUXを向上させる要素を設計する。定期的にユーザーとデザインテストを実施することで、フォームが機能を妨げていることを明らかにすることもできる。

デザイナーとデベロッパーのシームレスなハンドオフの実現

課題：デザイナーと開発者間のコミュニケーションエラーによって、製品が意図されたデザインから逸れ、時間とリソースが無駄になる可能性がある。
解決策：開発サイクル全体で、デザイナーと開発者は定期的にレビューを行う。 UXPin Mergeテクノロジーは、両者のギャップを埋めることができ、よりスムーズで円滑にデザインハンドオフを実現できる優れたツールである。

ユーザーニーズを満たしながら、プロジェクトの要件が増加することを避ける

課題：プロジェクトが進むにつれて、当初想定していなかった機能または変更を加える場合、プロジェクトのスケジュールや予算が危うくなる可能性がある。
解決策：定義されたユーザーペルソナとその中心的なニーズに焦点を合わせる。フィードバックは貴重である一方、変更する際は主要なユーザーゴールへの影響を考慮した上で判断する。提案された機能がこの目標に合致しない場合、将来の反復のために保留にするか、さらに調査を検討する。

組織のサイロを克服する

課題：多くの組織では、各部門ごとに作業を行うためDDDの協調性を阻害するような分断が起きる。
解決策：部門を超えた連携の文化を培う。定期的なワークショップや合同セッションを実施することで、各部門同士の理解が深まる。また、目標とKPIの共有によって、全員の目標を合致して取り組むことにつながる。

UXPin Mergeでデザイン駆動型の開発プロセスを強化する方法

デザイン駆動型の開発を成功させるためには、デザイナーとデベロッパーの強固な連携、そして部門横断的なコラボレーションは非常に重要です。従来の画像ベースのツールの使用では、静的なデザインとインタラクティブなコード製品の間にある溝を埋めるどころか、むしろ広げてしまいます。

デザインと開発の溝を埋める

従来のDDDワークフローでは、デザイナーがモックアップを作成し、作成されたモックアップを開発者がコードに変換する流れでした。

しかし、UXPin Mergeではこの従来のワークフローに革命を起こす「コードからデザインへ（Code-to-Design）」の手法で開発します。デザイナーはコードコンポーネントをデザインプロセスにインポートしてデザインします。

このワークフローの切り替えによって、画像ベースのツールを使うことなく、1つのツールでデザインと開発のギャップを埋めることができます。

情報に基づいた迅速な反復の促進

Mergeコードコンポーネントを使用することは、デザイナーは正確に一致するプロトタイプを作成できることを意味します。

これによって、"まるで本物のような"体験を提供できるようになり、従来のデザインツールでは不可能であったリアルなインタラクションとダイナミックなユーザー体験に基づいた正確なユーザーテストと有意義なフィードバックを保証します。

ステークホルダーの結束したコミュニケーションの確保

UXPin Mergeはデザイナーと開発者間、チームのみならず、ステークホルダーもレビューやコメントをすることが可能な一体化したプラットフォームを提供します。

そのため、製品チームはUXPinのコメント機能とSlackを連携させ、フィードバックを一元管理することで、相手とのコミュニケーションの不具合や提案の見落としを減らすことができます。

まとめ

いかがだったでしょうか？今回は、「デザイン駆動型開発」についてお話しし、UXPin Mergeを使ってどのようにユーザーに響くデザイン駆動の製品を実現できるのか、またチームとの連携におけるメリットなどについてご紹介しました。

UXPinを活用して、現在抱えている製品開発においての悩みや課題を解決しませんか？

ご相談やご質問がございましたら、オンラインにてご案内させていただきます。以下の
リンクからお問い合わせください。

DevOps Hubお問い合わせ

UXPin社寄稿ブログ記事一覧

UXPin製品情報

UXPin製品情報はこちら

この記事の著者：井駒遥香