「デザインはデザイナーに任せるもの」という前提が、今、AIツールの登場で大きく揺らいでいます。ClaudeDesignで構成案を作り、Figma MakeでデザインをReactコードに変換し、Next.jsとCursorで実装まで完結させる「バイブデザイン→バイブコーディング」というワークフローが、非デザイナーエンジニアにとって現実的な選択肢になってきました。Ragate株式会社の代表・益子竜与志氏が3日間の集中実践から体得した秘伝のフローと、各ツールのリアルな使用感を余すところなくお届けします。

バイブデザインとは何か、なぜ今注目されているのか

「バイブコーディング（Vibe Coding）」という言葉は、AIに自然言語で指示を与えてコードを生成させ、そのアウトプットを見ながら方向性を調整するという開発スタイルを表しています。従来のコーディングが「仕様を書いて→実装して→テストする」という直線的なフローだったのに対し、バイブコーディングは「雰囲気を伝えて→生成された結果を感じとって→調整する」という反復的なアプローチです。

これに対して「バイブデザイン」は、その考え方をデザイン工程にまで拡張したものです。AIに「こんな雰囲気のサービスにしたい」「BtoBの信頼感を持ちつつモダンな印象を」などと伝えながら、複数のデザインパターンを生成・比較・選択していくプロセスです。Figmaがリリースした「Figma Make」や、AnthropicのClaudeDesignがこのユースケースを後押しする形で登場し、2026年時点でこのアプローチは急速に広まっています。

特に注目すべきは、このワークフローが「デザイン経験のないエンジニア」にとって大きな障壁を取り除くという点です。これまではスタートアップやMVP開発でデザイナーがいない場合、BootstrapやTailwindでなんとかするか、デザイナーの採用・外注コストを負担するか、という二択でした。AIデザインツールの登場により、エンジニアが自力でプロダクトの「顔」を作れる時代が近づいてきています。

3日間の実践から生まれた6ステップの秘伝フロー

益子氏が3日間の集中実践を通じて整理したのは、以下の6ステップです。それぞれに役割が明確で、ツールの特性を最大限に活かした設計になっています。

最初のステップはClaudeDesignを使った構成案の作成です。「どのページが必要か」「各ページに何を載せるか」という情報設計の段階です。ClaudeDesignはHTMLとしてエクスポートできるため、この構成案を手元に残しておくことができます。

2番目のステップでは、その構成案のHTMLをダウンロードして手元に保存します。これは後のステップで各ページの設計書として参照するためです。

3番目のステップがこのフローの核心です。Figma MakeにTOPページのデザインを発注します。ポイントは、5パターン程度を同時に生成させることと、ベンチマークとなる参考サイトを渡すことです。BtoBなのかBtoCなのか、どのような印象を与えたいのかを伝えた上で、参考サイトのURLや画像を添付すると、方向性がぐっと絞り込まれた提案が返ってきます。

4番目のステップでは、気に入ったデザインのReactソースコードをFigma Makeからダウンロードします。Figma MakeはReactコンポーネントとして吐き出すため、Next.jsとの相性が良いのが特徴です。

5番目のステップで、このReactコードをNext.jsプロジェクトに取り込み、ISR（Incremental Static Regeneration）またはISG（Incremental Static Generation）を適用します。コンテンツの更新頻度やページ数に応じてどちらを選ぶかを判断します。

最後の6番目のステップが、下層ページの実装です。ここでCursorが登場します。先にダウンロードしておいた構成案の画像イメージをCursorに添付しながら、1ページずつ粛々と実装していくのが「結局いちばん良い」というのが益子氏の実践的な結論です。

ClaudeDesignの本音評価と効果的な使い方

益子氏の評価は非常に率直なものでした。「ClaudeDesign単体では、全然デザインがダメ、話にならない」というのが正直な感想だったといいます。ベータ版であることを考えると仕方のない面もありますが、デザインの完成度という観点では、現時点でFigma Makeに大きく劣るというのが実感です。

また、多くのエンジニアが期待していた「ClaudeDesign → ClaudeCode」というシームレスな連携も、現時点では実現していません。ClaudeDesignで作ったデザインをそのままClaudeCodeに渡してコーディングしてもらう、という夢のワークフローはまだ先の話です。

ただし、ClaudeDesignが全く使えないというわけではありません。DESIGN.mdという設計ファイルを入力として渡すと、出力品質が改善されるという知見も得られています。DESIGN.mdにはブランドカラー、タイポグラフィ、コンポーネントの指針などを記述しておくことで、ClaudeDesignの出力をある程度コントロールできます。

現時点でのClaudeDesignの最も有効な使い方は、デザイン品質を求めるのではなく、「情報設計（IA）・構成案作成ツール」として割り切って使うことです。「このサービスにはどんなページが必要か」「各ページにどんな情報を配置すべきか」という設計の議論相手として活用するのが現実的です。その意味では、ClaudeDesignはデザインツールというよりコンテンツ設計ツールとして捉えると、現時点での実力に見合った期待値で使えます。

