デザイナーはFigmaの次に何をするか｜作れるようになった後の時間の使い方

デザイナーがFigmaで画面を作り、エンジニアに渡して実装してもらう。長く続いてきたこの分業が、変わりはじめています。デザインしたものを、自分で動く形にできるようになったからです。 では、デザイナーの仕事はどうなるのか。何に時間を使うべきなのかを整理します。

まず結論

Figmaが要らなくなるわけではありません。ただし、成果物が「静止画」から「動くもの」に変わりつつあります。

そして、実装に使っていた説明の時間が空きます。その時間をどこに使うかが、これからの分かれ目になります。

結論としては、検証とマーケティングに使うのが合理的だと考えています。理由は後述します。

何が変わったのか

これまでの流れはこうでした。

これまで

1. 1アイデアを考える
2. 2エンジニアを探す
3. 3作りたいものを説明する
4. 4数十万〜数百万円を払う
5. 5数週間〜数か月待つ

いま

1. 1アイデアを考える
2. 2AIに「こんなものを作りたい」と相談する
3. 3その日のうちに動くものができる

Figmaで画面を作り、動きは注釈で説明し、エンジニアに渡す。出てきたものを見て「押したときの反応が違う」と伝え、直してもらう。

このやりとりの多くは、静止画では動きを伝えきれないことから生まれていました。

今は、デザインしたものを自分で動く形にして、触れる状態で渡せます。

Figmaがなくなるわけではない理由

誤解を避けるために書いておきます。Figmaの役割は残ります。

用途	引き続きFigmaが向く	動くものにしたほうがいい
発想を広げる	◎ 大量に試せる	✕ 遅い
全体の構成を考える	◎ 俯瞰しやすい	△
配色・余白の検討	◎ 比較しやすい	△
動きの確認	✕ 伝わらない	◎
使いやすさの検証	△	◎ 実際に触れる
開発者への引き渡し	○	◎ 認識のズレが減る

考える段階はFigma、確かめる段階は動くもの。 この使い分けが現実的です。

動くものにすると、何が変わるか

1. 使いやすさを本当に検証できる

静止画を見せて「使いやすそうですか」と聞いても、正確な答えは返ってきません。人は実際に触るまで、どこで迷うかわからないからです。

動くものを渡して、黙って見ていると、予想していなかった場所で止まります。 この情報は静止画からは得られません。

2. 説明の時間が消える

「ここを押すとこうなって、読み込み中はこう表示されて」という説明が不要になります。触ってもらえば伝わります。

3. 判断が早くなる

社内で意見が割れたとき、両方作って触ってもらえば決着します。 議論より速いことが多いです。

それでも残る、デザイナーの専門性

作れるようになっても、代替されない部分があります。ここを見誤ると、方向を間違えます。

何を作らないか決めること。 機能を足すのは簡単ですが、削る判断には基準が要ります。

情報の優先順位をつけること。 何を大きく見せ、何を隠すか。この判断は、AIには任せられません。

言葉を選ぶこと。 ボタンに書く一言で、押される割合は変わります。

一貫性を保つこと。 画面が増えたときに、全体としてまとまりを保つ設計。

これらは「作れるかどうか」とは別の能力です。 そして、作れる人が増えるほど、この差が目立つようになります。

空いた時間をどこに使うか

ここが本題です。

実装の説明に使っていた時間が空きます。多くのデザイナーが、その時間をさらに細かいデザイン調整に使っています。 それも悪くはありませんが、効果としては小さいと考えています。

理由は単純で、どれだけ良いものを作っても、知られなければ使われないからです。

63%

AIコーディングツールの利用者のうち、開発者ではない人の割合です。作る側の人口が急増した結果、「良いものを作れば見つけてもらえる」という前提が成り立たなくなりました。

出典：TechTimes（2026年5月）

使いどころ1：検証

作ったものを、実際に人に使ってもらう工程です。

これまでは「実装が終わってから」しかできませんでした。今は企画段階でできます。間違った方向に進む前に気づけるようになります。

使いどころ2：マーケティング・SNS

デザイナーはこの領域と相性がいいと考えています。理由は3つあります。

