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

Figmaのオヌトレむアりト、グリッド、コンストレむンツ機胜を適切に掻甚し、レスポンシブデザむンをマスタヌしたいですかこの講座では、小さなUI芁玠からカヌド、テヌブル、コンポヌネント、Webずアプリの画面たで、レスポンシブデザむンずしお䜜成するスキルを段階的に磚いおいきたす。就職掻動や実務ですぐに圹立぀Figmaの掻甚法を習埗し、様々なデバむスに最適化されたレスポンシブむンタヌフェヌスデザむン胜力をマスタヌしたしょう

難易床 入門

受講期間 36か月

Figma
Figma
Responsive Web
Responsive Web
ui
ui
ux
ux
get a job
get a job
Figma
Figma
Responsive Web
Responsive Web
ui
ui
ux
ux
get a job
get a job

孊習した受講者のレビュヌ

4.9

5.0

김연진

30% 受講埌に䜜成

必芁な講矩を䜜っおくださっおありがずうございたす。

5.0

Joy J

75% 受講埌に䜜成

スタヌトアップでフロント゚ンド開発をしおいたすが、デザむンも䞀緒に担圓しおいたす。 これたでは必芁な郚分だけYouTube資料を探しお手探りでデザむンを進めおいたしたが、今回は短時間でレスポンシブデザむンを習埗する必芁がありたした。 講矩が実習䞭心なので䞀぀䞀぀盎接぀いおいったり、たず詊しおから確認できるので、レスポンシブデザむンを習埗するのに短期間で効果的だず思いたす 特にconstraintsの原理を説明しおくださった郚分が倧きな助けになり、alignmentが適甚されない状況でなぜそうなるのか指摘しおくださったので、私が普段芋萜ずしおいた郚分を新たに理解するこずができたした。 たた講矩䞭ファむル関連で困難がありたしたが、時差があるにも関わらず玠早くフィヌドバックをくださっお感謝でした... 今回はこれたでのように䞀針䞀針数倀を面倒に修正する方匏ではなく、講矩で孊んだ内容をしっかり適甚しお効率的に䜜業しおみたいです。 本圓に本圓にありがずうございたす😭😭 最埌たで頑匵っお完走したす

5.0

고하겜

50% 受講埌に䜜成

私は「なぜ」やらなければならないのかが非垞に重芁な動機ずしお䜜甚する人です。実際、機胜をたくさん知っおいおも適甚する方法を知らなかったり実甚的でなければ、知っおいる情報に察する効甚性も萜ちるし、機胜孊習に察する意味もかなり色耪せおしたうず思いたす。しかし、この講矩が最も良かった郚分は、孊習 -> 実務適甚で䜜られたずいうよりも、実務の困難 -> å­Šç¿’ -> 困難脱出ルヌトで䜜られおいるこずがよく感じられたからでした。実際に説明しおくださる方匏も、この機胜が実務でなぜ重芁なのか -> どのように適甚しおみるこずができるのか + 実際の事䟋構成だったので、より頭にすっず入りたした。そしお分かりやすく説明しおくださったおかげで、挠然ず難しい機胜だず思っおいた郚分に察する負担感をすべお取り陀くこずができたした。そしお就掻生ずしお実務で「なぜ」よく䜿われるのかを講矩の途䞭途䞭で教えおくださったので、孊習をしおいる最䞭にももう䞀床芚えなければず思っお芋盎すようになりたす。おかげで挠然ず恐れおいた実務に察する負担感も枛りたしたありがずうございたす:)

受講埌に埗られるこず

  • レスポンシブデザむンに぀いおの抂念から実践掻甚胜力たで身に぀けたす。

  • フィグマの華「オヌトレむアりト」をマスタヌしおレスポンシブデザむンに掻甚できたす。

  • Figmaのオヌトレむアりト、グリッド、コンストレむンツ機胜を掻甚しお、小さなUIデザむン芁玠から、カヌド、コンポヌネントをレスポンシブに䜜成しおみたす。

  • レスポンシブにりェブずアプリのどちらもデザむン可胜です。

  • 䞀぀のデザむンで様々なデバむス環境に柔軟に察応できる「レスポンシブ」デザむン力を身に぀けるこずができたす。

  • 開発者や関係者に、より効果的にデザむンハンドオフを䌝えるこずができたす。

띠배너

初心者/就掻生がレスポンシブデザむンを「必ず」マスタヌすべき2぀の理由🀔


第䞀の理由。実務者・面接官が重芁芖する重芁な胜力だから。就職のための必須スキル

私が珟堎でプロダクトデザむンの実務者か぀面接官ずしお、そしお入門者の方々を察象にUXコヌチングを行いながら埗た䞀぀のむンサむトがありたす。「就職をしたいなら、志願者が芋せたい胜力ではなく、面接官が芋たがっおいる胜力がなければならない」ずいうこずでした。これはたるで倧孊入詊で出題者の意図を把握しなければならないずいう話のように、ずおも圓然で簡単に感じられたすが、実際に倚くの志願者の方々がこれをきちんず考えおみるこずができず、経隓を積みながら答えは


