Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Design

/

UI/UX

基礎から実戦まで!モバイルUX/UIデザイン完成

モバイルUX/UIデザイン、初めての方や基礎が不足している方向けの実践入門講座です。 基礎理論と様々な実習を通して、アプリ設計の実務感覚まで段階的に学びながら自信をつけてみましょう! 💪

  • hoodi
uxui
UI/UX
모바일디자인
피그마
모바일앱
Mobile App Design
Figma
ux
clone design
product design

学習した受講者のレビュー

こんなことが学べます

  • モバイルデザインに必要な基礎理論および要素を習得できます。

  • フィグマ(figma)の各種テクニックと便利な機能をご紹介します。

  • ワイヤーフレームを見て、モバイル画面を制作できます。

  • 実際のアプリの例で学習内容を視覚的に学べます。

どの分野でも基礎が最も重要ですよね!

UX/UIデザイン分野も同様です。モバイル画面をデザインする際は、サービスごとに構成要素や機能が様々にバリエーションされるため、結局自分が持っている基礎知識とそれを実務に応用できる画面設計力がとても重要です。基礎知識を積み重ね、画面をデザインしてみる実習で訓練して、デザインスキルを向上できるようサポートいたします!

🤔 "UX、UI...一体何から勉強すればいいんですか?"

😭 「インターネットに情報はたくさんあるけど、何から見ればいいのかわからない」

😵「アプリの画面をどのように構成すればいいのかわかりません。」

デザインコンサルティングとメンタリングを進める中で最もよく聞いた話です。ポートフォリオやFigma講座は本当に多いですよね。しかし、いざモバイルUX/UI講座を探してみると見つけるのが難しいです。そして、インターネットに散らばっている様々な情報を一度にまとめて整理するのも難しく、何が正しいのか、どれから学んでいけばいいのかが分からないです。また、このようにして理論を学んだとしても、それを実際にどう適用すべきかを知るのも困難ですよね!

モバイル環境の必須デザイン理論とそれを確実に適用できる実習を通じて
このような皆さんの悩みや心配を解消してみましょう!モバイルデザイン、Figma、ux、クローンデザイン、プロダクトデザイン

講義が終わっても、
教材と一緒にもう一度復習してみてください

*カリキュラム内の講義教材ダウンロードを参考にしてください!


この講義の特徴は?

배민、당근、토스などの有名アプリ画面例と一緒に

一般的によく知られている様々なアプリの画像例を通じてしっかりと学習してみましょう。学んだ内容が実際のアプリでどのように適用され使われているかを見ていると、はるかに理解しやすくなるでしょう!

理論を通じて学習し、実習で訓練する

モバイル環境に合わせた様々な理論と内容を学習し、これを複数の実習例題を通じて訓練することができます。また、途中途中で実務で習得できる꿀팁も確認してみてください!

Figma(フィグマ)でよく使うショートカット&機能

Figmaでよく使うショートカットキーを覚えておけば、他の人よりもずっと効率的で速くデザインができますよね!私がよく使う様々なショートカットキーと機能をまとめてお教えします!

段階的学習によるデザインの完成

基礎から応用、拡張される様々な概念まで、チャプター別に一緒に進めるように構成しました。しっかりついてきていただければ、いつの間にか一つの画面をデザインしている自分を発見することでしょう!

詳しい学習内容を見てみましょうか?


理論&ティップ

モバイル環境に特化したデザイン理論を学び、Figmaの裏技も身につけましょう!

モバイルのカラー・フォント・余白

最も基本的なカラー、フォント、テキスト、余白などの要素をモバイルでどのように設定すべきかを学びます。

コンポーネントとUI

様々なUI要素の概念を学び、実習を通じてこれを適用してみながら、デザインをどのように設計すべきかを学びます。

モバイルサービスの共通的な画面特徴

リスト、GNB、フィルターなどのモバイル環境での共通的なパターンと要素について調べ、これを実際にデザインしてみます。

Figmaの様々な機能とコツ

最もよく使われるデザインツールであるFigmaでよく使う機能と実務でも役立つコツについて学習してみます。

Figmaを使った実習例題

実習を通じて学んだ内容を復習し、デザインの練習をしてみましょう!

