無料で登録
FigmaからGutenbergへ

コーディングなしで​Figmaの​デザインを​WordPressの​Gutenbergブロックに​変換。

FigmaのデザインをWordPressのGutenbergブロックとして作り直す、時間がかかり開発者頼みの引き継ぎは、もう必要ありません。transjtなら、ランディングページのヒーロー、機能紹介のセクション、マーケティングページのレイアウト全体まで、AIによる変換でデザインを完全に編集できるネイティブなGutenbergブロックにします。ページビルダーへのロックインも、カスタムCSSもありません。

Figmaプラグインを入手デモを予約

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

仕組み

デザインから​ブロックへ：​コード不要の​変換の​仕組み。

  • 速い方法

    AIによるブロック変換

    AI変換ツールは、Figmaのレイアウト（カラム、見出し、ボタン、余白、オートレイアウト）を読み取り、見た目のスタイルをそのままに、ネイティブなGutenbergブロックに変換します。Figmaでデザインしてプラグインを実行すれば、CSSにもページビルダーにも触れずに、コアブロック（グループ、カラム、見出し、画像、ボタン）で組まれたレスポンシブなレイアウトができあがります。

  • 手作業の方法

    ブロックエディターでの作り直し

    Gutenbergのエディターで、「グループ」「カラム」「見出し」のブロックを1つずつドラッグしながら、デザインを手作業で再現します。シンプルな投稿なら問題ありませんが、Figmaの余白、パディング、タイポグラフィ、入れ子のレイアウトに正確に合わせるには、ブロック設定を何度も調整し、theme.jsonの編集が必要になることもよくあります。

  • 別の方法

    ページビルダー向けの変換ツール

    ほかの変換ツールは、デザインを独自仕様のページビルダー（ElementorやDiviなど）に流し込むので、コンテンツがプラグインに閉じ込められ、パフォーマンスを損なう余計なコードも増えます。transjtはネイティブなGutenbergブロックを出力するので、ページは軽量で移行しやすく、WordPress本体の機能だけで編集できます。

比較

変換方法を​比較。

スケジュールとサイトのパフォーマンスに影響する点で、AIを使う方法とGutenbergでの手作業による作り直しを比べてみましょう。

AI変換（transjt）Gutenbergで手作業で作り直す
速度1ページあたり数分ブロックを1つずつ組み立てて数時間
デザインの精度変換直後で約90〜95%（Figmaのパディング、カラム、文字組みを再現）ブロック設定の手作業での調整とtheme.jsonの編集
出力Gutenbergネイティブのコアブロックネイティブのコアブロックを手作業で
パフォーマンスクリーンなマークアップで、ビルダーによる肥大化なし：Core Web Vitalsを守る丁寧に作ればクリーンだが、作るのに時間がかかる
ロックインなし：純粋なWordPressのブロックなし
最適な用途マーケティングページ、ランディングページ、デザイン性の高いレイアウトシンプルな投稿と基本的なページ
Figmaプラグインを入手デモを予約
手順

コード不要の​Gutenberg​設計図。

Figmaのフレームから、WordPressのブロックエディターのネイティブなブロックまでの4つのステップ。

  1. オートレイアウトでレイアウトを準備する

    フレーム、セクション、グループにオートレイアウトを使ってください。適切なパディングと間隔を保ったまま、Gutenbergの「グループ」ブロックと「カラム」ブロックに直接対応づけられます。

  2. transjtプラグインを実行

    Figmaでレイアウトを開き、transjtのプラグインを起動して、フレームを選択し、プロジェクトの種類にWordPressを選びます。

  3. WordPressへエクスポート

    サイトでtransjtのプラグインを有効化し、ワークスペースに接続してエクスポートします。レイアウトはネイティブなブロックとしてブロックエディターに届きます。

  4. 取り込み後に仕上げる

    タブレットとモバイルでカラムが縦に並ぶことを確認し、必要に応じて余白や色を調整して、リンクとボタンのリンク先を設定します。

  5. ネイティブなブロックを数分で。

    無料で始められます。クレジットカードは不要です。

    Figmaプラグインを入手デモを予約
