【Figma Make】特徴・無料でできること・基本の使い方をWebデザイン初心者さん向けに解説

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

THE REAL STORY

億を稼ぐ
スクールの
『裏側』

※ 期間限定公開
ビジネスの設計図を
全て見せます。

Skillhub代表
吉田 光利

「実はこのSkillhubも、
僕１人で作りました。 0から作り上げて、生徒6万人まで育てたノウハウ公開します。 」

裏側を無料で覗く

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、8月30日まで）

今すぐ受け取る（無料）

こんなこと、ありませんか。

• 教材どおりのサイトは作れた。でも自分のサイトを作ろうとしたら、白紙の画面で手が止まった
• AIでWebサイトが作れると聞いたけれど、解説を読むと制作現場のプロ向けで難しい
• 結局、自分のデザインの勉強に使えるのかが分からない

この記事で紹介する Figma Make（フィグマ メイク） は、Figmaに搭載されたAI機能です。
文章で頼むと、Webページを作ってくれます。

ただ、この機能の解説は現役のデザイナーやエンジニア向けのものが多く、専門用語もたくさん出てきます。
そこでこの記事では、Web制作を学び始めた方に向けて、「これ、自分のサイト作りに使えるの？」という一点に絞ってお話しします。

見ていくのは、次の3つです。

• Figma Makeって、何ができるの？
• 実際に頼むと、どんなものが出てくる？
• で、おしゃれなサイトは作れるの？

• Figma Makeとは
• そもそもFigmaって？
• Figma Make＝話しかけるだけで動くWebページが出てくる
• どんなものが作れる？
• Figma Design とは何が違う？互換性は？
• 無料でどこまで使える？
• Figma Makeを使ってみよう
• まずはFigma Makeを開く
• ① ざっくり任せてみる
• ② 要件を指定する
• ③ 作ったページを直す ── 3つの方法
• で、憧れのあのサイトは作れるの？
• AIが出せないもの
• 憧れのあのサイトも、実は「整った部品」でできています
• 見方を変えると、これは「見本帳」です
• まとめ
• Figma Makeに任せるところ、自分でやるところ
• 他のAIツールとの使い分け
• 結論 ── AIが引き受けてくれるのは「整うまで」

Figma Makeとは

そもそもFigmaって？

Figma（フィグマ） は、Webサイトやアプリのデザインを作るためのツールです。 Webサイトやアプリの画面設計、ワイヤーフレーム、プロトタイプ（動きの確認）、スライド資料など幅広い用途に対応しており、世界的にユーザーが多い存在。

画像元：https://www.figma.com/ja-jp/

Webデザイン/UIデザインによく使われる Figma（Figma Design）は、Web制作を学び始めると、ほぼ確実に名前を聞くことになるでしょう。Figma Designについては、デザインカンプ（完成見本）を作る場所、と思っておけば大丈夫です。

ソフトをインストールしなくてもブラウザで動き、複数人が同じファイルを同時に触れるのが特徴で、いまや制作現場の定番になっています。

そのFigmaに追加されたAI機能が、今回紹介する Figma Make です。

Figma Make＝話しかけるだけで動くWebページが出てくる

Figma Makeはひとことで言うと、文書の指示に基づいて、Webページを作ってくれるAIです。

画像元：https://www.figma.com/ja-jp/make/

「それってChatGPTに『コードを書いて』と頼むのと何が違うの？」と思うかもしれません。
違いは、出てきたものが、その場で動くことです。

チャットAIに頼むと、返ってくるのは文字の羅列（コード）です。それを自分でファイルに貼り付けて、保存して、ブラウザで開いて……とやって、はじめて形が見えます。
Figma Makeは、頼んだ数十秒後には画面の右側に、そのまま押せるWebページが表示されます。ボタンを押せば反応するし、スマホ表示に切り替えることもできます。

そして、気に入らないところがあれば、そのプレビューを見ながら「ここをこうして」と頼めば直ります。

