Relumeで実現する「Vibe Coding」— AIで加速するWeb制作の新フロー

近年、Web制作の現場ではデザイナーとディベロッパーの役割がより密接になり、効率的なコラボレーションの手法が求められています。そんな中、Relumeを使った「Vibe Coding」は、空白のキャンバスからAIツールを活用し、短時間で構造からデザインまで作り上げる新しいWeb制作フローとして注目されています。

Vibe Codingとは？

「Vibe Coding」は、単なるコーディング手法ではありません。サイトの目的やコンセプトを明確にした上で、AIツールを活用してサイト構造（ワイヤーフレーム）からデザインまでを効率的に作り上げるプロセスです。

ポイントは次の通りです。

• 空白のキャンバスではなくサイトマップから制作を開始
• AIツールが最適なワイヤーフレームやデザインを提案
• スタイルガイドを整えた後、Webflowへ直接インポート可能

デザイナーは戦略やコンセプト作りに集中でき、Web制作のスピードと精度が劇的に向上します。

Vibe Codingの制作フロー

以下がVibe Codingの制作フローの詳細です。

フロー1. プロンプト（Brief）の作成

まずはWebサイト制作の目的を明確化します。

• サイトの主なゴール
• 強調したいコンテンツやメッセージ
• 想定するオーディエンス
• ビジュアルスタイルやトーン

AIはこの情報を元に、テキストやデザインの提案を行います。ここでしっかりとサイトの方向性を決めることが、制作の効率化につながります。

サイトの方向性が確定したら、Relumeへプロンプトを入力します。

フロー2. Relumeでサイトマップを作成・インポート

Relumeでは、AIが自動的にサイトマップを生成してくれます。

サイトマップ作成の特徴は以下の通りです。

• ページの追加・削除・名称変更が自由に作成できる
• セクション構成のカスタマイズも簡単にできる
• サイトの骨格を一目で把握ができる

サイトマップを整えることで、その後のワイヤーフレームやデザイン作業がスムーズになります。

フロー3. ワイヤーフレーム作成

次にワイヤーフレームの作成です。

サイトマップを基に、画面上側のタブからワンクリックでワイヤーフレームを生成できます。

ワイヤーフレーム作成の特徴は以下の通りです。

• AIが最適なワイヤーフレームを提案
• 各ページのテキストや構造を修正可能
• Relume内蔵のコンポーネントを検索・選択して自由に配置

この段階で、Webサイトの骨格とユーザー体験の流れを整えます。

フロー4. スタイルガイドの作成

デザイン前にスタイルガイドを整えることで、全ページに統一感を持たせられます。

スタイルガイド作成の特徴は以下の通りです。

• カラータイプやカラーパレットの決定
• UIスタイルやタイポグラフィの設定
• 画像やビジュアルアセットの選定

複数のコンセプトを比較しながら選択できるので、あとから色やスタイルを変更する場合も柔軟です。

フロー5. デザイン

スタイルガイドを元にデザイン作業に移ります。

デザイン作成の特徴は以下の通りです。

• セクションごとにカラーやスタイルを調整可能
• スタイルガイドを更新すれば全ページに反映
• コンポーネントが連動しているため、統一感を保ちつつ編集が可能

Relumeを使うことで、デザイン作業に集中しながらも、戦略やコンセプトを常に意識できます。

フロー6. Webflowへのインポート

Relumeで作成したデザインをWebflowへインポートする作業です。

右上のボタンから、出力形式をWebflowに設定します。

Relume Webflow Appを使ってWebflowへ移行します。

Webflowを表示させ、左側サイドバーのAppsから、Relumeを選択。

WebflowのRelume Appを起動すると、「どのサイトをインポートしますか？」という問いとともに、インポート可能なサイトの一覧が表示されました。そして、サイト名の設定やインポートの対象範囲（全ページか、ページ単位か）を選択する画面に移ります。サイト単位での一括インポートはもちろん、作業途中のサイトから特定のページだけを選んで移行することも可能です。

　Webflow移管の特徴は以下の通りです。

• サイト名の設定やインポート対象の選択が可能
• ページ単位でのインポートも、全ページまとめてのインポートも可能
• PublishボタンでWebサイトを完成させる
• 必要に応じてWebflow上で修正も可能

これにより、制作フローが途切れることなくWeb上での公開まで完結します。

まとめ

Relumeを活用したVibe Codingは、従来のWeb制作の煩雑な工程をAIと自動化で効率化する手法です。

• サイトマップからワイヤーフレーム、スタイルガイド、デザインまで統合管理
• コンセプトや戦略に集中できる
• Webflowへスムーズにインポートして公開可能

これにより、チームでの制作効率は飛躍的に向上し、よりクリエイティブなWeb制作が実現できます。ぜひ、RelumeのダッシュボードでWeb制作を体験してみましょう！

‍