Skip to content

Coloso. | コロソ.

UI/UX 디자이너 나리즈카 [ UI/UXデザイナー 成塚雅樹 ] カリキュラム紹介

Figmaで始めるUI/UXデザイン基礎

UI/UXデザイナー 成塚雅樹
  • UI/UXデザイン
  • Figma
  • サービスデザイン
  • Webデザイン
  • プレゼンボード
  • 講座の紹介
    UI/UXデザインの基本から、「Figma」の操作方法、実際のアプリ画面制作スキルや協業のコツといった応用まで、現役UI/UXデザイナーの成塚雅樹のノウハウを幅広く学べる講座です。
  • 無期限視聴
    一回の購入で、UI/UXデザイナー 成塚雅樹のUI/UXデザイン制作ノウハウを盛り込んだ講義動画20本を、期間制限なしで受講することができます。
    • 無期限視聴
    • 8月31日 9時 オープン
    • 8月19日 販売価格が上がります。
    • ¥18,500 ¥35,000 47% 割引

UI/UX 디자이너 나리즈카 [ UI/UXデザイナー 成塚雅樹 ] カリキュラムの説明

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


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

Coloso 成塚雅樹 ポートフォリオ

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

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

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

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

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

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

Coloso 講座特徴
講座情報

本数:20本の映像
難易度:初級
無期限視聴

Coloso 講座特徴
使用プログラム

– Figma

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

Coloso 講座特徴
動画情報

オンラインVOD
オーディオ:日本語

Coloso 講座特徴
講座特典

作品数:UIデザイン1点
Figmaファイル1点

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

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

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

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


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

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

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

背景イメージ
Coloso 成塚雅樹
成塚雅樹

UI/UXデザイナー


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

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

Twitter

この講座のポイント

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

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

Coloso 成塚雅樹 講座のポイント

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

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

Coloso 成塚雅樹 講座のポイント

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

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

Coloso 成塚雅樹 講座のポイント

受講生のレビュー


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

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


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

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

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

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

  1. 自己紹介
  2. カリキュラムの流れ
  3. UI/UXデザインの学び方
  4. 今回の講座で取り扱う内容、取り扱わない内容
  5. 本講座の範囲と対照
  6. UI/UXが求められる理由
SECTION 2. UI/UXデザイン入門

02. UI/UXとは何か

  1. UIとは何か
  2. UXとは何か
  3. UIとUXの違い
  4. ユーザビリティ
  5. UXデザインの5段階モデル
  6. アプリ企画
  7. UXデザインのプロセスについて

03. UIデザイン基礎1 - インターフェースデザインの基礎知識

  1. インターフェースデザイン
  2. インターフェースガイドライン

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

  1. UIを作る前の事前知識
  2. ユーザー環境
  3. ユーザーの目線の流れ
  4. 8の倍数

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

  1. UIを構成する要素
  2. カラー
  3. タイポグラフィ
  4. アイコングラフィ・写真・イラスト
  5. UIコンポーネント(iOS)
  6. アニメーション
SECTION 3. UI/UXデザインツール「Figma」の使い方

06. Figmaの概要とインストール、Figmaの基本操作 - ツールバーの操作

  1. Figmaの概要とインストール
  2. Figmaの基本操作
  3. FrameとGroupの違い
  4. 位置、サイズの変更
  5. オブジェクトの整列
  6. 色の変更
  7. テキストの編集

07. プロパティパネルの操作

  1. ストローク(線)
  2. ペンツール、鉛筆ツール
  3. エフェクト
  4. 画像の書き出し
  5. オブジェクトやパスの結合・合成
  6. オブジェクトのマスク

08. コンポーネント化、プラグイン

  1. コンポーネントの作成と複製
  2. 制約(Constraints)
  3. オートレイアウト
  4. コンポーネント プロパティ
  5. バリアンツ(Variants)
  6. オススメプラグイン
  7. UI Kit、ライブラリ
SECTION 04. サービスデザインのプロセスを学ぶ

09. サービスデザインのプロセスについて

  1. サービスデザインのプロセス
  2. UIデザインの原則
  3. 競合調査
  4. ペルソナモデルとストーリー
  5. リーンキャンバス
  6. フィジビリティスタディ

10. デザインコンセプト

  1. 機能の洗い出し
  2. ムードボードの作成
  3. デザインコンセプト
  4. トーン&マナー

11. ワイヤーフレーム

  1. ワイヤーフレームの作り方
  2. ペーパープロトタイプについて
  3. 画面遷移図の作成
SECTION 05. UIデザイン製作テクニック

12. メイン画面を作る1

  1. ヘッダー
  2. フッター
  3. ステータスバー
  4. ナビゲーションバー

13. メイン画面を作る2

  1. コンテンツエリア
  2. マージン
  3. ボタン
  4. タイポグラフィ

14. チケット一覧画面

  1. チケット一覧画面ページの作成
  2. タブ切り替え
  3. オートレイアウト
  4. アイコンの設定

15. チケット詳細画面

  1. チケット詳細画面ページの作成
  2. ナビゲーションバー
  3. ラジオボタン
  4. 入力フォーム

16. プロトタイピングについて

  1. プロトタイピングとは何か
  2. プロトタイピングの必要性
  3. プロトタイピングの方法

17. Figmaを使ったプロトタイピングの作成

  1. プロトタイプ、アニメーションの作成
  2. Figmaのプレビューモードで実機確認
SECTION 06. プレゼンボードのまとめ方

18. エンジニアが理解しやすい企画書の作成、データの整理

  1. 開発者とのコミュニケーション
  2. 注意事項やメモの記載
  3. 画面遷移フローの記載の仕方
  4. デザインシステムについて

19. プレゼンボードにまとめる1

  1. プレゼンボードの必要性
  2. 講座の中で製作したものをプレゼンボードにまとめる
  3. プレゼンボードの構成について

20. プレゼンボードにまとめる2、さらにスキルアップするための方法

  1. 魅力的なプレゼンボードを作成するコツ
  2. オススメの書籍
  3. 参考になる書籍やサイトについて
  4. 今後のサービスデザインのあり方
  5. UI/UXの学び方

*講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。

インタビュー
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です。

Figma

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

返金規定

Coloso返金規約

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

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

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


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

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