商品情報にスキップ
1 3

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

通常価格 ¥4,730
通常価格 セール価格 ¥4,730
(税込)
セール 売り切れ
Figma MdN × Bau-ya® UI/UX Webデザイン Web制作 デザイン

講師:こもりまさあき /

Webテクニカルライター こもりまさあき氏登壇。プロトタイピングツールとしてプロのWebデザイナーの間で高い人気を誇るFigmaの機能とワークフローを基礎から学びます。これからUI/UXデザインを始める方、プロトタイプをWeb制作の仕事に活かしたい方を対象にFigmaの概要と特徴、実践的な基本操作、最先端のワークフローなど全体像と基本操作をしっかりと学べる基礎講座です。

[この講座の概要]
●2時間のオンデマンドビデオ講座
●サンプルデータダウンロード
●学習期間の制限なし
PCモバイルからアクセス

  • 学べること、得られること

    ■ Figmaのサービス構造
    ■ Figmaの基本操作
    ■ 簡単な画面設計
    ■ コードやファイルの書き出し操作
    ■ 制作の効率化
    ■ UI設計の考え方
    ■ 共同作業によるワークフローの理解

  • こんな方におすすめ

    ■ Adobe XDやSketch、Figmaを使ったことがないデザイナー
    ■ 英語のメニューが苦手なデザイナー
    ■ ワイヤーフレームなどを書いているWebディレクター

折りたたみ可能なコンテンツ

本講座について

本講座は、「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やウェブブラウザー、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。

講師:こもりまさあき

フリーランス
1972年生まれ。1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年会社を退職後フリーランス。案件ごとに業務内容などが異なるため、職域的な肩書きはなし。近年はウェブ系の実務だけでなくコンサルティングなどの業務もおこなう。Instagramサービス開始当初から利用しフォロワー数は3万人超。写真素材サイトUnsplashに公開している写真は2億ビューを超え、最も見られている500人に選ばれている。Unsplash Awards 2018 テクスチャー部門で選出リスト入り。『プロとして恥ずかしくない 新・WEBデザインの大原則』(MdN)監修ほか、『レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方』(KADOKAWA/アスキー・メディアワークス刊)をはじめ執筆多数。
https://www.instagram.com/cipher/
https://unsplash.com/@gaspanik/

「MdNの教室 MdN × Bauyaとは?」 

グラフィックデザインやウェブデザインなどのクリエイションをはじめ、生活や暮らしなどさまざまなジャンルのノウハウと可能性を伝える出版社MdNが、お馴染みの人気著者やトップクリエイターを招聘し『最新のノウハウ』と『実践的なテクニック』を講座を通してお伝えします。

MdN × Bauya教室ページ https://bit.ly/MdN-Bauya

■ MdNの著者が講座に登壇
MdNの人気書籍の著者や著名クリエイターを招聘。
ベストセラーやロングセラーでお馴染みの執筆陣が登壇します。
紙面だけでは伝えられないテクニックや、最新情報が満載です。

■ クリエイターの学び舎、Bau-ya®が全面協力
クリエイティブ分野の講座開催で急成長を遂げるBau-ya®(バウヤ)が、MdNとコラボレート。
講座の企画・運営や参加者の皆さまを、強力にバックアップします。
Bau-ya® 教室ページ http://bit.ly/bauya

MdN × Bau-ya® 収録講座プログラム