事前相談申請ページに色を塗る

相談申し込みページにメインカラー&サブカラーの強弱と階層を調整してページにカラーを埋めてみます。

旅行レビューページのデザインを整理する

会員登録画面を一緒に作りながら、UIで学んだ要素を適用してデザインしてみます。

会員登録画面デザイン

会員登録画面のワイヤーフレームを見て、UIで学んだ要素を適用してデザインを完成させてみます。

中古マーケット画面デザイン

シンプルな中古マーケット画面のワイヤーフレームを見て、学んだ内容を適用してデザインを完成させてみます。

講義を受講すると、こんなことができるようになります!💪

デザインの基礎力をしっかりと鍛えることができます

デザインで最も重要なのは基礎です。実務で能力を伸ばしていけるよう、このような基礎をしっかりと固めて実力のあるデザイナーとして飛躍できるきっかけになるでしょう!

企画されたワイヤーフレームを見てデザインができます

実際の実務では、企画されたワイヤーフレーム(wireframe)を使ってデザインを行うことになります。準備した実習を通じて、ワイヤーフレームを使ったデザインを実際にやってみて、事前にスキルを向上させてみましょう!

こんな方に講座をおすすめします 👍

受講前の参考事項

前提知識および注意事項

  • 実習の場合Figmaを通じて進行するため、基礎的なFigmaツールを扱えることが良いです。図形を作成してテキストを適用し、オブジェクト同士を整列するなどのとても基本的な使用法だけ知っていれば大丈夫です!

  • 講義資料は商業的用途での使用はできません。すべての講義コンテンツと資料は著作権保護を受けます。ご参考ください!


実習環境

  • Figmaの実習は最新アップデートインターフェースが適用されたバージョンであるUI3で進行します。

  • 実習サンプルファイルはFigmaファイル(.fig)でお渡しするため、Figmaのデスクトップアプリをダウンロードして進めることをおすすめします!

学習資料

  • 授業ノートと動画を通して学習することができます。

講義Q&A

Q. デザイン非専攻者でも受講できる講義ですか?

モバイルデザインは日常でアプリを使ってみながら各機能について理解しているだけでも十分に学ぶことができます。そして色やテキストに関する簡単な概念について理解していれば無理なく受講できます。ただし、実習では専攻者、非専攻者を問わず簡単にFigmaの基本的な使い方を知っていればはるかにスムーズに例題を見ながらデザインできます!

Q. 基礎講義とはどの程度の難易度ですか?

主にモバイルUX/UIを今学び始めた方々が必要とする内容を含んでいるため、あまりにも複雑で難しい内容は最大限排除した入門〜基礎レベルの難易度とご覧いただけます。最大限基礎で扱える内容を持って講義を構成し、最初から講義で学ぶ内容だけをしっかり学習しながらついてくれば、その後の応用概念や実習は無理なく進められるよう制作しました!

Q. 必ず最初の部分から講義を受講しなければなりませんか?

基礎から徐々に内容を深めながら講義が行われ、それに合わせて実習も進行されるため、最初から順次授業を受講されることをお勧めします!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • UX/UIデザインを学びたい方々

  • キャリアを始めたばかりの駆け出しデザイナー

  • UX/UIデザイナーを希望する就職準備生

  • UX/UIデザイナーへのキャリアチェンジを目指す方々

前提知識、
必要でしょうか?

  • 図形作成、カラー適用、テキスト整列などの簡単なFigmaツールの使い方を知っていると良いです!

こんにちは
です。

46

受講生

17

受講レビュー

4.9

講座評価

1

講座

  • 현) 크몽 및 숨고 등 다양한 플랫폼에서 UX/UI 디자인 전문가로 활동

     

  • 현) 스타트업 위주의 대면 미팅을 통한 앱 설계 및 컨설팅 진행

  • 전) 삼성생명 TF팀 '워리스' 서비스 UX/UI 디자인 협업 및 제작

  • 전) 삼성전자 가전사업부 사내 UX 팀 과제 협업

     

     

안녕하세요 ! UX/UI 프로젝트 및 디자인 교육을 진행하는 후디입니다.

