UI開発とは、「デザインを技術的に具体化し、動作するインターフェースを構築するプロセス」です。UIデザインがユーザーとの各接点(入力フォームやボタン、検索結果など)の設計を重視するのに対し、UI開発はそのデザインを実装し、実際に機能する形にする点にあります。
UIデザインとUI開発の技術やツールが進化し、それぞれの専門性が分化する一方で、デザインから開発へのハンドオフ時に生じる認識のずれや手戻りをいかに防ぐかが、開発全体の効率に大きく影響します。
UI開発の基礎知識
UIとは「接点」の総称
UIを開発するとは、いったい何を実装することなのでしょうか。まずはUIの定義を抑えておきましょう。
UI(ユーザーインターフェース)について、辞書にはこう記述されています。
また、語源である「ユーザー(User)」と「インターフェース(Interface)」を分割すると、下記のように記載されています。
- ユーザー(User): 使用者。利用者。メーカーに対して商品やサービスを使う人にいう(a person who uses or operates something)
- インターフェース(Interface): 機器や装置が他の機器や装置または人間と交信し、制御を行う接続部分のこと。他にコンピューターと周辺機器の接続部分、コンピューターと人間の接点を表す。(a point where two systems, subjects, organizations, etc. meet and interact)
辞書上では「ユーザー(使用者)がシステムを通して何らかの操作をしたい場合の接点の総称」がUIと定義されています。ソフトウェアUIとは「接点」の総称と捉えることができるでしょう。
代表的なUIの種類
- GUI (Graphical User Interface): 視覚的表現を通したシステムとの利用接点。アイコン、ボタン、色彩、テキストサイズ、濃度などが要素として含まれ、ユーザーはマウスでクリックするなどを通して直感的な操作ができます。特にスマートフォンやWebアプリの普及がUIデザイン(GUI)の重要性を加速させました。
- CUI(Character User Interface) または CLI (Command-line Interface): テキストを通したシステムとの利用接点。Windows OSではコマンドプロンプト、Mac OSではターミナルが代表例です。
他にも、WUI(Web User Interface)、NLI(Natural Language Interface)なども存在しますが、一般的に UI 、特にシステム開発における UI とは GUI を指すことが多いです。
UXとは「体験」の総称
UI/UXとまとめられることも多いですが、さまざまなUI(接点)を組み合わせてシステムとして実装した結果、「ユーザーに与える体験」が UX です。UXデザインの原則としては、「ドナルド・ノーマンの6つのデザイン原則」が有名です。
- 可視性: 必要な操作や現在の操作位置について、視覚的に分かりやすいこと。
- フィードバック: ユーザーが取る行動について何らかの反応があること。
- 制約: すべての機能や体験を盛り込むのではなく、制約条件を設け絞り込むこと。
- マッピング: ユーザが何を操作したら良いのか、直感的に認知できること。
- 一貫性: 機能や表示、体験のルールが全て一貫していて迷わないこと。
- アフォーダンス: ユーザが無自覚に次の行動所作を取れること。
本記事ではUX領域ではなく、UI領域に特筆してまとめています。
UIデザイン vs UI開発
UIデザインとUI開発は、切っても切り離せない相互に影響し合う関係ではありますが、UIデザインがユーザー中心の体験設計を目的とする創造的なプロセスである(人間中心設計などとも言われる)のに対し、UI開発はその設計を技術的に具体化し、実現する工学的プロセスであると言えます。
UIデザインは見た目や使いやすさなどのインターフェースを設計し、UI開発はそのデザインをコードとして実装する点が大きな違いです。
UIデザインとは「インターフェースの設計」
UIデザインのプロセスは、ユーザーが直感的に操作しやすいインターフェースを設計することです。
UIデザイナーが扱う領域やツールには、下記のようなものがあります。
理解しておくべき領域
- 色覚対応を含む適切なカラーパレットを設定できる色彩理論の知識
- 適切なテキストのジャンプ率などを設定するタイポグラフィ理論の知識
- 要素を効果的に配置する近接や隣接などの基本的な配置知識
- 開発を効率的に行うためのCSSフレックスボックスなどの実装知識
- 商品や業務データを適切に表示するためのIA(情報設計)の基礎理論
取り扱うツール
- Figma
- Sketch
- Adobe XD
- InVision
- ほか
業務例
- 会計領域を取り扱うSaaSで、新たな法律に対応するための新機能を設計する。追加すべき入力フォームや、データの表示順などを検討する。
- 複数の画面で表示がずれているボタンの配置を見直す。
- 表示アイコンを統一するためにマテリアルデザインに準拠したアイコンを作成する。
- PC・モバイルなど、デバイスの違いによってクリックやスクロールがしづらくならないか検証し、最適化する。
UI開発とは「インターフェースの実装」
UI開発者(デベロッパー・エンジニア)が扱う領域やツールには、下記のようなものがあります。
理解しておくべき領域と担当範囲
- HTMLとCSSの高度な理解と実装知識
- マルチデバイス・クロスブラウザの実装知識
- React、Angularなどのモダンフレームワークの取り扱い知識
- UIライブラリの取り扱い知識
- Git/GitHubを用いたコードバージョン管理の知識
取り扱うツール
- Visual Studio Code
- Chrome Developer Tools
- SQLクライアントツール
- ほか
業務例
- UIデザインのプロセスで設計されたデザインがリリース期限内に実現されるよう、画面の分割やレスポンシブ実装を組み上げる。
- 想定される操作とデータ処理に齟齬が出ないように、内部データの保持構造や同期の仕組みを作る。
- デバイスやブラウザ別で異なるバグや不具合を特定し、対応する
- データベースの設計などについてバックエンドエンジニアと連携する
- React や Angular など、フレームワーク毎に異なるアーキテクチャやデータバインディングを把握し、適切なテックスタックを構想する
両者はそれぞれに深化している
このようにUIデザインとUI開発の担当領域が明確に分かれつつある背景には、2016年以降、Figma のようなUIデザインツールの急速な普及によって検討デザインの幅が広がったことや、Angular や React など、モダンフレームワークの進化によって開発の柔軟性が向上したことにあります。
これまで一体化していたUIデザインとUI開発は、それぞれの専門性を深化させているのです。
UIデザインとUI開発の間で起きるギャップ
デザインと開発の領域が分化していく過程で、UIデザインからUI開発へハンドオフをする際に認識のずれやギャップが生じることもあります。デザインの意図が正しく伝わらなかったり、技術的な制約が十分に考慮されなかったりすることで、リリース時期やシステムの完成度に影響を及ぼすことも。
そのため、両者の連携を強化し、スムーズな橋渡しを実現することが、今後ますます必要となると考えられます。
起こりうる認識のずれやギャップ
UIデザインからUI開発へ引き継がれる過程では、以下のような課題が発生しやすくなります。
| 事象 | 起こりうる課題 |
|---|---|
| Figmaはアプリケーションのインストールが不要でブラウザ上で誰でも利用できる | UIデザインの自由度が高く、ホワイトキャンバスにどのようなアプリケーション画面も描画できるが、UIデザインから実際のアプリケーションに実装する際に必要となる実装工数をデザイナーが見積もることができない。 |
| Illustrator や Photoshop よりも機能がシンプルで使いやすい | 一貫性のあるUI設計や、実装時の効率化が難しい。Reactのフレームワークを活用する前提で設計されていないので開発プロセスで調整が必要になる。 |
| 豊富なプラグインが利用できる | 技術上の制限やフレームワークの仕様と整合せず、Figma上ではプラグインを利用して素早く画面デザインが完成しても実装工程で多大な時間がかかる。 |
これらのような課題が起きやすいことを考慮した上で、UIデザインとUI開発の連携を強化し、統合するエンジニアリングプロセスがより重要になってくるでしょう。
UI開発を加速させる効果的なデザイン連携
UI開発をスムーズに実現するためには、以下のような施策が有効です。
1.開発チームの早期介入と技術検証
フロントエンドエンジニアがデザインプロセスへ参画するタイミングを早くしましょう。デザインから開発へとベルトコンベア式に一方向で引き渡すよりも、デザイン段階から開発者を巻き込むことで、実装のしやすさや技術的な制約が考慮されたUI設計が可能になります。UIデザインの段階で「Feasibility Study」といった技術検証のプロセスを挟み、UIデザインの実現性を早めに確認しておくことが有効です。
2.実装を前提としたデザインシステムの導入
デザインと開発の共通言語を持つために、「機能や挙動まで想定された」デザインシステムを活用しましょう。重要なのはフォントサイズや配置など、グラフィカルなデザインシステムだけでなく、データ処理の方法やフレームワークとの関連までがシステムとして設計されていることです。
たとえば、Reactのような、特定のフレームワークを前提にしたコンポーネント設計を行い、デザインシステムを組み上げておくことで、実装時のズレを最小限に抑えることができます。自社でデザインシステムを構築する余裕がない場合は、UIライブラリを導入することでデザインシステムの代替とすることができます。
【もっと詳しく】
3. UI開発ツールの導入
App Builderはコード実装が前提とされたUIデザインツールで、ツールの中で「Feasibility Study(技術検証)」がある程度実現できるように設計されています。統合ツールを利用し、UIデザインとUI開発を統合することも有効です。
4.相互理解を促進するワークショップ
UIデザイナーが、UI開発に関するHTML/CSSやモダンフレームワーク（React, Vue など）について基本的な知識を持つことで、実装を考慮したデザインが可能になります。
UI開発者も同様にUIデザインの基礎知識(色彩理論、タイポグラフィ、情報設計など)を理解することで、UIデザインプロセスの設計意図をより正確に理解し、適切な実装代替案などを提出することができます。
このような相互理解促進を目的としてチーム横断でワークショップを開き、開発者がUI開発の基本プロセスを説明し、デモンストレーションを行うなどのコミュニケーションも効果的です。
UI開発への円滑なハンドオフが重要
ツールや技術進化の速度が飛躍的に上がり、UIデザインとUI開発の分化・深化が進む一方で、両者の連携が不十分なままだと認識のギャップが生じ、プロジェクトの進行に支障をきたすことがあります。そのため、デザインシステムの導入や開発者との早期連携、ツールの統合などを通じて、スムーズなハンドオフを実現することが重要です。
今後、UIデザインとUI開発の技術発展はますます加速する一方で、両者の連携はより密接に求められるでしょう。
スムーズなUI開発プロセスをサポートする製品
UIデザインとUI開発の連携を強化し、スムーズなハンドオフを実現することは、開発効率の向上と高品質なユーザー体験の提供につながります。インフラジスティックスは、デザイナーと開発者の間に生じるギャップを埋め、よりスムーズなUI開発プロセスをサポートする製品を取り扱っています。
無料トライアルと無料相談が提供されています。ぜひお試しください。
- 【詳しい相談はこちら】無料相談会 (コンサルタントが直接オンライン会議でプロジェクト状況をお伺いし、最適な形を提案します)
- 【製品トライアルはこちら】UIライブラリと統合ツール App Builder のトライアル
