UIデザインとUI開発
ソフトウェアやWebの開発には、最初のコンセプトからデザイン、納品、QA、ライフサイクルマネジメントまで、多くの役割と責任がありますが、UIデザインとUI開発は、ユーザーがユーザーインターフェースとどのように関わり、対話するかということに影響を与える重要な役割があります。
本記事では、UIデザインとUI開発の実践、その役割を支える人々、そしてデジタル製品の提供のためにこの2つがどのように連携しているかを比較します。
UXPinは、高品質な製品の顧客への提供に向けてUX/UIデザイナーとエンジニアのより良い連携をサポートする、コードベースのデザインツールです。無料トライアルにサインアップして、UXPinのコードベースデザインをぜひご体験ください。
UIデザインとは
UIデザイン（ユーザーインターフェースデザイン）とは、ユーザーインターフェースの要素、レイアウト、インタラクションといった、ユーザーが見たり操作したりするものすべてをデザインするプロセスです。その要素には、画像、アニメーション、スライダー、テキストフィールド、ボタンなどが含まれ、UXデザインと同様、UIデザインの決定は、ユーザーのニーズとテストに基づいて行われます。
UIデザイナーのスキルと業務内容
UIデザイナーは、UIデザインの工程を担当します。その業務内容は以下の通りです：
- 製品の美観：ブランディング、ビジュアルデザイン
- リサーチ：デザイン調査、ユーザー分析
- テスト：UIプロトタイプ（Hi−Fiプロトタイピング）
- デザイン：ワイヤーフレーム、モックアップ、インタラクションデザイン、アニメーション、ビューポートレイアウト(レスポンシブデザイン)
UIデザイナーの資質とスキルセット
- ビジュアル面での創造力が豊かである
- ウェブデザイン
- グラフィックデザイン
- デザイン原理とデザイン思考
- ビジュアルデザインへの関心
- ユーザージャーニーとペルソナ
- ユーザーリサーチ
- タイポグラフィ
- 形と機能のバランス
- ユーザーとのインタラクションや行動に注目する
- タスク優先型
UIのデザインプロセス
UIデザイナーは、他のUXプロフェッショナルと同じデザイン思考プロセスに従っていますが、フレームワーク内での作業は全く異なります：
- 共感：ユーザーの環境、動き、行動に注目する
- 確定：ユーザーが目標を達成するのに必要な各ステップに注目する
- 意見出し：ユーザーが製品を操作するのに必要な要素やコンポーネントを検討する
- プロトタイプ：Hi-Fiプロトタイプのためのモックアップと対話性をデザインする
- テスト：ユーザーがどのように製品を操作するかをテストし、実用的な質問をする
詳細については「UXデザイン vs UIデザイン – 知っておきたい違い」の記事をお読みください。
UIデザイナーが使用するソフトウェア
UIデザイナーは、一般的に他のUXデザイナーと同じツールやソフトウェアを使用し、そのツールによって、ユーザーインターフェースのデザイン、プロトタイプ作成、テストを行うことができます。
UIデザイナーの目標は、最終製品のような外観と機能を持つHi-Fiプロトタイプの作成です。そしてUXPinのようなコードベースのデザインツールは、UIデザイナーのプロトタイプ作成とデジタル製品のテスト方法に革命を起こしたのです。
UXPinの高度なプロトタイピング機能には、次のようなものがあります：
- ステート：1つのコンポーネントに対して、インタラクションやシステム変更に対応した個別のプロパティを持つ複数のステートを作成
- 条件付きインタラクション：ユーザーやシステムのアクションに反応するJavascriptのような【if-then】【if-else】ルールで、ダイナミックなUXを実現
- 変数：例えば、ユーザーの名前を入力すると、カスタマイズされたウェルカムメッセージが表示されるというように、ユーザーの入力を保存し、そのデータに基づいてアクションを実行
- エクスプレッション：フォームの検証や計算書式設定など、複雑なタスクを実行するJavascriptのような関数を書く
14日間の無料トライアルで、このような機能やより高度なUXPinの機能をぜひお試しください。
UI開発とは
UI開発とは、クライアント向けのインターフェースをプログラミングするプロセスです。UIデザイン同様、画像、アニメーション、スライダー、テキストフィールド、ボタンなどのコードを書くこともUI開発の工程に含まれます。
UIデベロッパーのスキルと業務内容
製品や組織構造によっては、UI開発の役割は、フロントエンドデベロッパー、UXエンジニア、またはフルスタックエンジニアに委ねられるかもしれません。エンジニアリングチームの構成によって異なりますが、UI開発の担当は以下の通りです：
- UIコンポーネント開発
- UIメンテナンス
- スタイリングアーキテクチャ
- 実装
- 技術的な実現可能性
- バックログ管理
- パフォーマンス
- クエリアーキテクチャ
- 検索エンジン最適化
フロントエンド開発 vs. バックエンド開発
エンジニアは、プログラミングをフロントエンドとバックエンドの2つの分野に分けて考えます。
- フロントエンド開発：HTML、CSS、Javascriptを使用した「クライアント向け」インターフェースの開発が中心
- バックエンド開発：フロントエンドのインターフェースをデータベース、API、認証などに接続するためのサーバーサイドのコードを書き、プログラミング言語には、Java、Ruby、Python、Javascriptなどがある
さらに読む：Front-End vs. Back-End: What’s the Difference?
UIデベロッパーが使うソフトウェア
他のエンジニアと同様に、UI開発者はIDE（統合開発環境）を使ってコードを調べたり書いたりしていますが、最近の IDEには、Git、パッケージマネージャ、レポジトリ、API などのエンジニアリングツールとのインターフェースを提供するさまざまな拡張機能が備わっています。
さらに読む The 7 Essential Tools for Frontend Web Development.
UIデザイン vs. UI開発
UIデザインとUI開発の定義から、その分野がソフトウェア開発プロセスの両端に位置しているのは明らかであり、UIデザインはデザインプロセスで行われ、UI開発はエンジニアリングプロセスで行われます。
これらは別々の分野ですが、UIデザイナーとUIエンジニアは、いい最終製品を出すために協力しなければいけません。
ここで重要なのは、UIデザイナーとUIエンジニア役がある組織ばかりではない、ということです。ここでは、そのUIの役割と責任を果たす可能性のある職種をいくつかご紹介します：
- UIデザイン：UXエンジニア、ビジュアルデザイナー、グラフィックデザイナー
- UI開発：フロントエンドデベロッパー、UXエンジニア/UXデベロッパー、フルスタックエンジニア
UIデザイナーとUIデベロッパーの協力関係
UIデザイナーとUIデベロッパーが共同でプロジェクトを進める際の典型的なワークフローをご紹介します：
- UIデザイナーは、ユーザー、競合、市場、製品などを理解するために、さまざまな形のUX調査からデザインプロジェクトを開始します。ユーザー中心のデザインプロセスを用いて、ユーザーの視点から問題を理解するのです。
- UIデザイナーは、デザインの初期段階でUIデベロッパーと技術的な制約やデザインハンドオフの手順、ドキュメント要件などについて打ち合わせを行います。
- UIデザイナーは、他のUXデザイナーと協力し、ユーザーインターフェース、レイアウト及びコンポーネントの設計、プロトタイプ作成、テストを行いますが、場合によっては、デザインチームと協力して、複雑なUIコンポーネントをテストするための基本的なコードプロトタイプを構築することもあります。
- デザインプロセスが完了すると、UIデザイナーはデザインハンドオフに必要なプロトタイプやドキュメントを作成します。
- UIデザイナーとUIデベロッパーは、デザインハンドオフの過程で、実際に会ってエンジニアがすべてを正しく理解しているかどうかの確認や、デザインについて議論することもあります。
- UIデベロッパーは、他のエンジニアリングチームと協力して、デザインを機能するコードに変換します。
- UIデザイナーは、最終的なリリースがデザイン仕様に合致するよう、デザインチームやプロダクトチームと協力してQA（品質保証）プロセスを完了します。
UIデザイナーとUIデベロッパーの連携の重要性
現代のソフトウェア開発は、優れたUIのデザインと開発に左右されます。
デザイナーは、製品がユーザーのニーズを満たしていることを確認し、ユーザビリティとアクセシビリティの基準を確実に満たすべくユーザーインターフェースとUIコンポーネントを徹底的にテストします。このプロトタイピングとテストの段階を経ないと、ユーザビリティの問題が製品に影響を与え、結果としてUXが低下し、顧客サービス、手直し、顧客喪失など、さまざまな面で回避可能だったはずのコストが発生することになります。
UIデベロッパーは、ソフトウェアのリリース成功のための重要な役割を担っており、最終的なUIがデザイン仕様を満たしていることを確認し、バグやパフォーマンスのコードをテストしなければいけません。また、製品が長期にわたって完全性と一貫性を確実に維持できるように、パッケージ、API、セキュリティなどのアップデートを含むコードの管理の責任も担います。
そのためにはデザイナーとエンジニアが開発プロセスを通じて協力し合う必要がありますが、サイロやコミュニケーション不足が一般的な大規模組織では、それがむずかしいかもしれません。
UIデザイナーとUIデベロッパーは、このような分野間のギャップを埋めて運営プロセスや連携を改善すべく、大抵はDesignOpsやDevOpsと連携します。
UXPin Mergeでデザイナーとデベロッパーの連携改善
ズレの問題
デザイナーとエンジニアが直面する課題のひとつに、話す言語が違うということがあります。
- デザイナー = 画像ベースの静的なモックアップとプロトタイプ
- エンジニア＝コード、ブラウザー、OS、データベースなど
デザイナーとプログラマーは、互いの専門分野に関する深い知識と経験がなければ、互いの限界や制約、その他の課題は理解しにくいでしょう。組織が製品を時間通りに、予算内できちんと抜かりなく提供するには、このギャップを埋めることが不可欠です。
コードベースのソリューション
UXPin Mergeは、コードベースのデザインソリューションで従来のUXワークフローに革命をもたらし、組織はレポジトリからUXPinのエディタにコンポーネントライブラリを同期させ、デザイナーは完全に機能するUI要素とコンポーネントを使用してプロトタイプを構築できるようになりました。
Merge コンポーネントは、インタラクティブ性を含め、レポジトリ内のコンポーネントとまったく同じプロパティを保持するため、デザイナーはドラッグ＆ドロップだけでUIを構築することができます。また、デザイナーが JSX または UXPin のプロパティパネルでコンポーネントをカスタマイズできるように、例えばReact の場合は Args、Storybook の場合は Argsというように、さまざまなプロップを設定することができます。これらのプロップへの変更はJSXをレンダリングし、エンジニアはコピーまたはペーストして開発を始めることができます。
UIデザイナーとUIデベロッパーが同じ言語を同じ制約で話しているため、このマージを利用したワークフローで、UIデザイナーとUIデベロッパー間の連携と理解が強化され、これは組織のコンポーネントライブラリの信頼できる唯一の情報源（Single source of truth）になります。
UXPin はまた、コード化された UI コンポーネントのインポートと管理におけるデベロッパーの関与を軽減するツールである Merge Component Manager のリリースを最近発表しました。エンジニアへの依存度が低いということは、デザイナーが Merge をより速やかに使用できるようになるということです。
「以前は、デザインだけで2～3ヶ月かかっていましたが、現在では、UXPin Merge を使用して、チームは同じ時間枠で製品のデザイン、テスト、および配信を行うことができます。市場投入までの時間の短縮は、Merge を使用して経験した最も大きな変化の１つです。」エリカ・ライダー氏、PaypalのUXリード EPX
14 日間の無料トライアルで、UXPin の Merge テクノロジーがどのようにデザイン プロセスに革命をもたらすかをぜひご覧ください。MUI ライブラリ統合やその他の UXPin の高度な機能を通じて、Merge の機能を探求することができます。
