ヒアリングが曖昧なまま走り出す
クライアントの言語化不足で要件が固まらないまま制作に入り、後段で意図のずれや聞き漏れが発覚する。手戻りが発生するのはたいてい制作後半です。
Web 制作のワークフローを、
AI
前提で組み直す。
クライアントヒアリングから、ワイヤーフレーム、HTML / Figma 出力まで。AI が質問しながら要件のヌケや矛盾を整理し、ワイヤーフレームまで一気通貫で仕上げます。
The problem
ヒアリングやワイヤー作成に追われて、戦略の立案や設計が後回しになっていませんか
ワイヤー〜カンプ工程に数日〜数週間
トップページのトンマナ決めだけで2〜3週間、全体設計で1ヶ月かかることも。Figma のフレーム設計は余白・距離の調整に時間がとられ、構成を考える時間が削られます。
既存 AI が叩きレベルに届かない
ChatGPT / Claude にワイヤーを依頼しても余白・ジャンプ率が整わない。Figma プラグインはレイアウトが崩れ、専用 SaaS は月額コストが案件に見合わない。
The shift
既存フローに AI を後付けせず、AI 前提でフローを組み直した
各ステップに AI を後付けする
- クライアントヒアリング（対面 / ドキュメント）
- 要件整理（Notion / スプレッドシート）
- ワイヤー作成（Figma / 手書き）
- ← AI でここだけ補助しようとする
- デザインカンプ作成
- 確認・修正・手戻り
- コーディング
rafuru
AI 前提でフロー自体を組み直す
- AI が質問形式でヒアリングを進め、矛盾や聞き漏れをその場で指摘
- 整理された要件から Mid-Fi ワイヤーを即時生成
- 3 つの画面サイズで同時プレビューして確認
- AI チャット / コード編集で叩いて仕上げる
- HTML / Figma にエクスポートし次工程へ
How it works
ヒアリングから出力まで、ひとつの流れで
STEP 01
AI が質問形式でヒアリングする
AI が質問形式でクライアントの意図を引き出し、矛盾や聞き漏れをその場で補完します。ヒアリング終了時には、要件の最終まとめが自動生成されます。要件が曖昧なまま走り出すリスクを最初の段階で防げます。
STEP 02
ワイヤーフレームを生成する
整理された要件をもとに、プロの叩き台として通用するコピー・ジャンプ率・トンマナの Mid-Fi ワイヤーフレームを生成します。3 つの画面サイズ（モバイル / タブレット / デスクトップ）の同時プレビューとアノテーション表示に対応しています。
STEP 03
HTML / Figma に出力する
生成したワイヤーフレームを HTML または Figma にエクスポートします。Figma はプラグイン経由で取り込み、以後のデザイン工程は使い慣れたツールで継続できます。AI チャットまたはコード編集で出力前の調整も可能です。
Features
プロの制作フローに組み込める、6 つの機能
AI による質問形式のヒアリング
質問形式で要件を整理します。矛盾検知・聞き漏れ補完・要件の最終まとめ自動生成の 3 機能でヒアリング品質を底上げします。クライアント側の言語化も支援します。
Mid-Fi ワイヤーのリアルタイム生成
コピー・ジャンプ率・トンマナがプロの叩き台として通用する品質のワイヤーフレームをリアルタイム生成します。数十分で整理された設計を手に入れられます。
3 つの画面サイズで同時プレビュー
モバイル・タブレット・デスクトップの 3 サイズを同時に確認できます。アノテーション表示でレイアウト上の意図や余白の根拠をチームと共有できます。
AI チャット / コード編集
生成後に自然言語で調整指示を出すか、コードを直接編集できます。「このセクションのコピーをより端的に」といった指示で、叩いて仕上げるサイクルを高速化します。
Figma エクスポート
プラグイン経由で Figma に取り込み、以後のデザイン工程は Figma で継続できます。Auto Layout を考慮した構造で書き出します。
HTML エクスポート
そのままコーディング工程に渡せる形式で HTML を出力します。実装担当者への受け渡しや、コードベースでの継続編集を想定した構造で書き出します。
Pricing
用途に合わせて選べる 4 プラン
Free
rafuru を試したい方へ
¥0
- AI 利用量：制限あり
- プロジェクト作成：月 1 件まで
- 初回ヒアリング・ワイヤーフレーム生成
- AI チャットによる修正
- HTML / Figma エクスポート
- 共有リンク発行
- ヒアリングのやり直し
- メンバー招待
Starter
プロの制作フローに本格導入
¥2,980 / 月
- AI 利用量：より多く利用可能
- プロジェクト作成：月 5 件まで
- 初回ヒアリング・ワイヤーフレーム生成
- AI チャットによる修正
- HTML / Figma エクスポート
- 共有リンク発行
- ヒアリングのやり直し
- メンバー招待
Pro
Coming soonより大きな案件・継続運用に
近日公開
- AI 利用量：Starter の 10 倍
- プロジェクト作成：無制限
- 初回ヒアリング・ワイヤーフレーム生成
- AI チャットによる修正
- HTML / Figma エクスポート
- 共有リンク発行
- ヒアリングのやり直し
- メンバー招待
Team
Coming soonチーム導入向け
近日公開
- AI 利用量：無制限
- プロジェクト作成：無制限
- 初回ヒアリング・ワイヤーフレーム生成
- AI チャットによる修正
- HTML / Figma エクスポート
- 共有リンク発行
- ヒアリングのやり直し
- メンバー招待
※ AI 利用量はプランごとに上限を設けています。ヒアリング・ワイヤーフレーム生成・下層ページ生成・AI チャットによる修正など、すべての AI 機能の合計使用量で計算され、公平利用に基づき調整する場合があります。
FAQ
よくある質問
無料プランで何ができますか
Free プランでは月 1 プロジェクトの作成、Mid-Fi ワイヤーフレーム生成、3 つの画面サイズでの同時プレビュー、HTML / Figma エクスポートの基本機能をご利用いただけます。AI 機能の使用回数には上限があります。継続的に複数の案件で利用される場合は Starter プランをご検討ください。
解約やプラン変更はいつでもできますか
月次契約のため、いつでもプランの変更・解約が可能です。解約はアカウント設定から手続きできます。解約後の当月末まではプランの機能を継続して利用できます。
商用利用はできますか
有償・無償を問わず商用利用が可能です。クライアントへの納品物として出力した HTML や Figma ファイルを使用することもできます。詳細は利用規約をご確認ください。
入力したヒアリング内容は AI の学習に使われますか
お客様が入力したヒアリング情報・要件データは AI モデルの追加学習に使用しません。入力データの取り扱いはプライバシーポリシーに基づきます。
生成したワイヤーフレームのデータはだれのものですか
生成したワイヤーフレームおよびエクスポートデータの所有権はお客様に帰属します。rafuru がお客様の承諾なく第三者にデータを提供することはありません。
クライアントをプロジェクトに招待できますか
Starter プランではプロジェクトの URL を共有リンクとして発行できます。閲覧専用と編集権限の切り替えに対応しています。チームメンバー招待機能は Team プランにて提供予定です。
Figma へのエクスポートはどのようなフォーマットですか
rafuru の Figma プラグインを使用してファイルを取り込む形式です。フレームとレイヤー構造を持つ状態で読み込まれ、取り込み後は Figma 上で通常通り編集できます。
推奨環境を教えてください
最新バージョンの Chrome / Firefox / Safari を推奨します。3 つの画面サイズの同時プレビュー機能はデスクトップ画面（1280px 以上）での使用を推奨します。モバイルブラウザでの閲覧には対応していますが、一部機能が制限される場合があります。
ワイヤーフレーム工程を、数十分に。
クライアントヒアリングから、ワイヤーフレーム、HTML / Figma 出力まで。AI が質問しながら要件のヌケや矛盾を整理し、ワイヤーフレームまで一気通貫で仕上げます。