二぀目の理由。驚異的な業務生産性の向䞊、そしおより良いナヌザヌ゚クスペリ゚ンスデザむン

今日、ナヌザヌは䞀぀のデバむスだけを䜿甚するのではなく、スマヌトフォン、タブレット、ノヌトパ゜コンなど様々な画面サむズのデバむスを行き来しながらWebサむトやアプリを利甚しおいたす。このような環境の䞭で、デザむナヌはどの画面サむズでもナヌザヌが䞍䟿さを感じるこずなく、サヌビスを自然に利甚できるよう蚭蚈しなければなりたせん。

䞊蚘のUberの事䟋を芋るず、同じサヌビスを様々なデバむスで䜿甚する際、むンタヌフェヌス構造ず情報配眮は倉わりたすが、党䜓的に䞀貫したナヌザヌ䜓隓を維持しおいるこずが確認できたす。このように、それぞれ異なる画面でもナヌザヌに統䞀された䜓隓を提䟛できるようにするのが、たさにレスポンシブデザむンです。

レスポンシブデザむンを理解しお適切に掻甚できれば業務生産性が倧幅に向䞊したす。最初から画面サむズに柔軟に察応する構造で蚭蚈・デザむンすれば、デバむス別に別々のデザむンを繰り返し䜜る必芁が枛り、デザむンを再利甚しながら䜜業速床が数倍、数十倍速くなりたす。たた、開発者ずの協業においおも䞍芁な修正やコミュニケヌションコストが削枛され、デザむン・開発間の連携がより効率的に行えるようになりたす。

結果的に、レスポンシブデザむンは単に「芋栄えの良い画面」を䜜る技術を超えお、より少ない劎力でより䞀貫した䜓隓を提䟛する実務の栞心的な胜力です。

こんにちは。プロダクトデザむナヌの゚リックです。👋

私は珟圚、アメリカ・ニュヌペヌクのテック業界でシニアプロダクトデザむナヌずしお働いおいたす。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ずMacの䞡方で実行可胜であり、この講矩で私が䜿甚するショヌトカットキヌに぀いおも、Windows/Mac甚それぞれをお教えしたす。


Q. Figmaの無料版でも講矩を受講できたすか

A. はい、この講矩で孊ぶ内容はFigmaの無料版でも受講できたす。

孊習資料

  • 講矩で扱ったすべおの事䟋を盎接緎習できるように敎理されたFigmaファむルを提䟛したす。

こんな方に
おすすめです

孊習察象は
誰でしょう

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

  • UX/UIデザむナヌず協業を行う、たたは自らデザむンを行う開発者

  • オヌトレむアりト/グリッドなどを掻甚し、䌁画曞䜜成における業務生産性を高めたいPM/PO/サヌビス䌁画者

  • レスポンシブデザむンをよく知らない、たたはオヌトレむアりトコンストレむンツの掻甚法をよく知らないゞュニアたたは珟圹のデザむナヌ

前提知識、
必芁でしょうか

  • Figmaに関する基瀎知識および掻甚法

  • UX/UI デザむンに関する基本抂念

こんにちは
productericです。

5,266

受講生

723

受講レビュヌ

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分)

講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

17ä»¶

4.9

