「StudioでWebサイト作るの、もっと効率化できないかな？」「AIをどう組み合わせれば工数削減できる？」。Studio制作に携わる駆け出しデザイナーなら一度は思うはず。

本記事では、NOT DESIGN SCHOOL校長のもちが実際に試したAIワークフロー実験の全工程を公開します。結論から言うと、工数を30-40%削減できました。

📌 元になったXポスト：

• GPT-image-2使ってStudio組むの効率化できないか実験してみた（2026-04-28）

• 4枚の工程画像つき詳細解説（2026-04-29）

実験の背景｜なぜStudio制作×AIワークフローを試したか

「AIで直接コーディングすればもっと早いのでは？」と思うかもしれません。実際その通りで、Studio縛りがなければClaude Codeで直接HTMLを組んで公開する方が圧倒的に効率的です。

ただ今回はStudio採用の合理的な理由がありました：

• 既存サイトがStudioで運用中：別ツールに乗り換えるコストが大きい

• チーム運用：メンバーがAIコード編集に慣れていない

• スピード重視：デザイン〜公開まで1週間というタイトスケジュール

つまり「Studioを使い続ける前提の中で、どこまでAIで効率化できるか」を試した実験になります。

ワークフローの全体像【4ステップ】

実験したワークフローはこちら：

Step1：GPT-image-2でセクション画像を生成
   ↓
Step2：Claude CodeでHTMLベースに組む
   ↓
Step3：Claude to FigmaでFigmaに移植
   ↓
Step4：Figma to StudioでStudioに移植・調整
   ↓
本番公開

一見すると迂回が多いが、成果はあった

「画像生成→HTML→Figma→Studio」と、4ツールを経由する流れ。一見遠回りに見えるかもしれません。実際に面倒は面倒ですｗ

しかしそれでも、手作業でゼロからStudioで組むより「30-40%」の工数削減にはなりました。

【Step1】GPT-image-2でレイアウトの叩きをつくる

最初のステップは、GPT-image-2でレイアウトのパターンを高速に出すこと。

このステップの目的

このフェーズは「情報設計 → デザイン」の間に必要なレイアウトの骨子を整える作業です。言い換えれば精緻なワイヤーフレームを作るフェーズで、それをGPT-image-2で高速にパターン出ししてもらいます。

全体のデザインを出してもらうのではなく、セクションごとに出してもらうほうが効率が良いです。

サンプル：最初に出してもらった4パターン

実際に出してもらった4パターンのデザインはこんな感じでした。入力したプロンプトはとてもシンプルなもので以下のような文章です。

Webサイトのカードデザイン（カードが３×２で並ぶ）で、モダンで見やすいものを４パターン出してください。 印象はスマートかつアーティスティックで。

コツは目的と情報設計も入力すること

最初のプロンプトだけでもキレイなレイアウト案を提示してくれていますが、より精度を高めるためには、「目的」と「情報設計」も入れると良いです。

例えば以下のような形です。

オンライン講座を載せる予定です。 期間、講師名と写真（アイコン）、やることの概要、を載せたいです。

目的と情報設計を与えて、再度生成してもらった結果が以下です。一番始めのデザインよりも精度が上がっているのが分かります。

画像やテキストも、それっぽいものを当て込んでくれていてイメージがしやすです。

なぜGPT-image-2を使うのか

シンプルに他のモデルよりデザイン性に優れているからです。

2026年5月時点で実務に耐えうるレベルに到達しており、Webサイトのレイアウト骨子を出すには十分なクオリティ。具体的な特徴は：

• 2026年4月リリースの最新モデル

• 2K対応・Thinkingモード・テキスト描写精度UP

• 他モデル（Imagen系、Stable Diffusion等）と比較してもデザイン性が頭ひとつ抜けてる

デザイン性が優れているとは言え、さすがに生成されたデザインをそのまま使えるレベルかと言うと、手直しは必須と考えます。

駆け出しが見落としがちなコツ

• セクションごとにつくる。

• 始めはレイアウトのパターンを出しを意識する。

• 完璧を求めず、アイデアの叩きとして考える。

