はじめに
こんにちは！
プロダクトデザイナーのぽん(@designer_no_pon)です🌾
私はこの1ヶ月、同じチームのエンジニアであるこいぬのぽち(@koinunopochi)さんに弟子入りし、Cursorを使った開発にチャレンジしました！
本記事では、未経験のデザイナーでもツールを作れたプロセスや、実際につまずいたポイント、感じた学びをまとめています。
「デザイナーだけど開発にも挑戦してみたい」「AIを使ったものづくりに興味がある」そんな方の参考になれば嬉しいです✨
きっかけは「Figma Make のクレジット問題」
弊社では、これまでプロダクトブログのサムネイル作成用ツールをFigma Makeで作成・運用していました。
そこに新しく、noteでの企画用が始まるということで、note用サムネイル作成機能を追加しようとしていたのですが、
3月ごろから「Figma Makeの機能を使うたびにクレジットが消費され、デザイナーたちが次々とクレジット切れになる」という課題が出てきました。
このままFigma Make上でサムネイルツールを運用し続けると、プロダクト関連の業務にも影響が出てしまいそうです…。
そこで、サムネイルツールをFigma Makeから切り離し、自前で開発することになりました。
とはいえ、私はデザイナーで、これまでほとんどコードを書いた経験がありません😔
ただ、最近CursorというAIエディタを業務に取り入れ始めていたこともあり、「これを使って開発してみよう！」とチャレンジしてみることにしました。
Figma Makで運用していたサムネイルツールのおはなしはこちら▼
productblog.sencorp.co.jp
作業前後の手順に苦戦
開発の第一歩は、ターミナルを開くところからでした。
最初にやることは、「フォルダに移動してサーバーを起動する」というシンプルな作業です。
ただ、非エンジニアの私にとっては、画面は黒いし英語ばかりだしで、かなりハードルが高く感じました。
おそるおそる操作してみたところ……いきなりエラーが発生💦
Cursorにあれこれ聞きながら、言われた通りにコピペして、なんとかサーバーを起動することはできました。
でも、見慣れない単語が多くて、毎回「あれ、次は何をすればいいんだっけ……？」と手が止まってしまいます。
そんなとき「Agent Skills」という仕組みを教えていただきました。
Agent Skillsとは、繰り返し使う手順や指示をあらかじめファイルにまとめておくことで、次からは一言伝えるだけで実行してくれる仕組みです。
作業前後の流れをスキルとして登録したことで、毎回手順を思い出せなくても、スムーズに作業を進められるようになりました😭👏
実装にチャレンジ
基本を学んだところで、いよいよ実装に入ります！
「簡単なものから少しずつ進めるよりも、難しい課題に挑戦して試行錯誤しながら乗り越えるほうが、早く成長できる」という、スパルタメンター・こいぬのぽちさんの方針で、自力でいちから作ってみることになりました💪🥺🔥
作業環境を分ける
まずは、Figma Makeで作成された元データからコードをダウンロードし、それをベースに肉付けしていく形で進めました。
はてなブログ用のツールを複製してnote用を作ろうとしたのですが、このままだとコードが混在してしまい、「note用を修正したつもりがはてな用にも影響してしまう」というリスクがありました。
そこで、Cursorに「はてなとnoteのコードを完全に分けて、お互いに影響しない構成にしてほしい」と依頼し、リファクタリングを行いました。
note用での試行錯誤
また、note用は、はてなブログ用に比べてサムネイルのバリエーションが少ないという課題がありました。
そこで、好きな画像をアップロードしてサムネイルにできる機能を追加することにしました。
画像をはめ込むために透過フレームを使おうとしたのですが、何度やってもうまくいかず苦戦…。
最終的には、Cursor経由ではなく元フォルダに直接画像データを格納する方法に切り替えることで解決できました。
ツールとして整える
作業場所の案内
ツールだけでは対応しきれないケースに備えて、Figmaの元データや作業用リンクもあわせて案内するようにしました。
概要とお問い合わせ導線
トップページには、それぞれのツールの説明と、お問い合わせ用の関係者リストやガイドラインを配置しています。
ビジュアルをつくる
元のデザインを活かしながらブラッシュアップ
素材が少ない中でも、イメージを伝えるといい感じに形にしてくれて、まさにCursor様様でした…！
制作フェーズでは、不安になったり、うまくいかず悩むこともたくさんありました。
それでも、それ以上につくることが楽しくて、つい夢中になって作業していました！
メンターに報告する仕組みを作成
このプロジェクトを進める中で、「メンターのエンジニアさんにうまく相談できない」という課題がありました。
当時の私は理解が追いついておらず、
「何がわかっていて、何がわかっていないのかわからない」
「今が相談した方がいいタイミングなのかわからない」
「困っている状況をうまく説明できない」
という状態でした。
そこで、先ほど紹介したAgent SkillsとSlackのMCPを活用し、作業内容やCursorへの質問内容をレポートとして整理し、自動でSlackチャンネルへメンション付きで送信する仕組みを作りました。
さらに、問題が解決した際には、「何に詰まっていたのか」「どのように解決したのか」をスレッドにまとめて投稿するようにしています。
この仕組みを導入したことで、「1日中ひとりで悩み続けてしまう」という状況が減り、自分が今どこで詰まっているのかを周囲へ共有しやすくなりました。
また、相談内容が整理された状態で共有されるため、メンターやチームメンバーの皆さんからも以前よりスムーズにフィードバックをいただけるようになりました。
やってみてわかったこと
右も左もわからずドキドキのスタートでしたが、はじめてのおつかいのように、チームのみなさんに見守っていただき、こいぬのぽちさんの手厚いサポートに支えられ、なんとか無事にゴールすることができました🎉✨
今回の開発を通して感じたのは、非エンジニアがAIを使って開発するときに大切なのは、「何を作りたいのか」を整理して伝えることだということでした。
コードを書く作業そのものは、Cursorがかなり支援してくれます。
ただ、AIは目的が曖昧なままだとうまく動いてくれません。
実際に私が担当していたのは、
- つくりたいものを言語化する
- 画面文言やデザインを考える
- 作業フローを仕組み化する
といった部分です。
以前の自分だったら、こういったものはエンジニアさんに依頼していたと思います。
ですが、それでは実装待ちが発生したり、複数人のリソースが必要になったりします。
今回、Cursorを活用して開発にチャレンジしたことで、自分自身の力で周りの困りごとを解決する経験ができ、自信につながりました。
これからはさらに学びを深め、プロダクト実装にも挑戦していきたいと思っています。
ユーザーのみなさんのお困りごとを、もっと早く、もっと多く解決できるよう頑張ります💪✨
こちらのツールで作成したサムネイルは、はてなブログ「SEN PRODUCT BLOG」のほか、noteで展開しているAI活用や組織開発をテーマにした企画「SEN SMAILE」でも使用されています！
ぜひご覧ください😊
お問い合わせ
私たちと一緒に、幼保業界や写真業界のDXを進めていく仲間を募集中です！
📋 採用情報
