FigmaのデザインをWordPressに変換する方法

FigmaのデザインをWordPressに変換する方法は3つありますが、最適な方法を選ばなければ、下記のようなデメリットが発生してしまいます。

• Figmaのデザイン通りに再現できない
• サイトの保守・管理が自社でできない
• 想像していた以上にサイト制作時間が掛かってしまう

そこで今回は、FigmaのデザインをWordPressに変換する方法3つを紹介した上で、それぞれどのような方におすすめなのかを解説していきます。

WordPressはSEOやマーケティング対策がしやすかったり、デザイン自由度が高いなどのメリットがある一方で、Webの知識がなければ管理・運用が大変といったデメリットがあります。

「このままWordPressでサイトを運用してて良いのかな」と悩んでいる方は、ぜひ以下の記事をご覧ください。

Figmaで作ったデザインをWordPressに変換する方法

Figmaで作ったデザインをWordPressに変換する方法は、下記のとおりです。

方法	難易度	おすすめ度
HTML/CSSとPHPでコーディングする	（かなり難しい）	（非推奨）
Figmaプラグインで実装する	（簡単）	（おすすめできない）
WordPressの「Elementor」を利用する	（普通）	（推奨）

それぞれどのような手順を踏むのか、おすすめ度の理由について詳しく説明します。

HTML/CSSとPHPでコーディングする

HTML/CSSとPHPでコーディングする方法は、コーディング知識がある方のみにおすすめです。

メリット	デメリット
デザインの再現度が高い 表示速度が早くなりやすい プラグイン依存が減る	開発工数が大きいので時間がかかる WordPressの専門知識が必要 制作費用が高くなりがち サイトの自社管理が難しくなる

今回紹介する方法の中でも、一番デザインを綺麗に再現できるのがコーディングです。この後紹介する2つの方法は、ノーコードで実装するのでやはり細かい部分は再現できないためです。

またスピード面に関しても、余計なコードやライブラリを含まなくなるため、サイトが軽くなりページ表示速度が速くなりやすくなります。

ただし、自社でコーディングができない場合、外注に多くのコストが掛かるだけでなく、サイトの自社管理が難しくなるデメリットがあります。

そのため、コーディング知識がない場合は、HTML/CSSとPHPでコーディングする方法は避けるようにしましょう。

Figmaプラグインで実装する

Figmaプラグインで実装する方法は、とにかくラクですがデザイン崩れが起きやすいです。

今回、紹介するのは「Figma to WordPress Block」というプラグインです。Figma to WordPress Blockとは、Figmaのデザインデータをブロックとして使えるように HTML（＋スタイル）等を生成するプラグインです。

メリット	デメリット
実装スピードが速い デザイナーだけでも実装しやすい	デザインが大きく崩れやすい 低品質なコードが生成されやすい 機能的制約が付いてくる

1番のメリットは「実装スピード」です。

ですがデザインのレイアウトが複雑だったり、Auto Layoutなどが正しく使われていないと、デザイン崩れが高頻度で起きます。そしてデザイン修正などの工数を踏まえると、案外時間が掛かってしまったというケースも少なくありません。

そのため、下記に該当するケースのみ検討するのがおすすめです。

WordPressの「Elementor」を利用する

個人的に推奨しているのが、WordPressの「Elementor」を利用する方法です。

「Elementor」とは、プログラミングの知識なしにWordPressサイトを視覚的に作成できる「ページビルダー」と呼ばれるWordPressプラグインです。

メリット	デメリット
ノーコードなので非エンジニアでも実装できる 開発スピードが早い フォーム・スライダー・アニメーションなどが標準機能で揃っている	表示速度が遅くなりやすい デザインの完全再現は難しい プラグインに依存する

デザインデータを見ながらElementorで実装するのでアナログな方法ではありますが、デザインをある程度再現した上で、効率よくサイトを制作できます。

またElementorであれば、非エンジニアでも使いこなせるため、サイト制作を外注する必要もありません。

ただし、注意しないといけないのはデザインを完全再現するのは難しいということです。

デザインに凝っているのであれば、コーディングもしくはノーコードの中でもデザイン性に優れている「Studio」を検討するのがおすすめです。

WordPressの「Elementor」で変換する方法

WordPressのプラグイン「Elementor」の使い方は、下記のとおりです。

それぞれ具体的に説明します。

①：プラグインの「Elementor」を追加する

WordPressのプラグイン追加画面にアクセスして、「Elementor」と検索します。

「今すぐインストール」をクリックして、「有効化」をクリックします。

②：ページ構造を作成する

固定ページを新規追加して、右メニューのテンプレートを「Elementor Canvas」に変更します。

「Elementor で編集」をクリックします。

左メニューに、レイアウト・デザインに関するブロックがあるので、自由に配置してFigmaのデザインを再現していきます。

Elementorの基本的な使い方に関しては、ぜひ以下のYouTube動画をご覧ください！

③：デザインを最終チェックして公開する

デザインの実装が完了すれば、右上にある「公開」をクリックします。

WordPress以外なら「Studio」に変換するのがおすすめ

Figmaで作ったデザインをWordPressに変換することは可能ですが、コーディング知識がないと完全に再現することはできません。

なぜならWordPressを用いたノーコード実装では、デザイン性能に限界があるからです。

デザイン性を重視したいならWordPressではなく、ノーコードWeb制作ツールである「Studio」などのデザイン性能に長けているツールを使うべきです。

「本当にStudioであれば、細部まで実装できるの？」と心配に思う方も多いでしょう。半信半疑の方は、ぜひStudioで作られたサイト事例を覗いてみてください。

ちなみにStudioでサイトを制作するメリット・デメリットは、下記のとおりです。

メリット	デメリット
非エンジニアでも完成度の高いサイトを作れる デザインの自由度が圧倒的に高い レスポンシブ対応が簡単にできる 公開までが圧倒的に早い 自社でサイトの保守・管理ができる	EC機能・ログイン機能など拡張性に制限がある サーバーを自由に選べない 大規模サイトに向いてない

またFigmaには「Figma to STUDIO」というプラグインがあり、高精度でFigmaのデザインデータを移行できるので、デザイン崩れも最小限で抑えられます。

弊社ではStudioの実装代行も行っていますので、「自社で実装できるか不安、、、」という方はぜひお気軽にお問い合わせください。

>>Studioの実装代行についてお問い合わせする

Studioでのサイト制作は「Terace」にお任せ！