강의

멘토링

로드맵

Inflearn brand logo image
Design

/

UI/UX

レスポンシブUIデザイン 完全攻略 with フィグマ

Figmaのオートレイアウト、グリッド、コンストレインツ機能を適切に活用し、レスポンシブデザインをマスターしたいですか?この講座では、小さなUI要素からカード、テーブル、コンポーネント、Webとアプリの画面まで、レスポンシブデザインとして作成するスキルを段階的に磨いていきます。就職活動や実務ですぐに役立つFigmaの活用法を習得し、様々なデバイスに最適化されたレスポンシブインターフェースデザイン能力をマスターしましょう!

45名 が受講中です。

  • uxeric
반응형디자인
UXUI
피그마
오토레이아웃
취업
Figma
Responsive Web
ui
ux
get a job

こんなことが学べます

  • レスポンシブデザインについての概念から実践活用能力まで身につけます。

  • フィグマの華「オートレイアウト」をマスターしてレスポンシブデザインに活用できます。

  • Figmaのオートレイアウト、グリッド、コンストレインツ機能を活用して、小さなUIデザイン要素から、カード、コンポーネントをレスポンシブに作成してみます。

  • レスポンシブにウェブとアプリのどちらもデザイン可能です。

  • 一つのデザインで様々なデバイス環境に柔軟に対応できる「レスポンシブ」デザイン力を身につけることができます。

  • 開発者や関係者に、より効果的にデザインハンドオフを伝えることができます。

띠배너

初心者/就活生がレスポンシブデザインを「必ず」マスターすべき2つの理由🤔


第一の理由。実務者・面接官が重要視する重要な能力だから。就職のための必須スキル(!)

私が現場でプロダクトデザインの実務者かつ面接官として、そして入門者の方々を対象にUXコーチングを行いながら得た一つのインサイトがあります。「就職をしたいなら、志願者が見せたい能力ではなく、面接官が見たがっている能力がなければならない」ということでした。これはまるで大学入試で出題者の意図を把握しなければならないという話のように、とても当然で簡単に感じられますが、実際に多くの志願者の方々がこれをきちんと考えてみることができずに、経験を積みながら答えは


二つ目の理由。驚異的な業務生産性の向上、そしてより良いユーザーエクスペリエンスデザイン

今日、ユーザーは一つのデバイスだけを使用するのではなく、スマートフォン、タブレット、ノートパソコンなど様々な画面サイズのデバイスを行き来しながらWebサイトやアプリを利用しています。このような環境の中で、デザイナーはどの画面サイズでもユーザーが不便さを感じることなく、サービスを自然に利用できるよう設計しなければなりません。

上記のUberの事例を見ると、同じサービスを様々なデバイスで使用する際、インターフェース構造と情報配置は変わりますが、全体的に一貫したユーザー体験を維持していることが確認できます。このように、それぞれ異なる画面でもユーザーに統一された体験を提供できるようにするのが、まさにレスポンシブデザインです。

レスポンシブデザインを理解して適切に活用できれば業務生産性が大幅に向上します。最初から画面サイズに柔軟に対応する構造で設計・デザインすれば、デバイス別に別々のデザインを繰り返し作る必要が減り、デザインを再利用しながら作業速度が数倍、数十倍速くなります。また、開発者との協業においても不要な修正やコミュニケーションコストが削減され、デザイン・開発間の連携がはるかに効率的に行えるようになります。

結果的に、レスポンシブデザインは単に「見栄えの良い画面」を作る技術を超えて、より少ない労力でより一貫した体験を提供する実務の核心的な能力です。

こんにちは。プロダクトデザイナーのエリックです。👋

私は現在、アメリカのニューヨークに位置するグローバルテック企業TKWW(The Knot Worldwide)でシニアプロダクトデザイナーとして働いています。UXリサーチからUIデザイン、デザインシステムの構築・管理まで、UX/UI全般にわたる実務業務を担当しており、面接官として、応募者のポートフォリオを検討し評価する役割も担っています。そのため、入門者や就職を準備している方々にどのような能力が実際に必要なのかをよく理解しています。そしてAmazonベストセラーに選ばれたUXデザイン入門者向けの書籍『Design thinking for beginners』を執筆もしました。


今回の講義を作ることになったきっかけは、私が実務でレスポンシブデザインとそのためのFigmaの核心機能を本格的にマスターした後、デザインの生産性と効率性が数倍以上向上した経験をしたからです。その核心には、Figmaのオートレイアウト、グリッド、コンストレインツ機能を活用した体系的な画面設計方式がありました。

