早期 アクセスに 参加する

Rapidは、HubSpot CMS専用に構築されたAI搭載の開発ツールです。アップロードされたあらゆるUIスクリーンショットを、HTML、fields.json、そしてHubLの変数バインディングまで完備した、完全に機能するHubSpotカスタムモジュールへと変換します。

そのコンセプトは極めてシンプルです。ウェブサイトの各セクションごとに、モジュールのコード、フィールド設定、バインディングを手作業で記述するために2〜4時間もの時間を費やす代わりに、スクリーンショットをアップロードするだけで、Rapidが60秒以内にその煩雑な作業をすべて代行します。生成されるモジュールは、本番環境への導入に即座に対応できる品質を備え、HubSpot開発のベストプラクティスに準拠しています。さらに、ワンクリックで自身のポータルへ直接デプロイすることも可能です。

Rapidは、コード品質を一切犠牲にすることなく、より迅速な開発を実現したいと考えるHubSpot開発者、制作エージェンシー、フリーランス、そしてマーケティングチームのために設計されています。ヒーローセクション、機能一覧グリッド、お客様の声（導入事例）ブロック、料金表など、どのようなセクションの構築であっても、Rapidにお任せください。

Rapidは、デザインのスクリーンショットからデプロイ済みのHubSpotモジュールへと、わずか1分以内で変換する3ステップのワークフローを採​​用しています。

ステップ1 — アップロード。 任意のUIスクリーンショットをアップロードします。Dribbbleの投稿画像、Figmaからの書き出しデータ、クライアント向けのモックアップPDF、Behanceのデザイン、Webサイトのスクリーンショット、さらには紙に手描きしたワイヤーフレームの写真であっても構いません。RapidのビジョンAIが、見出し、テキストブロック、画像、ボタン、リンク、カード、ナビゲーション項目、アイコンなど、画像内のあらゆる要素を詳細に分析します。

ステップ2 — 生成。 その分析結果に基づき、Rapidが完全に機能するカスタムモジュールを自動的に生成します。生成されるモジュールには、Tailwind CSSのユーティリティクラスが適用されたクリーンかつセマンティックなHTMLコードに加え、適切なフィールドタイプ（テキスト、画像、リンク、真偽値、選択肢、色、数値）で構成された構造化済みのfields.jsonが含まれます。さらに、論理的に整理されたフィールドグループ化、動的要素ごとのHubLバインディング、ID・カスタムクラス・表示切り替え機能を含むセクション設定、そして必要に応じて適用される「show-if」条件なども完備されています。

ステップ3 — デプロイ。 生成されたコードを確認し、必要に応じて調整を加えたら、「デプロイ」をクリックします。モジュールはHubSpotのテーマ内に直接組み込まれ、コンテンツ編集者がページエディタ上で直ちに利用できる状態になります。

ユーザーインターフェース（UI）のデザインが示されているものであれば、事実上どのようなものでも対応可能です。RapidのAIは、画像がどのようなソース由来であるかに関わらず、UIのパターンを正確に認識できるよう学習されています。

具体的にどのような画像が利用可能か、その例をいくつかご紹介します。デザインのインスピレーションを得るためのDribbbleやBehanceのスクリーンショット、FigmaやAdobe XDから書き出したフレーム、HubSpotモジュールとして再現したい実在のWebサイトのスクリーンショット、クライアントからPNG・JPG・PDF形式で送付されたモックアップ、BalsamiqやWhimsicalといったツールで作成されたワイヤーフレーム、さらには紙やホワイトボードに手描きしたスケッチを撮影した写真まで、幅広く対応しています。

画像の品質が完璧である必要はありませんが、より鮮明なスクリーンショットを使用することで、より精度の高い結果が得られます。最良の結果を得るためには、幅が1200ピクセル以上の画像を使用することをお勧めします。

いいえ。これこそが、Rapidと市場にある他のツールとの最大の違いの一つです。transjt.aiのようなツールでは、何かを生成する前に、特定のコンポーネントタグ付けやAuto Layout（自動レイアウト）の設定が施されたFigmaのデザインデータを用意し、さらにFigmaプラグインをインストールしておくことが必須となります。これは学習のハードルが非常に高く、チームがFigmaを使用していない場合には、大きな障壁となってしまいます。