【早わかり】Figma Make はこんなツール

どんなものが作れる？

Figmaの公式ギャラリー（Figma Community）では、Figma Makeで作られたものが公開されています。
記事作成時の人気No.1は、Fortune Cookie!というおみくじアプリのようなものでした。

https://www.figma.com/community/make

それぞれ、クリックすると詳細・プレビューが開けます。 「Webページ」で絞り込んでみてると、以下のような企業サイト風、カフェサイト風のようなデザインと出会えます。

画像元：https://auth.figma.site/

画像元：https://orchid-ruler-71417662.figma.site/

こちらのページはGoogle Antigravity入門で作ったカフェページに似ていますね。

ちなみに作例を眺めていると、あることに気づきます。
どれも、なんとなく似た顔をしているのです。この話は記事の後半でもう一度出てきます。

Figma Design とは何が違う？互換性は？

普段Figmaで使うデザイン機能を Figma Design と呼びます。
図形や文字を自分の手で置いていく、あのおなじみの画面です。

同じFigmaの中にありますが、Figma Make とはやっていることがまったく違います。

では、この2つは行き来できるのでしょうか。
Figma Designで作ったデザインを、Figma Makeに材料として渡すことはできます。

そして逆方向、Figma Makeで作ったものをFigma Design側に持っていく 「デザインをコピー」 という機能もあります。持っていければ、いつものFigmaで細かく調整したり、カードデザインなどを好きに作り込んでいけます。

ただし、ここに無料プランの壁があります。
「デザインをコピー」は、有料プラン（プロフェッショナル以上）でのみ使える機能です。
また、有料プランでもFigma Designに持っていけるのは見た目だけです。クリックしたときの動きなどは引き継がれません。

実際、無料プランでこのボタンを押すと、こんな画面が出ます。

つまり、こういうことです。

この記事は無料の範囲で進めるので、Makeの中だけで仕上げるやり方でご紹介します。

無料でどこまで使える？

Figma Makeは 無料プラン（Starter）でも試せます。
この記事の内容もすべて無料の範囲で試したものです。

ただし、正直にお伝えすると無料枠は、かなり小さいです。
Figmaの AI機能は 「AIクレジット」 という持ち点を消費する仕組みになっていて、無料プランの場合はこうなっています。

では、1回の指示でどれくらい減るのか。
公式が挙げている目安がこちらです。

ただし、これはあくまで目安です。
実際にこの記事のために1ページのポートフォリオサイトを作ってみたところ、消費は 44クレジット でした。公式の目安よりだいぶ軽いですね。

おそらく、作るものがシンプルなほど軽く、複雑なほど重くなるのだと思います。
1ページのWebサイトなら44、データを扱うアプリなら100以上、といったイメージでしょうか。

44クレジットで計算すると、無料枠（月500）で作れるのは 11回ぶん。1日の上限（150）なら3回です。
「たっぷり使える」とは言えませんが、「1回試したら終わり」でもありません。

ただし、これはゼロから作り直した場合の回数です。
作ったあとに「ここを直して」と頼むたびにも、そのつど減っていきます。「とりあえず作って、気に入らなければまた作ればいい」を繰り返すと、月末を待たずに底をつく ── そのくらいの感覚でいてください。

このことは、これから実際に触っていくうえで効いてきます。覚えておいてください。

※ 上限や消費量は変わることがあります。最新の情報は公式サイトでご確認ください。

Figma Makeを使ってみよう

ここからは実際に触っていきます。
題材は 「自分のポートフォリオサイト」。
Web制作を学んでいる方が、学習の成果として、これからの活動のために、必ず作るページです。

なお、いちばん知りたいであろう「憧れのあのサイトみたいなものは作れるの？」は、ひととおり触ったあとの後半でお答えします。実際に動かしたものを見てからのほうが、話が早いからです。

