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

💭 こんな悩み、抱えたことはありませんか？

• 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機能が追加されたことで、エデュケーションプランのポリシーが変更されました。現在は教育機関の認証がなければエデュケーションアカウントの使用が不可能な状態です。

従来の講義でご案内した「受講証明のキャプチャ提出」方式ではエデュアカウントの申請が難しくなり、これにより講義中・後半部の高度な機能（条件、変数、フロー制御など）の実習に制限が生じる可能性があります。

現在、代替案を検討中であり、解決策が確認され次第、お知らせを通じてご案内いたします。

ご不便をおかけして申し訳ございませんが、何卒ご理解いただけますようお願い申し上げます。