Figma から WordPress にサイトを移行する方法

公開: 2023-12-12

Figma から WordPress への変換は、多くの開発サークルで一般的なワークフローです。 Figma は、ユーザー インターフェイス (UI) とユーザー エクスペリエンス (UX) のデザインを支援する業界の代表的なツールです。 WordPress は (もちろん) Web サイトを公開する典型的な方法です。 これは、より効率的なプロジェクト管理のために、これらのソリューションの両方がどのように連携するかを理解することを意味します。 ⚙️

この記事では、可能な限り最良の方法でサイトを Figma から WordPress に移行する方法を説明します。 ここでは、WordPress に特有の設計上の考慮事項、コラボレーション、Figma からのアセットのエクスポートなど、多くのことを取り上げます。 もちろん、移行の実行方法や、役立つツールについても説明します。

📚目次:

  • Figma の概要
  • Figma で WordPress 向けにデザインする
  • Figma を WordPress にエクスポートする方法の選択
  • Figma からアセットをエクスポートする方法
  • Figma から WordPress への移行の準備
  • Figma から WordPress にデザインを統合する方法

Figma の概要

Figma は、クラウドから UX/UI デザインの世界に革命をもたらしました。 この革新的なツールにより、デザイナーはブラウザ内でプロジェクトの作成、共同作業、共有をすべてシームレスに行うことができます。

Figma のメイン Web サイト。

👉 その人気の理由は (部分的には) その幅広い機能のおかげです。

  • テンプレート ライブラリ、ベクター グラフィック エディター、高度なプロトタイピング機能など、デザイン ツールの完全なスイートが用意されています。 これにより、デザイナーは正確かつ創造性を持ってアイデアを実現することができます。
  • Figma はリアルタイム コラボレーションをサポートしており、チームがデザインで協力できるようになります。 これにより、結束力が高まり、フィードバック サイクルが短縮されます。

Figma の大きな利点の 1 つは、プラットフォームに依存しないことです。 ブラウザ専用ツールであるため、インストールや特定のハードウェアは必要なく、非常にアクセスしやすくなっています。 さらに言えば、Windows と macOS の両方と互換性があり、両方の専用アプリを見つけることができます。

コメント機能やライブ共有オプションなど、Figma はコラボレーションに重点を置いているため、チームのコミュニケーションとプロジェクト管理が容易になります。 ここで説明するように、Figma と WordPress などのツールとの統合は、特にワークフローにメリットをもたらします。 その結果、設計から開発へのスムーズな移行が保証され、さらに大きな価値が生まれます。

Figma で WordPress 向けにデザインする

最終的な WordPress 移行に向けて Figma でデザインする場合、コンテンツ管理システム (CMS) の独自の機能と制約に対応するようにアプローチを調整することが重要です。 主に考慮すべき点は、WordPress テーマとの互換性です。

標準レイアウト、ヘッダーとフッターの設定、WordPress テーマに一般的なその他の動的領域を理解する必要があります。 これにより、大規模なカスタム コーディングを行わずに Figma を WordPress に確実に転送できるようになります。

WordPress ダッシュボードから WordPress テーマをカスタマイズします。

さらに言えば、ナビゲーション メニュー、コメント セクション、ブログ投稿の形式、および WordPress に固有のその他の独自の機能も、デザイン プロセスの一部を形成する必要があります。 Figma モックアップはこれらの要素を表現する必要があり、これにより視覚化とさらなる開発プロセスがより実りあるものになります。

もちろん、WordPress プラグインもデザインに影響を与えます。 これらのプラグインによって導入される可能性のある視覚的および機能的側面を考慮することが重要です。 たとえば、お問い合わせフォーム、SEO ツール、電子商取引機能はすべて、Figma のデザインに適切に統合される必要があります。

WordPress のインストール済みプラグイン画面。

最後に、WordPress サイトは多くの場合、ユーザーが調整やカスタマイズを行って公開後に進化します。 将来の変更で完全な設計の見直しが必要になることはないため、これは明らかに Figma 設計の要素となるはずです。

WordPress による Figma のサポート

Figma は WordPress からの公式サポートはありませんが、Make WordPress Web サイト内に優れたドキュメントがいくつかあるツールです。 特に、Figma の WordPress デザイン ライブラリを活用するとよいでしょう。

Figma 用の WordPress デザイン ライブラリ。

これは本質的に、WordPress のコンポーネントと要素の完全なライブラリであり、Figma 内でアクセスできます。 Make WordPress の Web サイトには、これを独自のデザインに使用する方法が詳しく記載されており、Figma から WordPress への変換を行う場合には必読の内容であると考えられます。

Figma を WordPress にエクスポートする方法の選択

