Figma Make × Claude Codeでデザインから実装まで 第1回：デザイン編

はじめに ― この連載について・作るものの紹介

デジタルエンジニアリング部 Eビジネスエンジニアリング課の小枝です。
ここ最近のAIの進歩がすごいですよね。デザインや実装にも使えると聞いたので、実際に試してみました。

この記事ではClaudeと相談しながらFigma Makeにアプリのデザインをしてもらい、次回以降はClaude Codeにフロントの実装の修正を任せる形で進めます。

まずFigma Makeとは何か

AIであなたのアイデアを実現しましょう。デザインから始めて、プロンプトで機能的なプロトタイプを素早く作成できます。

引用: Figma Make

引用にある通り、プロンプトを入力してデザインを生成してくれるサービスです。 今回はこれを使ってデザインを出力します。

Claudeに相談できる環境があるので、まずClaudeと一緒に要件を整理してからFigma Makeに渡すことにしました。

実際にやってみる

今回はカラーパレットのジェネレーターをデザインします。 まず、どのようなアプリにするかを考えます。

• ブラウザで動く
• キーカラーを選ぶとそれに合わせて4色選んでくれる
• カラーコードをコピーできる
• さらにはCSSのコードも吐き出してくれる

アプリの必須項目は以下としました。

• キーカラーを選ぶ・入力できるUI
• 他の4色の出し方の種別を選べるようにする
• 今の色より明るい・暗い色も表示できる

今回は記事内で制作する関係上、スモールスタート版にすることとし、以下にまとまりました。

カラーパレットジェネレーター（スモールスタート版）

コア機能
- キーカラーのカラーピッカー＋HEX直接入力
- 配色種別の選択（補色・類似色・トライアド・モノクロマティック）
- 生成された4色の表示
- カラーコードのコピー（HEXのみ）
- CSSカスタムプロパティの出力

アクセシビリティ
- コントラスト比の表示（WCAG AA/AAA判定）

拡張例として記事内で言及するだけ
- 明暗バリエーション（Tints/Shades）
- RGB/HSL対応
- パレット保存・履歴
- カラーネーム表示
- テトラード・スプリット補色などの追加配色種別

必要な機能やコンセプトを事前に伝えていたおかげで、綺麗にまとめてくれました。 これをもとにプロンプトを作ります。

プロンプトでUIを生成する

Figmaが公開しているヒントを頼りに方針を決めます。

1.プロンプトの初回入力時に前もって詳細を記述しておく
初回のプロンプトでデザインを詳しく記述すればするほど、少ないやり取りで希望する結果を得られます。デザイナーアドボケイトのAna Boyerは次のように述べています。「初回の生成でできるだけ理想に近い結果を得て、あとはわずかな調整で済ませることをおすすめします。出力を修正するために何度もプロンプトを入力するほうが、はるかに時間がかかります」

初回のプロンプトに盛り込むべき、重要な詳細は以下の通りです。
タスク: Figma Makeがすべきこと
コンテキスト: このフローまたは画面をどこに配置するか
主なデザイン要素: Figma Makeが組み込むべき重要な要素
期待される挙動: そうした要素がインタラクションによってどう挙動するか
制約: デバイス、レイアウト、ビジュアルスタイルなど

引用: Figma Makeを使いこなすための8つの重要なヒント

上記の内容とスモールスタート版の要件をClaudeに伝え、プロンプトを作ってもらいました！ 質問がいくつかありましたが、それに答える形で進行しました。

以下、プロンプトの内容です。

カラーパレットジェネレーターのWebアプリを作成してください。

## タスク
キーカラーを選ぶと、配色理論に基づいた4色のパレットを生成するWebアプリ。

## コンテキスト
- ブラウザで動くシングルページアプリ
- デスクトップ向け

## レイアウト
全体を黄金比（1:1.618）で構成する。

上段（全体の61.8%の高さ）：
- 左エリア（幅61.8%）：選択したキーカラーを大きく表示
- 右エリア（幅38.2%）：生成された3色を縦に並べて表示

下段（全体の38.2%の高さ）：
- 左エリア（幅38.2%）：配色種別の選択ボタン
- 右エリア（幅61.8%）：Tailwind CSSクラスの出力エリア

## 主なデザイン要素

