Speaker: スナガク (Nov.12, 2025) Vibe Coding for Study デザインが苦手なエンジニアが、Figma Makeからデザインを学んでみた 

自己紹介 スナガク ● ソフトウェアエンジニア ● 趣味: 個人開発 サウナ ● 最近は Figma make にハマり中 個人開発 https://lovady.app/ ● AIに気軽に恋愛相談できるアプリ Lovady ● 現在 React Nativeを使ったアプリを開発中 2/16 

今日、話すこと 1. デザイン作成に対する今の課題 2. なぜ Figma makeを使うようになったか？ 3. Figma make の活用方法 3/16 

お詫びと言い訳 ● Figma make の話、ほぼ出てきません... ○ 最後の所で、ちょっと話すくらい... ○ 背景・経緯の話が 8割くらいあります。 ● 馴染みのない領域・技術に対してどう学んでいったか？の経験談として ○ ご自身の状況とも重ねつつ、新しい考え方や視点を得るきっかけに Figma make の話聞きたかった人、すいません... 時間がある時に、また記事上げます... 4/16 

個人開発アプリの「UI がダサすぎる問題」発生 ⚠ ● 個人開発のアプリで UI を作成したものの、ダサすぎる... ○ 時間を大量に使ったのに 成果ゼロ... ○ 今作っているアプリも、UI リプレース中...(バグ全部直したのに) ● 一部のエンジニアを除き、デザイン作成は経験がない ○ デザインの実装は出来るけど、デザイン自体は作成できない ● デザイン関連の知識がほぼ無い ○ 良いデザインと悪いデザインの差が分からない󰣼 5/16 

デザインはAI使っても上手く修正できない😭 ● AIに出せる指示が「イケてるUIを作って！」程度のもの ○ 指示が抽象的すぎて、うまく動いてくれない ○ 「スマートにして」と指示した回数は計り知れず... ● AI で試行錯誤しても、成果に繋がりにくい ○ 0 → 1 のスタイル作成は、AI でもいいものを作ってくれる ○ 細かい調整に関しては、上手くいかないことが多い 6/16 

デザイナーの教え 3選 ● 競合/類似アプリのUIを参考にする ○ 同じ機能を既に実装している例があるので、参考にできる ● デザインガイドラインを学ぶ ○ Apple Human Interface Guidelines ○ Material Design ● 原理原則を抑える ○ 闇雲に作るのではなくルールを踏まえる デザインの原理原則を抑えれば、 AI への修正指示が上手くなるのでは！？ 7/16 

デザインは原理原則が存在する ● 判断の指針になる法則がいくつかある ○ 近接 (Proximity) ○ 整列 (Alignment) ○ 反復 (Repetition) ○ コントラスト (Contrast) ● 「なぜ悪いのか」が説明できるようになる！ ○ 修正指示の精度が上がりそう(知らんけど...) 出典：『ノンデザイナーズ・デザインブック [第4版]』マイナビ出版（ 2016） 8/16 

座学だけだと限界がある ● ざっくりとした原理原則は理解できた ○ 良い/悪いデザインの違いをなんとなく把握できた ● しかし「今のUIをどう改良するか」の手がかりまでは得られない... ○ 「何が悪いのか」は分かる ○ 「どうすれば良いのか」が分からない ○ 正解のデザインのイメージが付かないので、指示もできない ■ 指示の内容自体は前と変わってない ● デザインもプログラミングと一緒で、実践部分が大切になる ○ 今のUI をAI と共に改良しつつ、デザインの原理原則を学ぶ 9/16 

そうだ、AI を使おう！ ● 今必要としてるのは、実際の画面に対するフィードバック ○ これをAIに依頼すればいいのでは？ ● ChatGPT に Figma や アプリのスクショを貼って試す！ ○ ヒントは得られるが、自分で直す手間がかかる... ○ 指示に従って直してみたけど、なんか違う... ● Cursor連携も出来るらしい！ ○ 良さそう！だけど上記の問題は解決しない... ● Layermateが最有力候補！？ ○ フィードバックに加え、デザインも作ってくれる！(けど従量課金が怖い…) ● そうだ、Figma Makeを使おう！ 10/16 

Figma Makeとは？ ● デザインツール FigmaのAI機能 ● v0のように実際のソースコードと一緒にWEBアプリを作成してくれる ○ 作られたコードをダウンロードすることも出来る！ ● 生成したアプリの画面をFigmaのデザインファイルにコピぺ できる https://zenn.dev/sunagaku/articles/6ffe29e6f271bb 11/16 

Guidelines.mdとは？ ● Agents.md の Figma make 版 ○ 共通の指示を最初から組み込めて、毎回同じ指示を繰り返さずに済む ● デザインのテーマ情報を与えると、それに沿って最適なスタイリングを実施 ● 「修正意図や背景情報も教えて」と頼んでみる ○ そのスタイルの説明をしてくれる！？ ○ 知識のキャッチアップも出来る！？ 12/16 

実際に試してみた ● 個人開発中のアプリUI改善を依頼 ● 画面サンプル +「修正に至る背景や設計原則」まで教えてくれた ● そのまま追加修正の指示もできるので、微調整もスムーズ https://zenn.dev/sunagaku/scraps/7c17f25b7aa20d 13/16 

まとめ ● 判断基準がないと、適切な指示や修正ができない。 ● デザインもプログラミングも、座学だけでは限界がある ● AIを活用する前に、まず自分の課題を明確にする ● Figma make は、デザインの原理原則を学べる最高の相棒 14/16 

ご清聴ありがとうございました！ よかったら X フォローしてください！ @suna_gaku 15/16