1. 見せ方の判断ができる — 何をどう見せると伝わるかは、まさに専門領域です
2. 制作過程が素材になる — デザインの試行錯誤は、そのまま発信の内容になります
3. 一貫した世界観を作れる — サービスと発信の見え方を揃えられます

具体的な進め方は作れるようになった。次に差がつくのは「届ける力」にまとめました。

使いどころ3：事業側の判断

「何を作るか」の議論に、最初から入ることです。

動くものを出せる人は、企画の初期段階で呼ばれるようになります。 ここに入れるかどうかで、関われる範囲が変わります。

どこまで自分でやり、どこから任せるか

作れるようになっても、全部を自分でやるべきではありません。

自分とAIでできることが多い

• 自分や友達だけで使うツール
• 学校や会社の中だけで使うツール
• アイデアを試すための試作品
• 利用者が少ない小さなサービス

専門家の知識が重要になる

• 他人の個人情報を預かる
• お金のやりとりをする
• 利用者が一気に増えたとき
• 動かなくなったときの復旧

試作品までは自分で。本番はエンジニアに。 この線引きが基本です。

引き渡しの具体的な進め方はプロトタイプまで作って、あとはエンジニアに渡すに書きました。

デザイナーが最初に打つ指示

「動く形にする」と言っても、具体的な頼み方がわからないと始まりません。

過去のデザインを動く形にする

完成形がわかっているので、練習に最適です。

デザインした画面を、実際に触れる形にしたいです。プログラミングは初めてです。

画面の構成:
・（要素を上から順に説明。例：上部にロゴ、中央に検索欄、下に一覧）

動き:
・（押したときにどうなるかを説明）

条件:
・スマホでの表示を優先してください
・データは仮のもので構いません
・見た目の再現を優先してください

Figmaの内容を文章にして貼るのがコツです。「上から順に何があるか」を書けば伝わります。

細かく調整する

出てきたものを見て、直したいところを伝えます。

・見出しをもう少し大きく、余白を広めに
・ボタンは画面下に固定して、片手で押せるようにして
・読み込み中は、何か表示されるようにして

最後の項目のような「間の状態」は、静止画では表現できません。 ここを自分で確かめられるのが、動く形にする価値です。

検証に使う

このプロトタイプを、5人に触ってもらって使いやすさを確かめたいです。
どこで迷いそうか、事前に指摘してもらえますか。

AIの指摘は参考程度で構いません。 本番は実際に人に触ってもらうことです。

何から始めるか

1. 1

   自分用の小さな道具を1つ作る

   作業を楽にするものが題材として適しています。失敗しても誰も困りません。

2. 2

   過去に作ったデザインを、動く形にしてみる

   完成形がわかっているので、指示が出しやすくなります。

3. 3

   動くものを、社内の検討で使ってみる

   静止画のときと反応がどう違うかを体感します。

4. 4

   検証に時間を回す

   作る速度が上がったぶん、使ってもらう工程に時間を使います。

よくある質問

Q. コードを書けないとダメですか？ A. 書ける必要はありません。日本語で「この画面をこう動くようにして」と伝えれば作れます。詳しくはClaude Codeって何？をご覧ください。

Q. エンジニアの仕事を奪うことになりませんか？ A. 試作品と本番は別物なので、奪うことにはなりません。むしろ説明の往復が減るので、歓迎されることが多いです。

Q. Figmaはもう使わなくていいですか？ A. 使います。考える段階ではFigmaのほうが速いです。確かめる段階で動くものに変える、という使い分けです。

Q. デザインの質は下がりませんか？ A. 下がる可能性はあります。AIに任せると、無難な見た目に寄る傾向があります。だからこそ、何を作らないか、どう見せるかを決める力の価値が上がります。

Q. マーケティングの経験がありません A. 最初は誰でもそうです。制作過程を発信するところから始めれば、経験がなくても続けられます。

まとめ

• Figmaは残る。ただし成果物が静止画から動くものへ変わりつつある
• 使い分けは、考える段階はFigma、確かめる段階は動くもの
• 代替されないのは、何を作らないか決める・優先順位をつける・言葉を選ぶ・一貫性を保つ力
• 空いた時間は、検証とマーケティングに使うのが合理的
• 試作品までは自分で、本番はエンジニアに。 この線引きは変わらない