inflearn logo
知識共有
inflearn logo

ユーザーフローの設計からプロトタイプの実装まで

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

35名 が受講中です。

難易度 初級

受講期間 無制限

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

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

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

受講レビュー

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

似ている講座

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

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

¥53,130

30%

¥9,709