Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Design User Experience Design Figma

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

<Mac / Windows対応>高品質なUIデザインにはルールがある!Figmaの基本的な使い方はもちろん、AppleのAppデザインを忠実に再現する応用編まで収録。アニメーションを駆使して、圧倒的に表現力豊かなプロトタイプをつくろう!
Bestseller
Rating: 4.7 out of 54.7 (309 ratings)
2,119 students
Created by Shunsuke Sawada
Last updated 1/2021
Japanese
30-Day Money-Back Guarantee

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

10 sections • 109 lectures • 13h 40m total length

  • Preview10:30
  • Preview03:18

  • アカウント作成とデスクトップ版のダウンロード
    05:57
  • チーム・プロジェクト・ファイル
    12:17
  • フォントのインストール
    08:19

  • Preview00:44
  • 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
  • 最新機能と複雑なオートレイアウト
    23:33

  • Preview00:42
  • フレームとエレメントの追加
    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:12
  • サイズ可変のボタンをつくる
    09:26
  • リアリティのあるUIモック
    11:27
  • iPhoneでデザインを確認
    01:58

  • Preview00:48
  • テキストスタイルを作成する
    07:11
  • インスタンスのスタイルを上書き
    04:40
  • スタイルを使うメリット
    05:45
  • カラースタイルを作成する
    11:39
  • カラースタイルを適応する
    08:44
  • ページを分割して見通しを良く
    03:00
  • チームライブラリを公開する
    12:16
  • 色指定の漏れをチェックする
    13:22
  • 折り返し地点ラップアップ
    02:28

  • Preview00:53
  • 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

  • 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
  • スライドのPDF
    00:05

  • Preview01:08
  • 初めてのプロトタイプ
    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
  • スライドのPDF
    00:05

  • Preview00:42
  • 繊細なアニメーション
    03:51
  • アニメーションの素材をつくる
    06:32
  • Figmotion
    11:15
  • ボタンアニメーションの準備
    05:08
  • 複雑なキーフレームアニメーション
    12:04
  • スライドのPDF
    00:05

  • Preview00:38
  • 練習課題と答え合わせの方法
    03:48
  • すべての画面をつなぐ
    05:56
  • プロトタイプを加速させるプラグイン
    05:49
  • プロトタイプを仕上げる
    07:31

Instructor

Shunsuke Sawada
UI/UXデザイナー
Shunsuke Sawada
  • 4.4 Instructor Rating
  • 2,367 Reviews
  • 15,060 Students
  • 4 Courses

UI/UXデザイナー、プロダクトマネージャー、フロントエンド・バックエンドエンジニア等、色々なロールで10年以上ものづくりに勤しんでいます。
国内外問わずフリーランスで活動しており、新規事業のウェブ開発やモバイルアプリ開発に携わることが多いです。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.