1章：Figma AI活用の基本と準備

前の章に戻る次の章に進む

1章：Figma AI活用の基本と準備

この章の目安学習時間：50分

この章で到達できるゴール：

FigmaでAIを活用するメリットと全体像を理解できる
安全で便利なAIプラグインを自分で見つけられるようになる
本講座で使う主要な無料プラグインをインストールし、利用できる状態になる

【1-1】なぜ今FigmaでAIなのか？

目安の学習時間：10分

AIが変えるUIデザインの現場

近年、AI技術は目覚ましい進化を遂げ、デザイン業界にも大きな変化をもたらしています。
これまで数時間かかっていた作業が、AIの補助によって数十分で終わることも珍しくありません。

例えば、ワイヤーフレーム作成に2時間かかっていたものが、AIを使えば30分で完了する、といった事例も出てきています。

これは、デザイナーの仕事がAIに奪われるということではありません。
むしろ、退屈な作業や時間のかかる作業をAIに任せることで、デザイナーはより創造的で本質的な「考える」仕事に集中できるようになるのです。
これからのデザイナーには、AIをいかにうまく使いこなすかというAIとの協業スキルが求められます。

無料で始めるFigma AI活用の全体像

本講座では、FigmaでのAI活用を以下の4つのフェーズに分けて学習していきます。
この流れを意識することで、デザインプロセス全体を効率化する視点が身につきます。

①情報設計：アイデア出しやユーザーフロー作成をAIで自動化します。
②素材生成：アイコンや画像をAIで瞬時に作り出します。
③画面構築：ワイヤーフレームやコンテンツをAIで高速に組み立てます。
④品質向上：アクセシビリティなどをAIでチェックします。

世の中には高価なAIツールも多く存在しますが、実は無料のプラグインだけでもこれらの大部分は実現可能です。
この講座で、コストをかけずに生産性を上げる第一歩を踏み出しましょう。

【1-2】失敗しないAIプラグインの選び方

目安の学習時間：20分

Figma Communityの歩き方

Figmaのプラグインは、「Figma Community」という場所から探してインストールします。
何十万ものプラグインが公開されており、まさに宝の山ですが、どれを選べばいいか迷ってしまうこともあります。
まずは、Figma Community画面の基本的な見方と、プラグインの検索方法に慣れていきましょう。

プラグイン検索のコツは、具体的な目的（例：「icon」「wireframe」「chart」）で検索することです。
また、検索結果のソート機能で「Trending（トレンド）」や「Popular（人気）」順に並べ替えると、質の高いプラグインを見つけやすくなります。

安全で便利なプラグインを見極める5つのポイント

質の高いプラグインを選ぶためには、いくつかの指標があります。
以下の5つのポイントを確認する癖をつけましょう。

最終更新日：最近更新されているか。古いものは最新のFigmaで動かない可能性があります。
インストール数：多くの人に使われているか。人気の一つの指標です。
評価：星の数やレビュー内容はどうか。
制作者：信頼できる企業や個人が作っているか。
概要欄：機能や使い方がきちんと説明されているか。

考えてみよう！
インストール数が多くても、最終更新日が3年前のプラグインにはどのようなリスクが考えられるでしょうか？

解答例

最新のFigmaのバージョンに対応しておらず、正常に動作しない可能性がある。
セキュリティ上の脆弱性が放置されている危険性がある。

AI生成物の著作権とライセンスの基本

AIプラグインは非常に便利ですが、生成された制作物の「著作権」には注意が必要です。

著作権に関する注意

商用利用の可否について
- プラグインによっては、生成物を商用プロジェクトで利用できない場合があります。
- 必ずプラグインの概要欄や公式サイトでライセンス情報を確認しましょう。
学習データに起因するリスクについて
- AIが何を学習して生成したかによって、意図せず他者の著作物を複製してしまうリスクもゼロではありません。
- 特に、実在するキャラクターやブランドロゴに酷似したものが生成された場合は、使用を避けるのが賢明です。
判断に迷ったら使わない
- これが最も安全な判断です。

