フリーランサーのポートフォリオサイトを4時間で仕上げた話

なぜClaude Designを選んだか

フリーランスのWebデザイナー向けにポートフォリオサイトのデザイン案を出す仕事が入った。クライアントは「3日後にラフ案を見せてほしい」という人で、Figmaで1から作る時間はない。Canvaだと「いかにもテンプレ感」が出てしまう。そこでClaude Designを使うことにした。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。※Canva: ノンデザイナー向けのグラフィックデザインツール。Claude Designのエクスポート先の一つ。

最初に投げたプロンプト

フリーランスのWebデザイナー向けポートフォリオサイト、トップページ。
ターゲット：スタートアップのCTO・PM
トーン：プロフェッショナルだが堅すぎない
カラー：ダークネイビー（#0A1628）+ アクセントにシアン（#00D4FF）
構成：ヒーロー → 実績数値3点 → 制作事例カード3枚 → お問い合わせCTA
フォント：見出しはGeist、本文はInter

出てきたデザインは、正直想像より良かった。ヒーローセクションのレイアウトはスマートで、実績数値（プロジェクト数・クライアント数・リピート率）の見せ方はそのまま使えそうなクオリティだった。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。※CTA: Call To Action（行動喚起）。ボタンやリンクでユーザーに次の行動を促す要素。

うまくいったこと

バリエーション出しのスピードが際立った。ヒーローセクションの「名前・キャッチコピー・CTAボタン」の配置を「4パターン出して」と頼んだら、30分で4案揃った。Figmaで同じ作業をしていたら半日かかる。クライアントに選んでもらうプロセスも楽になった。

カラーの一貫性も想定以上だった。最初にカラーコードを渡すと、それ以降の出力でほぼブレなかった。ホバー状態の色変化（シアン→やや明るいシアン）まで自動で考慮してくれた点は助かった。

つまずいた罠を正直に書く

制作事例カードのレイアウトは3回やり直した。最初の出力は事例カードの画像エリアが小さすぎて、ポートフォリオ感が出なかった。制作事例カードは横長1.6:1の比率で画像エリアを大きく取ると具体的に追加したら、ようやく納得できる出力になった。

お問い合わせフォームは最後まで苦労した。Claude Designが出してくるフォームは「教科書的な縦並び」ばかりで、「2カラムで氏名と会社名を横に並べたい」と指示しても微妙にバランスが崩れた出力が続いた。結局フォームだけはFigmaで手作りした。

スマホ表示も罠だった。Claude Designはデスクトップファーストで考えているようで、「スマホ表示も」と追加指示すると、デスクトップのレイアウトをそのまま縮小したような出力になりがちだった。スマホ向けに別途設計する。ヒーローは縦積み、CTAは全幅ボタンと明示的に書いてから改善した。

Claude Codeとの組み合わせで完結

Claude Designで全体のビジュアルトーンとセクション構成を固め、Claude Codeで実装する流れにした。Claude Designの出力スクリーンショットを撮り、このデザインをNext.js + Tailwind CSSで実装してと渡すと、かなり忠実に再現できた。

ポートフォリオ5セクション分のデザイン案出し→確認→修正の工程が合計4時間で終わった。以前は同じ作業に丸2日かけていたことを考えると、もう戻れない。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。

まとめると

• ヒーローやカードセクションは得意。バリエーション出しに使い倒せる
• フォームやインタラクティブ要素は苦手。そこはFigmaや手作りを組み合わせる
• スマホ指示は「別途設計する」と明示しないとズレる
• 最終的にClaude Codeとセットで使うのが一番効率的