エンジニア転職へ繋がった技術ブログをFigma Make x Cursorを使って2日でフルリプレイスした。

あとで読む

最初に

Twitter post - 1 ※誤解を含む表記すみません、サーバーを持たない訳でなくDBを持たないためコストがかかりにくい構成になっています。

techBlog：大学生だった システムエンジニアを目指した時、作成したブログが4年間放置された状態で当時公開した記事も結構多くのいいねを頂けたので今回作り直しました。【無料運用】Zennの投稿記事を使ったブログをNext.js, Tailwindcss, TypeScript, Vercelで構築した。

右も左も分からない状態から、このブログのおかげで最初のシステムエンジニアとしての職を手にする事ができ、それ以来様々な開発経験の機会を得て、現在はフリーランスで活動出来ているため今後とも学んだ事をアウトプットしたいと思い今回新しくフルリプレイスしました。

リポジトリはテンプレート化されており、Zennで記事を公開している方ならリポジトリをcloneし記事公開用に使用しているリポジトリを環境変数で指定すればすぐに技術ブログが作成出来ます。 そのままVercelへデプロイすれば、技術ブログとして 【無料運用】 でご利用出来ます。

https://github.com/wimpykid719/blog-v2

機能

ブログとしての最低限の機能を兼ね備えています。

  • devcontainerによる環境構築
  • 画像の外部公開URLを取得する便利なVSCode・Cursorの便利な拡張機能も付随
    • ローカルの画像ファイルパスをコピーしてmdファイルにペーストする際にFirebaseに画像をアップロードしてmd用に変換してペーストしてくれる拡張機能
  • GitHubリポジトリに保存されているmdファイルをAPIから取得して記事一覧を作成する
    • この機能は以前のブログから引き継いでおり、このブログのメインの機能になります。ロジックをそのまま移行しました。

※階層が下記のようになっていれば、Zennに公開していないマークダウンファイルでも記事の生成が可能です。

zenn-content/
└── articles/
    ├── nextjs-tutorial.md
    ├── react-server-components.md
    └── ...
  • SEO対応
    • canonical/OG/Twitter Card
    • sitemap.xml
    • RSS配信
  • Google Analytics 4によるページビュー計測
  • 人気記事5選の表示
  • ダークモード対応
  • ページネーション

技術スタック

以前のブログと大きく変わらない構成になっています。 ※テストは個人プロジェクトのため今回は導入しませんでした。業務では絶対にテストコードも書きます。

  • TypeScript
  • Next.js
  • Tailwindcss
  • Biome
  • Docker
  • Devcontainer

開発手法

基本的にはどのようなコンテキストを与えるかを人は考え実装はAIに進めてもらう開発スタイルになります。

要件定義

  • ダークモード・レスポンシブ対応
  • トップページ
    • DevHouse：サイト名
    • スネークゲーム配置
      • アニメーションみたいな感じで自動操作
      • へびは **EF476F（頭）, FFD166, 06D6A0, 118AB2, 073B4C（お尻）**の正方形をつなげたデザイン
      • 背景色は透過させてデザインに馴染む
  • 自己紹介カードコンポーネント
    • 各種リンク
      • X
      • GitHub
      • 任意リンク
  • 技術ブログ一覧ページへの遷移カードコンポーネント
  • 記事一覧ページ
    • カードコンポーネントによる表示
      • サムネイルはないため、iPhoneの絵文字を使用してデザイン
      • タイトル
      • カテゴリ
      • 日付
      • 投稿サイト情報
        • Zenn
        • Qiita
  • 記事詳細ページ
    • タイトル
    • 日付
    • 各種SNSボタン
      • X
      • はてなブックマーク
      • Line
      • facebook
      • Threads
      • 記事コンテンツ
      • マークダウンのレンダリング
        • 数式
        • コードシンタックスハイライト
          • 言語表示
          • ファイルパス

Figmaでベースのデザインを作成

sample

こんな感じをイメージしてデザインを作成しました。エンジニアが最初のプログラミング学習で作成するスネークゲームを作りたく（自分は作成した事がなかったため）、このようなデザインにしました。

デザインツール生成AI向けのプロンプト作成

Figma Make用プロンプト作成用のベースのテンプレートを出力する

プロンプト

私が考えるアイデアを実現するためにFigma Makeという機能を利用してデザインを作成します。 私がイメージしているものを正確に作るためにどんな指示を出せば考えてください。 技術スタックはNext.js, Tailwindcss, shadcnを使おうと考えています。他にも実装に必要なライブラリは適宜追加していきます。

出力された内容とデザイン画像をベースに下記のプロンプトを記載

上記のテンプレート、下記の要件定義と画像を参考にFigma Make向けのプロンプトを作成してほしいです。

## MVP開発
テックブログを作成したい
レスポンシブ対応で画面はトップページ、記事一覧、記事詳細の3つでモバイル・デスクトップなので全部で6画面になるかと思います。
以下の要件に合わせて必要なコンポーネントを作成してほしいです。デザインはモダンなUIでカラースキーマは **EF476F, FFD166, 06D6A0, 118AB2, 073B4C** になります。これらを使用してこの色に合うように周辺のカラーを選択してください。


## 要件
- ダークモード・レスポンシブ対応
- トップページ
    - DevHouse：サイト名
    - スネークゲーム配置
        - アニメーションみたいな感じで自動操作
        - へびは **EF476F（頭）, FFD166, 06D6A0, 118AB2, 073B4C（お尻）**の正方形をつなげたデザインにしてほしいです。
        - 背景色は透過させてデザインに馴染むようにしてほしいです。
    - 自己紹介カードコンポーネント
        - 各種リンク
            - X
            - GitHub
            - 任意リンク
    - 技術ブログ一覧ページへの遷移カードコンポーネント
