デザインに悩むエンジニアがAIエディタ[Cursor]で「いい感じ」のポートフォリオサイトを作成した話

# はじめに

個人開発者にとって、ポートフォリオサイトは自身のスキルや人柄を発信する大切なツールです。しかし、いざ作ろうとすると  
「どんな構成にする？」「デザインは？」「なるべく手間をかけずにカッコいい見た目を実現したい」  
といった課題が山ほど出てきます。

そんなときに役立つのが、最近話題のエンジニア支援ツール [Cursor](https://www.trycursor.com/) です。  
Cursorはデザイン案や情報構造の提案からコーディング支援まで、開発プロセスを包括的にサポートしてくれます。

本記事では、**React + MUI**でポートフォリオサイトを構築しつつ、**Cursor**を活用した試行錯誤の流れをご紹介します。  
「デザインセンスがない」「時間をかけずに良い感じのサイトを作りたい」そんな方の参考になれば幸いです。

> ※Cursorについては後述します。

# この記事でやること

- **Cursorを用いてポートフォリオサイトのデザインやレイアウトを改善**
- **他の参考サイトやコードを取り込みつつ、Cursorで反映してみる**

当初は自作でサクッと作ろうと思いましたが、「なんか微妙…」という状態に。  
そこで、Cursorを使ったらどう変わるかを検証してみました。

# Cursorとは？

[Cursor](https://www.trycursor.com/) は、AIによるコード補完・リファクタリング、デザイン提案などが可能なコードアシスタントツールです。

- **VSCodeベースのAI統合エディタ**  
- **特定コマンドでコード生成・改善を行える**

といった特長があり、エンジニアの日常開発に組み込みやすいのがポイントです。  
ChatGPTやCopilotに近いコンセプトながら、よりエディタに密接に統合されているため、スムーズなワークフローが期待できます。

## Cursorでできること（一例）

- コード補完・生成
- 既存コードへのリファクタリング提案
- デザイン改善のアドバイス（コード、画像を与えると具体的なUI案を得られる）

# 実際に使ってみた流れ

## 1. React + MUIで最低限の構成を作成

まずは、ReactとMUIで基本的なポートフォリオレイアウトを用意します。以下はシンプルな例です。

```jsx
import React from 'react';
import { Container, Typography, Box, Link } from '@mui/material';

function Portfolio() {
  return (
    <Container>
      <Box sx={{ my: 4 }}>
        <Typography variant="h4">Your Name</Typography>
        <Typography variant="body1">エンジニア / フロントエンド / React</Typography>
        <Typography variant="body1">趣味：プログラミング、読書、ゲーム</Typography>
        <Link href="https://twitter.com/your_twitter">Twitter</Link>
        <br />
        <Link href="https://qiita.com/your_qiita">Qiita</Link>
      </Box>
    </Container>
  );
}

export default Portfolio;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/30e16440-f06a-101c-4b3c-f55e7098876f.png)

この段階では、ただテキストが並んでいるだけ。デザインはほぼ手つかずです。

## 2. Cursorで抽象的にデザインを指示してみる

ここからが本題。Cursorに「よりスタイリッシュなデザインにして」「背景にカラーグラデーションを追加して」といった要望を渡します。
CursorのComposer機能を使い、ファイルを指定してデザイン改善を指示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/e62ab3be-30f0-60d6-47b6-6c4ca89ddfaa.png)

すると、Cursorは差分コードを生成。
![image34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/17e7c463-8979-af71-e2c3-43efdb96abe0.png)
エディタ上でも直接確認でき、「Accept」をクリックすると、そのまま反映できます。
![image35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/136b7759-6921-372a-20e8-166462639d22.png)

エラーがあってもCursorに修正を指示すれば対応してくれます。
不足パッケージがあれば、ワンクリックでインストールできる点も便利です。
![image36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/59a1b735-ebb1-87c3-0ae8-3536ea580d73.png)

改善後の画面はかなり洗練されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/61a2bba9-c066-2b69-7271-9b8d8cc2499f.png)

「おおー、わりと美しい！」となりましたが、まだ物足りない部分もあります。
もう少しアレンジしてみましょう。

## 3. 画像や参考サイトを与えてさらに改善
「この参考サイトみたいなデザインにして」と追加指示を出してみます。
たとえば、以下のURLを参考としてCursorにスクリーンショットを渡しました。

https://dribbble.com/shots/22267312-Multi-Concept-Portfolio-Website

Cursorはこの情報を元にレイアウトを再構築。
![image37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/87ef444b-f21e-53e9-f2be-d4df8275e3c0.png)

プロフィールの内容を微修正（Composer上での追加指示）した結果。
![image38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/6abfa3ac-8bb2-da00-0bb9-7ce437df147a.png)

最終的に、すごくしっくりくるデザインに仕上がりました。
ツイッターやQiitaリンクが消えてしまったのですが、それは後から再度追加すればOKです。

## 4. 動きのあるデザインを取り込む

もう一歩踏み込み、ホバー時にアニメーションがかかるデザインを取り込んでみました。

https://uiverse.io/

上記サイトで気に入ったデザインを見つけ、Cursorにコード例を渡します。
今回は、以下を参考にしました。

https://uiverse.io/gagan-gv/lovely-dragon-72 

Cursorにサンプルコードを与えて適用箇所を指示すれば、簡単にホバー時アニメーションを取り込むことが可能です。

![画面収録-2024-12-19-0.10.21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005049/d43244e8-a9a9-3fcb-2058-00c55e2c4095.gif)

## 5. 最終的な結果

数回のやり取りと試行錯誤を経て、納得のいくポートフォリオサイトが完成しました。
もちろん最後は微調整が必要ですが、「最初どうしよう…」と悩む時間は大幅に減りました。

実際の成果物はこちら → 

https://my-home-page-ashy.vercel.app/

# まとめ
- ポートフォリオサイトのデザインや構成に悩んだら、CursorのようなAIコーディングアシスタントを活用することで、初期設計のハードルが下がります
- 要素整理、デザイン指示、画像取り込みなど、段階的な改善が手軽に行えます
- 従来なら手間のかかった初期デザイン検討が、Cursorを活用することでスムーズに進行できます

以上、Cursorを使ったポートフォリオサイト作成プロセスの紹介でした。
ぜひCursorを試して、デザインや実装の効率アップを体感してみてください！