無料
¥0
メール登録だけ
- 自分の案件で、デザインまで作れる
- 仕上がりのイメージまで確認できる
制作の流れ
ヒアリングから、公開できるコードまで
rafuru は、Web 制作者がクライアントとの合意を取りながら、AI を活用して案件を進めるためのワークフローを提供します。AI が生成した各ステップの成果物をクライアントに見せるだけで、Web 制作が完了します。
- 01
ヒアリング
AI がヒアリングを行い、要件の抜け漏れを整理
- 02
ワイヤーフレーム
決まった要件に合わせて、設計根拠つきのワイヤーを生成
- 03
デザイン案
AI が 3 つの方向性でサイトのデザインを提示
- 04
カンプ
そのまま、デザインカンプまで
- 05
実装
デザインカンプを再現した実装を生成
- 06
書き出し
コードで受け取る
最後は公開できる状態のコードを書き出せるので、どこに載せるかは自分で選べます。
01 ヒアリング
AIによるヒアリングで要件を整理
クライアントにヒアリングした内容を入力すると、AI が Web 制作に必要な観点で整理し、抜け漏れや答えの矛盾を指摘します。完了時には、目的・ターゲット・セクション構成などを整理した要件サマリーが、クライアントにも見せられる形でできあがります。
02 ワイヤーフレーム
「なぜこのレイアウトか」を、説明できる
ヒアリングの内容をもとに、ワイヤーフレームを作ります。セクションごとに「なぜこうしたか」の説明がつくので、提案のときにそのまま使えます。
スマホ・タブレット・PC の表示を、並べて確認できます。直したいところは AI チャットで指示。共有リンクを送れば、クライアントも自分の端末で見られます。
- セクションごとに、設計の理由つき
- スマホ・タブレット・PC を並べて確認
- 共有リンク・Figma 書き出しに対応
03 デザイン案
AIが3つの方向性でサイトのデザイン案を提示
あなたはクライアントに送って選んでもらうだけ。
クライアントになったつもりで、選んでみてください。
この案につく説明文（クライアントにそのまま送れます）
明るい色とイラストで、楽しい雰囲気に。はじめての子や保護者にも入りやすい印象にしています。
ドット絵と暗めの配色で、ゲームのような世界観に。子どもが自分から通いたくなる雰囲気です。
手描きのイラストと広めの余白で、やわらかい印象に。習い事を選ぶ保護者に安心してもらえる雰囲気です。
04 カンプ
選んだ案から、そのままデザインカンプへ
クライアントが選んだデザイン案と生成されたワイヤーフレームを元に、デザインカンプを生成します。実装に入る前に、完成イメージをクライアントと最終確認できます。
カンプ
05 実装と書き出し
デザインが決まったら、公開できるコードに
カンプで見た目が固まったら、そのまま実装。公開できる HTML に仕上げます。クライアントには確認用のプレビューリンクを送れば、登録なしで、自分のスマホからチェックしてもらえます。
<section class="hero"> <div class="hero__inner"> <p class="hero__eyebrow"> 小学生からはじめる未来のチカラ </p> <h1 class="hero__title"> 遊ぶように学ぶ、はじめてのプログラミング </h1> <a class="hero__cta" href="#trial"> 無料体験レッスンに申し込む </a> </div></section>- 確認用プレビューリンクの発行・停止
- AI チャットとコードで微調整
- HTML の書き出し
書き出した HTML は、自分のサーバーでも、既存の WordPress でも、好きなところで公開できます。 どこに載せるかは、あなたが決められます。
従来フローとの違い
既存フローに AI を後付けせず、AI 前提でフローを組み直した
ヒアリングやデザイン・実装に AI を後付けするフローでは、工程ごとに手作業が残るうえ、クライアントとのやりとりが煩雑になりがちです。 rafuru は Web 制作のクライアントワークに特化したフローを提供するため、完成までの工数が大きく減ります。
※工数は目安です。
Before
従来フロー
合計 63 h
After
rafuru
合計 4 h 30 min - ヒアリング 1 h
- 要件定義 5 h
- 情報設計 3 h
- ワイヤー 10 h
- デザインカンプ 16 h
- 実装・コーディング 20 h
- フィードバック対応 8 h
- ヒアリング 1 h
- AI 要件整理 1 h
- ワイヤー生成 10 min
- デザイン 3 案から選択 10 min
- カンプ・実装の生成 10 min
- 仕上げ・微調整 1 h
- クライアントレビュー対応 1 h
Before
従来のフロー
合計工数 63 h - ヒアリング 1 h
- 要件定義 5 h
- 情報設計 3 h
- ワイヤー 10 h
- デザインカンプ 16 h
- 実装・コーディング 20 h
- フィードバック対応 8 h
After
rafuru
合計工数 4 h 30 min - ヒアリング 1 h
- AI 要件整理 1 h
- ワイヤー生成 10 min
- デザイン 3 案から選択 10 min
- カンプ・実装の生成 10 min
- 仕上げ・微調整 1 h
- クライアントレビュー対応 1 h
作例
rafuru で作ったサイト
美容室から会社のサイトまで、いろいろな業種の作例を並べています。
エステサロン
実物を見る →
歯科クリニック
実物を見る →
カフェ
実物を見る →
パーソナルジム
実物を見る →
会計事務所
実物を見る →
工務店
実物を見る →
美容クリニック
実物を見る →
プログラミング教室
実物を見る →
例は順次追加します。
料金
まずは無料で、自分の案件で
Starter
¥3,300 / 月（税込）
毎月 6 クレジット
- 実装して、コードを書き出すまで
- 月に 1 本ぶんのクレジットつき
支払いはクレジット制で、成果物を作るぶんだけ使います。無料登録で 3 クレジット、Starter は毎月 6 クレジット。足りなくなったら、必要なだけ買い足せます（完成した LP 1 本で、およそ 5 クレジット）。
FAQ
よくある質問
無料プランで何ができますか
ヒアリング、ワイヤー、デザイン、カンプまで、自分の案件で試せます。実装してコードを書き出すところから、有料のプランになります。
作ったサイトはどこで公開しますか
rafuru が書き出すのは、公開できる状態の HTML コードです。公開先は自由で、ご自身のサーバーや、既存の WordPress などに載せられます。rafuru 自体はホスティングを行いません。クライアントへの確認用には、閲覧専用のプレビューリンクを発行できます。
完成した LP の質は、実務で使えますか
コピー・余白・トンマナを整え、そのまま公開できる水準を目指して作ります。案件によっては手直しが必要な場合もありますが、AI チャットやコード編集でその場で調整できます。できたものは、クライアントに見せて確認・選択してもらえる状態で出てきます。
自分やクライアントの世界観に合わせられますか
はい。デザインは標準で 3 案出るので、方向性をクライアントと一緒に選べます。気に入らなければ再生成や、AI チャット・コード編集での調整も可能です。トーンは言葉のラベルではなく、実際のビジュアルで選びます。
クライアントはアカウント登録が必要ですか
いいえ。rafuru を操作するのは creator（あなた）です。クライアントは登録不要で、あなたが共有するプレビューリンクや成果物を見て、確認・選択をするだけです。
料金はどう決まりますか。クレジットとは何ですか
rafuru は成果物ごとに「クレジット」を消費する仕組みです。目安はワイヤー 1.0・デザイン案 1 枚 0.1・カンプ 0.9・実装 3.0 クレジットで、完成 LP 1 本はおよそ 5.2 クレジット。月額 Starter（¥3,300）には毎月 6 クレジットが付き、足りないぶんはクレジットパックを買い足せます。同じ 6 クレジットでも月額が最も割安です。
生成に失敗したら、クレジットは消費されますか
いいえ。生成に失敗したぶんはクレジットを消費しません。気に入らなければ再生成でき、自動チャージも行いません。残高と消費の見込みはダッシュボードでいつでも確認できます。
クレジットに有効期限はありますか
付与・購入したクレジットは、それぞれ付与・購入日から 6 か月で失効します。消費は有効期限が近いものから順に使われます。
解約やプラン変更はいつでもできますか
月次契約のため、いつでもプランの変更・解約が可能です。解約はアカウント設定から手続きできます。解約後の当月末まではプランの機能を継続して利用できます。
商用利用はできますか
有償・無償を問わず商用利用が可能です。クライアントへの納品物として、書き出した HTML や、生成した本番コードを使用することもできます。詳細は利用規約をご確認ください。
入力したヒアリング内容は AI の学習に使われますか
お客様が入力したヒアリング情報・要件データは AI モデルの追加学習に使用しません。入力データの取り扱いはプライバシーポリシーに基づきます。
ヒアリングで店舗住所や代表者名を聞かれたら、入力しても大丈夫ですか
サイトに掲載する目的で本人または権利者から正当に提供された情報（店舗・事業所の住所、代表者氏名、連絡先、事業概要、サービス内容、料金、営業時間、公開予定の写真等）は、ヒアリングや AI チャットに入力いただけます。入力データは AI 処理のため米国の AI 基盤（Anthropic 社等）に送信されるため、クライアントとの制作受託契約において生成 AI ツールの利用について同意を得ておくことを推奨します。詳細は利用規約第 7.5 条をご覧ください。
入力してはいけない情報はありますか
サイトに掲載予定のない第三者の個人データ（顧客名簿、会員リスト、従業員個人情報、取引先担当者の連絡先等）、要配慮個人情報（健康・思想信条・犯罪歴等）、クレジットカード番号やマイナンバー・パスワード等の金融・認証情報、NDA 対象の機密情報の入力は利用規約および当方ポリシーで禁止しています。誤って入力した場合は、[email protected] までご連絡ください。当方の管理範囲内で速やかに削除対応を行います（外部 AI 基盤側のログ等は各事業者のデータ保持ポリシーに従います）。
生成した成果物のデータはだれのものですか
生成したワイヤーフレーム・カンプ・実装コードおよびエクスポートデータの所有権はお客様に帰属します。rafuru がお客様の承諾なく第三者にデータを提供することはありません。
クライアントをプロジェクトに招待できますか
Starter プランでは、完成イメージの確認用に、閲覧専用のプレビューリンクを発行できます。チームメンバー招待機能は Team プランにて提供予定です。
ワイヤーフレームは Figma に書き出せますか
ワイヤーフレームは rafuru の Figma プラグインで取り込めます。フレームとレイヤー構造を保った状態で読み込まれ、Figma 上でそのまま編集できます。デザインカンプや実装コードは Figma には書き出せません。
推奨環境を教えてください
最新バージョンの Chrome / Firefox / Safari を推奨します。3 つの画面サイズの同時プレビュー機能はデスクトップ画面（1280px 以上）での使用を推奨します。モバイルブラウザでの閲覧には対応していますが、一部機能が制限される場合があります。