無料で登録
FigmaからElementorへ

Figmaから​Elementorか、​ネイティブな​WordPressテーマか？

FigmaからElementorへの変換を探しているなら、目的はたいてい1つです。FigmaのデザインをWordPressへ、手作業でコーディングせずに載せることです。Elementorはその方法の1つです。ネイティブなWordPressテーマもその1つで、transjtが作るのはこちらです。それぞれの仕組み、最終的に手元に残るもの、選び方を解説します。

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

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

方法

Figmaから​WordPressへの​3つの方法。

  • 手作業の場合

    Elementorで作り直す

    Elementorのエディターで、Figmaのスタイルを目で見て合わせながら、各セクションをウィジェット単位で作り直します。すべてを自分でコントロールできますが、どのページも2回作ることになります。1回はFigmaで、もう1回はビルダーで。

  • プラグイン

    FigmaからElementorへのプラグイン

    FigmaのフレームをElementorへ取り込んでくれるプラグインがあります。FigmentorはElementorのテンプレートとして、FigWPはElementorとEssential Addonsのウィジェットとして、UiChemyはElementor、Bricks、Gutenbergのページとして取り込みます。速い一方で、結果はビルダー独自の形式で保存されます。transjt vs. Figmentor、transjt vs. FigWP、transjt vs. UiChemyもご覧ください。

  • ネイティブな方法

    代わりにWordPressテーマを

    transjtはElementorにはエクスポートしません。Figmaのデザインを、PHPテンプレートとGutenbergブロックを備えたネイティブなWordPressテーマに変換するので、ページビルダーは使わず、テーマファイルはお客様のものになります。詳しくはFigmaからWordPressへをご覧ください。

比較

Elementorの​レイアウトか、​ネイティブテーマか。

どちらもFigmaのデザインをWordPressに載せられます。違いは、その後レイアウトがどこに保存されるか、そしてそれが、後でサイトを編集、拡張、移行するすべての人にとって何を意味するかです。

ネイティブテーマ（transjt）FigmaからElementorへ
レイアウトの保存場所開発者が読んでバージョン管理できるテーマテンプレートの中Elementor独自の形式の中
入れたままにすべきものレイアウトには何も不要Elementorと、多くの場合そのアドオン
チームが編集する場所WordPressのブロックエディターElementorのエディター
アップデートとライセンスWordPressのものだけWordPressに加えて、ビルダーのもの
独自のコードcustom.cssとcustom.js（再エクスポートしても保持）ビルダーのウィジェットや設定の中
HubSpotにもはい、同じFigmaファイルからいいえ
Figmaプラグインを入手デモを予約
手順

Figmaから​ネイティブな​WordPressテーマへ。

ネイティブな方法が合うなら、手順は次のとおりです。FigmaからWordPressへのほかのプロジェクトと同じです。

  1. Figmaファイルを準備する

    • ボタン、ヘッダー、コンテナーにはオートレイアウトを使ってください。レスポンシブレイアウトに対応づけられます。
    • デザインを、実際のページの領域（Hero、Features、Footer）に対応するセクションにまとめます。
    • 平坦化したページではなく、再利用できるコンポーネントでデザインします。

  2. transjtプラグインを実行

    • Figmaでデザインを開き、transjtのプラグインを起動します。
    • 変換したいフレームまたはコンポーネントを選択します。
    • プロジェクトの種類としてWordPressを選びます。

  3. WordPressへエクスポートする

    • WordPressサイトにtransjtのプラグインをインストールして有効化します。
    • サイトをtransjtのワークスペースに接続します。
    • テーマをエクスポートします。プラグインがサイトにインストールします。

  4. ブロックエディターでページを作る

    • チームは、WordPress標準のエディターで、テーマのブロックからページを作ります。
    • タブレットとモバイルのプレビューを確認します。
    • 独自のコードはcustom.cssとcustom.jsに追加してください。どちらも再エクスポート時にそのまま残ります。

  5. WordPressテーマを数時間で。

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

    Figmaプラグインを入手デモを予約
切り替える前に

Elementorから​離れるときに​考えておくこと。

Elementorからネイティブテーマへ移行するには、レイアウトを作り直す必要があり、設定一つで済むものではありません。次の点を計画に入れておいてください。

  • レイアウトは引き継がれない

    Elementorで作ったページのレイアウトは、Elementorの中に保存されています。ネイティブテーマではそれがテンプレートに置き換わるので、Elementorのページではなく、Figmaのデザインから始めてください。

  • ウィジェット内のコンテンツ

    Elementorのウィジェットに入力したテキストや画像は、Elementorのデータとして保存されています。新しいページのブロックに移してください。

  • アドオンのウィジェット

    transjtはナビゲーション、ブログテンプレート、フォームをテーマと一緒にエクスポートします。それ以外にElementorのアドオンが担っていた機能には、ブロック、プラグイン、またはテーマのコードが必要です。

  • 整理されていない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クリックでエクスポート。数分後にはテーマがアカウントに届きます
向き・不向き

それでも​Elementorが​適している場合。

Elementorが向いているのは、1人が見た目を確認しながら構築・編集し、開発者が関わらず、移行の予定もないサイトです。チームでサイトを編集する、開発者が機能を拡張する、あるいは次にHubSpotへ移る可能性がある、といった場合は、Figmaから作るネイティブテーマのほうがすっきりした土台になります。レイアウトは自社で所有するコードの中にあり、同じファイルを両方のCMSに変換できます。

対象

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

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

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

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

デモを予約

  • いいえ。transjtが作るのは、Elementorのレイアウトではなく、PHPテンプレートとGutenbergブロックを備えたネイティブなWordPressテーマです。どうしてもElementorが必要な場合は、Figmentor、FigWP、UiChemyなどのプラグインが対応しています。

  • transjtはネイティブテーマを作るので、ページビルダーは必要ありません。開発者は、ほとんどのワークフローでそのコードを扱えます。

  • あなたです。transjtはネイティブなWordPressテーマをあなたのサイトにエクスポートし、テーマファイルはあなたのものになります。独自のコードはcustom.cssとcustom.jsに追加してください。再エクスポートしても、どちらも保持されます。

  • はい。同じFigmaファイルをHubSpot CMSのテーマにも変換できるので、1つのプラットフォームに縛られません。

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

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

無料で始めるデモを予約