はじめに
UXデザイナーがプロダクト開発において担う役割は年々広がりを見せています。特にAIや業務自動化サービスのように、技術の進化スピードが速い領域では、「エンジニア任せ」にせず、共通言語を持って議論・設計・改善できることがますます重要になっています。
本記事では、エンジニアとスムーズに共創するために、UXデザイナーが最低限押さえておきたい技術的理解のポイントに触れていきます。
共創とは「翻訳」の連続である
プロダクトづくりにおいて、エンジニアとデザイナーの関係は単なる「分業」ではありません。UX設計の意図をコードに反映してもらったり、逆に技術制約を体験の質に転換したりと、両者が異なる言語・視点で見ているものをすり合わせるプロセスそのものが「共創」です。
この翻訳作業をうまく行うために、以下のような共通の土台が必要になります。
- 技術の基本用語を理解している
- システムの大まかな構成を把握している
- デザインの意図を論理的に説明できる
- 技術的な制約を交渉・調整できる
押さえておきたい最低限の技術理解
1. フロントエンドとバックエンドの役割
- フロントエンド：ユーザーが操作する画面側（HTML、CSS、JavaScript、Reactなど）
- バックエンド：データ処理・保存・認証などの裏側（API、DB、Python、Node.jsなど）
デザイナーとしては、「どこまでがUIの話で、どこからがサーバーの話なのか」を意識すると、タスクの切り分けや相談のタイミングが適切になります。
2. APIとデータ構造の理解
- APIとは、データのやりとりをするための「入り口」のようなもの
- どんなデータが返ってくるのか（レスポンス）、どんな形式で送るのか（リクエスト）を理解しておくと、UI設計やエラーハンドリングがより実践的になります
3. 状態管理とUXの関係
- SPA（シングルページアプリケーション）では、画面遷移ではなく「状態」が変化します
- ローディング状態、未入力、エラーなど、状態に応じたUIの出し分けが必要です
状態管理を理解することで、「見た目のUI」から「振る舞いのUX」へと設計の視野が広がります。
AIや自動化サービス特有の技術ポイント
AIや業務自動化ツールを扱う場合は、以下の技術的な視点も押さえておくと有効です。
1. プロンプト設計の構造
- ユーザー入力 → プロンプト → LLM応答、という流れの中で、どこが編集可能で、どこが固定の制御かを把握する
2. RAGやベクトル検索の仕組み
- AIがどう情報を探しているのか（事前データ、検索条件など）を理解すると、UXとして「どのようにユーザーに説明すべきか」が見えてきます
3. 外部ツール連携と自動化
- ZapierやMakeなどを使った連携では、「どのトリガーで何が動くのか」を可視化できることが重要
- 設定画面やオンボーディングにこの構造をどう見せるかがUX設計のポイントになります
共創を進めるためのコミュニケーション習慣
単に技術用語を知っているだけでは共創は進みません。日常的に次のようなコミュニケーションを習慣化することで、信頼関係と設計の精度が高まります。
- 設計の背景やユーザーの行動仮説を説明する
- 「こう動くはず」ではなく「こういう意図です」と伝える
- モックではなく「振る舞いのラフ」を共有する（画面遷移図、状態遷移図など）
- わからないことは積極的に質問・記録する（Notion、Slackなどでナレッジ化）
おわりに（まとめ）
エンジニアとデザイナーが対等な立場で、互いの専門性を尊重しながら共創するには、「技術への理解」と「伝える力」の両輪が欠かせません。すべてを専門家レベルで理解する必要はありませんが、「何がわからないかがわかる状態」を保ち続けることが、チームの創造性を最大化します。
技術を理解することは、UXをより深く、豊かに設計するための武器になります。共通言語を持ち、対話し、学び合いながら、プロダクトをより良い方向へ導いていきましょう。
コメント