【エンジニア向けAI×UI/UX研修】AIに「いい感じ」を任せない。デザイナーの判断軸を学ぶ「Figma × AI UI/UX実践研修」を提供
AIでUIは作れる。でも、そのUIが本当に使いやすいか判断できる？——余白・情報設計・トンマナ・UI Stateまで、実務で使えるUI/UXの考え方を学ぶ
UI/UXデザインに強みを持つIT会社、Engineerforce Inc.（本社：東京都渋谷区、代表取締役：飯田 佳明）は、生成AIをUI制作に活用するエンジニア向けに、「Figma × AI エンジニア向け UI/UX実践研修」の提供を開始しました。
近年AIの進化により、AIを活用しエンジニア自身が短時間でUI案を作成できる場面が増えています。
一方で、画面を生成することができても、
「AIで作ると、なんとなくAIっぽいデザインになってしまう」 「枠線やカードが増えて、画面がごちゃついて見える」 「どの情報を優先して見せるべきなのか分からない」 「HoverやLoading、Error時の状態まで考えられているか分からない」
といった、UIの品質を判断するための基準まではAI任せにできません。
本研修では、FigmaやAIツールの操作方法を学ぶだけではなく、デザイナーが普段どのような情報を見て、何を考えながらUIを設計しているのかをエンジニア向けに体系化。
AIへの指示やUIレビュー、実装前の設計確認など、日々の開発にそのまま活用できる「デザインの判断軸」を身につけることを目指します。
01｜AIが生成したUIを判断するためのUIUX基礎「見るポイント」を学ぶ
02｜目的・トンマナ・情報設計など、デザイナーがAIに伝えている情報を理解する
03｜Figma × AIを使い、実際のUI改善から実務で使えるルール・チェックリストまで持ち帰る
■研修提供の背景
生成AIを活用することで、これまでデザイナーが中心となって行っていたUI制作にも、エンジニアが直接関わりやすくなりました。
プロンプトを入力すれば、画面そのものを生成することはできます。
しかし、「画面を作れること」と「使いやすいUIを設計できること」は別の問題です。
たとえばAIが生成した画面を見たとき、
情報の優先順位は適切か 余白や文字サイズに一貫性があるか プロダクトのトーン＆マナーに合っているか 操作したときの状態変化まで考えられているか 他の画面と共通したルールで設計されているか
といった観点から、UIを評価する必要があります。
ところが、これらは単純なFigmaの操作方法やプロンプトの書き方だけでは身につきにくく、これまでデザイナーが実務の中で培ってきた領域でもあります。
そこでEngineerforceでは、エンジニアをデザイナーにするのではなく、AIと一緒により良いUIをつくるために必要な「デザインの考え方」を共有することを目的に、本研修を設計しました。
■AIでUIは作れる。でも「正解がわからない」
本研修では、AIを活用したUI制作で起こりやすい4つの課題から、デザインの考え方を整理していきます。
1．AIでUIは作れる。でも、正解がわからない
画面そのものは生成できても、余白・情報量・カラー・情報の優先順位などが適切なのか判断できない。
AIが出したものをそのまま採用するのではなく、「なぜこのUIが良いのか／改善すべきなのか」を判断するための視点が必要になります。
2．動かしたときのデザインがわからない
Figmaには完成した画面が用意されていても、
Hover / Focus / Loading / Error
など、実際にユーザーが操作したときの状態まで定義されているとは限りません。
実装段階になって初めて不足に気づくのではなく、AIも活用しながら必要なUI Stateや例外パターンを事前に整理します。
3．AIに「いい感じに」と頼んでしまう
「もう少し見やすく」
「いい感じに整えて」
「今っぽいデザインにして」
といった曖昧な指示では、AIが出力するUIも安定しません。
デザイナーが考えている目的、トンマナ、余白、カラー、情報の優先順位などを言語化し、AIに伝える方法を学びます。
4．UIのルールが画面ごとにバラバラになる
AIで画面を作るたびに、余白やボタン、フォームなどのデザインが少しずつ変わってしまうことがあります。
そこで、カラー・文字・余白・Button / Input / Cardなどの共通ルールを整理し、AIでも人でも同じ基準でUIを作れる状態を目指します。
■同じAIでも、「何を伝えるか」でUIは変わる
本研修では、デザイナーがUIを設計するときに考えている内容を、大きく4つの視点から整理します。
PURPOSE｜何のための画面なのか
誰が、何をするために使う画面なのかを整理します。
画面の目的が明確になることで、必要な情報や機能、UI上で何を優先して見せるべきかを判断しやすくなります。
TONE & MANNER｜どんな印象を与えたいのか
信頼感、親しみ、先進性、落ち着きなど、プロダクトとして与えたい印象を言語化します。
カラー・文字・余白などの方向性をAIへ伝えるための基準になります。
INFORMATION DESIGN｜何を、どの順番で見せるのか
重要な情報を目立たせ、関連する情報をまとめるなど、情報の優先順位を整理します。
すべての情報が同じ強さで表示されるのではなく、ユーザーが自然に理解できる情報構造を考えます。
DESIGN SYSTEM｜どんなルールでUIを揃えるのか
余白・カラー・文字・Button / Input / Cardなど、UI全体で共有するルールを整理します。
4px / 8pxグリッドなどの基準を設けることで、AIを活用して画面を増やしても、UIがばらつきにくい状態をつくります。
■研修で学ぶ5つのステップ
01｜UI/UXの「見るポイント」を知る
デザイナーが普段意識している、余白・情報設計・カラー・操作性などの基本を学びます。
AIが生成したUIを単なる好みではなく、一定の基準から評価するための視点を身につけます。
02｜AIへの「伝え方」を知る
目的・トンマナ・情報の優先順位など、デザイナーがAIへ伝えている情報を整理します。
「いい感じに」ではなく、狙ったUIへ近づけるための指示方法を学びます。
03｜静止画にない状態を補う
Hover・Focus・Loading・Errorなど、Figmaの完成画面だけでは見えにくい状態や挙動を洗い出します。
AIを活用しながら、実装前に必要となるUIパターンの抜け漏れを補います。
04｜AIと一緒にUIを改善する
整理したデザインルールをAIへ渡し、既存のFigmaやUIを実際にブラッシュアップします。
見た目だけでなく、情報の伝わりやすさ・操作のしやすさまで含めて改善します。
05｜実務で使える形にする
学んだ視点やルールを、普段の開発やAI活用にそのまま利用できる形へ整理します。
AIへの指示、UIレビュー、デザイン確認など、研修後も継続して利用できる状態を目指します。
■研修で終わらず、実務に持ち帰れる知識へ
本研修では、研修中に理解するだけでなく、終了後の開発でも利用できる形に整理することを重視しています。
研修を通して、以下のような知識・考え方を身につけます。
UI/UXを見るための基本的な判断軸 AIへ伝えるトンマナ／余白／カラー／情報設計の考え方 DESIGN.mdなどに整理できるデザインルール UI State・例外パターンの洗い出し方法 Figma × AIでUIを改善するための実践プロンプト 実装前・AI生成後に利用できるUI/UXチェックリスト
AIやFigmaの操作方法だけを覚えるのではなく、エンジニア自身がUIの品質を判断し、改善できる状態を目指します。
■こんなエンジニア・開発チームにおすすめ
・Figmaを見ながら実装することが多い方
デザインの意図だけでなく、画面に不足している状態やパターンまで読み取れるようになりたい方。
・AIでUIを作ることがある方
画面生成はできるものの、デザインとして良いかどうかの判断に迷うことがある方。
・デザイナーが少ないチームで開発している方
デザインの基本的なルールを押さえ、自分たちでもUIの品質を整えられるようにしたいチーム。
・AIをUI制作にもっと活用したい方
Claudeなどの生成AIを利用したUI制作を、もう一段実務レベルへ近づけたい方。
■まとめ
デザイナーになるための研修ではありません
Engineerforceには、エンジニアとデザイナーの両方が在籍し、日々プロダクトづくりに取り組んでいます。
その中で感じてきたのが、より良いプロダクトをつくるためには、職種ごとに役割を分けるだけではなく、UI/UXについて共通の視点を持つことが重要だということです。
この研修の目的は、エンジニアがデザイナーと同じ仕事をできるようになることではありません。
デザイナーが普段どこを見て、何を基準にUIを判断しているのか。
その「見る視点」や「考え方」をエンジニアにも共有することで、実装やAIを活用したUI制作の中でも、より良い判断ができる状態を目指します。
特にAIによってUIを作るスピードが上がる今、アウトプットをそのまま使うのではなく、
目的に合っているか。ユーザーに伝わるか。操作しやすいか。プロダクト全体で一貫しているか。
を人が判断することが、これまで以上に重要になっています。
デザイナーとエンジニアが同じ視点を持ち、AIも活用しながらより良いプロダクトをつくる。
Engineerforceが実際のプロダクト開発を通して必要性を感じてきた考え方を、実務で使える形にした研修です。
■研修概要
研修名： Figma × AI エンジニア向け UI/UX実践研修
対象： エンジニア・開発チームなど
内容： UI/UXの判断軸／AIへの指示設計／情報設計／トーン＆マナー／デザインルール／UI State設計／Figma × AIを活用したUI改善 ほか
お問い合わせ・お申し込み： https://engineerforce.io/inquiry/
■株式会社Engineerforceについて
「デザインに強いIT会社」として、すでにリリースされたプロダクトの改善・運用を、UI/UXデザインと開発を分けずに一体で支援します。
新規プロダクトの立ち上げについても、企画・要件定義からリリース後のグロースまで同一チームで担います。
システム開発・UI/UXデザイン・マーケティングの各専門チームが事業に伴走し、直感的で成果の出るプロダクトづくりを通じて事業課題の解決を支援します。
▼ なぜ運用改善まで一体で担うのか
当社が実施した調査（開発・プロダクト担当者111名、2026年7月）では、リリース後も継続的に伴走できる開発パートナーを「重要」と考える担当者は81.9%にのぼりました。一方で、外部パートナーが事業KPI起点の改善・効果測定まで対応しているケースは1.8%にとどまります。
また、開発パートナーの選定基準として最も多く挙げられたのは「企画から運用まで一体で支援できる」で40.5%でした。改善に課題を感じている担当者は83.8%、理由は人員・工数不足54.8%、ノウハウ・知見不足48.4%です。
Engineerforceは、この期待と実態の差を埋める立場を担います。
▼ 選ばれている4つの理由
① 企画から運用まで、同じチームが担当する
多くの開発プロジェクトでは「企画会社」「デザイン会社」「開発会社」と工程ごとに分断され、要件の認識ズレ、コミュニケーションコストの増加、リリース後の手戻りが発生します。当社はデザイナーとエンジニアが企画段階から同席し、企画・要件定義／UXリサーチ・情報設計／UI/UXデザイン／システム開発／リリース後の改善・マーケティングまでを同一チームで担当します。工程間の引き継ぎが発生しないため、認識ズレと手戻りを仕組みとして減らせます。
② 事業KPIを起点に改善サイクルを回す
リリースして終わりにせず、アクセス解析・ユーザー行動データ・定性フィードバックをもとに改善を継続します。改善支援によりWAUを40%】向上させた事例があります。改善サイクルは月次で回し、月2回の改善リリースを行っています。
③ 機能を足すだけでなく、削る提案もする
当社調査では、開発パートナーに機能削減の提案も求める声が31.4%ありました。作りやすさではなくユーザーに選ばれる体験を基準にするため、必要に応じて「その機能は不要です」と伝えます。要望をそのまま実装せず、事業目的に照らして構成を組み替えることを前提に進めます。
④ 継続前提の契約形態で伴走する
単発の受託ではなく、半年から1年以上の継続支援を前提とした体制をとっています。テキストベースでの日次コミュニケーションを標準とし、意思決定の経緯が残る形で進行します。
▼ 実績
取引企業数：150社以上
プロジェクト実績：200件以上
主な支援先：PKSHA Technology様、pluszero様、USEN WORK WELL様をはじめ、スタートアップから大手企業まで幅広いプロダクト開発・改善を支援。
▼ お客様の声
・企画段階からの参画について
「企画の初期段階、まだ具体化していない時点から一緒に取り組んでいただける点が一番大きかったですね。本当に『何を作るか？』というところからスタートさせていただきました」【通信関連・東証プライム上場企業様】
・課題理解とアウトプットの品質について
「私たちの課題に感じている部分を前段でお伝えした時に、解像度高く理解して同じ目線で取り組んでいただいていることを感じました。プロジェクトのアウトプットについても、私たちが伝えた背景を取り入れつつ、1ユーザーとして画面を見た時に『これ綺麗で使いたいな』と思えた」【AI関連企業・東証プライム上場企業様】
・抽象的な要望を形にするスピードについて
「現在の私のプロジェクトマネジメントスタイルはリーンを採用していて、無駄を極限まで排除してスピードを重視しています。それに対して御社メンバーは抽象的な要望に対してすごくスピーディに応えてくれています」【人材業界・東証プライム上場企業様】
▼ 対応領域
プロダクト開発（Webサービス・SaaS）／業務システム／スマートフォンアプリ／UI/UX改善・リニューアル／リリース後の運用改善・グロース支援
▼ 得意領域と対象企業
得意領域：既存サービスの改善・グロース／IT業界（特にSIer）／UI/UXと開発を一体で進めたいプロジェクト
こうした課題をお持ちの企業を支援しています。ユーザー離脱の原因が分からない。機能はあるが使われていない。改善の優先順位が決められない。デザインと開発が分断され改善スピードが遅い。課題整理から改善施策設計、実装、検証まで一貫して対応します。
対象企業：大手企業（既存サービスのUI/UX改善・内製化支援）／スタートアップ（新規プロダクトの立ち上げ・改善）
■会社概要
会社名 ：株式会社Engineerforce（エンジニアフォース）
設立 ：2020/08/04
代表者 ：代表取締役 飯田佳明
所在地 ：東京都渋谷区桜丘町23番17号 シティコート桜丘408
事業内容：ソフトウェア開発、UIUXデザイン、コンサルティング、プロダクト開発
URL ：https://engineerforce.io/
X(旧Twitter)：https://x.com/Yoshiaki__iida
すべての画像
