クイックスタート
デザインから、CMSで動くテーマへ。テーマは数時間で完成します。
始める前に
必要なもの：
- transjtのアカウント。
- スーパー管理者権限のあるHubSpotアカウント、または新規にインストールしたWordPress。
- Figmaのデザイン、GitHubのリポジトリ、または移行する公開中のサイトのURL。デザインがまだない場合は、無料のtransjt Figma Playgroundファイルを使うか、無料のWebサイトプロンプトジェネレーターにAIビルダー用のプロンプトを書かせましょう。
- 適切なプラン：Figmaからの取り込みはtransjtのサブスクリプション（Free、Creator、Professional）で行います。GitHubのプロジェクトはWebサイト全体の1回限りの購入としてエクスポートし、移行はサイトごとの1回払いです。
1. アカウントを作成
transjt.aiにアクセスし、Figma、Google、HubSpot、GitHub、またはメールアドレスで登録します。同じアカウントを、プラグインとアプリの両方で使えます。
2. CMSを接続
エクスポート先のCMSを接続します。必要なのは、どちらか一方だけです。
HubSpot
- transjt.aiにログインし、Settings > Integrationsを開きます。
- Add CMSをクリックし、HubSpotを選びます。
- HubSpotのウィンドウ（OAuth）が開きます。ログインして、transjtを承認します。HubSpotからスーパー管理者権限を求められます。
何も開かない場合は？ブラウザがポップアップをブロックしています。app.transjt.aiのポップアップを許可して、もう一度お試しください。
この手順は後回しにして、プロジェクトのDeployステップでHubSpotを接続することもできます。
詳しくはHubSpotの接続をご覧ください。
WordPress
- transjtプラグインをダウンロードし、WordPressのダッシュボードのPluginsからアップロードします。
- 有効化をクリックします。左の管理メニューにtransjt.aiが表示されます。
- transjt.aiにログインしたまま、サイドバーのtransjt.aiをクリックし、Connectを選びます。ポップアップで接続を承認します。
後でプロジェクトのDeployステップで、Select Existing Accountからこのサイトを選択します。
詳しくはWordPressの接続をご覧ください。
3. プロジェクトを作成
transjt.aiでProjectsを開き、+をクリックします。プロジェクト名を入力し、必要に応じてカバー画像をドロップして、Createをクリックします。カバー画像は後で、HubSpotやWordPressでテーマのプレビュー画像として使われるので、そこでテーマを選ぶときに見分けられます。次のステップSourceでは、デザインの取り込み元として、Figma、GitHub、または移行（移す予定の公開中のサイト）を選びます。Figmaで作業する場合は、代わりにプラグインからプロジェクトを作成することもできます（ステップ4を参照）。
どのプロジェクトも、画面上部に表示される同じステップで進みます：Create → Source → Import → Preview → Export → Deploy。
同じ一覧画面から、プロジェクトを削除することもできます。
プロジェクトのHubSpotアカウントは、Deployステップで選びます。Select Existing Accountを開いて接続済みのアカウントを選ぶか、Add HubSpotをクリックして、その場で新しいアカウントを接続します。WordPressサイトは、先にプラグインで接続しておく必要があります（ステップ2）。
4. デザインを取り込む
方法を選びます。Figmaのデザインか、GitHub上にあるAIビルダーのコードです。
Figmaから
- Figmaコミュニティからtransjtプラグインをインストールするか、「transjt」をFigmaのPlugins & Widgetsで検索します。transjtアプリのPluginsからも見つけられます。
- プラグインにログインします。
- Select typeで、取り込む種類を選びます：Component、Blog（ブログの一覧レイアウト）、Blog Detail（個々の投稿のレイアウト）。
- Projectsで既存のプロジェクトを選ぶか、Create Projectをクリックして名前を付けます。
- Figmaで変換したいレイヤーを選択し、Import to transjtをクリックします。
- 選択したコンポーネントが、transjtアプリに転送されます。
GitHubから
- プロジェクトのSourceステップでSourceを選びます。
- Connect GitHubをクリックし、ポップアップの指示に従います。何も開かない場合は、ブラウザがポップアップをブロックしていないか確認してください。
- アカウント、リポジトリ、ブランチを選択し、Proceedをクリックします。
transjtがコードを取り込み、プロジェクトのフロントエンドを構築します。最もきれいな結果を得るには、AIへのプロンプトに「Next.jsとSSRを使わず、React/Viteを使ってください。」と追加してください。v0、bolt.new、Claude Code、Replitの場合は、代わりにNext.jsの静的エクスポートを指定します。対応AIビルダーをご覧ください。
5. プレビュー
エクスポートの前に、取り込んだコンポーネントをtransjtアプリでプレビューします。GitHubのプロジェクトでは、すべてのページとそのコンテンツをクリックして確認できます。WordPressの場合は、Deployステップの後に、フロントエンドをCMSと組み合わせた状態でプレビューすることもできます。
フォントが足りない場合は、右上のAaボタンに不足している数が表示され、そこからアップロードや差し替えができます。フォントをご覧ください。
6. エクスポート
transjtアプリでExportをクリックし（GitHubのプロジェクトでもボタン名は「エクスポート」です）、
HubSpotまたは
WordPressを選びます。transjtがテーマを生成します。テーマは、次のステップDeployでCMSに送信します。
GitHubのプロジェクト
エクスポートは、Webサイト全体に対する1回払いです。求められたら、お支払いを完了してください。
Figmaのプロジェクト
取り込みにはサブスクリプションのトークンを使います。エクスポートにはトークンを使いません。プランの管理やアップグレードは、Settings > Subscriptionsで行います。
7. デプロイ
Deployステップには、Ready to deployとして現在のパッケージが表示されます。日付、含まれるコンポーネント、そして次のボタンです。
- Deploy Theme to HubSpotまたはDeploy Theme to WordPress：テーマをCMSに送信します。
- Download Theme：手動でインストールするために、テーマをZIPファイルでダウンロードします。手順はHubSpotとWordPressをご覧ください。
- Open Preview（WordPressのみ）：サイトをWordPressと組み合わせて、サンドボックスで表示します。
プロジェクトを初めてデプロイするとき、transjtはデプロイ先を尋ねます（Select Account or Add new）。Select Existing Accountで接続済みのアカウントを選ぶか、Add HubSpotをクリックします。プロジェクトが紐付けられると、この手順は省略されます。
HubSpot
Deploy Theme to HubSpotをクリックします。まだ紐付けていない場合は、アカウントを選ぶか、Add HubSpotをクリックしてログインします。
詳しくはHubSpotの接続をご覧ください。
WordPress
Deploy Theme to WordPressをクリックします。まだ紐付けていない場合は、Select Existing Accountでサイトを選びます。transjtプラグインを接続すると、そこにサイトが表示されます。
詳しくはWordPressの接続をご覧ください。
以前のパッケージ
エクスポートのたびに、パッケージが作成されます。最新のものが一番上に表示され、それより前のものはPrevious Packagesに一覧表示されます。各パッケージには次の情報が表示されます。
- エクスポートの日時
- 最後にデプロイした日時（緑色でクラウドのアイコン付き。現在のパッケージにはLast Deployと表示されます）
- 矢印で開いたときの、含まれるコンポーネント
以前のパッケージの横にある2つのボタンで、次の操作ができます。
- ダウンロードして、そのバージョンを手動でインストールする
- 再デプロイして、たとえばテーマを以前のバージョンに戻す
8. 制作を始める
HubSpot
ページまたはWebサイトプロジェクトを作成し、名前とプレビュー画像でテーマを選びます。テーマは、最初のエクスポートの後に表示されます。
詳しくはHubSpotでテーマを使うをご覧ください。
WordPress
外観 > テーマに移動し、テーマにマウスを重ねて有効化をクリックします。新しいページでは、左のサイドバーにブロックが表示されます。
詳しくはWordPressでテーマを使うをご覧ください。