UI/UXデザイン基礎講座（Figma・ユーザー調査・プロトタイプ）

この講座で身につくこと

• 利用者の行動を聞き取る質問票と調査記録を作成できます。
• 調査結果から改善対象の操作と画面要件を整理できます。
• Figmaで共通部品を使った画面を作成できます。
• 画面をつないで操作できるプロトタイプを作成できます。
• テストの結果を記録し、修正前後の画面を比較できます。

こんな方に

• 予約や問い合わせなどの画面設計を担当する方
• 制作会社へ画面の要件を具体的に伝えたい方
• 利用者のつまずきを調べて既存画面を改善する方

カリキュラム（全24時間）

1. 第1回 UI/UXと利用者調査の設計4時間
   • UI（画面や操作部品）とUX（利用時の体験）を予約業務の題材で整理します。
   • 利用者と担当部署の困りごとを仮説として書き出します。
   • 誘導を避けた質問票と調査同意の確認項目を作成します。
   • 模擬インタビューで発言と解釈を分けて記録します。
2. 第2回 操作の流れと画面要件の整理4時間
   • 調査記録を目的・行動・つまずきに分類します。
   • 申込開始から完了までの操作の流れを図にします。
   • 画面の情報構成を示すワイヤーフレームを作成します。
   • 入力項目、エラー、完了表示の要件を一覧にします。
3. 第3回 Figmaによる画面と共通部品の作成4時間
   • Figma（画面設計ツール）でフレームと文字の設定を行います。
   • Auto layout（内容に応じた自動配置）でフォームを組み立てます。
   • ボタンと入力欄をコンポーネント（再利用できる部品）として作ります。
   • 文字の読みやすさと色の判別しやすさを点検します。
4. 第4回 操作できるプロトタイプの作成4時間
   • プロトタイプ（動きを確認する試作）で画面間をつなぎます。
   • 正常入力と入力エラーの画面を作り分けます。
   • スマートフォンとパソコンの表示幅で配置を確認します。
   • 申込完了までのテスト課題と観察項目を作成します。
5. 第5回 利用者テストと修正4時間
   • 受講者同士で役割を分け、説明を加えずに操作を観察します。
   • 完了できた操作、迷った箇所、質問を記録します。
   • 問題の頻度と業務への影響から修正順を決めます。
   • 画面を修正し、同じ課題で再確認します。
6. 第6回 開発担当者へ渡す仕様の整理4時間
   • 画面ごとの入力条件と遷移先を仕様書に記載します。
   • 共通部品、文言、余白のルールをまとめます。
   • 未検証の操作と実装後に確認すべき項目を分けます。
   • 試作と調査記録を使って改善理由を説明します。

受講後に手元に残るもの

• 利用者調査の質問票と調査記録
• Figmaの画面デザインと操作用プロトタイプ
• 利用者テスト結果と改善一覧
• 開発担当者向けの画面仕様書

受講の前提と環境

前提：ブラウザー操作とファイル管理ができる方を対象とします。デザインソフトやプログラミングの経験は不要です。

環境：WindowsまたはMac、ブラウザー、Figmaアカウントを使います。基本の画面作成と試作は無料のStarterプランの範囲で行います。組織での共同編集や高度な管理機能は契約内容を確認します。オンライン受講では画面共有ができる環境を用意します。

企業ごとの調整

予約画面、業務システム、アプリなど、自社の改善対象に合わせて題材を選びます。既存のデザインルールを使い、調査と画面制作の時間配分を調整できます。演習には自社の業務データ（個人情報を除く）または配布する模擬データを使います。

助成金を使う場合

Web・アプリの企画・デザイン担当者による利用者調査、申込画面の設計、操作検証、開発用仕様の作成に直結する訓練です。助成の可否は計画届の内容に基づき、管轄の都道府県労働局が判断します。

計画届に添付するカリキュラム資料（時間数、回ごとの内容、実施形態）をご用意します。助成金の申請書類の作成・提出の代行は、社会保険労務士の業務のため行いません。事業展開等リスキリング支援コースは令和8年8月3日に改正されています（経過措置あり）。制度の内容は助成金ガイドと、厚生労働省「人材開発支援助成金」でご確認ください。

この講座についてのよくある質問