練習問題

問題
Figma Communityで「Icon」というキーワードで検索し、「5つのポイント」に基づいて、最も安全で便利だと感じたプラグインを1つ選び、その理由を説明してください。

解答

プラグイン名例：Iconify
理由例：
- インストール数が数百万と非常に多く、信頼性が高い。
- 最終更新日も比較的最近で、メンテナンスされていることがわかる。
- 評価も高く、多くのユーザーが満足している。
- 概要欄に、膨大なアイコンセットが無料で使えることが明記されている。

【1-3】実践準備：本講座で使う全プラグインをインストールしよう

目安の学習時間：10分

本講座で使うプラグインの紹介

この先の章で、様々な無料プラグインを使用していきます。
学習をスムーズに進めるため、この時点で、本講座で利用する全てのプラグインをインストールしておきましょう

Autoflow
- 通常Figmaで手間のかかる、フロー図の矢印修正作業を不要にする「自動化」ツールです。
- 一度接続すれば、オブジェクトを動かしても矢印が自動で追従するため、レイアウト変更や修正を劇的に高速化します。
Relume
- 簡単なテキスト指示から、AIがサイトマップと高品質なワイヤーフレームを一括で自動生成する、非常に強力な「AIデザイン」ツールです。
Iconify
- 100種類以上のアイコンセットから、20万個を超えるアイコンを自由に検索し、Figmaに直接配置できる、デザイナーの必須プラグインです。
Content Reel
- リアルなダミーテキスト（氏名、住所、文章など）や画像をワンクリックで挿入できます。
- デザインのクオリティを格段に向上させます。
Stark
- デザインのアクセシビリティ（特に色のコントラスト比）をチェックし、誰にとっても使いやすいデザインになっているかを確認できます。

「無料枠あり」プラグインについて

リストにある「Relume」「Stark」のプラグインは、無料プランでは機能や使用回数に制限があります。
しかし、本教材の学習目標を達成する上では、無料プランの範囲で十分に対応可能です。
各プラグインの詳しい制限については、3章で実際に使用する際に改めて解説します。

プラグインのインストール手順

Figma Communityからプラグインをインストールする手順は非常に簡単です。
以下の動画を参考に、先ほど紹介した5つのプラグインをすべてインストールしてみましょう。

EX① 特定AIツール深掘り講座_Figma編 1−1

【1-4】1章 -章末課題- 知識チェック

目安の学習時間：10分

問題

架空のクライアントから「ECサイトのデザイン」を依頼されたとします。
Figma AIプラグインを使って効率化できそうな作業を3つ挙げ、それぞれどのようなプラグインが役立ちそうか、その理由と共に説明してください。（この時点では想像で構いません）

解答解説

作業1：商品カテゴリの関係性を可視化するマインドマップ作成
- 役立ちそうなプラグイン：Autoflow
- 理由：テキストで書き出したカテゴリをオブジェクトとしてFigma上に配置し、それらの親子関係や関連性をAutoflowで素早く接続することで、思考を妨げずに視覚的な構造図を効率的に作成できるから。
作業2：商品一覧に表示するダミーの商品画像と価格の用意
- 役立ちそうなプラグイン：Content Reel
- 理由：リアルな商品画像や価格を一括で流し込むことで、手作業で入力する手間が省け、デザインの現実味が増すから。
作業3：ワイヤーフレームの作成
- 役立ちそうなプラグイン：Relume
- 理由： AIに「ECサイトの商品一覧ページ」といった指示を出すだけで、高品質なワイヤーフレームの土台を自動で生成してくれるから。

コーチに相談しよう

今回の課題で考えた「効率化できそうな作業」について、ぜひ専属のコーチに話してみましょう。
より具体的なプラグインの候補や、別の視点からのアドバイスがもらえるかもしれません。

これで「Figma AI活用の基本と準備」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む