📎 関連：駆け出しデザイナーのためのClaude入門｜使い方・料金・3大AI比較まで徹底解説

【Step2】Claude CodeでHTMLベースに組む

GPT-image-2で生成した画像を、Claude Codeに渡してHTML/CSSベースのコードに変換します。

画像をClaude Codeに読み込ませて、「HTMLベースで再現してください」と伝えるだけです。とくにプロンプトのコツなどは必要ありません。

組んでもらったHTMLの例↓（色味などはこの時点で調整しています）

このステップの目的

実際のプロンプト例

この画像を元にHTMLベースで実装してください。色はライトテーマにしてください。

このような指示で、Claude Codeが画像を解釈してHTMLコードを書いてくれるわけです。

Claude Codeを使う理由

Claude Codeはコード実装の精度が高いため、画像を渡せば9割型再現されたデータを生成してくれます。

📎 関連：Claude入門記事のClaude Codeセクション

【Step3】Claude to FigmaでFigmaに移植

HTMLコードができたら、Claude to Figma（Figma MCP連携）でFigmaファイルに変換します。

このステップの目的

Claude to Figmaの仕組み

Figma MCPサーバーのgenerate_figma_designツールが、Claudeのコードベースを読み取って自動でFigmaファイルを生成します。オートレイアウトも使用された状態で出力されるので、手作業でデザインを起こすより圧倒的に早いです。

実際にFigmaに取り込んだデザインデータ↓（かなり精度は高いです）

注意点

• 移行時に若干デザインが崩れる場合もあるので、手作業で修正する。

• インタラクションやレスポンシブ対応は反映されないことが多い（オートレイアウトは使ってくれる）

【Step4】Figma to StudioでStudioに移植・調整

最終ステップ。Figma to Studioを使って、FigmaファイルからStudio形式に移植します。

https://www.figma.com/community/plugin/1274345780965443906

このステップの目的

必要な調整作業

• 既存ブランドガイドラインに合わせる：フォント・カラー・余白

• 本番用の画像を挿入する：講師のアイコン画像やヒーローイメージなど

• モバイル対応の最終確認：レスポンシブ動作のチェック

このステップで生まれる価値

ここで初めて「実際に運用できるStudioサイト」になります。インタラクションやレスポンシブ対応など、Studio上で調整します。やはりここは多少時間がかかります。

実験結果｜30-40%の工数削減を実証

このワークフロー全体で、体感ですが従来の手法と比べて30-40%の工数削減ができたと感じました。

削減できた理由

やはり最初の「情報設計→レイアウトの叩き作成」フェーズの短縮が大きいと思います。今まではパターンを出すのに、一からFigmaでデザインを起こす必要があったので、どうしてもかなりの時間がかかっていました。この部分の短縮は恩恵があります。

削減できなかった部分

短縮できたとは言え、まだまだ以下の工程には時間がかかります。

• インタラクションの設定

• レスポンシブ対応

• デザインの微調整

校長の見解：なぜStudio縛りでこのフローを選んだか

NOT DESIGN SCHOOL校長として、200人以上の駆け出しデザイナーを見てきた立場から、このワークフローについて4つの視点をお伝えします。

1. Studio採用の判断基準を持っておくと良い

「AIで直接HTMLを書けばいいのに、なぜStudio？」と聞かれることも増えました。簡単にStudioを採用する時の判断基準を3つ紹介します：

• すでにStudioで運用中である

• チーム運用が前提であり、AIコード編集が苦手なメンバーがいる

• Web制作に詳しくないクライアント側で更新の必要がある

これらの条件が出てくる場合は、Studioを採用するのが無難だと考えます。

2. 迂回工程が多くても30-40%削減できる事実が重要

理論的な「最適化」より、現場で使えるフローの価値が大きい。Studioを使い続けながらAIを組み合わせるだけで30-40%削減できるなら、十分採用する価値があります。

「100%最適化を目指して全部捨てる」より、「今ある制約の中でAIを最大活用する」という視点も重要です。

3. 「複数ツールを連携する力」を学ぶ

このワークフローで重要なのは、1つのツールをマスターすることではなく、4つのツールを組み合わせる「連携思考」です。

