TeleportHQ
TeleportHQ · コーディング
TeleportHQは、AIプロンプトとFigmaデザインを公開可能なレスポンシブサイトに変え、5つのJSフレームワークで整ったコードを書き出すローコードサイトビルダーだ。
TeleportHQ について
About
TeleportHQとは
TeleportHQはブラウザで動くローコードビルダーで、サイト、ウェブアプリ、オンラインストアに対応する。AIサイト構築ツールとして、視覚的にデザインし、最後は固定テンプレートではなく本番用のコードとして公開する。
売りは明快だ。コードを書かない人はドラッグ＆ドロップで操作し、書く人は最後にHTML、CSS、フレームワークのコードを受け取る。この組み合わせは珍しい。多くのサイトビルダーはホストされたページを渡すだけで終わる。
制限は先に知っておきたい。ウェブアプリのプロジェクト、追加の言語、追加の編集者席は有料スロットが必要で、7日間の無料トライアルのAIトークン30,000は一度きり、毎月の補充はない。
使い始める
- play.teleporthq.ioで登録し、クレジットカードなしで7日間の無料トライアルを始める。
- AIビルダーにサイトの要望を伝えるか、Figmaファイルを取り込んで最初のレイアウトを作る。
- ドラッグ＆ドロップでデザインを整え、コンポーネントを調整し、フォントや色を差し替える。
- 独自ドメインを接続するかVercelにデプロイし、自分でホストしたい場合はコードを書き出す。
AIツール情報
TeleportHQの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- コードを書かない人：コードに触れずに本物のサイトを組み立てられる。ただしウェブアプリとストアの機能には有料スロットが要る。
- フロントエンド開発者：閉じたページではなく、HTML、CSS、React、Next.js、Vue、Angularの整ったコードを受け取れる。
- マーケティングチーム：文言もレイアウトも直接直せて、変更のたびに開発へ回さなくて済む。
- 制作会社：Figmaデザインを素早くレスポンシブなプロトタイプにする。追加の編集者席は1席$9.99。
タスク
- Figmaファイルをコードに変換する：ファイルを取り込むと、開発者に扱いやすいHTMLとCSS、またはフレームワークのプロジェクトが手に入る。
- ランディングページを公開する：プロンプトから始め、視覚的に仕上げ、1回の作業で独自ドメインに公開する。
- ヘッドレスCMSのフロントを作る：Strapi、Contentful、WordPress、Caisy、Flotiqをつないでライブデータを取り込む。
- 小さなストアを開く：カタログ、チェックアウト、Stripe決済を備えたオンライン店舗を生成する。
シーン
- ソースコードを求めるチームに完成したサイトを渡す：コードを書き出し、好きな場所でホストする。
- 複数市場向けにサイトを翻訳する：言語を追加し、AI翻訳で文言を埋める。
- 予算を確定する前にウェブアプリを試作する：インタラクティブなプロジェクトを7日間試してから決める。
主な機能
AIによるサイトとウェブアプリのビルダー
目的、スタイル、内容を伝えると、TeleportHQがレイアウト一式かインタラクティブなウェブアプリを生成する。数秒で複数のデザイン案が返り、あとは手作業で整える。各プロジェクトはAI機能用の試用トークンで始まる。
ドラッグ＆ドロップの視覚編集
エディタでは、コードを書かずに色、フォント、セクション、UI要素を変えられる。再利用できるコンポーネントを作り、色と書体はグローバルなスタイルガイドで管理する。コードを書かない編集者も、開発者と同じプロジェクトで作業できる。
5つのフレームワークへのコード書き出し
HTML、CSS、React、Next.js、Vue、Angularの本番用コードを書き出せる。つまり作ったサイトはTeleportHQに残らず、自分のリポジトリとホスティングへ移せる。コード書き出しは静的プロジェクトに限られる。
Figmaからコードへのプラグイン
Figmaからサイトのデザインを取り込むか、選んだレイヤーを編集可能なHTMLとCSSとしてコピーする。デザインとコードの間にある作り直しの工程を省け、書き出したマークアップは開発者に扱いやすい。
ヘッドレスCMSとデータ連携
プロジェクトをStrapi、Contentful、WordPress、Caisy、Flotiqにつなぎ、外部のデータソースを取り込む。内容と画面が分かれているため、マーケティング担当はエディタを開かずにブログやカタログを更新できる。
フォームとリード獲得
エディタの中でコードなしにフォームを作って装飾し、送信内容はダッシュボードで集めて管理する。プランには決まった数のフォームと毎月の送信数が含まれ、追加分はパックで買える。
ホスティングとワンクリック配備
TeleportHQのサブドメインに無料で公開し、独自ドメインをつなぐか、Vercelへ直接配備する。SSLとグローバルCDNは標準で付き、どのプランにも1 GBのアセット保存が含まれる。
メリットとデメリット
メリット
- HTML、CSS、React、Next.js、Vue、Angularへのコード書き出しで、サイトを持ち運べる。
- 視覚編集がグローバルなスタイルガイドと再利用可能なコンポーネントと並び、チームの一貫性を保てる。
- Figmaの取り込みで、デザインとコードの間の作り直しが減る。
- 内蔵ホスティング、独自ドメイン、SSL、CDNが、構想から公開までの道のりを覆う。
- 7日間のトライアルはカード不要で、評価のリスクが小さい。
デメリット
- コード書き出しは静的プロジェクトだけに効くので、インタラクティブなウェブアプリは同じようにはプラットフォームを離れられない。
- ウェブアプリのプロジェクト、追加の言語、追加の編集者席は、それぞれ別の月額がかかる。
- トライアルのAIトークンは30,000が一度きりで毎月の枠ではないため、プロンプトを多用するとすぐ底を突く。
- 無料プロジェクトはTeleportHQのブランド表示が付き、非公開にできない。
よくある質問
いいえ。ドラッグ＆ドロップとAIビルダーでサイトを作って公開できる。書き出したプロジェクトをさらに作り込むなら、コードの知識が役立つ。
関連コンテンツ
TeleportHQに関連するツール、スキル、記事を探す。
TeleportHQの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。