Claude CodeにFigmaを渡したら、実装が爆速になった話【デザイナー実験レポ】

Claude CodeをWeb制作でどう活かせるか、実験してみた

はじめまして、フリーランスWebデザイナーのシンメです。

今、大人気のClaude Code。
私もその流れで触り始めて、10日くらい経ちました。

Webサイト制作にも使えるらしいけど、実際どう扱うんだろう？と思い、
Figmaのサンプルデザインで試してみることにしました。

結論から言うと、

FigmaのURLを渡して、テキストで指示するだけで
デザイン → 実装 → 公開できる状態まで一気に進みました。

※実際に架空のポートフォリオサイト1ページ分を作りながら検証しています。

この記事では、その制作フローをデザイナー目線でまとめます。

💡 FigmaのURLを貼って「これ実装して」と伝えたら、
1時間以内にサイトが動く状態までできた話です。

こんな方におすすめ

・Figmaでデザインはできるけど、コーディングがハードルに感じている
・ポートフォリオを作りたいけど、手が止まっている
・エンジニアに頼まずに、自分で公開まで持っていきたい
・Claude Codeが気になっているけど、どう使うかイメージできていない
・AIをWeb制作にどう活かせるか知りたい

続きは、リベシティにログインしてからお読みください

＼初月30日間無料／ リベシティで会員登録をする ログインする

ノウハウ図書館でできること

• すべての記事の閲覧

• ブックマーク

• いいね・レビュー

• 記事の投稿※応援会員（有料）のみ

• ポイントの獲得※応援会員（有料）のみ

※会員登録には、新入生会員（初月30日無料）と応援会員（有料）があります

応援会員制度とは？

さらに！

• リベシティの他の機能やサービスもご利用いただけます（詳しく見る）