Rapidは、その障壁を完全に排除します。Figma、Sketch、Adobe XDなど、デザインツールは一切必要ありません。どのようなソースから得たものであっても、スクリーンショットさえあれば、そこからHubSpotモジュールを生成することができます。つまり、クライアントからPDF形式のモックアップが送られてきたら？そのままアップロードしてください。Dribbbleで見つけたデザインを再現したいと思ったら？スクリーンショットを撮ってアップロードしてください。会議中にホワイトボードへ手描きでセクションの構成をスケッチしたなら？写真を撮ってアップロードしてください。デザインツールは一切不要です。

モジュールの生成やデプロイにあたり、コーディングの知識は一切不要です。アップロード、生成、デプロイに至るまでの全ワークフローは、コードを一行も書くことなく完遂できるよう設計されています。

とはいえ、もしあなたが開発者であり、生成されたモジュールの出力内容を細部まで調整したいとお考えなら、RapidではHTML、fields.json、およびHubLのコードすべてに完全にアクセスすることが可能です。デプロイの前でも後でも、あらゆる要素を自由に編集できます。公開前に開発者がコードをレビューする体制をとっている制作会社（エージェンシー）にとって、これは理想的なワークフローと言えます。Rapidがモジュールの90〜95%を自動生成し、残りの最終仕上げを開発者が担当するという流れです。

スクリーンショットをアップロードすると、Rapidは以下の4つの必須ファイルをすべて備えた、完全なHubSpotカスタムモジュールを生成します：

module.html — スタイリングにTailwind CSSのユーティリティクラスを使用した、クリーンかつセマンティックなHTMLです。すべての動的コンテンツにはHubLタグが使用され、適切な空白制御（whitespace control）が施されています。各要素は条件付きでレンダリングされるため、未入力のフィールドがあってもHTMLが崩れることはありません。

fields.json — Rapidが検出したすべての要素に対し、適切なフィールドタイプを割り当てた、完全に構造化されたフィールド定義ファイルです。見出しや段落にはテキストフィールド、画像にはレスポンシブ属性付きの画像フィールド、ボタンには「新しいタブで開く」や「nofollow」オプション付きのリンクフィールド、トグルには真偽値（Boolean）フィールド、ドロップダウンには選択肢（Choice）フィールド、そして必要に応じてカラーフィールドが適用されます。フィールドは「コンテンツ」「画像」「ボタン」「セクション設定」といった論理的なグループに分類されており、コンテンツ編集者はすっきりと整理されたインターフェースを利用できます。

module.css — このファイルは意図的に最小限の内容、あるいは空の状態で保持されます。Rapidは、モジュール固有のCSSを記述するのではなく、HTML内でTailwindのユーティリティクラスを使用するというベストプラクティスに従っています。カスタムCSSが組み込まれるのは、アニメーションやインタラクションの実装において、それが真に必要とされる場合に限られます。

meta.json — ラベル、ヘルプテキスト、許可されるテンプレートタイプ、コンテンツカテゴリなど、モジュールに関する適切な設定情報が記述されています。

Rapidは、見出し、段落、画像、ボタン、リンク、ナビゲーションメニュー、カード、アイコングリッド、お客様の声（テスティモニアル）ブロック、フォームセクションなど、多岐にわたるUI要素を正確に識別し、変換します。デザインの視覚的な階層構造を正しく理解し、各要素を適切なHubSpotのフィールドタイプに割り当てます。

多くのユーザーから、初回生成時の精度が90〜95%に達するという報告が寄せられています。残りの5〜10%については、主にスペーシング（間隔）の微調整、フィールドラベルの修正、フィールドグループの並び替えといった軽微な調整で対応可能です。こうした調整作業を含めたとしても、スクリーンショットの取り込みからモジュールの実装完了までの所要時間は、数時間ではなく「数分」単位で完了します。

スクリーンショットがより鮮明で高解像度であるほど、その精度は向上します。セクション間の視覚的な区切りが明確で、スペーシングに一貫性があり、テキストが読み取りやすいスクリーンショットを使用することで、最も優れた結果が得られます。

はい。HubSpotポータルをRapidに接続すると、現在有効なテーマとその構成情報が取得されます。モジュールは、お客様のテーマですでに採用されているディレクトリ構造や命名規則に準拠した形で、テーマ内の「modules」フォルダに直接配置されます。

Rapidが既存のファイルを上書きすることはありません。生成された各モジュールは、テーマ内で新規のモジュールとして作成されます。そのため、既存のテンプレート、モジュール、CSS、およびJavaScriptは、一切変更されることなくそのまま保持されます。