まずはFigma Makeを開く

Figma Makeは、Figmaのアカウントがあればすぐに開けます。
特別なインストールは必要ありません。

まず、Figmaにログインします。

出典：https://www.figma.com/ja-jp/

Figma Make を開く前に、プランとAIクレジットの確認をしてみましょう。
左側メニューの「内容を確認」を開きます。

プランごとの使用制限、使用量が表示されます。
下図の場合は無料のスタータープランなので、AIクレジットは月500、日次クレジットは150と出ています。

Figma Makeを開く

ホーム画面右上に、Figmaサービスの一覧があります。
「Make」を選択して開きます。

中央に指示を書くためのテキスト入力欄が表示された画面に遷移します。
こちらが Figma Make のスタート画面です。

スタート画面はとてもシンプルで、一般的なAIチャットとほぼ同じ構成です。

今回は特にFigma Designにあるデザインを指定したり、資料の添付は行いません。
テキストで指示を書くだけです。

ただ、その「書き方」には大きく2つのやり方があります。
どちらが正解ということはなく、目的が違います。

順番に見ていきましょう。

① ざっくり任せてみる

まずは、最低限のお願いだけ書いてみましょう。 今回は自分のポートフォリオを想定していますが、実際の案件でもクライアントから「ポップで明るい印象のデザイン」や「モダンで洗練されたデザイン」などと言われることが多いので、そのままAIに伝えたくなりますよね。

Webデザイナーのシングルページポートフォリオを作ってください。ポップで明るい印象のデザイン。

これで送信すると、AIが考えてページを作成してくれます。

数十秒～数分待つだけで、ちゃんとしたページが出てきます。

全体像としては、以下のようになりました。

正直、かなり良い雰囲気ですよね。
ポートフォリオサイトで定番の掲載事項が、セクション分けされて配置されています。
読みやすいし、デザインも整っています。

ただ、知らない人の名前が入っていて、載っている作品もこちらが作ったものではありません。 とはいえ、これは当然のことです。こちらは何ひとつ情報を渡していないのですから。中身は、あとから自分のものに入れ替えていくことになります。

Figma Makeのツールとプレビュー確認

Figma Makeの制作画面では、右上にいくつかのツールが用意されています。
それぞれのアイコンにカーソルを重ねると説明が表示されます。

スマホ幅などでのプレビューを確認したい場合は、左端にあるブラウザのアイコン「プレビュー設定」を使用してください。

消費クレジットの確認方法

消費クレジット数は左上のFigmaアイコン > AIバランス から確認できます。

② 要件を指定する

細かく指示するほどAIは「指示を実現する」方向で動いてくれます。
載せるものや順序など、決まっているものがあれば、最初からそう伝えたほうが早いです。

指示に入れるべき、5つのこと

Figmaの公式記事では「盛り込むべき、重要な詳細」を提示してくれています。
プロンプト（AIへの指示文）に最低限盛り込むべき項目は、この5つです。

出典：8 ways to build with Figma Make | Figma Blog

このあたりの中身が空欄のままだと、AIはそこを自分で考えて埋めます。
それが、さっき出てきた知らない人の名前や、こちらが作っていない作品です。

実際に、5つを埋めて頼んでみる

先ほどの5つを簡単に埋めるたプロンプトを入れてみました。
「ポップで明るい印象のデザイン」は、①とまったく同じです。足したのは、残りの4つだけ。

Webデザイナーのシングルページポートフォリオを作ってください。

【誰に見せるか】就職活動で、制作会社の採用担当者に見てもらいます。
【載せるもの】上から順に、名前（江戸 太郎）とキャッチコピー／制作物4点／自己紹介／使えるツール／連絡先。制作物のセクションは大きく、目立たせてください。
【動き】制作物をクリックすると、詳細がその場で開くようにしてください。ヘッダーは上部固定。
【条件】ポップで明るい印象のデザイン。タブレットやスマホでも見られるように。