以前は同じデザインを画面サイズ別に対応するために新しく作成し、修正するのに時間がかかりすぎていました。しかし今は一つのデザインで様々なデバイスに柔軟に対応できるレスポンシブなUIデザインを構築できるようになり、その結果、繰り返し作業は減り、デザイナーと開発者間の協業もはるかにスムーズになりました。私は自分の経験と知識、実務ノウハウを基に、レスポンシブデザインは入門者・就職準備生の方には就職の可能性を大きく高め、レスポンシブデザインを知らない現職デザイナーには業務生産性を大きく向上させることができるようお手伝いします。この機会にレスポンシブデザインをしっかりと学び、キャリア成長の機会を作ってみてください。

この講義では何を学ぶことになりますか?🧑‍🏫

レスポンシブデザインの概念と原理、正しく理解する

なぜレスポンシブデザインが必要なのか、どのような問題を解決するのかを理論的に整理し、基礎をしっかりと固めます。デバイス別のユーザーエクスペリエンスの違いを理解し、今後の実習の基盤となる核心概念を明確に習得します。

「オートレイアウトとリサイジングオプション」、レスポンシブデザインのためのFigmaの核心武器をマスターする

Figmaの真の力は、オートレイアウトとリサイジングオプションにあります。実務でよく使われるコンポーネントと画面を作りながら、自動整列と柔軟なレイアウト配置の原理を実戦事例と共に身につけます。

グリッドシステム完全攻略

グリッドはレスポンシブデザインの隠れた設計図です。様々な画面サイズでも一貫したUIを構成できるよう、グリッドの原理と実際の活用法を体系的に学びます。

Constraintsで柔軟なレスポンシブオブジェクトを作る

画面が縮小したり拡大したりしても崩れないレイアウトの秘密、それがConstraintsです。様々なデバイスサイズに対応する柔軟なオブジェクト構成方法を実習と共に学んでみます。

実践事例で学ぶレスポンシブデザイン

理論だけでは不十分です。様々な実際のUI例を通じて、今すぐ実務に適用できるレスポンシブデザインセンスを身につけましょう。

UIデザインのための꿀팁🍯大放出

講義では、私が実務で実際に使用しているプラグインや資料を惜しみなく共有します。途方に暮れていたレスポンシブ作業がずっと楽になるよう、すぐに適用可能な実戦のコツが詰まっています。

この講義を通して何を作ってみるのでしょうか?📐

ウェブとアプリ環境に最適化されたレスポンシブUIを直接設計し実装してみます。様々なデバイスに自然に対応する実務型レイアウトを作ってみましょう。

レスポンシブで「アプリ」をデザインする

モバイルアプリのUIが様々な画面サイズと解像度にどのように対応すべきかを学び、実際のアプリ画面をレスポンシブに実装してみます。

レスポンシブ「ウェブ」デザインを作ってみよう

ウェブ環境でのレスポンシブUI構成方法を習得し、デスクトップからモバイルまで自然に拡張されるレイアウトを直接設計してみます。

レスポンシブなカードを作る

画像とテキストが含まれたコンテンツカードを、様々な画面幅に応じて自然に変形されるように設計してみます。

テーブル作成

配置、幅、セル構成など様々な状況に対応できるレスポンシブテーブルUIを構成し、実戦デザイン能力を身につけます。

レスポンシブで作るUIコンポーネント

ボタン、入力フィールドなど実務でよく使われるUIコンポーネントをレスポンシブに設計し、様々な画面サイズに対応可能で再利用可能な構造を身につけます。

その他様々な事例練習

実務でよく遭遇する様々なUI状況を練習しながら、レスポンシブデザインの感覚を広げていきます。反復的な実習を通じて複雑なレイアウトにも柔軟に対応できる能力を身につけます。

こんな方におすすめです 🧭

🎯 初心者 / 就活生

レスポンシブデザインの核心概念と実務スキルを身につけたいデザイン入門者または就職準備生の方におすすめします。実務にすぐ適用可能なFigmaの使い方と、ポートフォリオに強力にアピールできるレスポンシブUI制作能力を身につけることができます。


💻 現職デザイナー

グリッド、オートレイアウトなどレスポンシブの核心機能を身につけて実務完成度を高めたいデザイナーの方々におすすめします。様々な画面に最適化されたUI設計能力を身につけることができます。


🧩企画者 / PM / PO

