ヒアリングが曖昧なまま走り出す
クライアントの言語化不足で要件が固まらないまま制作に入り、後段で意図のずれや聞き漏れが発覚する。手戻りが発生するのはたいてい制作後半です。
Web 制作のワークフローを、
AI
前提で組み直す。
クライアントヒアリングから、ワイヤーフレーム、HTML / Figma 出力まで。AI が質問しながら要件のヌケや矛盾を整理し、ワイヤーフレームまで一気通貫で仕上げます。
app.rafuru.ai
The problem
ヒアリングやワイヤー作成に追われて、戦略の立案や設計が後回しになっていませんか
ワイヤー〜カンプ工程に数日〜数週間
トップページのトンマナ決めだけで2〜3週間、全体設計で1ヶ月かかることも。Figma のフレーム設計は余白・距離の調整に時間がとられ、構成を考える時間が削られます。
既存 AI が叩きレベルに届かない
ChatGPT / Claude にワイヤーを依頼しても余白・ジャンプ率が整わない。Figma プラグインはレイアウトが崩れ、専用 SaaS は月額コストが案件に見合わない。
The shift
既存フローに AI を後付けせず、AI 前提でフローを組み直した
ヒアリング・要件整理・ワイヤーフレーム作成までの上流工程は、AI を後付けする従来フローでは複数の人手作業が積み上がります。rafuru は AI が中心になって全フェーズを駆動するので、上流の工数が大幅に圧縮されます。
対象範囲: ヒアリング 〜 ワイヤーフレーム出力 (デザインカンプ・コーディングは含まない)。 工数は 1 LP 想定の代表値。
Before
従来フロー
合計 30 h
After
rafuru
合計 3 h 50 min - ヒアリング 1 h
- 要件定義 5 h
- 競合調査 2 h
- サイトマップ作成 1 h
- 情報設計 3 h
- ワイヤー 10 h
- フィードバック対応 8 h
- ヒアリング 1 h
- AI 要件整理 1 h
- サイトマップ確認 10 min
- ワイヤー生成 10 min
- ワイヤー微調整 30 min
- クライアントレビュー対応 1 h
Before
従来のフロー
合計工数 30 h - ヒアリング 1 h
- 要件定義 5 h
- 競合調査 2 h
- サイトマップ作成 1 h
- 情報設計 3 h
- ワイヤー 10 h
- フィードバック対応 8 h
After
rafuru
合計工数 3 h 50 min - ヒアリング 1 h
- AI 要件整理 1 h
- サイトマップ確認 10 min
- ワイヤー生成 10 min
- ワイヤー微調整 30 min
- クライアントレビュー対応 1 h
How it works
ヒアリングから、根拠付きで提案できる状態まで
STEP 01
「質問の質」で、クライアントから情報を引き出す
カフェ、美容室、ダイビングショップ — クライアントが自分のビジネスを完全に言語化できているとは限りません。rafuru の AI は Web 制作で必要な情報を、順を追って質問していきます。曖昧な答えにはその場で追加質問、矛盾はその場で潰す。終わったときには、目的・対象・優先順位が整理された要件サマリーが手元に残ります。
STEP 02
「なぜこの構成か」が、ワイヤーに最初から書かれている
ワイヤーの各セクションに、「なぜこのレイアウトか」「なぜここに導線を置いたか」の注釈が並びます。ヒアリングサマリーには設計方針が言語化されて残るので、クライアントに見せるときの根拠が最初から揃っている状態。「AI に作らせた」ではなく「自分が根拠を持って設計した」として、そのまま提案に出せます。モバイル / タブレット / デスクトップの同時プレビューにも対応。
STEP 03
出力したあとは、好きな工程で続ける
完成したワイヤーは HTML または Figma に書き出せます。Figma で取り込んで使い慣れたツールで仕上げるもよし、HTML を起点にコーディングへ進むもよし。ここから先は、案件に合った工程で続けてください。
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
プロの制作フローに本格導入
¥3,300 / 月
- 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 が質問しながら要件のヌケや矛盾を整理し、ワイヤーフレームまで一気通貫で仕上げます。