送ると、指定した「江戸 太郎」の名前でデザインが作成されます。
指示はしていませんが、名前から考えたのか、日本語表記になっています。

全体像はこのような形でした。

• 名前が反映され、（指定はしていないが）テキストが日本語になった
• 指定したセクションが、指定した順で並んでいる
• 指示通りヘッダーは固定、Works（制作物）はクリックで詳細が開く

と、指示内容を反映してくれていることがわかります。

同じ指示でも、出てくるものは毎回違います

新しくFigma Makeを開いて、まったく同じプロンプトでもう一度作成します。
すると、異なるデザインが表示されます。 🪙 消費したAIクレジット：34

１回目、２回目を比較するとこのようになります。
頼んだ通りのセクション（ 名前+キャッチコピー／制作物4点／自己紹介／使えるツール／連絡先 ）の構成は同じ。ですが、見た目に関してはかなり違います。

どちらが良いかは好みですが、少なくとも「1回で決まるもの」ではないことが分かります。

そして、もうひとつ面白いことがありました。
構成はこれだけ変わったのに、色はまったく同じだったのです。

「ポップ」や「明るい」などの印象指示と紐付いたカラーパレットがありそうですね。
色を変えたいなら、指示のほうを変えるしかありません。

③ 作ったページを直す ── 3つの方法

ページが出てきたら、次は「直す」番です。
Figma Makeで直す方法は、大きく3つあります。

「ざっくり任せてみる」で作ったページを使って、ひとつずつ試していきます。
なおこの3つは、かかるクレジットがまったく違います。そこは最後にまとめて比べます。

① チャットで頼む

いちばん基本の直し方です。プレビューを見ながら、チャット欄に「こうしてほしい」と書いて送るだけ。
ざっくり頼むと、全部変わります

まずは、いちばん言いたくなる言葉から。

もっとおしゃれにして、デザイン性の高い感じにしてください

AIを使っている方は、この「指示はまずいんじゃない？」と思ったかもしれません。
ご想像通り、「おしゃれ」などは個人の感性次第なところがあり、定義があやふやな言葉です。

🪙 消費したAIクレジット：44

……確かに、おしゃれになりました。
黒を基調にした、雑誌のようなデザインです。曖昧な言葉でも、AIは実現させようと頑張ってくれます。

ただ、よく見てみると、見出しなどのテキストも、配色、フォントも、作品の見せ方も全部変わっています。
最初のプロンプトで入れた「明るい印象」も薄れましたね。

消費も 44 と、ゼロから作り直したときとほぼ同じでした。
これは「直した」のではなく、「作り直させた」に近いですね。

場所と内容を指定すると、そこだけ変わります

今度は、変えたいところだけを指定します。
プレビュー上でセクションをクリックして選んでから、こう頼みました。

このセクションの右側に、私の写真（ダミーで良い）を入れたいです。
今ある4つの実績項目は、テキスト+写真の下に横並びで配置。
その下のソーシャルメディアのリンク先はもう少し目立たせてください。

SP幅の時の並び順は
タイトル → 私の写真 → 4つの実績 → のソーシャルメディアのリンク
にしてください。

指定したセクションだけが変わり、ほかの場所は無傷でした。

🪙 消費したAIクレジット：33

細かく「どうしてほしいか」を伝えれば、指示通りに変更してくれることがわかります。

ここでもうひとつ大事なコツがあります。
4つのお願いを1回にまとめて、消費は33。 1つずつ頼んでいたら、この4倍近くかかっていた計算です。直したいことは、まとめて1回で頼む。これだけで、使える回数がまるで変わります。

補足：変更を元に戻す

Figma Make も Figma Designと同じように、変更履歴はバージョンとして保存されています。

ものすごく変わってしまった！やっぱり戻したい！という時は、左上の「バージョン ○○」と書いてあるプルダウンから元に戻すことができます。