### キーカラーエリア（上段左）
- アプリ名「color palette generator」をエリア左上にテキストで表示
- テキスト色はキーカラーの背景に対してWCAG AAAを満たす色（白または黒）を自動適用
- カラーコードをエリア左下に表示（文字色も同様にAAA基準で自動適用）
- 右下に円形のカラーピッカーを配置し、色を変更できるようにする

### 3色スウォッチエリア（上段右）
- キーカラーを除く残り3色を縦に並べる
- 各スウォッチの下部にカラーコードとコントラスト比を横並びで表示
  - カラーコードは左、コントラスト比はmargin-left:autoで右寄せ
  - コントラスト比はWCAG AA（4.5:1）以上を達成している文字色（白または黒）のみ表示
  - 「Lorem ipsum　比率　AA/AAA」の横並び形式
  - 文字色・比率・バッジすべて視認できる方の色（白か黒）で表示
  - 枠線・背景色なし

### 配色種別エリア（下段左）
- 以下の4種類をボタンで選択できるようにする
  - 補色 / 類似色 / トライアド / モノクロマティック
- ボタンはアクティブ時にキーカラーの色で塗りつぶす
- 非アクティブ時は薄いボーダーと背景色

### Tailwind CSS出力エリア（下段右）
- ラベル：「Tailwind CSS」
- 生成された4色をTailwindのアービトラリー値形式で出力
  例：bg-[#5B7FCF] /* primary */
- 右上にコピーボタンを配置

## デザインスタイル
- ミニマル・フラット
- 角丸なし（border-radius: 0 または 2px以内）
- 余白は要素外ゼロ、要素内で余白をとる
- 各エリアはborder（0.5px）で区切る
- フォント：サンセリフ、モノスペース（カラーコード・CSS部分）

## 期待される挙動
- カラーピッカーを変更すると即時にパレット・コントラスト比・CSSが更新される
- 配色種別を切り替えると即時に3色が更新される
- コピーボタンを押すとTailwindクラスをクリップボードにコピーし、ボタンのラベルが「コピーしました」に変わる

## 制約
- 日本語UI
- レスポンシブ不要、デスクトップ固定
- バックエンド不要、フロントエンドのみで完結

準備ができたのでFigma Makeにデザインを作ってもらいましょう！

生成結果を確認・調整する

まず1回目の出力です。 プロンプトをしっかり作り込んだのである程度想定している構造になりました。 ここから調整を追加して作り上げます。

5回目、12回目の調整ではこのようになりました。 上部・下部の割合を変えたり、配色の種類の位置、アクセントカラーの数、コードのコピー等の修正をFigma Makeに対応してもらいました。 対話形式で修正できるので便利ですが、簡単な修正にもわざわざ指示を出して修正するのは少しもどかしいです。

コードの実装も同時に行ってくれました。

では次回、Claude Codeにはコードの品質を上げてもらおうと思います。

やってみての所感

• プロンプトとして事前に伝えておく事項がそれなりにあるので、思いつくまま生成させるとコントロールに苦労しそう。
• いくらAIで便利になるとはいえ、寄りかかりすぎないようにしないといけない。
• Figma Makeの時点で簡単な実装まで完了しているとは思わなかった。プロトタイプの作成までのスピード感がすごい。

Figma Makeの良かった点・気になった点

良かった点

• 一度に全部生成するのではなく調整もできるので、恐れずに進められるのが良い。
• ちゃんとプロンプトを作る必要があるが、パッと見は問題ないものをものすごいスピードで作ってくれるのが良い。
• 実装も同時に行ってくれるので、お客さまにお見せするプロトタイプの実装までが一気に作れて良い。

気になった点

• Figmaのデザインファイル(.fig)としては出力できなかった。別途デザインファイルが必要な場合、スクリーンショットを撮るか自分で組み立てる必要がある。
• プロンプトをちゃんと入力できないとトークンをいたずらに消費しそう。
• デザインの細かい修正はFigma Makeに明確な指示を出す必要がある。

デザイナー目線で使ってみると

このレベルのデザインが実装まで一気に作れるのは、体験としては素晴らしいものでした。
今回は0→1のデザインを作りましたが、デザインを読ませて修正・実装してもらう手段も取れるようなので、結構利用の幅が広そうです。
これからはAIと並走しながら協力してデザイン～実装までできる人材が重宝されるのかなと思いました。
面白かったので、これからもうまく活用したいですね。