初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能
4.5 (47 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
426 students enrolled

初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能

<Mac / Windows対応>高品質なUIデザインにはルールがある!Figmaの基本的な使い方はもちろん、AppleのAppデザインを忠実に再現する応用編まで収録。アニメーションを駆使して、圧倒的に表現力豊かなプロトタイプをつくろう!
Bestseller
4.5 (47 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
426 students enrolled
Created by Shunsuke Sawada
Last updated 5/2020
Japanese
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 13.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Figmaの基本操作と応用テクニック
  • Appleを題材にしたプロフェッショナルなUIデザイン
  • アニメーションを使った高度なプロトタイピング
  • モバイルアプリをデザインする際のルール
  • 感覚に頼らないデザイン
Requirements
  • 前提条件は特ありません。Mac / Windowsマシンがあれば大丈夫です。
  • 非推奨ですがWebブラウザやiPadでも作業は可能です。
Description

Figmaは誰でも無料で使えるデザインツールであり、プロの現場でも使われる素晴らしいソフトウェアです。Mac / Windows / Webブラウザを使って誰でもデザインを始められ、その柔軟さと機能性でユーザー数を伸ばしていますが、日本語の体系的な教材がまだ少ない印象です。

この講座では、Appleのデザインを題材に本格的なUIデザインを学習します。
また、Figmaの強力なインタラクション機能とプラグインを使って、ハイレベルなプロトタイプを作成します。※ プロトタイプとはアプリ開発の際に、できるだけ早い段階でデザインに欠陥がないかをテストする手法です。

モバイルアプリをデザインする際のルール、一貫性のあるデザインの大切さ、感覚に頼らないデザインなど、デザイナーの思考法を解説しながら一緒にUIを作り上げていきますので、初学者はもちろん、エンジニアやマネージャーなど、普段デザインに関わらない方にもお勧めです!
学習した知識とテクニックは、Webデザイン制作にも活かすことができます。

また、最終的なデザインは公開されており、自由に確認、編集することができます。


Who this course is for:
  • モバイルアプリのデザインを始めたい方
  • ハイレベルなプロトタイピングを作りたい方
  • Sketch / Adobe からFigmaに乗り換えようと思っている方
  • エンジニアフレンドリーなデザイン手法を学びたい方
  • デザイナーの思考を取り入れたいマネージャー
  • 作業をもっと効率化したいデザイナー
  • デザインに興味のあるエンジニア
Course content
Expand all 105 lectures 13:16:42
+ 初めてのFigma
3 lectures 26:33
アカウント作成とデスクトップ版のダウンロード
05:57
チーム・プロジェクト・ファイル
12:17
フォントのインストール
08:19
+ Figmaの基本
18 lectures 01:53:19
Figmaの基本操作
11:48
図形をまとめる方法の違い
10:24
立方体を描く
04:44
カスタムシェイプを描く
06:28
ベジェ曲線を描く
05:32
テキストを追加する
10:37
パスをアウトライン化する
05:13
最適な画像サイズ
05:32
画像を読み込んで使用する
03:19
画像オプションを変更する
07:58
塗りオプションを使う
06:40
よく使うスタイルを登録する
05:45
コンポーネントとインスタンス
08:44
オートレイアウト
03:51
制約・コンストレイント
06:55
オブジェクトを効率的に整列させる
05:19
画像をエクスポートする
03:46
+ UIデザインとFigmaの応用テクニック
30 lectures 03:51:19
フレームとエレメントの追加
13:21
グリッドとナッジの設定
06:57
なぜグリッドシステムか
08:44
グリッドシステムの例外
06:02
レイアウトを始めよう
16:14
タブナビゲーションの追加
08:14
コンポーネントを作成する
10:14
ファイルの整理と変更履歴
02:42
アイコンを描く 1
06:53
アイコンを描く 2
10:05
アイコンを描く 3
04:38
アイコンを描く 4
07:20
タブメニューのアイコンを差替える
10:50
外部リソースで時間を節約
05:02
高品質な写真で画面を美しく
04:50
無料の仕組み Unsplash
02:57
デザインに写真を設置する
04:24
Constraintsで制約を追加する
03:31
タブナビゲーションの制約
05:57
カードとヘッダーの制約
08:19
カードUIのコンポーネント化
05:34
カードUIのカスタマイズ
11:41
カードUIを追加する
13:03
アイテムUIのレイアウト
11:10
価格ボタンのデザイン
07:02
オートレイアウト
12:02
サイズ可変のボタンをつくる
09:26
リアリティのあるUIモック
11:27
iPhoneでデザインを確認
01:58
+ より良いデザインの管理
10 lectures 01:09:53
テキストスタイルを作成する
07:11
インスタンスのスタイルを上書き
04:40
スタイルを使うメリット
05:45
カラースタイルを作成する
11:39
カラースタイルを適応する
08:44
ページを分割して見通しを良く
03:00
チームライブラリを公開する
12:16
色指定の漏れをチェックする
13:22
折り返し地点ラップアップ
02:28
+ アプリ画面の作り込み 1
6 lectures 45:26
Today-Detail 1 / 遷移後の画面
09:30
Today-Detail 2 / ページのコンテンツを作成
09:51
Today-Detail 3 / 同じ構成要素の別レイアウトを作成
07:44
Today-Detail 4 / シェアボタンを作成する
14:54
Today-Detail 5 / Today-Detailを完成させる
02:34
+ アプリ画面の作り込み 2
12 lectures 02:35:41
App-Detail 1 / フレームの作成と要素の配置・サイズ決め
09:07
App-Detail 2 / 細かいデザインの調整
19:24
App-Detail 3 / タイトルコンポーネントと様々なテキストスタイル
12:04
App-Detail 4 / スクリーンショットからアプリの内容説明
13:37
App-Detail 5 / レイティングの詳細
13:49
App-Detail 6 / レビューの詳細
17:43
App-Detail 7 / アイコン付きのメニュー
12:24
App-Detail 8 / アプリの付加情報
21:44
App-Detail 9 / iOSの機能サポート
06:52
App-Detail 10 / レコメンデーション
13:49
App-Detail 11 / 制約を追加してリサイズに対応
12:07
App-Detail 12 / カラースタイルとテキストスタイルを確認
03:01
+ 高品質なプロトタイピング
13 lectures 01:17:29
初めてのプロトタイプ
03:33
ページの回遊を実現する
04:59
アニメーションを追加する
04:35
プロトタイプの品質を上げる
05:54
App-Detail への遷移
06:41
スクロール位置の問題
03:49
横スクロールUIをつくる
04:25
リッチなUIをプロトタイプで実現
09:37
ユーザビリティの向上
06:19
オーバーレイを実現する
07:46
高度なアニメーション 1
08:30
高度なアニメーション 2
10:13
+ アニメーションによる豊かな表現力
6 lectures 39:32
繊細なアニメーション
03:51
アニメーションの素材をつくる
06:32
Figmotion
11:15
ボタンアニメーションの準備
05:08
複雑なキーフレームアニメーション
12:04
+ プラグインを使った作業効率化
5 lectures 23:42
練習課題と答え合わせの方法
03:48
すべての画面をつなぐ
05:56
プロトタイプを加速させるプラグイン
05:49
プロトタイプを仕上げる
07:31