FigmaをWordPressに変換する方法（AIを含む4つの簡単な方法）

私たちのデザインチームは、WordPressで構築する前にFigmaでページレイアウトを計画します。最初にデザインすることで、正確なレイアウトを決定してから、サイトで再作成できます。

このガイドでは、私たちがテストしたAIの方法から始める、FigmaをWordPressに変換する4つの方法を紹介します。

開始する前に：Figmaフレームを準備する

フレームは、デザインの1つの画面または1つのページを保持する、Figma内の単一の固定サイズキャンバスです。

AIメソッドとコンバータープラグインは、フレームを直接読み取ります。きれいなフレームは、後で修正する手間を省きます。

Figmaの無料スタータープランは、このガイドのすべての機能に十分なので、有料のFigmaアカウントは必要ありません。

まず、フレームを選択してShift + Aを押すか、右側のパネルの「自動レイアウト」ボタンをクリックします。

自動レイアウトは、Figmaに要素を固定位置ではなくルールに基づいて配置およびスタックするように指示します。これにより、デザインが後でモバイルデバイスに対応しやすくなります。

次に、レイヤーの名前を「Rectangle 47」ではなく、「ヒーロー画像」や「CTAボタン」のように、コンテンツを表すように変更します。

AIツールとコンバータープラグインは、これらの名前を使用して各レイヤーを理解します。明確な名前は、後で修正が少なくなることを意味します。

時間があれば、デスクトップフレームと並行してモバイルフレームもデザインしてください。これにより、ツールは電話でページがどのようにスタックされるべきかの実際の参照を得ることができ、推測に頼る必要がなくなります。

最後に、その特定のフレームへのリンクが必要です。フレームを右クリックし、「コピー/ペーストとして」に移動して、「選択範囲へのリンクをコピー」を選択します。

取得したリンクにはnode-id=が含まれており、ツールにどのフレームを読み取るかを指示します。node-id=のないプレーンなファイルリンクは、選択したフレームではなくファイル全体を指し、以下のAIまたはコンバータープラグインでは機能しません。

方法1：AIを使用してFigmaをWordPressに変換する

FigmaデザインをWordPressページに変換する最も速い方法は、AIにフレームを読み取らせて再構築させることです。3つのものが必要で、すべて無料プランがあります。

1つ目は、作業を行うAIアシスタントであるClaudeです。2つ目は、ClaudeにFigmaファイルを読み取る権限を与えるFigmaの公式コネクタです。

3つ目は、無料プラグインであるWPVibeで、WordPressサイトをClaudeに接続し、ページをサイトに直接構築します。

Figmaの無料スタータープランでは、月に最大20回のAI読み取りが可能です。これは数ページには十分です。有料プランでは、DevおよびFullシートは1日あたり最大200回の読み取りが可能ですが、ViewおよびCollabシートは月に20回のままです。

開始するには、まずFigmaを接続する必要があります。Claudeアプリで、設定 » コネクタに移動し、Figmaを見つけて、Figmaアカウントでサインインします。

Claude Codeを使用している場合は、/mcpコマンドを実行し、リストからFigmaを選択します。

次に、WordPressサイトにWPVibeをインストールしてアクティブ化します。これは、任意のプラグインをインストールするのと同じ方法です。手順については、WordPressプラグインのインストール方法ガイドを参照してください。

アクティブ化されると、WPVibe画面で3つの短いステップが表示されます。表示されたMCPサーバーURLをコピーし、Claudeにコネクタとして追加し、プラグインが送信する6桁のコードを使用してメールを確認します。

次に、Claudeにサイトの接続を要求し、wp-admin内からワンクリックで承認します。このプロセスでは、パスワードをコピーする必要はありません。

WPVibeをClaudeに正常に接続したら、このプロンプトでClaudeにフレームリンクを貼り付けてください。

Read this Figma frame: [paste your link]. Rebuild it as a new DRAFT page using native WordPress blocks only (group, columns, heading, paragraph, buttons, image). Upload the images to the media library. Match the colors, fonts and spacing. Do not publish.

プロンプトの「ネイティブブロック」というフレーズは、WordPressに標準で付属するブロックを意味します。そのため、取得したページは通常のブロックエディターで編集可能であり、表示に特別なプラグインは必要ありません。

「下書き」という単語も重要です。これにより、確認するまでページがライブサイトに表示されなくなります。

テストサイトでこれを実行したところ、フレームを1回読み込むだけで、Claudeはデザインから正確な16進数の色、フォントサイズ、行の高さ、パディング値、角の半径を取得しました。

最初のドラフトは3分20秒で到着し、それらの値はネイティブブロックで取り込まれました。

レイアウトは、ページがFigmaフレームのように見えるようにするために修正が必要でした。ClaudeはWPVibeのメディアアップロードツールを使用して画像をアップロードしました。

これは、デザインに実際の画像が含まれている場合にのみ機能します。Figmaのプレースホルダーの長方形は画像を表示せず、警告もありません。

