生成AIAdvent Calendar 2024

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

Last updated at 2024-12-20Posted at 2024-12-20

はじめに

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

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

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

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

この記事でやること

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

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

Cursorとは？

Cursor は、AIによるコード補完・リファクタリング、デザイン提案などが可能なコードアシスタントツールです。

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

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

Cursorでできること（一例）

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

実際に使ってみた流れ

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

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

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;