• GPT-image-2（画像生成）

• Claude Code（コード生成・編集）

• Claude to Figma（Figma移植）

• Figma to Studio（Studio移植）

各ツールの得意領域を理解して、案件ごとに最適な組み合わせを設計できる人が、AI時代のデザイナーには求められます。

4. 今後Studioが直接HTML/React対応すれば、このフローも進化する

今は過渡期です。いずれStudioがHTMLやReactコードを直接受け入れるようになれば、Step3〜4が省略できる可能性もあります。今後の動きに注目です。

ツール進化に追随する姿勢を常に持っておきましょう。

限界と注意点：Studio縛りなしならClaude Code直接が最強

正直にお伝えしたい注意点を3つ整理しました。

1. Studio縛りがなければClaude Codeで直接公開する方が圧倒的に効率的

繰り返しになりますが、Studio縛りがないプロジェクトなら、このワークフローは過剰です。これはあくまでもStudioで実装する前提で効率化を試みたものです。

• Claude Codeで直接HTMLを組む

• Vercel / Netlify / GitHub Pages で公開

• 迂回工程ゼロ

これが最速ルートです。Studio採用は「合理的な理由がある場合の選択肢」と捉えてください。

2. シンプルなデザインなら有効、複雑なものは厳しい

このワークフローはシンプルなレイアウト（カードグリッド、リスト、テキスト中心など）には強いですが、以下のような複雑デザインは手作業が必要です：

• 独自の複雑なアニメーション

• 複雑なインタラクション

• 独創的なレイアウト

AIに頼る部分と、自分の手でつくる部分を分けて考える思考が求められます。

3. 迂回工程が多いので各ツールの操作習熟が前提

このフローを使いこなすには、4ツールの操作に習熟している必要があります：

• GPT-image-2のプロンプト設計

• Claude Codeのチャット指示の書き方

• Claude to Figmaの設定

• Figma to Studioの使い方

• Studio自体の編集

駆け出し段階では、まず1〜2ツールから始めて、徐々に組み合わせを増やすのが現実的です。

よくある質問（FAQ）

Q1. このワークフロー、料金はいくらかかりますか？

各ツールの月額料金は以下：

• ChatGPT（GPT-image-2用）：$20/月

• Claude（Claude Code用）：$20/月（Pro）

• Figma：無料〜$15/月

• Studio：無料〜（プランによる）

合計で月$40〜70程度です。

Q2. 全部のツールを揃える必要がありますか？

いいえ。まず触るならClaude Code（$20/月）から始めるのがオススメです。慣れてきたらGPT-image-2やClaude to Figmaを追加していく形が無理なく身につきます。

Q3. 複雑なサイトでも30-40%削減できますか？

シンプルなレイアウトなら30-40%削減可能ですが、複雑なものは依然自分の手でデザインをつくる必要があると感じています。なので複雑なサイトの場合、現状このフローでの削減はあまり期待しないほうが良さそうです。

Q4. このフローを学べるスクールはありますか？

NOT DESIGN SCHOOLでは、AI時代の上流デザイナー育成を目的にしたパーソナルコースを提供しています。定期的にAI関連の勉強会も開催しており、こちらのフローのやり方についても勉強会で取り扱いました。（入学するとアーカイブも全て閲覧することが可能です）

まとめ：Studio制作×AI連携で「現場で使える効率化」を

Studio制作の効率化は、AIツールを組み合わせれば30-40%削減が現実的に可能です。

• GPT-image-2で画像生成

• Claude CodeでHTML化

• Claude to FigmaでFigma移植

• Figma to StudioでStudio公開

このフローはStudio縛りがある前提の最適解であり、Studio縛りがなければ他のフローを検討しましょう。

駆け出しデザイナーは、「複数ツールを組み合わせる連携思考」を身につけることで、AI時代に生き残るデザイナーへ近づけます。

📎 シリーズ関連記事：

• 駆け出しデザイナーのためのClaude入門｜使い方・料金・3大AI比較まで徹底解説

• Figma Makeとは？使い方・料金・活用例まで徹底解説