はい、まさにそれがワークフローの重要な要素となります。Rapidがモジュールを生成すると、エディタ画面上でそのコード全体（HTML、fields.json、およびHubL）を確認することができます。デプロイを実行する前に、必要に応じてコードのあらゆる部分を自由に修正することが可能です。

この機能は、カスタムロジックの追加、フィールドのデフォルト値の変更、クラス名の調整、あるいはテーマ固有のマクロとの連携を行いたい開発者にとって、特に有用です。一方、開発者以外の方にとっては、生成されたコードは通常、そのままの状態でデプロイできる完成度になっています。

また、先にデプロイを済ませておき、後からHubSpotの「デザインマネージャー」上で変更を加えることも可能です。生成されたモジュールは、ポータル内の他のカスタムモジュールと同様に機能します。つまり、完全に編集可能であり、その所有権も完全にユーザー（あなた）に帰属します。

ほとんどの場合、60秒未満で完了します。所要時間はスクリーンショットの複雑さによって異なります。シンプルなヒーローセクションであれば約20〜30秒で生成されますが、カード、ボタン、画像など複数の要素を含む複雑なセクションの場合は、最大で1分ほどかかることがあります。

その効率の良さを具体的に示すと、中程度の複雑さを持つモジュールを手作業で構築する場合（fields.jsonの手書き、HTML構造の作成、HubLバインディングの追加、フィールド参照のテスト、デバッグなど）、通常は2〜4時間を要します。Rapidを使えば、これを1分未満にまで短縮できるのです。

カスタムコードモジュールに対応したHubSpotアカウントが必要です。これには、CMS Hub Professional、CMS Hub Enterprise、Content Hub Professional、およびContent Hub Enterpriseが含まれます。現在、HubSpotの「デザインマネージャー」内でカスタムモジュールを作成できる環境であれば、Rapidはお客様のポータルで正常に動作します。

Rapidは、HubSpot公式のOAuth認証を使用して、お客様のポータルに接続します。アクセス権の付与は、HubSpotの標準的な承認フローを通じて行われます。当社がお客様のHubSpotパスワードを要求したり、保管したりすることは一切ありません。

セキュリティは当社の最優先事項です。お客様のデータの取り扱いは、以下の通りです。

スクリーンショットは、当社のAIエンジンによってリアルタイムで処理され、モジュールの生成が完了した後は永続的に保存されることはありません。これらは、お客様のモジュールを生成するという唯一の目的のためにのみ使用され、処理完了後には当社のサーバーから削除されます。

HubSpotとの接続には、公式のOAuth 2.0認証を使用しています。お客様は、HubSpotの標準的な権限設定画面を通じて、Rapidへのアクセスを承認していただきます。当社は、お客様のポータルの「デザインマネージャー」と連携するために必要なアクセストークンのみを受け取ります。お客様のHubSpotのパスワードを当社が閲覧、保存、あるいはアクセスすることは一切ありません。

お客様のブラウザ、当社のサーバー、およびHubSpotのAPIとの間で行われるすべての通信は、TLS（HTTPS）を用いて暗号化されています。また、保存状態にあるデータ（Data at rest）についても、業界標準であるAES-256暗号化方式を用いて暗号化されています。

根本的な違いは「入力」にあります。transjt.aiを利用するには、特定のワークフローに沿って作成されたFigmaのデザインデータが必要です。具体的には、専用のFigmaプラグインをインストールし、コンポーネントに正しくタグ付けを行い、Auto Layout（自動レイアウト）を設定し、さらに独自の設計規約を遵守した上でなければ、コードを生成することができません。これは、特にFigmaを使用していないチームや、専任のデザイナーが在籍していないチームにとって、利用開始のハードルを著しく高める要因となります。

一方、Rapidは根本的に異なるアプローチを採用しています。どのようなソースから取得したスクリーンショットであっても、それをアップロードするだけで、すぐに完全なモジュールとして出力されます。Figmaは不要です。プラグインも不要、コンポーネントへのタグ付けも不要、Auto Layoutの設定も不要です。学習コストは実質ゼロに等しく、画像ファイルをドラッグ＆ドロップできる方であれば、どなたでもすぐにRapidを使いこなすことができます。

