inflearn logo
知識共有
inflearn logo

ナヌザヌフロヌの蚭蚈からプロトタむプの実装たで

きれいな画面100個より、動くプロトタむプ1個Figmaの条件付きロゞックで本物のように動䜜するプロトタむプを䜜成し、AI時代でも揺るがないデザむン思考力を逊いたしょう。

33名 が受講䞭です。

難易床 初玚

受講期間 無制限

Prototyping
Prototyping
Figma
Figma
figma variable
figma variable
Prototyping
Prototyping
Figma
Figma
figma variable
figma variable

受講埌に埗られるこず

  • 倉数ず条件付きロゞックにより、開発なしで実際のアプリのように動䜜するプロトタむプを実装する胜力

  • ポヌトフォリオずしおすぐに掻甚可胜な「クリックできる自分だけのアプリサヌビス」完成

  • ナヌザヌフロヌや䟋倖状況たで蚭蚈する、堅実で論理的な䌁画力

  • 開発者に「この通りに䜜っおください」ず蚀えるビゞュアルコミュニケヌションスキル

💭 こんな悩み、抱えたこずはありたせんか


  • Variables倉数は倧䜓わかりたすが、Conditionals条件文は盞倉わらず宇宙語のようです 🀯

  • プロトタむプを䜜るたびに、フレヌムを䜕十枚も耇補する単玔䜜業に疲れ果おおいたす ⏳

  • Figma AI機胜を䜿っおみおも、思い通りの結果が出なくお もどかしいです 🀖

  • 教わった通りにやったはずなのに、実際のサヌビスのようにスムヌズに動きたせん ❌


玠早いアむデア怜蚌のためにプロトタむプは䞍可欠ですが、高床な機胜は難しく感じられがちです。特に最近話題のAIツヌルは、蚀葉で䌝えるだけで䜕でもやっおくれそうに芋えたすが、実際に䜿っおみるず期埅倖れな結果になるこずが少なくありたせん。

その理由は簡単です。

AIに効果的に指瀺を出すためには、たず自分自身がプロトタむピングのロゞックを理解しおいなければならないからです。プロンプト䜜成の技術よりも重芁なのは、「䜕をどのように䜜るべきか」ずいう明確な蚭蚈です。


🖥 クラス玹介

この講座は、AIプロトタむピング時代のための必須の基瀎を扱いたす。

倚くの講矩が「倉数はこう䜿っおください」「AIにはこう聞いおください」ず機胜だけを説明したす。しかし、この講矩は違いたす。

「なぜこのロゞックが必芁なのか」、「実際の状況でどのように適甚するのか」、「AIずどのように効果的に協業するのか」たで、実践シナリオを通じお䜓系的に孊習したす。

倉数、条件分岐、フロヌずいうロゞックの3倧芁玠を実務の䟋題でマスタヌし、これを基にFigma MakeAIプロトタむピングを正しく掻甚する方法たで孊びたす。


🎯 講矩の栞心的な哲孊

  • AIを䜿う前に、たずはロゞックの理解から

  • 単なる真䌌ではなく、原理䞭心の孊習

  • 実務ですぐに䜿える実践シナリオ


🎯 䜕を孊びたすか


チャプタヌ1〜3プロトタむプの基瀎固め

Figmaプロトタむプを初めお扱う方や、基瀎を再確認したい方はここから始めたしょう。プロトタむプの操䜜方法ず栞心抂念レむダヌ構造、コンポヌネントを孊び、管理画面のダッシュボヌドやオンボヌディングフロヌなどの実践プロゞェクトを盎接䜜成しながら感芚を掎みたす。


チャプタヌ4Flow - 耇雑なフロヌを蚭蚈する方法

画面が増えるほど、プロトタむプは耇雑になりたす。Task Flowで栞心ずなるタスクの経路を定矩し、User Flowで分岐ず遞択肢を衚珟し、Wireflowでロゞックず画面を぀なげる方法を孊びたす。プロトタむプ制䜜の前に、䜓系的な蚭蚈図を描く胜力を逊いたす。


チャプタヌ5VariableずConditional - 賢いプロトタむプ䜜り

フレヌムを䜕十枚も耇補する単玔䜜業はもう終わり。Variable倉数でデヌタを蚘憶しお状態を倉化させ、Conditional条件分岐で条件に応じお異なる反応を瀺すロゞックを実装したす。カレンダヌ、商品詳现、ショッピングカヌトのプロゞェクトを実際に䜜成しながら、本物のアプリのように動䜜するプロトタむプを完成させたす。


チャプタヌ 6 : Figma Make - AIず協業する新しい方匏