17件の受講レビュヌ

  • juliepj673691님의 프로필 읎믞지
    juliepj673691

    受講レビュヌ 1

    ∙

    平均評䟡 5.0

    5

    30% 受講埌に䜜成

    既に知っおいる基本にも関わらず、リマむンドの意味で基瀎から䞁寧で分かりやすく説明しおくださるので、簡単に理解できたす実際の事䟋を䟋ずしお芋せながら説明しおくださるのですが、私も類䌌した事䟋を自分で探しながら比范しお勉匷できる点が良いず思いたす

    • producteric
      知識共有者

      ありがずうございたす。受講生の皆さんが簡単に理解しお真䌌できるこずを目暙に講矩を蚭蚈したのですが、お圹に立おたずいうこずで本圓に嬉しいです。今埌蚈画されおいるすべおのこずがうたくいくよう応揎しおいたす。

  • ko98329025님의 프로필 읎믞지
    ko98329025

    受講レビュヌ 1

    ∙

    平均評䟡 5.0

    5

    50% 受講埌に䜜成

    私は「なぜ」やらなければならないのかが非垞に重芁な動機ずしお䜜甚する人です。実際、機胜をたくさん知っおいおも適甚する方法を知らなかったり実甚的でなければ、知っおいる情報に察する効甚性も萜ちるし、機胜孊習に察する意味もかなり色耪せおしたうず思いたす。しかし、この講矩が最も良かった郚分は、孊習 -> 実務適甚で䜜られたずいうよりも、実務の困難 -> å­Šç¿’ -> 困難脱出ルヌトで䜜られおいるこずがよく感じられたからでした。実際に説明しおくださる方匏も、この機胜が実務でなぜ重芁なのか -> どのように適甚しおみるこずができるのか + 実際の事䟋構成だったので、より頭にすっず入りたした。そしお分かりやすく説明しおくださったおかげで、挠然ず難しい機胜だず思っおいた郚分に察する負担感をすべお取り陀くこずができたした。そしお就掻生ずしお実務で「なぜ」よく䜿われるのかを講矩の途䞭途䞭で教えおくださったので、孊習をしおいる最䞭にももう䞀床芚えなければず思っお芋盎すようになりたす。おかげで挠然ず恐れおいた実務に察する負担感も枛りたしたありがずうございたす:)

    • producteric
      知識共有者

      䞁寧に曞いおくださったレビュヌありがずうございたす。私もレスポンシブデザむン、その䞭でも特にオヌトレむアりトを初めお孊んで勉匷した時、これを実務でどのように適甚すべきかよく分からず、もどかしさを感じた時のこずを思い出したすね。぀たり機胜自䜓を孊ぶためではなく、レスポンシブデザむンずいう問題を解決する方法を孊びたかったのですが、それが簡単ではなかった蚘憶がありたす。そのためこの講矩を䜜る際も、受講生の皆さん、特に入門者や就職を準備しおいる方々が、どうすればより理解しやすく実務に適甚可胜なスキルを身に぀けられるかを考えながら、カリキュラムず内容を構成しようずしたした。぀たり、この講矩を聞いおレスポンシブデザむンをマスタヌした志願者が、面接官の立堎からこの方はレスポンシブデザむン胜力の準備ができおいるなず思っおもらえるようにしなければず目暙を立おお講矩を䜜ろうずしたした。この講矩を通じお挠然ずしお恐ろしかった実務の負担感が枛ったずおっしゃるので!!これ以䞊ない喜びで、この講矩を䜜った甲斐を倧きく感じたす :) 改めお貎重なレビュヌおよびフィヌドバックを残しおくださっおありがずうございたす。今埌蚈画されおいるすべおのキャリア蚈画がうたくいくこずを心から応揎いたしたす。

  • goodrain2626님의 프로필 읎믞지
    goodrain2626

    受講レビュヌ 1

    ∙

    平均評䟡 5.0

    修正枈み

    5

    75% 受講埌に䜜成

    スタヌトアップでフロント゚ンド開発をしおいたすが、デザむンも䞀緒に担圓しおいたす。 これたでは必芁な郚分だけYouTube資料を探しお手探りでデザむンを進めおいたしたが、今回は短時間でレスポンシブデザむンを習埗する必芁がありたした。 講矩が実習䞭心なので䞀぀䞀぀盎接぀いおいったり、たず詊しおから確認できるので、レスポンシブデザむンを習埗するのに短期間で効果的だず思いたす 特にconstraintsの原理を説明しおくださった郚分が倧きな助けになり、alignmentが適甚されない状況でなぜそうなるのか指摘しおくださったので、私が普段芋萜ずしおいた郚分を新たに理解するこずができたした。 たた講矩䞭ファむル関連で困難がありたしたが、時差があるにも関わらず玠早くフィヌドバックをくださっお感謝でした... 今回はこれたでのように䞀針䞀針数倀を面倒に修正する方匏ではなく、講矩で孊んだ内容をしっかり適甚しお効率的に䜜業しおみたいです。 本圓に本圓にありがずうございたす😭😭 最埌たで頑匵っお完走したす

    • producteric
      知識共有者

      レスポンシブデザむン講矩を通じおお圹に立おお嬉しく思いたす。私もオヌトレむアりトやconstraintsを䜿わなかった時代に、䞀぀䞀぀倚くの手䜜業をしおいた頃を思い出したす。今では生産性が数十倍は向䞊したず申し䞊げるこずができるず思いたす。Joyさんも講矩内容を通じお実務に適甚しおみれば、業務効率性を高められるず思いたす。貎重なレビュヌをありがずうございたす。今埌蚈画されおいるこずすべおがうたくいくよう応揎いたしたす。

  • jm0park님의 프로필 읎믞지
    jm0park

    受講レビュヌ 2

    ∙

    平均評䟡 5.0

    5

    80% 受講埌に䜜成

    貎重な講矩をありがずうございたすFigmaファむルも共有しおいただいお、盎接䞀緒に実習できお良かったです。ただ、最初に資料があるこずを玠早く認識できなくお、講矩受講䞭に探し回りたしたが😊😊 盎感的に比范、䟋瀺、比喩などで説明しおくださっお初心者でも簡単に理解でき、Figma機胜の䞭でも目立たない郚分たで、どんな効果ず掻甚床があるのかが分かっおずおも良かったですさらにセクションごずのクむズを通しお䞀サむクルの内容を再び思い起こしながら埩習するこずになっお、孊ぶ楜しさがありたす。

    • stumire9262님의 프로필 읎믞지
      stumire9262

      受講レビュヌ 1

      ∙

      平均評䟡 5.0

      5

      30% 受講埌に䜜成

      必芁な講矩を䜜っおくださっおありがずうございたす。

      • producteric
        知識共有者

        フィヌドバックありがずうございたす。講矩を通しおお圹に立おたずいうこずで、ずおも嬉しいです。今埌蚈画されおいるこずすべおがうたくいくよう応揎しおいたす〜

    productericの他の講座

    知識共有者の他の講座を芋おみたしょう

    䌌おいる講座

    同じ分野の他の講座を芋おみたしょう