Figma Makeをデザイン案出しで最大活用するコツ

一方、Figma Makeの評価は非常に高くなっています。「案出しにかなり良い」「構成案とベンチマークが確定しているならサクサク案出しできる」という評価です。非デザイナーにとって優しいツールだという点も強調されていました。

Figma Makeを最大限に活かすために、益子氏が実践で見つけたコツがあります。まずベンチマークサイトの選び方です。BtoBかBtoCかCtoCかという業態を意識してベンチマークを絞り込むことで、提案されるデザインの方向性が大きく変わります。BtoBなら誠実さや専門性を感じさせるデザイン、BtoCならエンゲージメントを高める親しみやすいデザインというように、業態によってUI/UXの設計思想が異なるため、この絞り込みが重要です。

次に、5パターン程度を同時生成して比較する点です。1パターンだけを生成して細かく調整しようとするより、まず複数のアプローチを並べて俯瞰してから方向性を決めた方が、圧倒的にスピードが上がります。この「広げてから絞る」というプロセスはデザイン思考の基本ですが、AIツールを使うことで従来のデザイナーよりも短時間でこれが実現できます。

ただし、最終的な判断は人間のセンスに委ねられます。「結局はセンスで決める必要がある」という益子氏の言葉は重要です。AIが提案するデザインをそのまま採用するのではなく、ブランドの方向性や顧客体験の観点から人間が判断する必要があります。AIはあくまで選択肢を広げるためのツールであり、意思決定は人間が行うという認識が、バイブデザインを成功させる上で欠かせません。

Next.jsへのコード統合とISR/ISG適用のポイント

Figma MakeからダウンロードしたReactコードをNext.jsに統合する際の注意点をまとめます。

Figma Makeが出力するコードは一般的なReactコンポーネントであるため、Next.jsのApp RouterやPages Routerに取り込む際にいくつかの調整が必要になります。たとえば、画像の扱いについてはnext/imageコンポーネントへの置き換え、フォントについてはnext/fontを活用した最適化、クライアントコンポーネントとサーバーコンポーネントの分離などです。これらはNext.jsの最適化機能を活かすために重要な工程ですが、コードの量としては比較的軽微な修正で済みます。

ISRとISGの選択については、コンテンツの特性に応じて判断します。ISR（Incremental Static Regeneration）は既存のスタティックページをバックグラウンドで定期的に再生成する仕組みで、ブログやニュースサイトのように定期更新があるコンテンツに向いています。revalidateを使って再生成の間隔を設定します。一方、ISG（Incremental Static Generation）はビルド時に全ページを生成するのではなく、アクセスがあったページを都度生成してキャッシュする仕組みです。ページ数が多いECサイトや、商品ページなどに適しています。

下層ページの実装においては、Cursorの画像添付機能が非常に有効に機能します。構成案として保存しておいたHTMLのスクリーンショットや、Figma Makeで生成したデザインの画像をCursorのチャットに添付すると、「この画面のコンポーネントを実装してほしい」という指示が格段に伝わりやすくなります。テキストだけで伝えようとすると抽象的になりがちなUI仕様が、画像一枚で具体的に共有できるため、Cursorとの対話の質が大幅に向上します。1ページずつ着実に実装していく「粛々コーディング」は地道に見えますが、AIとの協働において現時点で最も安定した方法です。

まとめ 3日間の実践が示すAIツール活用の現在地

益子氏の3日間の実践が明らかにしたのは、「AIツールを組み合わせることで、非デザイナーエンジニアでもWebサービスの立ち上げが現実的な速度で完結できる」という事実です。同時に、各ツールの現実的な限界と、それに応じた使い分けの重要性も浮き彫りになりました。

ClaudeDesignはデザイン品質に課題があるものの、情報設計と構成案作成においては有用です。Figma MakeはReactコード生成と案出しの両面で非デザイナーの強い味方になっています。そしてCursorは実装の最終工程において、画像を参照しながら着実にページを積み上げる頼れるパートナーです。

このフローで最も重要な教訓は、「AIツールは万能ではなく、それぞれに得意不得意がある」という点の認識です。ClaudeDesignに過度なデザイン品質を期待したり、Figma MakeのコードをそのままNext.jsに流し込もうとしたりすると、無駄な時間を費やすことになります。逆に、各ツールの強みを理解した上で役割を割り振ることで、3日間でWebサービスの主要部分を立ち上げられるという実例が今回の実践です。

バイブデザインからバイブコーディングへの流れは、2026年現在まだ発展途上です。ClaudeDesignの成熟、ClaudeDesignとClaudeCodeの連携実現、Figma Makeのコード品質向上など、これからのアップデートに期待できる要素が多くあります。今のうちにこのフローを体得しておくことで、ツールが成熟したときに最大限の恩恵を受けられる準備が整います。Ragateでは引き続きAIツールの最前線を実践し、エンジニアの皆さんに役立つ知見を届けていきます。