ある日、Webデザインを作りながらふと考えました。

「これって本当に実装できるのかな🤔」

良いデザインが浮かんだものの、技術的なハードルを前に手が止まったり、「工数的に厳しいかも」と最終的に実装しやすい妥協案を採用してしまった経験、デザイナーならきっと一度はあると思います。

でもこうやって実装が足かせになって自由な発想を止めてしまうのって、ちょっともったいですよね。

そんな実装のネックも、『Cursor』を使うことで取り払えるかもしれません。

Cursorとは

『Cursor』（カーソル）は、AIを搭載したコードエディタです。

ChatGPTなどの対話型AIを使ったことがある方も多いと思いますが、Cursorはコードエディタ内にチャットUIが組み込まれています。コード生成やコーディング作業をサポートしてくれます。
同じようなAIツールには『Github Copilot』などもあります。

デザイナー視点でのCursorの魅力は、エンジニアリングの知識が浅いデザイナーでもAIの力で複雑なデザインを形にできる点です。
技術的なハードルに縛られず思い描いたデザインを形にする手助けをしてくれる、このツールについて少しご紹介します。

Cursorでは以下のようなことができます。

• 「このボタンをクリックしたときに背景色を変えるコードを書いて」といった、依頼ベースでコードを生成

• プロジェクト全体を理解した上で、コードの補完や最適化

• 開発中のエラーや疑問点へのアドバイス

こうした機能のおかげで、デザインの実装だけでなくプロジェクト全体を幅広くサポートしてくれます。

私がCursorを使い始めて感じたメリットは、

• コードをゼロから書く手間が省ける
  依頼ベースで実装が進むのでコードをゼロから書く手間が省け、実装にかける工数を短縮できるようになった

• コードの品質が向上する
  AIの提案に沿って実装を進めることで、可読性や再利用性の高い、効率的で洗練されたコードが書けるようになった

という点です。

Cursorの活用例

ここで、直近でCursorを活用した事例をひとつ紹介させてください。
こちらは私がFigmaで作成したプロトタイプです。

このデザインは、以下のように少し複雑な挙動が含まれていました。

• ホバーで動画の再生／停止を切り替え

• ホバーで動画の重なり順を変更

• ホバーで動画をふわっと拡大するアニメーション効果

実はこのプロトタイプを作った段階では、これを具体的にどう実装するかまで考えられていませんでした。しかしCursorに実装をサポートしてもらったところ、驚くほどスムーズに実装が進みました。

1. 静的なデザインからHTMLとCSSの作成

はじめにCursorに先ほどのデザインの静止画を添付し、「この見た目になるようにHTMLとCSSを作成してください」と依頼しました。
すると、ものの数秒で基本構造が整ったコードを生成してくれました。

自分で一から書く場合、これだけでも数十行のコードを書く必要があります。
また、私はよく「divがひとつ足りなかったからHTML構造を変えないと🥺」といった凡ミスをしがちなのですが、Cursorはそうした設計の抜け漏れを防ぎつつ、効率的に基盤を作ってくれます。

2. 挙動の追加とJavaScriptの生成

次に、

「動画を追加したい」
「この要素をホバーした時だけ動画が再生されるようにしたい」
「ホバーした時に動画を拡大して、重なり順も変更したい」

などより具体的な挙動を含む要望を伝えることで、JavaScriptのコードも生成してくれました。

自力でゼロからコーディングをしていたら間違いなく数時間以上かかったであろう作業が、Cursorのおかげで大幅に効率化されました。

3.リファクタリング

さらに完成に差し掛かったころで、JavaScriptのコードが冗長になってしまったためCursorに「可読性を改善したい」と相談したところ「カスタムフックを作成して整理する方法」を提案してくれました。
アドバイスをもとにコードをリファクタリングした結果、より簡潔で読みやすいコードに仕上げることができました。

最終的にこのコードをエンジニアにレビューしてもらった際、「カスタムフックを作れるデザイナーはもうエンジニアです」と言ってもらいました。
Cursorの存在を隠しておくか5秒くらい迷ったのはここだけの話です🤫

得られた成果と気付き

Cursorを活用したことでデザインの自由度が増し、その実装もスムーズになっただけでなく、自身のスキルアップにも繋がったと感じています。
以下に、具体的な成果を挙げてみます。

1. 「実現可能性に縛られないデザイン」を追求することができるようになった

これまではデザインを考えるたびに「これは実装できるのか？」という懸念が頭をよぎり、実装上のハードルを想定して途中で諦めてしまうことがありました。
しかしCursorを使うことでそのハードルが大幅に下がって、実現可能性に縛られず、より良いデザインを追求できるようになりました。

2. コードへの理解が深まり、エンジニアリング力が向上した

Cursorのサポートを得ながらコードを書くことで、実践を通じて多くの学びを得ることができました。
疑問も気兼ねなくぶつけられるので、同僚には聞きづらいような初歩的な質問でも丁寧に解説を返してくれます。その過程で「なぜこう書くのか」「どうすればコードを効率化できるのか」といった知識まで学ぶことができるので、結果としてエンジニアリング力も向上したと感じています。

デザイナー視点でのCursor活用のコツ

最後に、デザイナーとしてCursorを活用するための私なりのコツを共有します。

1. 「完璧」を求めず、まずは試してみる

Cursorを使う上で大切なのは、「最初から完璧なコードを目指さないこと」です。Cursorが提案するコードも最初は未完成であることを理解した上で、「なんだ使えないじゃん」などと思わないようにする。Cursorと一緒に作り上げていくそのフローに学びのチャンスがあると思っています。

2. 実装しながら「なぜこうなるのか」を理解する

Cursorはコードの生成だけでなく、なぜそのコードが機能するのかを教えてくれます。生成されたコードをただコピペするのではなく「どうしてこの書き方なのか」「もっと良い方法はないのか」と質問を重ねることで、その背景にある考え方やロジックも吸収することができます。

Cursorで広がるデザインの可能性

デザインを作成する中で「実現可能性」を気にしすぎてしまい、いつの間にか自由な発想が制限されてしまう場面は少なくありません。
CursorはAIコードエディタですが、デザイナーにとってはデザインの可能性を広げてくれるツールとしても役立つと考えています。

デザインはわかりやすさやユーザー体験を追求するだけでなく、実現可能性や工数とのバランスを取る必要があります。Cursorはそれを支えるツールとして、デザイナーのアイデアを形にする力を高めてくれます。

「これ実装できるのかな？」と思った時には、AIコードエディタを使って妥協しないデザインを実現してみてください。