v0からWordPressへ

v0から​WordPressへ。​コンポーネントを​公開テーマに。

v0でUIを作りましたか? v0からWordPressへの変換は、transjtが自動で行います。VercelのTailwindとshadcn/uiの出力が、マーケティングチームで編集できる本物のPHPテンプレートを備えたネイティブテーマになります。

プレビュー後にお支払い

transjtのブロックで作られたホームページを表示したWordPressのブロックエディター。横にはブロックの一覧が並んでいます

代理店、フリーランス、マーケティングチームに選ばれています

変換すべきとき

v0を​WordPressに​変換すべきとき

チームがv0の出力を手でCMSに作り直す代わりに、transjtを選ぶ6つの場面。

  • コンポーネントは完成。CMSはまだ。

    v0のおかげで、洗練されたコンポーネントライブラリが半日でできました。しかし、コンテンツチームが編集できるテーマは手に入っていません。transjtでGitHubリポジトリを指定すれば、そのコードからWordPressのテンプレートが作られるので、手で作り直すものは何もありません。

  • 公開日は動かせない

    テーマを手で作ると、デザインの承認が済んだ後に2〜3週間の回り道になります。transjtならそれが1回の変換で済むので、約束した日に公開できます。

  • エンジニアが作るのはマーケティングページではなくプロダクト

    フロントエンドの工数は最も足りないもので、マーケティングサイトの作り直しは後回しにされがちです。transjtなら変換をロードマップから完全に外せるので、誰かのスプリントのチケットになることも、チーム間の受け渡しになることもありません。

  • Tailwindとshadcn/uiは、手作業ではPHPにうまく移せない

    v0はユーティリティクラスとshadcnのプリミティブに大きく頼っています。それを手作業でテーマファイルに置き換えるには、コンポーネントを一つずつほどき、余白が崩れないことを祈るしかありません。transjtは構造を直接対応付けるので、テーマはv0のプレビューどおりに表示されます。

  • テーマ制作のほうが、デザインより高くつく

    カスタムWordPressテーマの代理店の見積もりは、v0でフロントエンド全体を作った費用を上回るのが普通です。自動で変換すれば、その予算をテーマ作業に回さずに済みます。

  • 書いているのはPHPではなくReact

    1つのプロジェクトのために、WordPressのテンプレート階層、ループ、functions.phpを学ぶ価値はありません。それらのファイルはtransjtが書きます。何が出力されたか確かめたくなっても、読めるPHPです。

計算してみる

v0/vercelで​いくつの​コンポーネントを​作りましたか?

transjtでサイトを公開

費用を節約
$8,100*
時間を節約
81時間*手作業で10.1作業日
すぐに結果が出る
1.5〜3時間*テーマ全体で
無料で始める

*手作業でReactからWordPressへ移行する場合の時間をもとにした概算です。1コンポーネントあたり約4.5時間、時給$100、1日8時間で計算しています。transjtなら約1.5〜3時間で、リポジトリからテーマを構築します。

仕組み

v0を​4ステップで​WordPressへ​エクスポート。

GitHubを経由して、v0のプロジェクトからネイティブなWordPressテーマへ。

  1. v0でUIを生成

    インターフェースが仕上がるまで、v0にプロンプトを入れます。WordPressはNodeのランタイムではなくPHPでページを配信するので、v0の標準であるサーバーレンダリングのApp Routerではなく、シンプルなReactとViteの構成か、Next.jsの静的エクスポートを指示してください。WordPress側には、App Routerを動かせるサーバー層がありません。Tailwindとshadcn/uiのコンポーネントは、そのまま引き継がれます。

  2. プロジェクトをGitHubにプッシュ

    v0から書き出し、コードをリポジトリに入れます。ここで、プロジェクトの配信がVercelに依存しなくなります。ここからプロジェクトは自分で管理するホスティングへ移り、どのビルドからどのテーマができたかはコミット履歴に残ります。

  3. リポジトリをtransjtに接続

    transjtのプロジェクトでGitHubを認可し、リポジトリを選択します。transjtはコンポーネントツリーをWordPressのテンプレート階層に対応付け、何かを書き出す前に、ヘッダー、フッター、ページ、パーシャルの各ファイルに何を入れるかを判断します。

  4. WordPressへエクスポート

    出力先のCMSとしてWordPressを選び、ライブプレビューを確認します。確定すると、transjtがPHPテンプレートとネイティブなマークアップでできたネイティブテーマを生成します。間にページビルダーのプラグインは入りません。

