Figmaのオートレイアウト、グリッド、コンストレインツ機能を適切に活用し、レスポンシブデザインをマスターしたいですか？この講座では、小さなUI要素からカード、テーブル、コンポーネント、Webとアプリの画面まで、レスポンシブデザインとして作成するスキルを段階的に磨いていきます。就職活動や実務ですぐに役立つFigmaの活用法を習得し、様々なデバイスに最適化されたレスポンシブインターフェースデザイン能力をマスターしましょう！
受講生 105名
難易度 入門
受講期間 36か月
学習した受講者のレビュー
5.0
김연진
必要な講義を作ってくださってありがとうございます。
5.0
Joy J
スタートアップでフロントエンド開発をしていますが、デザインも一緒に担当しています。 これまでは必要な部分だけYouTube資料を探して手探りでデザインを進めていましたが、今回は短時間でレスポンシブデザインを習得する必要がありました。 講義が実習中心なので一つ一つ直接ついていったり、まず試してから確認できるので、レスポンシブデザインを習得するのに短期間で効果的だと思います！ 特にconstraintsの原理を説明してくださった部分が大きな助けになり、alignmentが適用されない状況でなぜそうなるのか指摘してくださったので、私が普段見落としていた部分を新たに理解することができました。 また講義中ファイル関連で困難がありましたが、時差があるにも関わらず素早くフィードバックをくださって感謝でした...！ 今回はこれまでのように一針一針数値を面倒に修正する方式ではなく、講義で学んだ内容をしっかり適用して効率的に作業してみたいです。 本当に本当にありがとうございます😭😭！ 最後まで頑張って完走します！
5.0
고하경
私は「なぜ」やらなければならないのかが非常に重要な動機として作用する人です。実際、機能をたくさん知っていても適用する方法を知らなかったり実用的でなければ、知っている情報に対する効用性も落ちるし、機能学習に対する意味もかなり色褪せてしまうと思います。しかし、この講義が最も良かった部分は、学習 -> 実務適用で作られたというよりも、実務の困難 -> 学習 -> 困難脱出ルートで作られていることがよく感じられたからでした。実際に説明してくださる方式も、この機能が実務でなぜ重要なのか -> どのように適用してみることができるのか + 実際の事例構成だったので、より頭にすっと入りました。そして分かりやすく説明してくださったおかげで、漠然と難しい機能だと思っていた部分に対する負担感をすべて取り除くことができました。そして就活生として実務で「なぜ」よく使われるのかを講義の途中途中で教えてくださったので、学習をしている最中にももう一度覚えなければと思って見直すようになります。おかげで漠然と恐れていた実務に対する負担感も減りました！ありがとうございます:)
レスポンシブデザインについての概念から実践活用能力まで身につけます。
フィグマの華「オートレイアウト」をマスターしてレスポンシブデザインに活用できます。
Figmaのオートレイアウト、グリッド、コンストレインツ機能を活用して、小さなUIデザイン要素から、カード、コンポーネントをレスポンシブに作成してみます。
レスポンシブにウェブとアプリのどちらもデザイン可能です。
一つのデザインで様々なデバイス環境に柔軟に対応できる「レスポンシブ」デザイン力を身につけることができます。
開発者や関係者に、より効果的にデザインハンドオフを伝えることができます。
こんにちは。プロダクトデザイナーのエリックです。👋
私は現在、アメリカ・ニューヨークのテック業界でシニアプロダクトデザイナーとして働いています。UXリサーチからUIデザイン、デザインシステムの構築・管理まで、UX/UI全般にわたる実務業務を担当しており、面接官として、応募者のポートフォリオを検討・評価する役割も担っています。そのため、入門者や就職準備をしている方々にどのような能力が実際に必要なのかをよく理解しています。また、AmazonベストセラーとなったUXデザイン入門者向けの書籍『Design thinking for beginners』を執筆しました。
今回の講義を作ることになったきっかけは、私が実務でレスポンシブデザインとそのためのFigmaの核心機能を本格的にマスターした後、デザインの生産性と効率性が数倍以上向上した経験をしたからです。その核心には、Figmaのオートレイアウト、グリッド、コンストレインツ機能を活用した体系的な画面設計方式がありました。
以前は同じデザインを画面サイズ別に対応するために新しく作成し、修正するのに時間がかかりすぎていました。しかし今は一つのデザインで様々なデバイスに柔軟に対応できるレスポンシブUIデザインを構築できるようになり、その結果、反復作業は減り、デザイナーと開発者間の協業もはるかにスムーズになりました。私は自分の経験と知識、実務ノウハウを基に、レスポンシブデザインは入門者・就活生の方には就職の可能性を大きく高め、レスポンシブデザインを知らない現職デザイナーには業務生産性を大きく向上させるお手伝いをいたします。この機会にレスポンシブデザインをしっかりと学び、キャリア成長の機会を作ってみてください。
学習対象は
誰でしょう？
就職の目標をより早く達成したいUX/UIデザインの入門者および就活生
UX/UIデザイナーと協業を行う、または自らデザインを行う開発者
オートレイアウト/グリッドなどを活用し、企画書作成における業務生産性を高めたいPM/PO/サービス企画者
レスポンシブデザインをよく知らない、またはオートレイアウト／コンストレインツの活用法をよく知らないジュニアまたは現役のデザイナー
前提知識、
必要でしょうか？
Figmaに関する基礎知識および活用法
UX/UI デザインに関する基本概念
5,222
受講生
717
受講レビュー
311
回答
4.8
講座評価
8
講座
現在ニューヨークでシニアプロダクトデザイナーとして働いています。
ニューヨークに来る前は、ソウルでUIプランナーとして働いていました。
Brunchマガジン「デザイン、そしてプロダクト」や、UX・UIの知識と情報を共有する「ニューヨークUXデザイナー」Instagram、Facebookを運営し、デザイナーやデザイナー志望の方々と交流しています。
個人的には3人の子供👶の父親であり、料理🍲や教育🏫に強い関心を持っています。
執筆および講義
• 「ニューヨークのプロダクトデザイナーが教えるUXデザイン入門 A to Z」本を出版 (リンク: Yes24, アラジン, 教保文庫)
• パブリ（PUBLY）記事 「サービスの第一印象を決定する3秒：ランディングページUXの4つの原則」 公開
• Samsung SW Academy for Youth (SSAFY) UX/UIデザインおよびFigma講師
• 1:1メンタリングおよび企業講義の進行（トピック：UX、UIデザイン、UXファシリテーション、UX/UIポートフォリオの制作および発行）
経験および経歴
• (現) ニューヨーク The Knot Worldwide シニアプロダクトデザイナー
• (前) ソウル Pantech モバイルアプリUIプランナー
• ニューヨークを拠点とする多数のスタートアップとUX/UIコンサルティングプロジェクトを進行
• ニューヨーク School of Visual Arts デザイン大学院卒業 / 専攻: Interaction Design
• 韓東大学 学部卒業 / 専攻：産業デザイン
全体
40件 ∙ (5時間 10分)
4. 講師エリックを紹介します。
04:18
8. マインドセットとデザイン
02:28
全体
17件
4.9
17件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
5
私は「なぜ」やらなければならないのかが非常に重要な動機として作用する人です。実際、機能をたくさん知っていても適用する方法を知らなかったり実用的でなければ、知っている情報に対する効用性も落ちるし、機能学習に対する意味もかなり色褪せてしまうと思います。しかし、この講義が最も良かった部分は、学習 -> 実務適用で作られたというよりも、実務の困難 -> 学習 -> 困難脱出ルートで作られていることがよく感じられたからでした。実際に説明してくださる方式も、この機能が実務でなぜ重要なのか -> どのように適用してみることができるのか + 実際の事例構成だったので、より頭にすっと入りました。そして分かりやすく説明してくださったおかげで、漠然と難しい機能だと思っていた部分に対する負担感をすべて取り除くことができました。そして就活生として実務で「なぜ」よく使われるのかを講義の途中途中で教えてくださったので、学習をしている最中にももう一度覚えなければと思って見直すようになります。おかげで漠然と恐れていた実務に対する負担感も減りました！ありがとうございます:)
丁寧に書いてくださったレビューありがとうございます。私もレスポンシブデザイン、その中でも特にオートレイアウトを初めて学んで勉強した時、これを実務でどのように適用すべきかよく分からず、もどかしさを感じた時のことを思い出しますね。つまり機能自体を学ぶためではなく、レスポンシブデザインという問題を解決する方法を学びたかったのですが、それが簡単ではなかった記憶があります。そのためこの講義を作る際も、受講生の皆さん、特に入門者や就職を準備している方々が、どうすればより理解しやすく実務に適用可能なスキルを身につけられるかを考えながら、カリキュラムと内容を構成しようとしました。つまり、この講義を聞いてレスポンシブデザインをマスターした志願者が、面接官の立場からこの方はレスポンシブデザイン能力の準備ができているなと思ってもらえるようにしなければと目標を立てて講義を作ろうとしました。この講義を通じて漠然として恐ろしかった実務の負担感が減ったとおっしゃるので（!!）これ以上ない喜びで、この講義を作った甲斐を大きく感じます :) 改めて貴重なレビューおよびフィードバックを残してくださってありがとうございます。今後計画されているすべてのキャリア計画がうまくいくことを心から応援いたします。
受講レビュー 1
∙
平均評価 5.0
修正済み
5
スタートアップでフロントエンド開発をしていますが、デザインも一緒に担当しています。 これまでは必要な部分だけYouTube資料を探して手探りでデザインを進めていましたが、今回は短時間でレスポンシブデザインを習得する必要がありました。 講義が実習中心なので一つ一つ直接ついていったり、まず試してから確認できるので、レスポンシブデザインを習得するのに短期間で効果的だと思います！ 特にconstraintsの原理を説明してくださった部分が大きな助けになり、alignmentが適用されない状況でなぜそうなるのか指摘してくださったので、私が普段見落としていた部分を新たに理解することができました。 また講義中ファイル関連で困難がありましたが、時差があるにも関わらず素早くフィードバックをくださって感謝でした...！ 今回はこれまでのように一針一針数値を面倒に修正する方式ではなく、講義で学んだ内容をしっかり適用して効率的に作業してみたいです。 本当に本当にありがとうございます😭😭！ 最後まで頑張って完走します！
レスポンシブデザイン講義を通じてお役に立てて嬉しく思います。私もオートレイアウトやconstraintsを使わなかった時代に、一つ一つ多くの手作業をしていた頃を思い出します。今では生産性が数十倍は向上したと申し上げることができると思います。Joyさんも講義内容を通じて実務に適用してみれば、業務効率性を高められると思います。貴重なレビューをありがとうございます。今後計画されていることすべてがうまくいくよう応援いたします。
受講レビュー 1
∙
平均評価 5.0
5
必要な講義を作ってくださってありがとうございます。
フィードバックありがとうございます。講義を通してお役に立てたということで、とても嬉しいです。今後計画されていることすべてがうまくいくよう応援しています〜！
受講レビュー 1
∙
平均評価 5.0
5
既に知っている基本にも関わらず、リマインドの意味で基礎から丁寧で分かりやすく説明してくださるので、簡単に理解できます！実際の事例を例として見せながら説明してくださるのですが、私も類似した事例を自分で探しながら比較して勉強できる点が良いと思います！！！
ありがとうございます。受講生の皆さんが簡単に理解して真似できることを目標に講義を設計したのですが、お役に立てたということで本当に嬉しいです。今後計画されているすべてのことがうまくいくよう応援しています。
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
￥12,669
![Figma デザインを学びながら作成する [BASIC-2025 トレンド更新]講義サムネイル](https://cdn.inflearn.com/public/courses/324603/cover/0569e680-ba04-4103-a357-2b39bcdf3bdb/324603.png?w=420)