テストでは4つの問題が発生しました。保存された2つのボタンブロックがWordPressによって無効として扱われ、エディターに「ブロックの回復を試行」という通知が表示されました。

その通知をクリックすると両方のボタンが修正されましたが、予期しない場合は警告のように見えます。

2番目の問題はデスクトップで発生しました。Claudeはセクションをテーマの通常のコンテンツ幅で構築しました。

デザインは画面の中央の狭い列に配置され、3つのフィーチャーカードは1行に1単語ずつ表示されました。Figmaフレームとは似ても似つかないものでした。

Claudeにセクションの修正を依頼したところ、それが機能しました。しかし、フル幅を変更するだけでは不十分で、内部コンテンツの幅も広げる必要がありました。

修正が必要な領域のスクリーンショットを撮り、Claudeに幅を調整するように指示することもできます。

3番目の問題は見た目に関するものでした。画像に丸みを帯びた角は、テストでは引き継がれませんでした。後でご自身で設定する必要があります。

4番目の問題はモバイルビューで、Claudeがデザインの固定120pxサイドパディングを、変更せずにコピーしていたことでした。

幅390pxの電話では、コンテンツ用のスペースは150pxしか残りませんでした。

1回のフォローアップメッセージで電話ビューが修正されました。サイドパディングとヒーロー見出しが固定サイズに留まるのではなく、画面に合わせてスケーリングするように依頼したところ、うまくいきました。

公開する前に、デスクトップと電話で下書きを開いてください。何か問題があれば、Claudeに修正内容を平易な言葉で説明し、両方のビューを再度確認してください。

すべてが正しく表示されたら、WordPressエディターからページを公開してください。

デザインに複数のページや複雑なレイアウトがある場合は、すべてを正しく行うためにこれらの手順を数回繰り返す必要がある場合があります。

方法2：SeedProdで構築する

Figmaファイルをツールに渡したくない場合は、市場で最高のWordPressテーマおよびランディングページビルダーであるSeedProdを使用して、WordPressで直接デザインを再構築できます。

無料バージョンには、この方法に必要なドラッグアンドドロップビルダーが含まれており、600,000以上のサイトで実行されています。

SeedProdにはFigmaインポート機能はありません。これは、デザインを自分で再作成し、最初からすべての要素を制御する必要があることを意味します。

画面の片方にFigmaフレームを開き、もう片方にSeedProdビルダーを開いて、キャンバスにブロックをドラッグして表示されているものと一致させます。

左側の列から画像、見出し、動画、ボタン、オプトインフォーム、段落ブロックをドラッグできます。

追加したブロックをクリックすると設定が開かれ、フォントサイズ、色、配置、間隔をデザインに合わせることができます。

この方法で、SeedProdの無料バージョンでテスト用のランディングページを再構築しました。上のスクリーンショットはその結果を示しています。

完全な手順については、WordPressでランディングページを作成する方法のチュートリアルをご覧ください。

デザインがかなり標準的な場合、SeedProdはAIウェブサイトビルダーも提供しており、ビジネスの簡単な説明からウェブサイト全体を生成できるため、Figmaデザインに合わせるための出発点となります。

無料で最大3つのサイトを生成でき、それぞれをテーマファイルとしてダウンロードできます。WordPress内で結果を編集するには、SeedProd Proプランが必要です。

その後、空のキャンバスから始めるのではなく、その結果をFigmaデザインに合わせるように調整します。詳細については、AIでウェブサイトを作成する方法のガイドをご覧ください。

方法3：FigmaからWordPressへのコンバータープラグインを使用する

Figma内に留まり、AIが構築せずにデザインを変換したい場合は、コンバータープラグインが最良の選択肢です。

UiChemyは、私たちが発見した中で最高のFigmaからWordPressへのコンバータープラグインであり、8,000以上のサイトでアクティブです。

UiChemyの最も良い点は、WordPressのブロックエディターだけでなく、ElementorやBricksのようなページビルダーでも動作することです。WordPress用に構築されたほとんどのFigmaプラグインは、ブロックエディターコードしか出力しません。

使用するには、2つのコンポーネントをインストールします。WordPressサイトにUiChemyプラグイン、Figma内にUiChemyプラグインです。WordPress 6.9以降が必要なので、開始する前にサイトが要件を満たしているか確認してください。

WordPressダッシュボードで、UiChemyを開き、「Figma Plugin」タブに移動します。

「Page builder」の下で、Elementor、Gutenberg、またはBricksを選択します。次に、その下にある「Connection link」を見つけて「Copy」をクリックします。

そのリンクには、ログインと安全なアプリケーションパスワードが組み込まれています。パスワードのように扱い、自分だけが知っているようにしてください。

UiChemyには、Elementor、Gutenberg、Bricksそれぞれに対応したビルダーごとの個別のFigmaプラグインがあります。Figmaで「Tools」メニューを開き、UiChemyを検索して、WordPressで選択したビルダーに対応するプラグインを実行します。手順は3つすべてで同じです。

UiChemyを初めて使用する場合は、アカウントを作成し、セットアップウィザードに従ってください。