実際の Figma から WordPress への移行プロセスに関しては、いくつかの方法があります。 最も一般的な方法の概要は次のとおりです。

  1. HTML転送。 この方法では、Figma デザインを HTML および CSS コードに変換し、それを WordPress テーマに統合します。 これは「高忠実度」オプションであり、カスタム テーマに最適です。 (もちろん) コーディングに関する十分な知識、時間、リソースが必要です。 Figma のデザイン プロセスと WordPress 内での複製の両方において、ここでは精度が重要です。
  2. Figma から WordPress へのプラグイン。 プラグインは処理が速く、必要な技術的知識や精度が低いため、最良のアプローチのように思えます。 ただし、プラグインによっては、デザインのニュアンスをすべて捉えられない場合があります。 作業のほとんどには、Figma のデザインがプラグインの要件に準拠していることを確認し、その後プラグインを使用して変換プロセスを自動化することが含まれます。
  3. WordPress ページビルダーの使用。 Elementor または Beaver Builder は、WordPress 内で Figma のデザインを再作成するのにも役立ちます。 この方法では、他の 2 つのオプション間のバランスが取れます。 ワークフローには、ページ ビルダーの制限を念頭に置いて Figma でデザインし、次にビルダーのインターフェイスを使用して WordPress でデザインを再構築することが含まれます。

各方法は、技術的な要求、WordPress サイトの制御、効率の面で異なります。 選択は主に、特定のニーズ、技術的熟練度、設計の複雑さに依存します。 Figma から WordPress へのスムーズな移行には、適切なアプローチを選択することが重要であり、最終的な Web サイトが最初のデザイン ビジョンと厳密に一致していることを確認します。

オプションの選択は独自のプロジェクトに固有のものであるため、ここでは詳細には説明しません。 代わりに、デザインのエクスポート、WordPress の準備、インポート プロセスといった「単調な作業」の多くについて説明します。

Figma からアセットをエクスポートする方法

Figma を WordPress にインポートするために使用するほとんどの方法では、前者からメディア アセットをエクスポートする必要があります。 最も慎重な方法は、左側のサイドバーで要素を選択することです。これを見つけるには時間がかかる場合があります。

Figma のメインキャンバス。

そこから、右側のサイドバーのダイアログからエクスポートできます。

Figma の [エクスポート] ダイアログの拡大図。

一度に複数のアセットを選択する機能はありますが、これには通常よりも時間がかかる可能性があります。 Figma 内で「スライス」を作成することを検討することもできますが、これは Figma から WordPress への変換には適していません。 これは、簡単な「スクリーン キャプチャ」画像を作成するためのものです。

アセットをエクスポートするより良い方法は、Figma ツールバーから[ファイル] → [エクスポート]ダイアログを使用することです。

Figma 内の [ファイル] → [エクスポート] オプション。

これにより、複数のアセットを一度に選択し、任意の場所にエクスポートできます。 ただし、これで輸出プロセスが終了しない場合があります。 私たちの意見では、資産を輸出する準備にもある程度の時間をかける必要があります。 次にこれを簡単に見てみましょう。

エクスポート用のアセットの準備に関するヒント

必須の手順ではありませんが、アセットが WordPress の標準に準拠していることを確認することは良いことです。 独自のアセットをエクスポートする際に考慮すべき要素の概要を以下に示します。

  • 画像の最適化は、現段階でも依然として重要な要素です。 その後、実際の WordPress Web サイトを作成したら、Optimole などのツールを使用できます。 ただし、現時点では、TinyPNG などのソリューションを使用することをお勧めします。 専用の Figma プラグインも利用可能です。
  • プラグインについて言えば、DesignLint などのツールを通じてアセットを実行すると、エクスポートによって浮き彫りになる問題を検出するのに役立ちます。 エクスポート プロセスの特定の部分を自動化することもできます。
  • Figma のコンポーネントとスタイル ライブラリを使用することは、いずれにしても推奨される一般的な方法です。 ここで、Figma WordPress デザイン ライブラリが非常に役立ちます。

また、インポート プロセスが容易になるため、アセットに一貫した命名規則を使用することをお勧めします。 また、WordPress Web サイト内でこれらのアセットの位置を変更するときにも役立ちます。 これにより、プロセスの次の部分である設計転送の準備に進みます。

Figma から WordPress への移行の準備

ここで何をすべきかはおそらくご存知のはずなので、このセクションでは詳しく説明する必要はありません。 ただし、そうでない場合は、WPShout ブログに空白を埋めるのに役立つ記事がたくさんあります。 簡単に言うと、ここで実行する手順は次の 3 つです。

  1. ローカルの WordPress 開発環境をセットアップするか、WordPress Playground などを使用します。
  2. あなた（クライアント）のニーズに基づいてテーマを選択してください。 もちろん、必要に応じてカスタム テーマを作成することもできますが、これはこの記事に含まれる後の手順を最初に実行するかどうかによって異なります。
  3. この段階で、いくつかの重要なプラグインもインストールして構成する必要があります。 これは、フォーム、検索エンジン最適化 (SEO)、セキュリティなどの実装に役立つプラグインを備えた開発固有のツールである可能性があります。

