UI/UXデザイナー成塚雅樹 | Coloso.

トレーラー
UI/UXデザイナー
成塚雅樹

お試し動画
講座の様子を
少しだけ公開します！

18. Figmaでプロトタイプを作成

- プロトタイプ、アニメーションの作成
- Figmaのプレビューモードで実機確認

この講座１つで
UI/UXデザイナーの
一連のスキルをマスター！

現役のUI/UXデザイナーとして、
講義経験も豊富な成塚雅樹が、
UI/UXとは何か、といった基礎知識から、
「Figma」の基本操作、アプリ画面の作成や
円滑な協業のコツといった応用までお教えし、
UI/UXデザイナーとしての一連のスキルを
学べる講座です。

まずは、
UIとUXが何なのか、といった基本から
初心者にも分かりやすく解説。
UXのプロセス等を理解した後は、
UIデザインの事前知識や、
構成要素などの基礎部分、
サービスデザインのプロセスなどを学び、
例題を通してUXに密接したデザインを
展開できるようにお教えします。

また、業界必須のデザインツールとされる
「Figma」の操作方法はもちろん、
デザイン制作に欠かせないスキルまで
じっくり説明します。

準備運動が完了したら、
実際にアプリ画面の作成に挑戦。
ワイヤーフレームやプロトタイピングの作成など
デザイン制作のテクニックを段階別に学びます。

さらに、開発者との
円滑なコミュニケーションのコツや、
ポートフォリオのまとめ方なども公開します。

UI/UXデザインの基礎から応用まで、
実務者だからこそ教えられるノウハウを、
Colosoで体験してください！

講座情報

本数：21本の映像
難易度：初級
無期限視聴

使用プログラム

– Figma

※バージョンに関しては、最小バージョン116.0.1以上を推奨します。 ※講座内での講師使用バージョンは116.0.5です。

動画情報

オンラインVOD
オーディオ：日本語
字幕：日本語

講座特典

作品数：UIデザイン１点
Figmaファイル１点

WebやアプリのUI/UXデザインを手掛ける
成塚雅樹のポートフォリオ

アプリ画面の例題作成を通して
UI/UXデザインのスキルを身につけます

制作画面イメージ
通知画面
チケット一覧画面

チケット詳細画面
申し込み画面
応募完了画面

※上記の画像は講座に対する理解を深めるためのイメージです。

成塚雅樹
UI/UXデザイナー

はじめまして、成塚雅樹です。
IT企業で現役のUI/UXデザイナーとして
働いています。

子供の頃からWebやアプリなどの
デジタルプロダクトに興味があり、
Webやアプリのデザインについて
学べる大学に進学しました。
大学の授業でUI/UXデザイナーという
職種があることを知り、
将来その仕事に就きたいと思い
UI/UXデザインの勉強を始めました。
表層的なデザインだけではなく、
体験設計やサービスの企画、
リサーチなど幅広くプロダクト作りに
関われることが興味を持った理由です。

IT企業に入社後は、
「UI Crunch」や「日比谷音楽祭」などの
WebやアプリのUI/UXデザインを担当し、
現在はBtoBtoCのアライアンス案件の
立ち上げに携わっています。
どうぞよろしくお願いします。

成塚雅樹

UI/UXデザイナー

【経歴】
「VIVIVIT デザインアンヌアーレ2021」 UI講座登壇
MANIAC 認定クリエイターに選出
Twitterフォロワー数 1.2万人（2022年７月基準）

【参加プロジェクト】
「日比谷音楽祭2021」モバイルアプリケーションUI/UXデザイン担当
「UI Crunch」リブランディング

Twitter

この講座のポイント

UI/UXデザインを
基礎から学べる
入門者向け講座

UI/UXデザインの意味をしっかり理解できていない入門者でも分かりやすいように、UIとUXはどう違うのか、UI/UXデザインをする上での必要な知識など、UI/UXデザインの基礎知識を体系的に説明します。

必須ツール「Figma」の
使い方を基本から
応用までマスター

無料で手軽に始めることができ、UI/UXデザイン業界にて主流になりつつあるデザインツール「Figma」の基本操作から、デザインの制作にあたって便利なプラグインの利用方法までじっくり学びます。

UIデザインの実践的な
制作テクニックを伝授

UIデザインをする上での事前知識や、UIを構成する要素などの基礎的な部分を勉強し、サービスデザイン等を踏まえた上で実際にUIデザインに挑戦。実務に必要な制作テクニックを身につけます。