次に、「Quick Conversion」を選択し、Kadence、WordPress Core、またはNexterなどのターゲットライブラリを選択します。

これらは、個別のページビルダーではなく、WordPressエディターでページを構築するために使用できるブロックを提供します。標準的なブロックエディターの出力の場合はWordPress Coreを選択するか、サイトが既に利用しているライブラリを選択してください。

次に、Figmaフレームを選択し、「Import」をクリックします。

WordPressへのデザインのエクスポート方法を選択するよう求められたら、「サイト接続」の下にある「別のサイトを追加」を選択します。

WordPressダッシュボードからコピーした接続リンクを貼り付け、「接続」をクリックします。これにより、デザインを変換するたびに「サイトを選択」リストにサイトが表示されるようになります。

UiChemyには、2つのインポートオプションが表示されます。

「直接インポート」はデザイン全体をドラフトページとしてWordPressサイトに送信し、「クリップボードにコピー」はセクションごとにコピーして既存のページに貼り付けることができます。

無料プランでは、月に1,000クレジット、Figmaシート1つ、サイトプロジェクト1つ、サイトあたり5ページで、小規模なプロジェクトを快適にこなせます。

より多くの機能が必要な場合は、年間請求で月額$8から始まる有料プランをご利用ください。

UiChemyが正しく機能するには、デザインで「Auto Layout」を使用し、特定のルールに従う必要があります。古いデザインを変換する場合は、まず調整が必要になることがあります。

Figma to WordPress Blockは、同じ作業のより限定的なバージョンです。このFigmaプラグインは、1つのフレームをブロックエディターコードに変換します。無料版ではエクスポートできるフレーム数に制限があり、有料ライセンスではその制限が解除されます。

フレームを選択し、左側の列から「ツール」メニューを開き、プラグインを検索します。見つけたら、「実行」ボタンをクリックします。

これによりポップアップが表示され、「WordPressに変換」をクリックして結果をコピーできます。次に、任意のページのブロックエディターに貼り付けて、ブロックとしてデザインを取得します。

方法4：WordPressエージェンシーに依頼する

ウェブサイト全体や複雑な機能を持つデザインの場合は、開発者に依頼するのが通常最善の選択肢です。

Figmaはデザイン面のみを担当するため、開発者は動的なコンテンツ、カスタム投稿タイプ、チェックアウトフローなど、サイトで機能する必要があるものをすべて構築する必要があります。

優れたエージェンシーは、デザインを電話やタブレットでも機能するようにします。承認する前に、必ず自分で電話で完成したページを確認してください。

プロジェクトに合ったエージェンシーを見つけるために、最高のWordPress開発エージェンシーのリストをご覧ください。

FigmaからWordPressへのFAQ

Figmaのデザインをウェブサイトにすることはできますか？

はい、Figmaのデザインを動作するWordPressウェブサイトに変換できます。その方法は4つあります。AIに再構築させる、SeedProdのようなページビルダーで再作成する、コンバータープラグインを実行する、またはエージェンシーに依頼する方法です。最初の3つはコーディングが一切不要です。

WordPress用のFigmaプラグインはありますか？

いくつかありますが、UiChemyとFigma to WordPress Blockをまずお勧めします。Figma自体にはWordPressのエクスポート機能が組み込まれていないため、デザインを移行するには、これらのツールのいずれか、または上記のAIのような方法が必要です。

AIはFigmaのデザインをWordPressに変換できますか？

はい、このガイドでは、ClaudeとFigmaのコネクタ、およびWPVibeプラグインを使用してテストしました。

デザインの色、フォントサイズ、スペーシングは一度の読み取りで一致しましたが、デザインの固定サイドパディングをそのままコピーしたため、電話表示が壊れました。

上記の方法1には、修正メッセージを含む完全なアカウントがあります。

FigmaのデザインをElementorに変換するにはどうすればよいですか？

UiChemyは、Figmaフレームをフラットなコードではなく編集可能なElementorレイアウトに変換するため、このツールになります。また、Bricksやブロックエディターでも機能するため、1つのビルダーに限定されることはありません。

WordPressはFigmaより優れていますか？

どちらか一方が優れているということはありません。なぜなら、それぞれ異なる役割を担っているからです。Figmaはページの見た目をデザインする場所であり、WordPressはウェブサイトを実行し、訪問者に提供するものです。

ほとんどのサイトでは両方を使用しており、まずFigmaでデザインを確定してからWordPressで構築します。

FigmaからWordPressへの変換はSEOに悪影響を与えますか？

FigmaのデザインをWordPressに変換しても、通常はコンテンツや被リンクに悪影響はありません。

自動変換ツールは、開発者が「ブロート」と呼ぶ余分なコードを追加することがあり、その重いコードは手作業でコーディングされたテーマと比較してページを遅くする可能性があります。

変換後は、必ずスピードテストを実行して、現状を確認することをお勧めします。

このガイドがお役に立ち、FigmaからWordPressへの変換方法を学べたことを願っています。また、コードなしでカスタムWordPressテーマを簡単に作成する方法に関するガイドもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。