他にもいくつかの違いがあります。transjt.aiがWebサイト全体の「テーマ」生成に重点を置いているのに対し、Rapidはまず個々の「モジュール」の生成に注力しています（ページやテーマ全体の生成機能についても、近日中に実装予定です）。また、Rapidで生成されるすべてのモジュールには、Tailwind CSSのユーティリティクラス、HubLの空白制御（Whitespace Control）、セクション設定用マクロ、SEOに最適化された見出しタグなど、HubSpot開発における特定のベストプラクティスが標準で組み込まれています。

現在、Rapidは個別のカスタムモジュールを生成します。これは一度に1セクションずつ行われます。これが当サービスの「フェーズ1」にあたる製品であり、現在ご利用いただける機能です。

フェーズ2 — ページ全体の生成は、現在積極的に開発が進められています。この機能が実装されると、ページ全体のスクリーンショットをアップロードするだけで、Rapidがそれを自動的に複数のセクションモジュールへと分解します。例えば、ヒーローセクション、機能紹介、お客様の声、CTA（行動喚起）を含むトップページのスクリーンショットをアップロードすれば、それぞれが適切に構造化された、すぐに導入可能な4つの独立したモジュールとして出力されます。

フェーズ3 — テーマ全体の生成は、当サービスのロードマップに組み込まれています。このフェーズの構想では、3〜5ページ分（トップページ、会社概要、サービス紹介、お問い合わせ、ブログなど）のスクリーンショットをアップロードするだけで、Rapidがすべてのモジュール、テンプレート、グローバルスタイルを含んだHubSpotテーマ一式を丸ごと生成します。これが当サービスの長期的な目標であり、私たちはその実現に向けて一歩ずつ着実に開発を進めています。

新フェーズのリリース通知をご希望の方は、tryrapid.aiにてご登録ください。

Rapidでは、それぞれ異なるユースケースに合わせて設計された、3段階のモジュール生成レベルを提供しています：

Basic Level（基本レベル）：デフォルト値を持たず、最小限の設定のみが施された、シンプルなフィールド構成のクリーンなモジュールを生成します。これは、あくまで開発の出発点となる基本構造だけが必要で、その後のカスタマイズはすべて手動で行う予定であるような、迅速なプロトタイピングに最適です。

Medium Level（中級レベル）：短いテキストコンテンツ（見出しやボタンのテキストなど）に対するスマートなデフォルト値、論理的なフィールドのグループ化、そして各フィールドへのヘルプテキストの追加が行われます。これは、日常的なモジュール開発の大部分において最もバランスの取れた「スイートスポット」となるレベルです。コンテンツ編集者がすぐに利用を開始できる、整然としたモジュールを手に入れることができます。

Advanced Level（上級レベル）：Medium Levelの機能に加え、セクション設定グループ（ID、カスタムクラス、表示切り替えトグル）、フィールドの条件付き表示を制御する「Show-if」条件、すべてのコンテンツフィールドに対する完全なデフォルト値、そして包括的なフィールドグループ化機能が含まれます。これは、そのまま本番環境に投入可能な「プロダクションレディ」なレベルです。生成されるモジュールは、プロフェッショナルなHubSpot開発におけるあらゆるベストプラクティスに準拠しています。

接続可能なポータルの数は、ご契約のプランによって異なります。無料プランでは、1つのHubSpotポータルを接続できます。一方、有料プランでは複数のポータル接続に対応しており、単一のRapidダッシュボードから複数のクライアントアカウントを管理する代理店にとって、これは不可欠な機能です。

ポータルの切り替えは非常にスムーズに行えます。モジュールをデプロイする前に接続先のポータルを選択するだけで、Rapidがそのポータルのテーマ構造を自動的に取得するため、モジュールは常に適切な場所にデプロイされます。

はい、その点は私たちが極めて重視しているポイントです。Rapidによって生成されるすべてのモジュールは、プロフェッショナル品質のHubSpot開発標準に準拠しています。具体的には、以下の点が挙げられます。

フィールド構造 — フィールドは「コンテンツ」「画像」「ボタン」「セクション設定」といったカテゴリごとに論理的にグループ化されており、編集インターフェースがすっきりと整理され、操作しやすくなっています。すべてのフィールドには、内容を的確に表すラベルとヘルプテキストが付与されています。また、命名規則も具体的かつ明確です（単に「画像」とするのではなく、「ヒーロー背景画像」のように記述します）。

HubLの品質 — すべてのHubLタグにおいて「空白制御構文（whitespace control syntax）」が採用されており、レンダリング後のHTMLから不要な空行が自動的に除去されます。これにより、ページのソースコードがよりクリーンになり、HTMLファイルの軽量化も実現します。また、各フィールドの出力は条件付きで制御されており、フィールドが空の場合は何も出力されません。そのため、空のdivタグが残ったり、レイアウトが崩れたりする心配もありません。

