世界標準プロトタイピングツールFigmaで始めるUI/UXデザイン

本講座は、「MdNの教室 MdN × Bau-ya」で2021年6月17日にオンラインセミナーとして開催された
「世界標準プロトタイピングツールFigmaで始めるUI/UXデザイン」（講師：こもりまさあき）
https://www.street-academy.com/myclass/113101
を収録したものを、オンデマンド講座として再編集してご提供するものです。

※本講座は2021年6月当時の情報を元に講座としてご提供しているものです。これ以降になされた事実および情報の変更によっては、講座の中で取り上げた内容と異なる場合があります。登壇者、および株式会社エムディエヌコーポレーションは、本動画の中で紹介した内容によって生じたいかなる損害に一切の責任を負いかねますので、あらかじめご了承ください。

Webサイトやスマートフォンアプリの制作の現場で、UI/UXデザインや設計に「プロトタイピング」ツールを採用することはすっかり常識となりました。

「プロトタイピング」とは、実際の動きや遷移を表現して実体化した試作品（プロトタイプ）を使って検証や改修を繰り返す手法のこと。プロトタイプを作成することで、そのWebサイトやスマートフォンアプリに、どのような画面や機能をどのように搭載すべきなのか、また、UI/UXとしていかに使いやすくできるかなどを検証することができ、機能や仕様のさらなるブラッシュアップが可能になります。

プロトタイピングツールは多種多様なツールがありますが、Adobe社のAdobe XDと人気を二分している『Figma』は、世界中の多くの企業やUI/UXデザインの現場で採用されています。

Figma オフィシャルウェブサイト
https://www.figma.com/

2016年に登場したプロトタイピングソフトFigmaは、macOSとWindowsの両プラットフォームで制作できるほか、Webブラウザ上でも作業することが可能で、リアルタイムに複数メンバーでの共同作業も実現します。ワイヤフレームの設計やプロトタイプの制作、ビジュアルデザインのサンプルなど、それぞれの作業をシームレスに行うことができます。ほかにも、ファイルのバージョン管理や異なる会社／職種のメンバー間でのコミュニケーションもFigma上で可能なため、大幅な作業効率アップにつながることから導入する制作会社が増え続けているのです。

本講座では、Web構築の実務やコンサルティングのほか多数の書籍執筆など、Web関係のみにとどまらずさまざまな領域を縦横無尽で活躍する、こもりまさあき氏を招聘。Figmaを早期から現場で使ってきたこもり氏に、Figmaの概要と特徴、実践的な基本操作、最先端のワークフローなどについて解説していただきます。

こもりまさあき氏 執筆実績
『プロとして恥ずかしくない 新・WEBデザインの大原則」』修
『Webデザインの新しい教科書 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉』
（以上、すべてエムディエヌコーポレーション）など

今回の講座で伝える内容は以下のとおり。

□ Figmaの概要
□ Figmaでできること
□ Figmaのサービス構造
□ Figmaの画面構成
□ Figmaの基本操作
□ Figmaで簡単なUIを作ってみよう
□ ファイルの読み込み・書き出し

これからUI/UXデザインを始める初心者の方、プロトタイピングツールをはじめて使うクリエーターの方、プロトタイプをWeb制作の仕事に活かしたい方にとって、Figmaの全体像と基本操作をしっかりと学べる基礎講座です。実際にFigmaを使ってシンプルなUIを制作し実際にツールを試して、その操作性を実感しするといった、UI/UXの実装に至るプロセスを体験します。本講座をひととおり受講してFigmaの基本を理解することで、Figmaを実践的に使うための準備が整うことでしょう。

本講座をきっかけにして、次世代プロトタイピングツール「Figma」の素晴らしい世界に足を踏み入れてください。

● 協賛企業・ブランド
フォントワークス株式会社
https://fontworks.co.jp
フォントワークス LETS
https://lets.fontworks.co.jp/fontworks

#mdnbauya26

Keywords: プロトタイピング, プロトタイプ, ワイヤーフレーム, コレボレーション, 共同作業, レスポンシブ, Webアプリケーション, スマホアプリケーション, Webデザイン

●講座を受講する前に
・受講に際しての要件
・参考資料
・著作権および本講座提供のプログラムについて
●本編動画
・前編（44分58秒）
・後編（50分25秒）
●講師から受講者のみなさまへ

□ オンラインで受講いただく場合は、インターネット環境とコンピュータなどのデバイスおよびウェブブラウザ。
□ ハンズオンスタイルで受講の方は、以下のアプリケーションがインストールされたコンピュータ。
・Figmaの無料アカウント
※ OSやウェブブラウザー、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。