受講生のレビュー

講座内容
下記のような内容を
学べます。

UI/UXデザインの
基礎知識を身につける

UIやUXとは何か、２つの違い、といった基本から初心者の方にも分かりやすいように説明。その後、UIを作る際の事前知識やUIを構成する要素について丁寧に解説していきます。
UI/UXデザインツール
「Figma」の使い方を知る

今や業界で必須とも言える、UI/UXデザインツール「Figma」の基本的な使い方から応用までお教えします。つまずきやすい「オートレイアウト」や「制約」などの機能については、例題を通してご説明します。
オススメのFigmaプラグインを紹介

UIデザイン制作に役立つオススメのプラグインをカテゴリーごとに18個ご紹介します。作業効率を上げるものや、クオリティの高い素材をインポートできるものなど、成塚雅樹が普段から使用しているプラグインをご紹介します。

実践的なUIデザインの
制作テクニックを学ぶ

実際に手を動かしてUIデザインをする様子を見せながら、現役デザイナーだからこそ教えられる実務にすぐに活用できる制作テクニックを細かくお伝えします。
Figmaを使ったプロトタイプや
アニメーション作成と検証

Figmaのプロトタイピング機能の概要や設定方法について説明し、機能を用いた高クオリティのプロトタイプやアニメーションを作成します。
企画概要を魅力的にプレゼンボードにまとめる方法を解説

開発者が理解しやすい企画書を作成するコツや、作成した画面やコンセプトを分かりやすく魅力的にプレゼンボードにまとめる方法など、他部署と円滑に協業するためのノウハウをお教えします。

一回の購入で、期限の制限なく視聴することができます。
毎週金曜日の18時、販売価格が上がります。

もうすぐ販売価格が上がる予定です。
今すぐご購入ください！

カリキュラム
カリキュラム内容の
ご紹介

SECTION 1. オリエンテーション

01. 自己紹介、講座の進め方について

自己紹介
私の実績について
講座の進め方
講座で取り扱う内容
講座の対象者

SECTION 2. UI/UXデザイン入門

02. UI/UXとは何か

UIとは何か
GUI、CUI、VUIの違い
UXとは何か
UXの必要性
UXデザインの手法
UIとUXの関係性
ユーザー体験を構成する５つの要素
UIとUXの影響範囲

03. UIデザイン基礎１ - インターフェースデザインの基本原則

ヤコブ・ニールセンのユーザビリティ10原則
シュナイダーマンのインターフェースデザインの８つの黄金律
ドナルド・ノーマンのユーザー中心デザインの７原則

04. UIデザイン基礎２ - UIを作る前の事前知識

デバイスごとの違いについて
画面解像度について
OS（Operation System）について
UIデザインガイドライン
Apple ヒューマンインタフェースガイドライン
Google Material Design

05. UIデザイン基礎３ - UIを構成する要素

UIを構成する要素
カラー
タイポグラフィ
アイコン・写真・イラスト
UIコンポーネント（iOS）

SECTION 3. UI/UXデザインツール「Figma」の使い方

06. Figmaの概要と初期設定

Figmaの概要
Figmaの料金プランと権限について
Figmaのインストール
初期設定

07. Figmaのファイル管理、画面構成

ファイル管理画面の構成
エディター画面の構成

08. ツールバーとプロパティパネル

エディター画面の構成
ツールバー・プロパティパネルの説明
６つの例題に取り組む

09. Figmaの８つの基本機能

フレーム
制約
コンポーネント
スタイル
スマートセレクト
書き出し
コメント
共有

10. Figmaのオートレイアウトをマスターする

オートレイアウトとは
パディング
リサイズ
レスポンシブ
整列

11. Figmaのオススメプラグイン、UIライブラリの紹介

プラグインの使用の仕方
オススメプラグイン
オススメのUI Kit・ライブラリ

SECTION 04. UIデザイン製作テクニック

12. ホーム画面の作成

ホーム画面のUIデザイン
ステータスバー
ナビゲーションバー
フッタータブ

13. 通知画面の作成

通知画面のUIデザイン
リスト
ダイアログ

14. チケット一覧画面の作成

チケット一覧画面のUIデザイン
タブUI
カードUI

15. チケット詳細画面の作成

チケット詳細画面のUIデザイン
セクション
フッターボタン
詳細ボタン

16. チケット申し込み画面の作成

チケット申し込み画面のUIデザイン
ラジオボタン
テキストフォーム
テキスト入力画面