CSSのアプローチ — Rapidでは、モジュールごとに個別のCSSを記述するのではなく、HTML内で直接Tailwind CSSのユーティリティクラスを使用する方式を採用しています。これにより、50個もの個別の「module.css」ファイルを用意する必要がなくなり、テーマ全体で共有される軽量かつ最適化（Purge）済みの単一CSSファイルで運用が可能になります。その結果、ページの読み込み速度が向上し、スタイルの一貫性が保たれ、メンテナンスも容易になります。

SEOへの準拠 — 見出しタグ（Heading tags）は動的に制御可能（選択フィールドで設定）となっており、コンテンツ編集者がページごとにH1/H2/H3の見出し階層を自由に管理できます。画像フィールドからは、HubSpotの標準的な画像処理機能を阻害することなく、適切なaltテキスト、width/height属性、および「loading="lazy"」属性が出力されます。また、Tailwindのデフォルトパレットを使用する場合、色のコントラストはWCAG AA（ウェブコンテンツ・アクセシビリティ・ガイドライン）の基準に準拠しています。

JavaScriptのポリシー — Rapidでは、アコーディオンやカルーセルといった「インタラクティブな操作」が真に必要とされるモジュール以外には、「module.js」を一切追加しません。静的なコンテンツ表示のみを行うモジュールについては、JavaScriptを一切含まない状態で提供されます。

もちろんです。Rapidで生成されたモジュールは、完全にあなたの所有物となります。有料プランをご利用の場合、ライセンス上の制限やウォーターマーク（透かし）、さらにはクレジット表記（帰属表示）の義務も一切ありません。それらのモジュールは、どのようなクライアントポータルに組み込んで展開しても構いませんし、現在構築中のテーマに組み込んで利用することも自由です。また、その成果物に対してクライアントへ請求を行う際も、ご自身の判断で自由に価格設定を行っていただけます。

多くの制作会社や代理店がRapidを活用し、HubSpotサイトの構築プロセスを劇的に高速化しています。クライアント案件のためにカスタムモジュールをゼロから構築し、何日も費やすようなことはもう必要ありません。Rapidを使えば、わずか数分でモジュールを生成できるため、残りの時間を戦略立案やコンテンツ制作、細部の調整といった、真に付加価値を生み出す業務に集中させることが可能になります。

どのAIツールであっても、100%完璧な出力を常に生成できるわけではありません。その点については、私たちは誠実に、透明性を持って皆様にお伝えしています。Rapidは、プロジェクトの強固な土台となる部分――通常は必要な要素の90〜95%にあたる部分――を生成し、残りの微調整については、ユーザーである皆様に完全なコントロール権を委ねています。

一般的な調整作業としては、グループ内のフィールドの並び替え、デフォルト値の微修正、余白や色を調整するためのTailwindクラスの変更、スクリーンショットには映っていなかった追加フィールドの挿入、あるいは特定のユースケースにおいては不要となるフィールドの削除などが挙げられます。

こうした調整にかかる時間は、通常わずか2〜5分程度です。同じモジュールをゼロから構築する場合に要する2〜4時間という時間をこれと比較すれば、その価値は一目瞭然でしょう。たとえ生成結果が完璧でなかったとしても、Rapidを活用することで、皆様は膨大な時間を節約できるのです。さらに、利用頻度の増加や皆様からのフィードバックが蓄積されるにつれて、私たちのAIは絶えず進化を続けており、生成精度のギャップ（修正の必要性）は今後ますます縮小していくことでしょう。

利用開始までの所要時間は、わずか30秒ほどです。tryrapid.aiにアクセスし、無料アカウントにご登録ください。クレジットカードの登録は不要です。

ログイン後、安全なOAuthフローを通じてHubSpotポータルを連携させ、テーマを選択して、最初のスクリーンショットをアップロードしてください。最初の5つのモジュールは完全無料です。これだけでワークフロー全体を体験し、Rapidがご自身の開発プロセスにどのように組み込めるかをご確認いただけます。

ご質問がある場合や、利用開始にあたってサポートが必要な場合は、LinkedInまたはTwitter/Xよりお気軽にお問い合わせください。私たちはHubSpot開発者コミュニティのために本サービスを開発しており、皆様からのフィードバックを心よりお待ちしております。