落とし穴

避けたい​落とし穴。

変換はtransjtが行います。手早く仕上げるための時間を少し見込んでおき、次の点は避けてください。

  • すべてを「カスタムHTML」ブロックで作り直す

    大きな「カスタムHTML」ブロック1つにまとめると、編集のしやすさも、ブロックエディターの機能もすべて失われます。transjtにレイアウトを本物のコアブロックへ対応づけさせれば、チームはコードに触れずにコンテンツを編集できます。

  • 余白とタイポグラフィの一貫性を無視する

    Figmaでパディングがばらばらだったり、テキストスタイルがそろっていなかったりすると、それがそのまま乱雑なブロック設定になります。余白とテキストスタイルをそろえておけば、エクスポートしたブロックはすっきりして、ブランドにも沿ったものになります。

  • 「念のため」ページビルダーを追加する

    GutenbergのサイトにさらにElementorやDiviを入れると、サイトが重くなり、Core Web Vitalsが悪化します。クリーンでネイティブなブロックなら、サイトは速く、移行しやすいままです。

  • グループやカラムを使わずにレイアウトを平坦化する

    複数カラムのセクションを、1枚の画像やブロックを積み重ねただけのものに平坦化しないでください。Figmaではオートレイアウトのコンテナーとして残しておけば、変換ツールがレスポンシブなままの本物の「カラム」ブロックと「グループ」ブロックを生成します。

お客様の声

お客様の声。

アーティストのアトリエで机に向かう男性お客様
“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クリックでエクスポート。数分後にはテーマがアカウントに届きます
向き・不向き

ノーコードの​Gutenberg変換は、​あなたに​合っていますか？

デザイン性の高いレイアウトを、Gutenbergのエディターでブロックごとに作り直すのは、もう過去のやり方です。Figmaのデザインに正確に合わせる必要があるマーケティングサイト、ランディングページ、コンテンツページを作るなら、AIによる変換で構築期間は数時間から数分に縮まり、スタイル調整の手間もなくなります。ページビルダーへのロックインもなく、クリーンでネイティブなWordPressのまま運用できます。

オートレイアウトを信頼して、大変な作業はtransjtに任せてください。ワークフロー全体についてはFigmaからWordPressへをご覧ください。

対象

企業、​代理店、​フリーランスの​ために。

明るいオフィスのロビーでタブレットを持って微笑むビジネスウーマン企業社内チームでWebサイトのリニューアルを進められます。長い木のテーブルを囲んで打ち合わせをするチーム代理店チームを増やさずに、クライアントのサイトを完璧に仕上げます。共有スタジオでノートパソコンに向かう、眼鏡に赤いニット帽のデザイナーフリーランスtransjtがプロジェクトを作っている間、チャイラテでもどうぞ。
FAQ

Figmaから​Gutenbergへの​変換に関する​よくある質問。

要点だけをまとめた回答です。それ以外のことは、デモを予約してお尋ねください。

デモを予約

  • はい。AIがFigmaファイルのレイアウト、タイポグラフィ、余白、構造を解析し、WordPressネイティブのGutenbergブロックに変換します。HTML、CSS、PHPを書く必要はありません。FigmaからWordPressへの変換について詳しく見る

  • Gutenbergネイティブのコアブロック（グループ、カラム、見出し、段落、画像、ボタン）です。すべてが標準のWordPressブロックエディターで編集でき、サードパーティーへの依存もありません。

  • はい。変換ツールがFigmaのオートレイアウトをGutenbergの「グループ」と「カラム」の設定に対応づけるので、セクションはデスクトップ、タブレット、モバイルに合わせて伸縮し、縦に並びます。

  • はい。ネイティブなブロックは有効化しているテーマのスタイルを引き継ぎ、ブロックテーマやtheme.jsonとも連携するので、エクスポートしたレイアウトはサイトのほかの部分と統一されたままです。

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

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

無料で始めるデモを予約