ワイヤーフレームを効率的に作成し、デザイナーとスムーズに協業したい企画者・PM・POの方に適しています。Figmaレイアウト機能を理解すれば、画面設計とコミュニケーションの両方が楽になります。


🛠開発者

フロントエンド開発者であれば、デザイナーの作業方式を理解し、協業効率を高める機会を得ることができます。直接デザインを扱う場合でも、レスポンシブUIの構造と原理を身につけて、開発前段階の設計まで自信を持って準備することができます。

よくある質問 📌

Q. 非専攻者でも受講できますか?

A.はい、この授業は入門者と非専攻者に合わせて設計した科目です。ただし、前提知識であるUXデザインに関する概念的な基礎とUIデザインのための基礎知識、Figmaの基本機能を習得してから受講されることをお勧めします。UX/UIデザインを始めたばかりの段階でしたら、私がInflearnに開設した入門者のためのUXデザイン概論と、Figmaを活用したUIデザイン講義を先に受講していただければ、この講義を通してレスポンシブデザインを何倍も速くマスターできます。


Q. どうすれば反応型デザインを素早くマスターできるでしょうか?

A. レスポンシブデザインの基本原理とFigmaツールの活用法を身につけたら、数多くの事例を「直接」練習してみることが最も重要だと思います。この講義では基礎から様々な実戦事例を準備しており、皆さんが一緒にやってみながらマスターできるようにガイドいたします。しかし、最も重要なことは何よりも皆さんが講義を見るだけでなく「直接」一緒にやってみることです。


Q. WindowsとMacBookで学習可能ですか?

A.可能です。この講義はFigmaツールを基準に作成されました。Figmaはインターネットブラウザベースのソフトウェアなので、WindowsとMacBookの両方で実行可能であり、この講義で私が使用するショートカットについても、Windows/MacBook用それぞれをお教えします。


Q. Figmaの無料版でも講義を受講できますか?

A. はい、この講義で学ぶ内容はFigmaの無料版でも受講できます。

学習資料

  • 講義で扱ったすべての事例を直接練習できるように整理されたFigmaファイルを提供します。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 就職の目標をより早く達成したいUX/UIデザインの入門者および就活生

  • UX/UIデザイナーと協業を行う、または自らデザインを行う開発者

  • オートレイアウト/グリッドなどを活用し、企画書作成における業務生産性を高めたいPM/PO/サービス企画者

  • レスポンシブデザインをよく知らない、またはオートレイアウト/コンストレインツの活用法をよく知らないジュニアまたは現役のデザイナー

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

  • Figmaに関する基礎知識および活用法

  • UX/UI デザインに関する基本概念

こんにちは
です。

4,847

受講生

638

受講レビュー

298

回答

4.8

講座評価

7

講座

현재 뉴욕의 글로벌 테크 회사 The Knot Worldwide에서 시니어 프로덕트 디자이너로 일하고 있습니다.

뉴욕에 오기 전에는 서울에서 UI기획자로 일을 했습니다.

브런치 매거진 "디자인, 그리고 프러덕트"와 UX, UI 지식과 정보를 공유하는 "뉴욕 UX디자이너" 인스타그램페이스북을 운영하며 디자이너 및 예비 디자이너들과 소통하고 있습니다.

개인적으로는 세 아이👶의 아빠이며 요리🍲, 교육🏫에 관심이 많습니다.

 

집필 및 강의

• "뉴욕 프로덕트 디자이너가 알려주는 UX디자인 입문 A to Z" 책 출간 (링크: Yes24, 알라딘, 교보문고

• 퍼블리 아티클 "서비스의 첫 인상을 결정하는 3초: 랜딩 페이지 UX 4가지 원칙" 발행

• Samsung SW Academy for Youth (SSAFY) UX/UI다자인 및 피그마 강사

• 1:1 멘토링 및 기업 강의 진행 (토픽: UX, UI디자인, UX퍼실리테이션, UX/UI 포트폴리오  제작 및 발행)

 

경험 및 경력

• (현) 뉴욕 The Knot Worldwide 시니어 프로덕트 디자이너

(전) 서울 Pantech 모바일 앱 UI기획자

• 뉴욕 기반의 다수 스타트업과 UX/UI 컨설팅 프로젝트 진행

• 뉴욕 School of Visual Arts 디자인 대학원 졸업 / 전공: Interaction Design

• 한동대학교 학부 졸업 / 전공: 산업디자인

カリキュラム

全体

40件 ∙ (5時間 10分)

講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

期間限定セール、あと4日日で終了

¥58

24%

¥11,768

uxericの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

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