最終的には、この時点で、少なくともローカルでは、最低限の WordPress Web サイトが稼働しているはずです。 大きなステップはサイトとデータベースを設定することなので、ここであまり多くの調整を行う必要はありません。 これを準備したら、デザインを Figma から WordPress に転送します。

Figma から WordPress にデザインを統合する方法

ここでのプロセスは、Figma を WordPress にエクスポートするために使用する方法によって異なります。 手動アプローチでは、Figma から HTML への完全な変換が必要になります。 また、明らかにコードを深く理解する必要があるため、WordPress 開発についての完全な理解も必要になります。

ただし、ページ ビルダーやブロック エディターといくつかの追加ブロックを使用するアプローチは、完全に手動でコーディングするアプローチよりも時間を節約できる可能性があります。 これにより、WordPress を有名にした柔軟性とデザイン オプションが得られるだけでなく、Figma デザインを問題なく実装できるようになります。

このプロセスには、いくつかの異なる手順が含まれます。

  1. メディア ライブラリを使用して、デザイン アセットを Figma から WordPress にインポートする必要があります。 画像やビデオには必ず適切なタイトル、キャプション、代替テキストを使用してください。
  2. ページ ビルダーには、Figma デザインを再作成するのに十分な柔軟性が必要です。 さらに CSS または JavaScript を追加するオプションも使用することになるでしょう。
  3. ページ ビルダーはカスタム テンプレート機能も提供する必要があります。 これにより、Figma デザインの動的な側面を適切な方法で組み込むことができます。 Elementor はこれを提供するページビルダーです。

ただし、プラグインは Figma を WordPress に変換する最も速い方法です。 これがデザインを CMS に転送するための適応可能な方法であることを考慮して、オプションについて少し説明してみましょう。

プラグインを使用して Figma を WordPress に変換する

Figma と WordPress は両方ともそれぞれの分野で主要なソリューションであるため、この 2 つを接続するサードパーティのプラグインが多数あります。 これはおそらく Figma のデザインを変換する最良の方法だと思いますが、出力の精度をあなたのビジョンに近づけるためには多少の作業が必要になる可能性があります。

よたこプラグイン

たとえば、Yotako の Figma to WordPress プラグインは Figma 内にインストールするもので、ワークフローは簡単です。 Figma 内で WordPress にエクスポートするページを選択し、エクスポートするデザイン要素をプラグインに指示します。

Figma内のYotakoアプリ。

そこから、ページごとに複数の解像度を使用してデザインを WordPress に転送できます。 Yotako は無料ですが、月額 39 ドルから始まるプレミアム プランもあります。

フィグネルプラグイン

Fignel も Yotako に似たプラグインです。 そのセールストークでは、Figma から WordPress への移行が「1 分」で完了することが語られています。 これは人工知能 (AI) を使用して、Figma デザインを汎用の WordPress テンプレートまたは Elementor デザインに変換します。

Fignel Figma から WordPress へのコンバーター。

Figma リンクを指定して、変換するページを指定します。

フィネルダッシュボード。

Fignel 内でホスティングを完了したサイト全体を作成するか、WordPress テーマをダウンロードするかを選択できます。

Figma を WordPress に変換する Fignel。

ただし、これでは完全な WordPress テーマが得られるわけではありません。 代わりに、対応するページのファイルがあり、そこから WordPress 固有のコア ファイルを追加する必要があります。

WordPress テーマへの変換後に Fignel が提供するファイル。

このオプションはすぐに使えて無料なので気に入っています。 私のテストでは、Fignel からすぐに良い結果が得られました。Figma から WordPress への変換に含まれる退屈な作業の一部を実行するのに役立つかもしれません。

トップへ戻る

結論🧐

UX/UI デザインへの素晴らしいアプローチのおかげで、多くの Web サイト デザインが Figma で始まることになります。 そこから WordPress に取り込むのが、ワークフローのもう 1 つの一般的なステップです。 一言で言えば、後者の Figma to WordPress プラグインは、ここではおそらく必須のコンポーネントになるでしょう。 ただし、適切な準備を行っていれば、どの方法を選択しても実装は簡単です。 これは、Figma と WordPress の両方の柔軟性の証拠です。

💡 ところで、WordPress ウェブサイトを立ち上げてすべてを終えたところで、ウェブサイトのパフォーマンスを向上させ、読み込みを速くする方法を知りたいと思うかもしれません。 これについてはガイドをご覧ください。

Figma から WordPress へのデザインの転送についてご質問がありますか? 以下のコメントセクションで質問してください。