② プレビューで直す ── 画面をクリックして打ち換える

Figma Makeには、編集ツールを使って、プレビューをその場で編集できる機能もあります。

文字を選んで、書き直すと、チャットパネル側に「該当する」という変更適用ボタンが表示されます。
これを押すと変更が反映されますが ── 上図の「名前の打ち換え」だけで14クレジット消費しました。

さらに、試しに5か所の文言を打ち換えて、適用ボタンを押しました。
結果、残っていた50クレジットが一気に消え、その日の上限に達しました。クレジットは、反映させる行為そのものではなく、変更する分（変更箇所分）消費されるイメージです。

種明かしは、上図の中にあります。
変更の一覧に並んでいるのは a.font-display.text-xl のような、コードの断片です。 見た目を直接いじっているように見えて、実際にはコードを書き換えています。だから手で直しても、そのぶんクレジットを使うのです。しかも1か所ずつ課金されるので、まとめても安くなりません。

③ コードで直す ── クレジットを使わない道

AIがコードを書き換えるのにクレジットを消費する。
反対に言えば、自分で「コードを書き換える」ことで、クレジット消費ゼロで文言等の調整はできます。

画面の上のほうにある </> のアイコンを押すと、コードビューに切り替わります。
ここでコードの中の文字を直接書き換えて「保存」する。

この場合は、クレジットは1つも減りませんでした。

違いは、AIが動いたかどうかです。
見た目をクリックして直すやり方は、「この見た目にして」とAIにお願いしている状態でした。
コードビューは、自分でファイルを書き換えているだけ。AIの出番がないので、料金も発生しません。

コードが読めなくても日本語で書かれているところが、そのまま画面に出ている文章なので、そこだけ探して打ち換えれば編集はできます。ただし、まわりの記号（< " /> など）を消すと表示が壊れるので注意が必要です。 仕上がりを見ながら…とはいかないので、コードを見慣れていない方は辛そうです。

3つ「直し方」の使い分け ── かかるクレジットで比べる

方法が出そろったので、最後に値段を並べてみます。

• ①チャットで頼むなら、直すのも作り直すのも値段はほとんど変わりません
• ②プレビューで直すが、いちばん高くつきます。手で触っているのに、1か所ずつ課金されるからです
• ③コードで直すだけが、ゼロ。

そして、もうひとつ大事なことが見えてきます。
このページのダミーの中身 ── 名前、作品4点、実績の数字、自己紹介、連絡先 ── を全部自分のものに入れ替えるには、何十か所も直すことになります。

画面をクリックしてポチポチ直していくと、1か所14として数百クレジット。
無料枠で終わらないのはもちろんのこと、プロフェッショナルプラン（3,000 AIクレジット）でも、何サイトか制作をしていたらクレジットが足りなくなります。
コードビューなら無料ですが、何十か所も探して打ち換えるのは、それはそれで骨の折れる作業になります。

結論として、Figma Makeをどう使うかは大きく２パターンに分かれます。

• 掲載内容・条件を決めた状態で生成してもらう（プロンプトの作り込み、デザイン資料を渡す、など）
• Figma Makeの中だけで「完成」させようとしない

で、憧れのあのサイトは作れるの？

Web制作を学んでいると、「こういうサイトが作りたい」と思う見本があると思います。

たとえば、近畿大学さんのWebサイト。
写真を大胆に敷き詰めて、色面を重ねて、文字を大きく置いて。ポップで賑やかで、活気のある印象です。

KINDAI GRAFFITI https://kindai-graffiti.kindai.ac.jp/

逆に、こちらは株式会社トヨコーさんのWebサイト。
モノトーンで要素も少ないのに、巨大な欧文タイポと、大小バラバラに置かれた写真、たっぷりの余白で強い印象を作っています。スクロールしたときの動きの気持ちよさも見どころです。

株式会社トヨコー TOYOKOH Inc. https://www.toyokoh.com/