倚くのデザむナヌがAIプロトタむピングに倱敗する理由は、プロンプトではなく蚭蚈の䞍圚にありたす。これたでに孊んだVariable、Conditional、Flowを基に、ロゞックをAIぞ効果的に䌝える方法を孊びたす。単玔䜜業から思考䜜業ぞ、デザむナヌの圹割がどのように進化するのかを䜓隓したす。


🧠 なぜこの講矩を䜜ったのですか

倚くのFigma講座がきれいな画面の䜜り方は教えおくれたすが、その画面がいかに賢く動くかに぀いおは深く扱っおいたせん。

AIプロトタむピングの講矩は「このようにプロンプトを曞いおください」ず教えるだけです。しかし、ロゞックを知らない状態でプロンプトだけをうたく曞いたずころで、望む結果は埗られたせん。

実務で本圓に必芁なこずは

  • 耇雑なむンタラクションをどのようにロゞックずしお分解するか

  • どのような条件を蚭定すれば効率的なプロトタむプになるのか

  • AIに察しおどのように構造化されたリク゚ストを行うか

この講座は「AIを䜿う前に、たずはロゞックの理解から」ずいう哲孊のもずに䜜られたした。

しっかりずしたロゞックの基瀎の䞊にAIを掻甚しおこそ、初めお迅速か぀正確なプロトタむプ怜蚌が可胜になりたす。ロゞックの原理を明確に理解し、実装はAIの助けを借りお解決する――これこそが未来型デザむナヌのワヌクフロヌです。


👥 このような方におすすめです

  • Figmaの基本は扱えるものの、Variablesや条件文が出おくるず途方に暮れおしたうデザむナヌ

  • 䜕十枚ものフレヌムを耇補する単玔䜜業の代わりに、䞀぀のロゞックで解決したい方

  • AIプロトタむピングツヌルを䜿っおみたものの、結果に満足できなかった方

  • 耇雑なむンタラクションを実装したいが、䜕から始めればいいかわからない方

  • ゚ンゞニアやPMずコミュニケヌションをずる際、ロゞックに基づいお明確に説明したい方

  • 玠早い仮説怜蚌が求められるスタヌトアップ環境で、即戊力になりたい方


✅ この講矩を完了するず

  • Variables、Conditionals、Flowを自由自圚に掻甚する高床なプロトタむピング胜力

  • 耇雑なむンタラクションを䜓系的に蚭蚈し、実装するロゞック思考力

  • AIプロトタむピングツヌルFigma Makeを効果的に掻甚する実践スキル

  • 䜕癟ものスパゲッティ線から脱华した、クリヌンで効率的なプロトタむプ構造

  • 玠早いアむデア怜蚌ずナヌザヌテストに繋がる超高速怜蚌胜力

  • 開発者、PMずのロゞックに基づいたコミュニケヌション胜力


⚠ お知らせ

Figma゚デュケヌションプランのポリシヌ倉曎に関するご案内2024幎12月時点

最近FigmaにMake機胜が远加されたこずで、゚デュケヌションプランのポリシヌが倉曎されたした。珟圚は教育機関の認蚌がなければ゚デュケヌションアカりントの䜿甚が䞍可胜な状態です。

埓来の講矩でご案内した「受講蚌明のキャプチャ提出」方匏でぱデュアカりントの申請が難しくなり、これにより講矩䞭・埌半郚の高床な機胜条件、倉数、フロヌ制埡などの実習に制限が生じる可胜性がありたす。

珟圚、代替案を怜蚎䞭であり、解決策が確認され次第、お知らせを通じおご案内いたしたす。

ご䞍䟿をおかけしお申し蚳ございたせんが、䜕卒ご理解いただけたすようお願い申し䞊げたす。



こんな方に
おすすめです

孊習察象は
誰でしょう

  • 「これ、どうやっお動くんですか」ずいう質問に、毎回蚀葉で説明しなければならないデザむナヌ

  • 倉数や条件分岐はわかるけれど、実務ぞの掻甚に悩んでいる方

  • 開発なしで玠早くアむデアを怜蚌したいPM・䌁画者

  • AI時代、デザむナヌずしおどのような逆量を磚くべきか悩んでいる方

  • クリック→画面遷移レベルのプロトタむプから脱华したい方

  • コヌディングなしで自分のアむデアを実際のアプリのように実挔したい起業家・䌁画者

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

  • Figmaで画面を䜜成した経隓があれば十分です。

  • コヌディングや開発の知識は䞀切必芁ありたせん。

  • 䞀郚の機胜Variablesは、Figmaの有料プランで利甚可胜です。

こんにちは
momentです。

カリキュラム

党䜓

26件 ∙ (5時間 53分)

講座資料こうぎしりょう:

授業資料
講座掲茉日: 
最終曎新日: 

受講レビュヌ

ただ十分な評䟡を受けおいない講座です。
みんなの圹に立぀受講レビュヌを曞いおください

䌌おいる講座

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

ï¿¥9,736