私たちの日常業務において、生成AIの力をどのように活用できるかというテーマは、避けて通れないものとなりつつあります。ChatGPTやClaude、Geminiだけで、特定の業務を効率化する試みはもちろん有効です。同時に、複数のAIプロダクト（ChatGPTとCanvaなど）を組み合わせることで、さらに大きな相乗効果が期待できます。
各AIプロダクトは強力な得意技を持っている一方で得手不得手もあり、使う側の操作性やUIデザインの好み、さらには利用コストの差も無視できません。こうした要素を吟味し、最適な使い方を見つけることが、費用対効果の向上につながります。
一方で、AIプロダクトの機能進化と登場のペースは非常に速く、その全容を把握し続けることは容易ではない状況にあることも確かです。気づけば、私たちは急速な変化の渦中にいるのかもしれません。
AIプロダクトが進化したことで、htmlやcss、Pythonなどのコードを最初から人が書く時代は終わった印象です。まず、AIプロダクトにコードを書かせる。そのコードをデザイナーやプログラマが微調整する。極端な話、コードはAIに書かせる時代になったといえそうです。このような環境変化から、業務の中にAIの力をどのように組み込むかが重要になってきました。
本記事では、デザイン業務に焦点をあてて、WebサイトのデザインとコーディングをAIプロダクトを使って効率化するための具体的な組み合わせの一例をまとめました。
手描きワイヤー → Figma → Cursor から Figma API/MCP 連携 → 実装
この方法は、紙に描いたラフスケッチを使って、FigmaとCursor を組み合わせて、最終的にwebサイトを作成するためのやり方です。
📌 流れ (どうやって進めるの？)
まず、手描きのラフスケッチを、Figmaに取り込みます。
Figmaで「デジタル設計図（型紙）」を仕上げる。
Figmaの中で、手書きのスケッチを「完璧な設計図（デザインデータ）」に仕上げます。
【例え】 まさに、洋服の「縫い代（ぬしろ）は1cm」「このボタンを使う」「生地はこの色」と細かく決めた「精密な型紙」を作る作業です。
- 「オートレイアウト」で部品の並び方を決め、
- 「コンポーネント」でボタンなどを使い回せるようにし、
- 「変数（バリアブル）」で色やスキマのルール（例: 「見出しと本文のスキマは常に16px」など）をきっちり定義します。
CursorがFigma MCPサーバーを介して、型紙データを正確に取得する。
「このボタンの幅は100px」「見出しと本文のスキマは16px」「色は#FFFFFF」といった、あなたがFigmaで決めた型紙データ（全てのデザイン情報）を、Figma MCPサーバーを介して直接読み出してCursorに渡されます。Cursorは、その情報をもとにAI支援機能を使って、プログラム（ReactやTailwindという言語）を書き上げます。
🎁 主なアウトプット (最終的に何ができるの？)
デザインした「型紙」と寸分たがわない「服」（＝Webページ）が完成します。
✨ 優位点 (このやり方の良いところ)
デザインの「ズレ」がなくなる。
最大のメリットです。デザイナーがFigmaで「16pxの余白」と決めたら、AIは絶対に16pxのプログラムを作ります。人間（プログラマー）が手作業で起こしがちな「あれ、なんか見た目が違う…」という"デザイン崩れ"がなくなります。
Figmaのデータが「絶対的なお手本」になる。
Figmaのデザインデータが「唯一の正しい答え（お手本）」になります。
これを見て、プログラマーもAIも作業するので、デザインの食い違いが起きにくい。
※ デザイン変更時にCursor側との共有ルールを決めておく必要がある。
😥 課題・注意点
実務上、手書きスケッチはあくまで下絵であり、完全自動化ではない。
取込み→Figma→ワンクリックでHTML/CSSまでを全自動で高品質に仕上げることは、いまのところ現実的ではない。
最初の「道具の準備」が少し大変。
FigmaとCursorを初めてつなぐための設定が、少し専門的で時間がかかることがあります。
👍 向いている場面 (どんな時に使うと便利？)
- 紙にデザインイメージを描いてスタートする時
- 1ピクセルのズレも許したくない、完璧なデザインをそのまま形にしたい時
Brand Kit → トークン化 → サイト感を統一
これは、バラバラなデザインのサイトを、「これがうちの公式デザインです」というルールブックを作り、それを使って、AIに既存サイトのバラバラなデザインを統一するやり方です。
「お店の内装（サイト）の見た目が、支店（ページ）ごとにバラバラになっちゃった…。本社の『ブランドルールブック』を作って、AIに全店舗の内装を一斉リフォームしてもらおう！」 というイメージです。
📌 流れ (どうやって進めるの？)
Canvaで「公式ルールブック」を作る 。
まず、Canva（キャンバ）の「ブランドキット」機能を使います。 ここで、「うちのブランドで使う色はこれ」「文字（フォント）はこれ」「ロゴはこれ」という公式ルールをビシッと決めます。 決めたら、色の番号（#FFFFFFなど）やフォントの名前をメモしておくといいでしょう。
※トークン化とは、デザインの色や数値に “名前付きの変数” をつけて管理すること。
ルールブックを「AI用の指示書」に翻訳する (VS Code + AI) 。
次に、プログラマーが使う開発環境ツール（VS Code）とAI（GitHub Copilot）を使って、色やフォントなどの公式ルール情報を、プログラムが理解できる「設計指示書」（専門用語でJSON形式のデザイン・トークン）に書き換えます。
AIが全ページを一斉リフォーム 。
最後に、VS Codeを使います。 VS Codeに「このサイト全体を、さっき作った『設計指示書』通りのデザインに書き換えて！」と命令します。 すると、
AI（GitHub Copilot）の力を借りて、JSON形式のデザイン・トークンを使って、CSS変数やテーマ設定へ出力し、複数ファイルにまたがって変更してくれます。
🎁 主なアウトプット (最終的に何ができるの？)
- デザインの「公式ルールが書かれた設定ファイル（設計指示書）」
- そのルール通りに、見た目が統一されたサイト一式
✨ 優位点 (このやり方の良いところ)
デザインの「ブレ」がなくなる。
Canvaで作った「公式ルールブック」が絶対的なお手本になる。
これによって、「このページのボタンだけ色が違う…」や「こっちはフォントが違う…」といったデザインのバラつきが劇的に減ります。
😥 課題・注意点
完全自動ではない。
GitHub Copilotは提案を回答しますが、開発者が差分を確認・微修正してコミットする必要があります。つまり、人手が必ず介在します。
最初の「名付け」が少し大変。
Canvaの「アクセント・イエロー」はブランド色（参照トークン）として定義し、プログラム側では「警告（warning）」などの役割トークンを作って値を持たせず、必要に応じて紐づいた参照トークン（ブランド色）を参照させます。こうしておくと、後からテーマやコントラスト要件に合わせて参照先だけ差し替えられます。
👍 向いている場面 (どんな時に使うと便利？)
「ページによって見た目がバラバラ…」となっている今のサイトに、統一感を出したい時
EC商品画像のブランド固定：ChatGPTで撮影基準 → Nano Banana生成 →（必要に応じて Stable Diffusion 補完）→ Figmaライブラリ
これは、「AIを使って、ネットショップの商品写真を『自動で・大量に・超キレイに』統一する、AIフォトスタジオの作り方」です。
📌 流れ (どうやって進めるの？)
ChatGPTで「撮影ルールブック」を作る 。
まず、AI（ChatGPT）に手伝ってもらい、商品写真を撮るための「公式ルールブック」を文章で作ります。 （例：「背景は絶対この黄色（#FFFF00）」「商品のまわりのスキマは10%」「影は右下にくっきり」など、デザイナーが決めるべきデザインの決まりごとを全部決めます）
「AIカメラマン」を教育する（Nano Banana） 。
次に、「Nano Banana」という画像生成AIを使います。これがメインの「AIカメラマン」です。 このAIに、さっき作った「公式ルールブック」（ブランドの黄色、影のルール、撮る角度）を教え込みます。
「AIカメラマン」が全商品を「自動撮影」する。
AIカメラマンに「このスニーカーを、5色ぜんぶ、3つの角度から撮って！」と指示します。 すると、AIが「公式ルールブック」通りに、何十枚ものリアルな商品画像（メイン写真、拡大写真など）を自動生成してくれます。
「助っ人AI」が「修正（レタッチ）」する (Stable Diffusion) 。
もしAIカメラマンが上手に撮れなかった場合、別のAI（Stable Diffusion）を呼んできて、苦手な部分だけをキレイに修正（レタッチ）させます。
「デザイン部品倉庫」を作る (Figma)。
AIが作った写真をFigmaに取り込みます。 さらに、その写真と組み合わせて使う「SALE」や「NEW」のバッジ、商品カードのレイアウトなどもFigmaで「コンポーネント（部品）」として作っておきます。 （＝これが「部品倉庫」です。誰でもここから部品を取り出して使えます）
「AI検査官」が最終チェックする（ChatGPTのVision機能）。
最後に、AI検査官（例えば、ChatGPTのVision機能や、Gemini、Claudeの画像が理解できるマルチモーダルモデル）に、完成した写真が「公式ルールブック」をちゃんと守っているか（スキマは10%か？ファイルサイズが重すぎないか？）を自動でチェックさせます。
🎁 主なアウトプット (最終的に何ができるの？)
- 見た目が統一された、大量の商品写真（色違い・角度違いも全部）
- デザイナーが作った「公式ルールブック」
- Figmaの「デザイン部品倉庫」
✨ 優位点 (このやり方の良いところ)
デザインがブレない。
AIはルールブックに忠実なので、全ての写真の雰囲気（色、角度、影）が揃います。
お店の商品ページで商品イメージが伝わりやすくなる。
商品写真が充実していると、お客様の安心感や信頼感、購入率アップにつながります。
「安く」「早く」写真が用意できる。
本物のカメラマンに撮影を頼むより、コストも時間も大幅に節約できます。「新発売！」の先行画像もすぐに作れます。
デザイナー以外の人でも作業がカンタンになる。
Figmaの「部品倉庫」のおかげで、デザイナー以外の人（例：Web担当者さん）でも、ルール通りの正しい画像をミスなく書き出せるようになります。
😥 課題・注意点
「実物の色」とズレる危険 (最重要！)。
AIが作った写真の色が、本物の商品の色と微妙に違うと、「写真と色が違う！」というクレームの原因になります。実物との色合わせ（校正）は絶対に必要です。
AIが急に「絵柄」を変えてしまうかも。
使っているAI（Nano Banana）がアップデートされた時、AIの絵のタッチが微妙に変わってしまい、今までの写真と雰囲気が揃わなくなる可能性があります。利用するモデルのバージョンは固定した方がいいでしょう。
「法律」や「出店先」のルールも確認が必要。
これは、AIを使う使わないに関わらず、「※画像はイメージです」と注意書きを入れたり、楽天やAmazonなど、出店するショッピングモール独自の写真ルール（「メイン画像に文字入れ禁止」など）にも合わせる必要があります。
👍 向いている場面 (どんな時に使うと便利？)
- Tシャツやスニーカー、スマホケースなど、色違い・サイズ違いが「大量に」あるお店
- 「春の新色」「夏限定デザイン」などを、短い間隔でどんどん発売するお店
- まだ実物が無い「新商品の予告」ページ用の写真が、今すぐ欲しい時
「Let’s go AI surfing！」サイトで、各カテゴリごとの主要AIプロダクトを紹介しています。主要なLLMや画像生成、検索、開発支援ツールなどについて、特徴や使いどころをコンパクトにまとめています。
AIプロダクト選定や導入を考える際に、「まず全体像をざっと眺めるためのカタログ」くらいの気軽な参考情報としてご覧いただければ幸いです。