Cursor + AIツールでデザイナーが「やさしさ改善」を実装する方法

2025-09-11 デザイナーのためのAIツールハンズオン Cursor編の登壇資料です。

Transcript

1. © LayerX Inc. Cursor + AIツールで デザイナーが「やさしさ改善」を実装する⽅法 株式会社LayerX 加藤 怜
2. © LayerX Inc. 2 バクラク事業部 プロダクトデザイナー • 2023年LayerX⼊社。バクラク申請‧経費精算を担当 • 担当プロダクトのやさしさ改善⼤⾂ • 爆楽武⼠（デザインガイドライン）の産みの親 加藤怜
3. 3 © LayerX Inc. 前提：私 = マークアップしかわからない普通のデザイナー • イベント名🔰の通り、⾼度なことはやっておりません󰢜 • Cursor + その他AIツール を⽤いた、以下の内容をお伝えします 1. 具体的な実装⽅法 2. 実際のプロダクトにおいて何を改善したか 3. デザイナーが実装するメリット
4. 4 © LayerX Inc. 1年前のやさしさデーはどうだった？ • やさしさデーとは：主要な機能以外の⼩改善の要望を集めて、まとめて実装する⽇（⽉1の実施） • ⾃分では⽂⾔‧マージン修正くらいしかできないので、実装はエンジニアに依頼 ?
5. 5 © LayerX Inc. 現在：週に3PR(プルリク)くらい改善できる • Pdm‧デザイナーが、思い⽴ったら修正できる • 動きを含めたちょっと難しい実装もできる！ • 詰まっても、AIがあるから⾃⼒で解決しやすい！ ⬆⾃分
6. 具体的な実践⽅法をお伝えします ここからは
7. 7 © LayerX Inc. 全体の実装の流れ 開発環境の 構築 Claude Codeで ⼀度⽬の実装 Cursorで 細かい修正 詰まったら、 AIに質問‧解決 ⼀度のみ 実装 PR Githubで PR提出
8. 8 © LayerX Inc. ⼀度のみ: 開発環境の構築 • 開発環境はなくてもいける！と⾔いたかったのですが、⼿元で微調整したい場合は必要です󰢜 • 次に紹介する、Github上での依頼で開発が完結する場合は不要です。
9. 9 © LayerX Inc. 実装① : Claude codeで勘所をつける GitHub Issue上で、 @claude をメンションし、 自然言語でタスクを依頼します。 ※「Claude Code Github Actions」という機能です 適切な箇所を探し、修正を実装した PRを 発行してくれます。 ⾃然⾔語で仕様をまとめる @claude に依頼       ×      メリット󰢐 黒いエディタを開かずに実装開始 ⾮エンジニアには難しい、修正箇所を探す必要なし ⾃然⾔語でOK
10. 10 © LayerX Inc. 実装② : Cursorで細かい修正 ①で適切な箇所に修正が⼊りました。 プレビューしながら、違和感がある箇所は、 Cursorで⾃然⾔語で修正していきます。 うまくいかない時は、コードを直接修正した⽅ がいい時もありますが、ほぼ⾃然⾔語でOK        メリット󰢐 AIの回答がUI‧Markdown形式で親しみやすい 課⾦を気にせず、しばらく無料で壁打ちできる（微調 整ではやり取りが増えがち）
11. 11 © LayerX Inc. 実装完了~PR提出 : 詰まったらAIに相談して解決 • とはいえ、知らないエラーが出まくる時もあります…😭 • そんな時もAIと相談すると⾃⼰解決しやすいです ⼀般的なコーディング‧開発の⽤語を質問し て、チャットに知⾒を貯めて⽴ち戻る 例：pnpm installって何？ 例：エラーコードをコピーして、解決⽅法を聞く 実装中に、エディタの右側で仕様の説明をし てくれる 例：xxxxの条件分岐のパターンは正しいですか？テーブル で整理してください。
12. どんな改善をした？ 実際のプロダクトで
13. 13 © LayerX Inc. 実際の事例 以前の開発知識ではわからない、条件分岐や動きを含む改善が⾏えて感動しました🥺 リストのチェックボックス付近は 遷移不可にし、誤クリックを防⽌ 件数が多すぎて⾒づらいので 5件以上で省略表⽰し、開閉できる フォームが分類され、公開範囲が 変わっている時だけ情報を表⽰
14. デザイナーが実装すると良いことある？ それで、
15. 15 © LayerX Inc. エンジニアの⼿を⽌めずに⾼速改善できる • 弊社プロダクトのフェーズ ◦ 機能が積み重なり、既存画⾯に対する要望や表⽰のずれも多い ◦ エンジニアはエンジニアにしかできない、⼤⽟機能開発やインシデント調査に⼿をさくべき • やさしさ改善の優先度は下がりがち → ⭕AIがあればまとまった時間がなくても、思い⽴ったら⾮エンジニアがPRが出せる！ → ⭕⼩改善であれば、デザインイメージを作らずに実装に移れる
16. 16 © LayerX Inc. 正しい仕様を理解でき、解像度の⾼いデザインが作成できる • これまで：エンジニアが実装中に「あ、このパターンもあった…😭」 → デザイナーにパターン追加を依頼 → 実装に反映して、動きを確認 • これから：デザイナーが実装中に、新しい条件分岐や仕様を発⾒❗ → リアルな環境で試しながら、適切な⽂⾔‧レイアウトを調整 → ⾒た⽬の調整だけでなく、UIパターンを増やしたい時、実装難易度もAIに確認できる。 → AIがあれば、仕様の正確性をコードから⾃分で確かめられる。 → ⭕デザイナーに限らず、このループが1⼈で⾏いやすい
17. 17 © LayerX Inc. 既存のコードが蓄積したプロダクトでこそ、真価を発揮 • これまで：「これと同じようなUIってありましたっけ？」 → 記憶を頼りに画⾯から探す • これから：AIに「ここと同じUIを実装して」「このUIどこにある？」と聞くだけでOK ◦ 既存と同じUIを持ってこれて、適切な位置で実装してくれるので、デザイナーでも簡単。 ◦ コードから検索し、同じUIがあるか？ルールが揃っているか？の調査が⽬視より簡単。 → ⭕⼤規模プロダクトで、デザインデータより実装を正とするときに便利
18. 18 © LayerX Inc. LayerX デザイナー募集中！ バクラク｜Fintech｜AI‧LLM 10/11-12 のDesignshipに出展します！ 楽しいノベルティをたくさん制作したので、ぜひ遊びにきてください 🎶