- 記事一覧ページ
    - カードコンポーネントによる表示
    - 記事
        - サムネイルはないため、iPhoneの絵文字を使用してデザインして欲しいです。
        - タイトル
        - カテゴリ
        - 日付
        - 投稿サイト
            - Zenn
            - Qiita
- 記事詳細ページ
    - タイトル
    - 日付
    - 各種SNSボタン
        - X
        - はてなブックマーク
        - Line
        - facebook
        - Threads
    - 記事コンテンツ
        - マークダウンのレンダリング
        - 数式
        - コードシンタックスハイライト
            - 言語表示
            - ファイルパス

生成された出力をFigma Makeへ

Figma Make、Stitch（Google開発するデザインツール）にベースイメージと共にプロンプトを投げる

Figma Make 初期 Figma Makeではそれっぽいの出力されたがレイアウトがぐちゃぐちゃであった... 以前、業務での管理画面実装の際はいい感じのデザインで作成してくれたため、ここまでレイアウトが崩れるとは意外であった。もしかするとデザインの詳細をプロンプトにして渡すのは良くないのかもしれない。 管理画面の際は要件だけ伝えてデザインはAIにまかせていたため、デザインをがちがちに固定するより余白を考える余地を残す方が安定したデザインになるのかもしれない。 figma-make

2回目 Figmaなのでレイヤーをコピペして渡せる事に気付いて、レイアウトと簡易なプロンプトで出力した方がより近いデザインだった、画像をプロンプトにするより、実物を見せた方が早かったという事ですね。 figma-make-2

Stitch せっかくなのでStitchでも出力してみた。こちらはFigma用に作成したプロンプトと画像を渡しました。 ※FigmaからStitchにレイアウトデータは渡せませんでした。逆は出来ました。 stitch

元のデザインとは絶妙に異なるのですがレイアウトは崩れておらずFigma Makeよりは良さそうでした。また Analytics Dashbordのデザインはモダンでカッコよかったです。 ただFigma Makeと違ってペラペラのHTMLで作成されたページでボタンのクリック等は不可能でした。 逆にFigma Makeはボタンによるページ遷移などがあり、ある程度の機能面も実装されていました。

リプレイス前のブログ、Figma Makeが吐き出したコードをCursorに渡し実装を進める

実装を進めるフォルダ配下に2つのコードをコピーして、コンテキストとして渡して @sample-blog/src/app/App.tsx を参考に @app/src/app 配下にトップページの実装をお願いします。 というプロンプトを細かく入力していき各ページのリプレイスを進めていきます。

メインのロジックも下記のように抽出して実装をお願いしました。

@app/src/app/articles/[slug]/page.tsx の記事生成を指定したGitHubリポジトリにあるマークダウンファイルから生成するように実装してほしいです。
blogフォルダ配下がGitHubリポジトリにあるマークダウンをダウンロードしてページを生成する処理になっています。こちらを参考にしてほしいです。
APIキーとGitHubのユーザ名は環境変数から渡して他のユーザもCloneしてすぐにブログが構築出来るように汎用的な設計にして欲しいです。

生成AIを利用したコード実装で下記の動画がとても参考になるのでおすすめです。 2つのOSSライブラリから使いたいコアな処理だけを抽出して、新しく軽いライブラリを作成するキメラ生成みたいな使い方をしていて、思考が柔軟だった。自分だとコンテキスト量とか使用制限気にして思いつかなかった。

https://www.youtube.com/watch?v=02rZ_XphtGY&t=2s

実務だとここにテストコード生成と生成AIによるコードレビューを追加します。 今回は個人プロジェクトなので自分がコードレビューしてマージしました。 それもTDDのようなやり方ではなく実装した機能に対してテストコードを書いて貰います。実装内容は手動の動作確認で担保してテストコードでは将来生成AIが書いたコードによって現状の仕様が崩れない事を担保する目的でテストコードを用意します。

動作確認

コードレビューはそこまで細かく見ずに動作確認で目的の動作になっている場合でセキュリティ的に大きな問題がなければスピード重視で良しとします。 ダックタイピングの「アヒルのように鳴くものは、アヒルだと考えて良い」と似た考えで目的の動作になっているのなら正しいコードだとして良しとします。

最後に

4年間放置されていた思い出の技術ブログを、Figma MakeとCursorを活用して2日でフルリプレイスすることができました。 生成AIを活用した開発手法により、デザインから実装まで大幅にスピードアップできたと感じています。

特にFigma Makeでは、レイアウトを直接見せた方がプロンプトだけよりも正確なデザインが生成できることが分かり、生成AIの使い方についても学びがありました。 また、Cursorを使った実装では、既存のコードをコンテキストとして渡すことで、より正確な実装を生成できることを実感しました。

今回のリプレイスで、以前のブログのメイン機能であるGitHubリポジトリから記事を取得するロジックを引き継ぎつつ、モダンなUIとダークモード対応、SEO対策なども追加できました。 リポジトリはテンプレート化されているので、Zennで記事を公開している方ならすぐに技術ブログを作成できるようになっています。 https://github.com/wimpykid719/blog-v2

ここまで読んでくださりありがとうございました。 記事に関するコメントや質問等は

🕊：X 👨🏻‍💻：Github 😥：Stackoverflow

でも受け付けています。どこかにはいます。