方向性は真逆ですが、どちらも 「こういうのが作りたい」 と思わせるサイトです。
Figma Makeにお願いすれば、こうしたページも作ってくれるのでしょうか。
先に、正直にお伝えします。テキスト指示でいきなり、この完成度のサイトを作ってはくれません。

ただしそれは、AIが下手だからではありません。
ここまで作ってきたページからも、その理由がはっきり見えてきます。

AIが出せないもの

まず認めるべきことがあります。AIが作るデザインは、かなり上手いです。
とくに「もっとおしゃれにして」で出てきたあの黒いページは、人が作ったと言われても疑いません。
見た目の格は、指示ひとつで上がります。

それでも作成されたデザインを並べてみると、一度も出てこなかったものが3つありました。

① 崩した配置が、出てこない

2つのサイトに共通するのは、要素がきれいに並んでいないことです。
近畿大学は写真カードが色面に重なり、キャラクターが枠からはみ出す。トヨコーは大小バラバラの写真が、グリッドから外れた位置に置かれています。

Figma Makeの生成物はどうだったか。
カードは全部おなじ形・おなじ大きさで、どの要素も四角い箱の中。重なりも、はみ出しも、ひとつもありません。配色も雰囲気もあれだけ変わったのに、この点だけは全てとも同じでした。

面白いのは、AI自身は「重ねよう」としていたことです。
「おしゃれにして」と頼んだときの推論、AIの思考メモを見ると、こう書かれていました。

Stance: Editorial maximalist — big type, overlapping elements（＝要素を重ねる）
Hero section with bleeding display type（＝大きな文字を画面の外まではみ出させる）

やろうとして、できなかったのです。理由はおそらく、「崩す」が言葉にしにくいから。

こうした崩しを指示する場合、プロンプトで「この面を左に30pxはみ出させて、その上に写真を20px内側で重ねて……」などと言うことになります。それなら、自分で置いたほうが速いですよね。

② 素材が、用意されない

崩しと同じくらい、いえ、それ以上に効いているのが素材です。

例えば、近畿大学では画像が、コンセプト（recommend、snapなど）毎に装飾され、CSSと統一したデザインで作られています。トヨコーでも、写真の色調が揃えられています。
「完成度の高さ」は、素材が作っている部分も大きいのです。

対してFigma Makeが用意するのは、間に合わせの写真が、四角いまま枠に収まった状態。撮り下ろしも、装飾パーツも、切り抜きも、全体でトーンを揃える色調整もありません。レイアウトは整っているのに「思っていた完成品とは違う」と感じるのは、たいていここが原因です。

しかもこれは、Figma Makeの中では埋められない不足です。
写真を撮る、イラストを描く、装飾を作る ── どれもMakeの外の仕事だからです。

③ 日本語の書体が、選ばれない

出てきたページの中身（CSS）を見ると、読み込まれていたフォントは Archivo Black／Outfit、Fraunces／Poppins、Abril Fatface／Outfit ── すべて欧文で、日本語フォントは一度も指定されていませんでした。

つまり画面の日本語は、見る人のパソコンに入っている標準フォント任せ。WindowsとMacでは別の顔になります。ざっくり任せて出てきた「I Design Bold Digital Experiences」のあの迫力も、大きな欧文フォントだから成立していたものでした。

ここも2つのサイトと比べると差がはっきりします。どちらも日本語の書体・字間・改行位置まで作り込まれていますよね。日本語のWebデザインの勝負どころと言える部分が、ほぼ空欄で出てきてしまう＝単調に見えてしまうわけです。

憧れのあのサイトも、実は「整った部品」でできています

こう書くとがっかりされたかもしれません。
ですが、憧れのサイトをよく見ていくと、配置を大胆に振っていても、多くの場合部品そのものはきっちり揃っていることに気づきます。