17. チケット確認画面の作成

チケット確認画面のUIデザイン
エラー表示
アイコンとテキストの組み合わせ

18. Figmaでプロトタイプを作成

プロトタイプ、アニメーションの作成
Figmaのプレビューモードで実機確認

SECTION 05. プレゼンボードのまとめ方

19. エンジニアが理解しやすいデータの作り方 / プレゼンボードのまとめ方

開発者とのコミュニケーション
注意事項やメモの記載
画面遷移フローの記載の仕方
デザインシステムのまとめ方
プレゼンボードの必要性
プレゼンボードの構成について

20. サービスデザインのプロセス

サービスデザインのプロセスについて
エスノグラフィ調査
バリュー・プロポジション・キャンバス
ブレインストーミング
ペーパープロトタイピング

21. さらにスキルアップするための方法

オススメの書籍やサイト
リファレンスを集めるのに役立つサイト
アプリUIギャラリーサイトの紹介
オススメのスクラッピングアプリ
制作したUIの違和感に気づくための方法

インタビュー
UI/UXデザイナー
成塚雅樹が
お話したいこと

Question.01
該当の分野を勉強している方が一番難しく感じている点と、この講座を通してその点をどの様に解決できるでしょうか？

まず、UI/UXデザインやサービスデザインの実践的なスキルをゼロから独学で学ぶのはとてもハードルが高いです。本講座を通してUI/UXの基本からツールの使い方、UIデザインのノウハウ、プレゼンボードへのまとめ方まで体系的に学ぶことで、実務で通用するスキルを身につけることができます。

また、UIデザイナーがどの様に考えてデザインをしているかは、成果物を見たり、本やサイトを読むだけでは十分に理解することは難しいです。実際にデザインを作っている様子を見たり、思考のプロセスを知ることによって、実務に役立つデザインスキルも身につけることができます。

Question.02
UI/UXデザインの市場性、展望についてのお考えをお聞かせください。

UI/UXデザイナーは年々需要が増していますが、UI/UXデザインが学べるサービスや学校は少ないので、優秀なUI/UXデザイナーの人材はとても希少になっています。そのため、UI/UXデザイナーは他のデザイン職と比べて待遇も高くなっています。

Question.03
UI/UXデザインを表現する際に大切なポイントや、制作する際に力を入れている部分とそのためのスキルにはどのようなものがありますか？

UI/UXデザインをするにあたって、ユーザーが解決したい課題や、ユーザーがプロダクトを触るシチュエーションを解像度高く理解することが大切です。

UIデザインを制作する際は、ユーザーの学習コストをどれだけ低くできるかを考えてデザインしています。そのために、他のサービスではどのようなUIにしているのか、リファレンスをとにかく多く集めるようにしています。

Question.04
受講生に向けて
メッセージをお願いいたします。

UI/UXデザインは、センスや繊細な技術はさほど必要はありません。UI/UXデザインの知識と良いプロダクトを作りたい、という想いがあれば、誰でもスキルを身につけることができると思います。なので、センスがあるかどうかや器用かどうかなどは気にせず、チャレンジしてみてください。

使用プログラムについて
ご案内します。

当講座は、以下のツールを使用します。

[メインツール]
Figma

※バージョンに関しては、最小バージョン116.0.1以上を推奨します。
※講座内での講師使用バージョンは116.0.5です。

おすすめの講座
この講座を見た方は
こちらもチェック！

返金規定

Coloso返金規約

Colosoサービスを利用される利用者様(（以下、「会員」とする。）が、株式会社Day1Company(以下、「弊社」とする。)にてご購入された講座チケットの返金、返品・交換について、各々次の規定に沿って対応いたします。また、弊社が別途定めた返金、返品・交換について規定がある場合、その該当の規定に沿うものとします。

購入と同時に受講が可能な講座について：受講有無に関係なくキャンセル不可

事前予約講座について：
①購入後、映像公開前まではキャンセル可能
②映像公開後はいかなる場合でもキャンセル不可

動画再生端末の台数制限について

１つのアカウント当たり再生可能なデバイス数は３台でございます。デバイスの登録は、動画視聴時に順次登録されることになります。携帯の機種変更などの理由で、登録されたデバイスを削除されたい場合は、help@coloso.jpまでお問い合わせください。年１回に限りデバイス変更が可能になります。
（３つ目のデバイスまでは動画を再生すると自動で登録されます。）

Coloso. | コロソ.