お客様の声。

アーティストのアトリエで机に向かう男性お客様
“We’d seen plenty of tools promise magic for page and theme creation, but they always under-delivered. Transjt proved to be the exception.”
KevinThinkFuel
  • 95–99%完成コードの割合(構成の整ったファイルの場合)
  • ∞取り込めるAIビルダー(Figmaにも対応)
  • 2ネイティブ対応のCMS:HubSpotとWordPress
  • 1クリックでエクスポート。数分後にはテーマがアカウントに届きます
得られるもの

v0で​作ったサイトを​WordPressへ​移しませんか?

v0から変換したWordPressテーマの中身

WordPressがWebの大きな割合を占めているのは、テンプレートの仕組みとプラグインのエコシステムがオープンで、いくらでも拡張できるからです。しかし、ReactのコンポーネントライブラリをWordPressに載せるには、通常、開発者がマークアップをPHPとして手で書き直す必要があります。transjtはその変換を自動で行い、v0の出力をネイティブなWordPressテーマにするので、Reactアプリを埋め込む必要はありません。

FAQ

v0から​WordPressへの​FAQ。

v0のコンポーネントをWordPressテーマに変換する前に知っておきたいこと。

デモを予約
  • v0は、Vercelの環境の中で、プロンプトをスタイル付きのReactコンポーネントにします。transjtはリポジトリの段階から引き継ぎます。GitHubのプロジェクトを指定すれば、ほかのテーマと同じようにインストールできるWordPressテーマフォルダーが作られ、途中のどの手順にも開発者は必要ありません。

  • 静的エクスポートなら使えます。v0の標準はサーバーコンポーネントを使うNext.jsのApp Routerで、Nodeのランタイムを前提としています。WordPressはPHPでレンダリングするので、Nodeのランタイムはありません。Next.jsを静的エクスポートに設定するか、SSRなしのReactとViteの構成をv0に指示すれば、きれいに変換できます。既存のNext.jsの作業も、たいていは活かせます。コンポーネントは移植できますが、サーバーサイドのルーティングとサーバーアクションは取り除く必要があります。

  • はい。Vercel上のReactサイトに、マーケティングチームが運用できるCMSが必要になった、というのは、ここに来る方によくある理由です。リポジトリをGitHubにプッシュすれば、transjtがフロントエンドを、自社のホスティングで動くWordPressテーマに変換します。コードがv0のプロンプトから生まれたものでも、手で書いたものでも、変換には関係ありません。

  • はい。transjtはGitHubを橋渡しに使うので、ワークフローはバージョン管理されたままです。更新したv0のコンポーネントをリポジトリにプッシュし、transjtをもう一度実行すれば、変更が公開中のWordPressテーマに同期されます。

  • はい。transjtはTailwindの設定を解決し、セマンティックなPHPテンプレートと一緒にコンパイル済みのスタイルを出力するので、余白、タイプスケール、コンポーネントのバリアントがv0のプレビューと同じように表示されます。

  • 同期済みのリポジトリから、インストールできるテーマフォルダーができるまで、通常は数時間です。かかる時間はページの総数ではなく、異なるページテンプレートの数で決まるので、同じレイアウトのブログ記事が20本あっても、1本と同じ速さで変換できます。

今日​デザインして、​明日​公開。

transjtでは一秒一秒が大切です。だから私たちの使命はシンプル。あなたの時間を節約し、ワークフローの手間をなくすことです。