写真カードのラベルの位置も、角の丸みも、文字の大きさのルールも統一されている。その整った部品をあえて不揃いに置き、素材で世界観を足すことで、あの表情が生まれています。

ここが、AIと人間の作業の分担点と言えるでしょう。

さきほど「出てこなかった」と挙げた3つ ── 不揃いな配置、素材、日本語の書体 ── は、じつは全部この表情の側にあります。AIが引き受けてくれるのは、整うところまで。そこから先、見る人に訴えかけるところが人の仕事、というわけです。

手を入れる場所は、無料プランなら出てきた画面を見ながら自分のFigmaで組む、有料プランならFigma Designに持っていってそのまま作り込む。どちらにしても、表情をつけるのは人です。

見方を変えると、これは「見本帳」です

ざっくり任せて出てきたページに、何が入っていたか思い出してください。
ヒーローを左右に分けて片側を色の面にする、見出しを単語ごとに色分けする、実績を「80+ / 5yr / 30+」と数字で並べる、作品カードに年号バッジとタグをつける、絞り込みボタンを置く、スキルを進捗バーで見せる ──

これらはポートフォリオサイトの「部品カタログ」とも取れます。
白紙の前で手が止まるのは、センスがないからではありません。何を載せればいいのか、どう見せればいいのかを、思いつかないからです。そこに、一式が並んで出てくる。しかもMakeは必ず構造から出してくるので、見た目から入って中身の順番を後回しにする ── という初心者がはまりやすい道も、通らずに済みます。

そして1回34〜48クレジットなら、無料枠でも10回前後。
何案も並べて比べられるのは、学んでいる最中にはありがたいところです。

もちろん、これが唯一の使い方というわけではありません。ただ、出てきたものを「完成品」として見るか、「見本」として見るかで、Figma Makeの使い勝手はずいぶん変わると思います。

まとめ

Figma Makeに任せるところ、自分でやるところ

ここまでの話を、そのまま分担表にするとこうなります。

触る前に知っておきたい、3つのこと

• 直すたびにクレジットが減ります。 直したいことは、まとめて1回で頼むのがいちばん安く済みます
• 文字の差し替えは、コードビューなら0。 逆に、画面をクリックして1か所ずつ直すのがいちばん高くつきます
• 持ち出しにも公開にも壁があります。 Figma Designへのコピーは有料、無料プランの公開はFigma Community経由のみ。Makeの中で完成させようとしないのが、無料で使うコツです

なお、向き不向きは同じサイトの中でも線が引けます。 例えば、素敵なサイトの例に出したようなセクションはFigma Makeには作れません。
でも、「人気記事」や「News」のような情報を並べるセクション/ページなら、むしろ得意分野です。

他のAIツールとの使い分け

結論 ── AIが引き受けてくれるのは「整うまで」

Figma Makeにお願いしただけで、憧れのあのサイトのデザインが出てくるか。
── 答えは「作れません」です。

ですが、掲載したい内容をどのように構成するかを考えて、整った部品の状態まで仕上げてくれるのは上手。
グラフィカルで素敵なサイトも、部品そのものはきっちり整っています。インパクトの強さ、完成度の高さは整った状態の上に、どれだけ表情を乗せられるかであり、そこは現時点では人間の仕事です。

言い換えれば、AIが出したものは、あなたのデザインの下限を保証してくれるもの。その上に何を乗せるかが、あなたの仕事です。

Figma Makeが引き受けてくれるのは、あなたが一番止まりやすいところ ── 白紙から最初の1枚を出すところです。

出てきた見本を眺めて、「この並べ方はいいな」「ここは自分ならこうする」と考えながら、自分のFigmaで組んでみるのも学習になります。
遠回りに見えるかもしれません。でも見本を見ながら自分で手を動かすことが、いちばん身につきます。

白紙のキャンバスで固まっていた時間が、手を動かす時間に変わる。
それだけでも、試してみる価値はあると思います。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。