디자이너로 커리어를 쌓으며 배우고 습득한 여러 경험과 정보들로
디자이너를 꿈꾸는 많은 분들께 도움이 되는 각종 강의와 프로덕트를 만들어 나가고 있습니다 😎


쓰레드(threads) : https://www.threads.com/@hoodi_ux

カリキュラム

全体

55件 ∙ (5時間 33分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

17件

4.9

17件の受講レビュー

  • hopesdreamsforest님의 프로필 이미지
    hopesdreamsforest

    受講レビュー 22

    平均評価 5.0

    修正済み

    5

    73% 受講後に作成

    I've been contemplating which course to take, thinking I need to learn UX/UI recently, and Hoody's lecture is really great. I started listening to it because I wanted to fill in the design aspects while developing, even though I have no basic knowledge. It was easy to understand because it explained in detail how to use fonts and text, starting from the concept of color. I'm not good at handling Figma, but it was great because I could do it much more easily by watching and following along. As I recently started developing a mobile app, I've been able to meticulously structure the design aspects.

    • hoodi
      知識共有者

      Hello. This is Hoodie, your knowledge sharer. Thank you very much for your heartfelt course review! It's especially impressive that, as a developer, you took the course while contemplating the design aspects with us! After all, design isn't just about creating pretty screens; it's also a way to communicate better with users and effectively deliver functions. 😊😊 This course was designed to be as easy as possible to follow from the basics, so I'm truly gratified that it was so helpful to Chanran-nim! In the future, if you encounter design challenges in your work, please refer back to the course content and utilize it. I've made it available for unlimited access so you can revisit it anytime. :) I sincerely hope for excellent results in your future development and design work!

  • gmls님의 프로필 이미지
    gmls

    受講レビュー 2

    平均評価 5.0

    5

    96% 受講後に作成

    I was able to grasp the fundamentals for planning application screen composition and design from a user perspective. Thank you.

    • hoodi
      知識共有者

      Hello, I'm knowledge sharer Hoody. It's so great that you were able to learn the basics needed for planning..! 😊😊 As you work with various platforms and domains, you'll get a sense of what perspective to take when designing..! Thank you for your precious review and rating ☺️ You don't have much left until completion..! Fighting!

  • mong6님의 프로필 이미지
    mong6

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    • hoodi
      知識共有者

      Hello, this is Hoody, your knowledge sharer. Thank you for leaving a valuable rating! I hope my design lecture was helpful! 😊 Cheering you on until completion! 💪

  • cg5xyfnn9m8289님의 프로필 이미지
    cg5xyfnn9m8289

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    • hoodi
      知識共有者

      Hello, I'm Hoodie, a knowledge sharer. Thank you for your valuable rating after 100% completion..! I hope my design lecture was helpful! 😊

  • squarecracker님의 프로필 이미지
    squarecracker

    受講レビュー 1

    平均評価 5.0

    5

    67% 受講後に作成

    I didn't even know what UX/UI was and felt overwhelmed, but after taking this lecture, I started to understand things one by one. There were also quizzes in the middle, so I could check if I understood correctly. What I liked most was that they explained why things should be done this way, really easily. Instead of just telling me to memorize it, they told me the reasons, so it really stuck in my head. Because they explained using apps like 배달의민족 and 당근마켓 as examples, I immediately understood, thinking 'Ah, this is it!'. It was also fun to create things myself with 피그마, and even though I haven't finished the entire course yet, I can already create simple screens. I really recommend this to anyone struggling with UX/UI. I was a complete beginner too, but I was able to understand it.

    • hoodi
      知識共有者

      Hello, this is knowledge sharer Hoodie. Thank you so much for Cracker's valuable review! 👍 UX/UI can be difficult and overwhelming at first, but hearing that you're starting to understand it piece by piece truly makes me proud. I'm especially delighted that you grasped the part where I focused on explaining "why it needs to be done this way." Explaining with real app examples like Baemin and Danggeun Market was intended to help you understand more visually and clearly by looking at actual apps, since 'image' is crucial in design, so I'm grateful you recognized that :) If you continue to follow the lecture until the end, you'll build much stronger skills. Once again, thank you for your valuable review!

¥15,651

似ている講座

同じ分野の他の講座を見てみましょう!