こんにちは！デザイン事業部の八木田です。

Figmaに追加された生成AI機能、「Figma Make」を使って架空のWebサイトを作成しながら
どのプロンプトならデザイン性の高いWebサイトを生成してくれるかを実験しました（Figma Learn「ベストプラクティス」）。

本記事では、「日本語で指示する場合」と「英語で指示する場合」、あるいは「機能要件のみを指示する場合」と「styleを指示する場合」で生成されるデザインにどのような差が出るのかを検証しています。

本記事は2025年12月現在の情報です。
※Figma Makeのアップデートなどにより、生成物の質が変化する可能性が高いです。

検証の前提

今回は以下のパターンで検証を行いました。
1. シンプルな構成のポートフォリオサイト（日本語 / 英語）
2. 多要素ECサイトに機能要件のみを指示（日本語 / 英語）
3. 多要素ECサイトにstyleを指示（日本語 / 英語）
4. 【日本語 vs 英語】比較の検証結果
5. 【機能要件 vs スタイル】比較の検証結果

1. シンプルなポートフォリオサイトで比較（日本語 / 英語）

まずは、一般的な構成のポートフォリオサイトを
同じ内容の日本語プロンプトと英語プロンプトで作成しました。

プロンプトの内容

「ヒーローセクション」「プロジェクトギャラリー（3カラム）」「About Me」「Contact」という標準的な構成を、日本語と英語それぞれで指示しました。

日本語プロンプト：

クリエイティブなプロフェッショナルのための、ミニマリストでクリーンなポートフォリオサイトのデザイン、デスクトップ表示。
主要セクション：
1. 大きな紹介テキストとCTAボタンがあるヒーローセクション。
2. サムネイル画像とタイトルを含む、3カラムのグリッドレイアウトでケーススタディを表示する「プロジェクト」ギャラリーセクション。
3. 簡単な経歴とプロフィール写真がある「About Me」セクション。
4. メールアドレスとSNSリンクがあるシンプルな「Contact」セクション。 スタイルはモダンで、十分な余白と洗練されたタイポグラフィを使用。白黒の配色にアクセントカラーを1色。

英語プロンプト：上記の日本語プロンプトをそのまま英訳したもの

生成結果


(左: 日本語プロンプト、右: 英語プロンプト)

検証結果

標準的な構成を指示した結果、意外にも日本語と英語の差はほぼありませんでした。
日本語のプロンプトで生成したものも英語表記のWebサイトになりました。

2. 多要素ECサイトに機能要件のみを指示（日本語 / 英語）

次に、ECサイト（今回はオンライン観葉植物店）に「何を載せるか（機能）」のみを指示した日本語プロンプトと英語プロンプトで作成しました。

プロンプト内容

最初に、「ターゲットは20-30代」「高級感」という指定に加え、ヘッダーの項目、キャンペーンへの導線、ランキング表示などWebサイトに必要な「機能・構成要素」を日本語・英語で詳細に指示しました。

Webデザインの仕様書やワイヤーフレームの情報をそのままプロンプトにしたようなイメージです。

日本語プロンプト：

オンライン専門の観葉植物店「Green Fingers」のWebサイトをデザインしてください。
ターゲットユーザーは20代〜30代の男女で、スマートフォン版のWebサイトを作成してください。
トーンは洗練された高級感のあるものにしてください。ホーム画面の機能は、以下を参照してください。
ユーザーがサイトに訪れたときに、最初に見るページです。
「お店のコンセプト」と「商品の魅力」が伝わり、他のページも見てみたくなるような構成を考えましょう。
・ヘッダー
・ロゴ
・グローバルナビゲーション（例：ホーム, 商品一覧, Green Fingersとは, よくある質問, お問い合わせ）
・カートアイコン、ログインボタン
・メインビジュアル
・お店のコンセプトが伝わるキャッチコピーと写真
・開催中のキャンペーンや新商品への導線ボタン
・サービスの特徴
「初心者向けサポート」「品質保証」「豊富な品揃え」など、Green Fingersの強みが3つほど簡潔にわかるエリア
・商品カテゴリー
「育てるのが簡単な植物」「日陰に強い植物」「中型〜大型の植物」など、ユーザーが探しやすくなるようなカテゴリーへの導線
・人気商品ランキング
写真付きで人気商品を3〜5つ紹介
・お客様の声（レビュー）
・購入者の写真付きのコメントを2〜3件紹介
・お知らせ・コラム
・新商品の入荷情報や、植物の育て方に関するコラムへの導線
・フッター
会社概要、利用規約、プライバシーポリシーなどへのリンク、SNSへのリンク（Instagram, Xなど）」

英語プロンプト：上記の日本語プロンプトをそのまま英訳したもの

生成結果


(左: 日本語プロンプト、右: 英語プロンプト)

検証結果

