📚

デザイナーのためのAI活用開発

az_kubo

2025/08/06に公開

 FigmaからReactモックアップまで、デザイナーがAIツールで実現する効率的フロントエンド開発
 普段の業務：Figmaを中心としたデザイン業務、Webサイトのコーディング普段はFigmaを使ったデザイン作業とWebコーディングが中心ですが、今回Reactによるフロントエンド実装にチャレンジしてみました。

フロントエンドの構築経験が少ないデザイナーでも、AIツールを活用してFigmaデザインからReactモックアップまでの一貫した効率的な実装のためのツール活用の設定方法をお伝えします。

 使用した開発ツール概要
 1.　ClaudeAnthropicのAIアシスタント。自然言語での対話を通じて、コード生成、デバッグ、技術的な質問への回答など、プログラミング作業をサポートします。

 2.　Roo CodeClaudeと統合されたコマンドライン開発ツール。ターミナルから直接Claudeにコーディングタスクを依頼でき、効率的な開発ワークフローを実現します。

 3.　VS CodeMicrosoftが開発した軽量で高機能なコードエディタ。豊富な拡張機能により、様々なプログラミング言語とフレームワークに対応し、現代的な開発環境を提供します。

 4.　GitHub CopilotGitHubとOpenAIが共同開発したAIコーディングアシスタント。リアルタイムでコードの提案や自動補完を行い、開発者の生産性を大幅に向上させます。

 VS Code内にClaudeとRoo Codeを連携させ、ファイル構築を行う
 やった事：画像を読み込ませ、Roo Codeを利用してReact環境での構築を一括作成Reactを作成する際、通常はページ構成やApp.jsのルート設定などを手動で行う必要があります。今回はその作業を効率化するため、ページ構成図の画像をRoo Codeに読み込ませ、必要なファイル構成とコードを一括で自動生成してもらいました

↑ 画像を読み込ませたプロジェクトのフローチャート

 Claudeとvsコードの設定をする
 1. ClaudeでAPIを取得左下のiコンから詳細→APIコンソールをクリック

 2. Claudeでメール送信Eメール or gmailを入力して、送信する。

 3. 受信されたメールからリンク遷移設定したメールアドレスの受信メールからリンクへ飛ぶ。

 4. リンク先からAPI Keyを取得するページへリンク先からAPI Keyを取得するページへ。

 5. API Keyを作成するクリックして、API Keyを作成する。

 6-1.Defaultでnameを入力、作成Defaultでnameを入力、作成する。

 6-2.Defaultでnameを入力、作成中Defaultでnameを入力、作成中。

 6-3.Defaultでnameを入力、作成後Defaultでnameを入力、作成中。

 7.vsコードでRoo CodeをダウンロードvsコードでRoo codeをインストールする。

 8.Roo Codeの設定から接続Roo codeの設定から、Claudeの接続をする。

 9-1.設定プロファイルはdefault設定プロファイルはdefaultで設定する。

 9-2.APIプロバイダーを設定APIプロバイダーは「Anthropic」を選択する。

 9-3.設定プロファイルを選択設定プロファイルを合わせたいモデルに設定する。

 9-4.すべて設定したら保存すべて設定したら保存する。Roo codeのみの設定はこちらで完了です。

 Git Hub Copilotとも連携する場合
 1.プロバイダーの設定Git Hub Copilotも接続したい場合は、「8.Roo codeの設定」からプロバイダーを選択する。

 2.言語モデルの選択プロバイダーから言語モデルの選択をする。

 3.接続の最終確認接続完了後、接続に問題ないかRooCode内で設定が大丈夫か質問する。問題なければ接続完了です！

 終わりに今回、AIツールを活用することで、従来は開発者に依存していたReact環境の構築からファイル生成まで、デザイナーでも効率的に行うことができました。FigmaからReactまでのワークフローが一本化されることで、デザインと実装の距離がぐっと縮まったと実感しています。

同じような課題を抱えているデザイナーの皆さんも、ぜひAIツールを活用して新しいワークフローにチャレンジしてみてください。きっと制作の可能性が広がるはずです！