デザインが苦手なエンジニアが、Figma Makeからデザインを学んでみた

Transcript

1. Speaker: スナガク (Nov.12, 2025) Vibe Coding for Study デザインが苦手なエンジニアが、Figma Makeからデザインを学んでみた
2. 自己紹介 スナガク • ソフトウェアエンジニア • 趣味: 個人開発 サウナ • 最近は Figma make にハマり中 個人開発 https://lovady.app/ • AIに気軽に恋愛相談できるアプリ Lovady • 現在 React Nativeを使ったアプリを開発中 2/16
3. 今日、話すこと 1. デザイン作成に対する今の課題 2. なぜ Figma makeを使うようになったか？ 3. Figma make の活用方法 3/16
4. お詫びと言い訳 • Figma make の話、ほぼ出てきません... ◦ 最後の所で、ちょっと話すくらい... ◦ 背景・経緯の話が 8割くらいあります。 • 馴染みのない領域・技術に対してどう学んでいったか？の経験談として ◦ ご自身の状況とも重ねつつ、新しい考え方や視点を得るきっかけに Figma make の話聞きたかった人、すいません... 時間がある時に、また記事上げます... 4/16
5. 個人開発アプリの「UI がダサすぎる問題」発生 ⚠ • 個人開発のアプリで UI を作成したものの、ダサすぎる... ◦ 時間を大量に使ったのに 成果ゼロ... ◦ 今作っているアプリも、UI リプレース中...(バグ全部直したのに) • 一部のエンジニアを除き、デザイン作成は経験がない ◦ デザインの実装は出来るけど、デザイン自体は作成できない • デザイン関連の知識がほぼ無い ◦ 良いデザインと悪いデザインの差が分からない󰣼 5/16
6. デザインはAI使っても上手く修正できない😭 • AIに出せる指示が「イケてるUIを作って！」程度のもの ◦ 指示が抽象的すぎて、うまく動いてくれない ◦ 「スマートにして」と指示した回数は計り知れず... • AI で試行錯誤しても、成果に繋がりにくい ◦ 0 → 1 のスタイル作成は、AI でもいいものを作ってくれる ◦ 細かい調整に関しては、上手くいかないことが多い 6/16
7. デザイナーの教え 3選 • 競合/類似アプリのUIを参考にする ◦ 同じ機能を既に実装している例があるので、参考にできる • デザインガイドラインを学ぶ ◦ Apple Human Interface Guidelines ◦ Material Design • 原理原則を抑える ◦ 闇雲に作るのではなくルールを踏まえる デザインの原理原則を抑えれば、 AI への修正指示が上手くなるのでは！？ 7/16
8. デザインは原理原則が存在する • 判断の指針になる法則がいくつかある ◦ 近接 (Proximity) ◦ 整列 (Alignment) ◦ 反復 (Repetition) ◦ コントラスト (Contrast) • 「なぜ悪いのか」が説明できるようになる！ ◦ 修正指示の精度が上がりそう(知らんけど...) 出典：『ノンデザイナーズ・デザインブック [第4版]』マイナビ出版（ 2016） 8/16
9. 座学だけだと限界がある • ざっくりとした原理原則は理解できた ◦ 良い/悪いデザインの違いをなんとなく把握できた • しかし「今のUIをどう改良するか」の手がかりまでは得られない... ◦ 「何が悪いのか」は分かる ◦ 「どうすれば良いのか」が分からない ◦ 正解のデザインのイメージが付かないので、指示もできない ▪ 指示の内容自体は前と変わってない • デザインもプログラミングと一緒で、実践部分が大切になる ◦ 今のUI をAI と共に改良しつつ、デザインの原理原則を学ぶ 9/16
10. そうだ、AI を使おう！ • 今必要としてるのは、実際の画面に対するフィードバック ◦ これをAIに依頼すればいいのでは？ • ChatGPT に Figma や アプリのスクショを貼って試す！ ◦ ヒントは得られるが、自分で直す手間がかかる... ◦ 指示に従って直してみたけど、なんか違う... • Cursor連携も出来るらしい！ ◦ 良さそう！だけど上記の問題は解決しない... • Layermateが最有力候補！？ ◦ フィードバックに加え、デザインも作ってくれる！(けど従量課金が怖い…) • そうだ、Figma Makeを使おう！ 10/16
11. Figma Makeとは？ • デザインツール FigmaのAI機能 • v0のように実際のソースコードと一緒にWEBアプリを作成してくれる ◦ 作られたコードをダウンロードすることも出来る！ • 生成したアプリの画面をFigmaのデザインファイルにコピぺ できる https://zenn.dev/sunagaku/articles/6ffe29e6f271bb 11/16
12. Guidelines.mdとは？ • Agents.md の Figma make 版 ◦ 共通の指示を最初から組み込めて、毎回同じ指示を繰り返さずに済む • デザインのテーマ情報を与えると、それに沿って最適なスタイリングを実施 • 「修正意図や背景情報も教えて」と頼んでみる ◦ そのスタイルの説明をしてくれる！？ ◦ 知識のキャッチアップも出来る！？ 12/16
13. 実際に試してみた • 個人開発中のアプリUI改善を依頼 • 画面サンプル +「修正に至る背景や設計原則」まで教えてくれた • そのまま追加修正の指示もできるので、微調整もスムーズ https://zenn.dev/sunagaku/scraps/7c17f25b7aa20d 13/16
14. まとめ • 判断基準がないと、適切な指示や修正ができない。 • デザインもプログラミングも、座学だけでは限界がある • AIを活用する前に、まず自分の課題を明確にする • Figma make は、デザインの原理原則を学べる最高の相棒 14/16
15. ご清聴ありがとうございました！ よかったら X フォローしてください！ @suna_gaku 15/16