「何を載せるか（機能）」を指示した場合も、日本語と英語の差はほぼありませんでした。
日本語のプロンプトからは日本語のWebサイト、英語のプロンプトからは英語のWebサイトが生成されました。

3. 多要素ECサイトに style要件を指示（日本語 / 英語）

最後に、ECサイト（今回はオンライン観葉植物店）に「どう見えるか（style）」を指示した日本語プロンプトと英語プロンプトで作成しました。

プロンプト内容

各機能のstyle、デザインシステムを指示しています。

プロンプトのキーワード：Sophisticated / 洗練された、Luxury feel / 高級感、Earthy tones / アースカラー、Serif font / セリフ体、2-column grid layout / 2列のグリッドレイアウト、Full-screen / 全画面表示など

日本語プロンプト：

プレミアムオンライン植物ショップ「Green Fingers」のモバイルウェブサイトデザイン。ターゲットオーディエンスは20～30代。洗練されたミニマルで高級感のあるスタイルで、十分な余白とアースカラー（セージグリーン、ベージュ）を採用しています。
レイアウト構成：
- ヘッダー：ハンバーガーメニューアイコン、ロゴ（中央）、カートアイコンを配置した、ミニマルな固定ヘッダー。
- ヒーローセクション：植物のあるスタイリッシュなリビングルームの高画質背景画像を全画面表示。
- エレガントなセリフ体のテキスト「Premium Plant Collection」に、錠剤型の「今すぐ購入」ボタンを重ねて配置。
- 機能：3つのアイコンを水平に並べ、「サポート」「品質」「種類」を説明する短いテキストを配置。- すっきりとしたアイコンデザイン。
- カテゴリー：水平にスクロールできるカードリスト（カルーセル）。各カードには、植物の画像とカテゴリー名（例：「手入れ簡単」「日陰好き」）が表示されます。
- 人気商品：商品カードを表示する2列のグリッドレイアウト。各カードには、大きな商品画像、簡潔なタイトル、そして価格が表示されています。角は丸みを帯びています。
- レビュー：お客様の声を丸いプロフィール写真とともに表示するスライダーセクションです。
- フッター：暗い背景に白い文字、ソーシャルメディアアイコン、シンプルなリンクを配置しています。
デザインシステム：高級感を演出するため、見出しにはセリフ体フォントを使用し、本文にはサンセリフ体フォントを使用しています。

英語プロンプト：上記の日本語プロンプトをそのまま英訳したもの

生成結果


(左: 日本語プロンプト、右: 英語プロンプト)

検証結果

「どう見えるか（style）」を指示した場合も、日本語と英語の差はほぼありませんでした。
こちらも、日本語のプロンプトからは日本語のWebサイト、英語のプロンプトからは英語のWebサイトが生成されました。

【日本語 vs 英語】比較の検証結果

今回の検証結果では、日本語のプロンプトと英語のプロンプトで生成物の質は変わりませんでした。
個人的には意外な結果となりましたが、Figma Learnのベストプラクティスにも言語に関することは特に記載されていません（2025年12月現在）。

プロンプトの言語による違いとして今回わかったことは、ヘッダーなどWebサイトのセクションを日本語で指示した場合には、日本語のWebサイトが生成されたということです。
言い換えると、プロンプトで機能やセクションなどを指示しない場合は、プロンプトの言語によらず英語のWebサイトが生成されることが多いようです。

※今回検証したFigma Makeでは日本語のプロンプトと英語のプロンプトによる生成物の差はありませんでしたが、他の生成AIでは言語による生成物の差がでる可能性があります。

【機能要件 vs スタイル】比較の検証結果

今回の検証で、Figma Makeの特徴として以下がわかりました。

  • 標準的な（よくある）構成は得意
  • Webサイトの機能のみを指示するとデザイン性が保たれない

つまり、多要素のWebサイトでは機能要件のみでなくstyleも一緒に指示することが不可欠です。

「1. シンプルなポートフォリオサイトで比較」では、ポートフォリオのようなWebデザイン定番パターンに関してはFigma Makeが十分な学習データを持っているためか、styleを指示しなくても整ったデザインが生成されました。

しかし、「2. 多要素ECサイトに機能要件のみを指示」では、生成されたWebサイトが情報の羅列になってしまいました。
プロンプトに含まれる機能の情報が優先され、レイアウトや余白のデザインがおろそかになっています。

まとめ

今回、Figma Makeのプロンプトを検証してみて、テキストのみのプロンプトでもstyleを指示するだけでデザインの精度が上がることを実感しました。

Figma Makeは最初の「たたき台」を作るツールとして非常に強力であると感じます。
Figma Makeで生成されたデザインはFigmaデータとしてコピーすることができるので、手直しも簡単にできます。

今後も引き続き、生成AIをたたき台として使えるよう生成精度が上がるプロンプトの書き方を検証していきたいと思います。