UiChemy

美しいFigmaのデザインを、WordPressで動くサイトにするのに苦労していませんか？

Figmaのデザインに命を吹き込むのは、本当に頭の痛い問題です。実際、読者からは、このハードルを克服する方法について、よくアドバイスを求められます（最近、独自のWordPressデザイン・サービスを開始したほどです）。

だからこそ、UiChemyに注目したのです。このプラグインは、FigmaのデザインをWordPressのレイアウトに変換してくれます。WordPressのブロックエディターで作成した通常のページと同じように、レイアウトを編集して公開することができます。

ページビルダーを使いたいですか？UiChemyは、Figmaのデザインを、数クリックでElementorやBricks Builderのテンプレートに変換することもできます。

UiChemyは、あなたが探していた時間節約ツールでしょうか？この詳細なUiChemyレビューで確かめてみましょう。

UiChemyレビュー：なぜWordPressでUiChemyを使うのか？

UiChemyは、Figmaのデザインを生きたWordPressサイトに変換することで、時間を節約し、ウェブデザインプロセスを合理化することをお約束します。

他のFigmaプラグインとは異なり、これはFigmaからHTMLへのコード変換ではないので、デザインにHTMLコードを追加することはありません。

その代わりに、Figma、ブロックエディター、またはお好みのページビルダーと直接統合します。これで、FigmaファイルをWordPressサイトに直接プッシュできます。最後に、Elementor、Bricks Builder、またはWordPressビルトインのブロックエディターを使ってデザインを微調整できます。

ご覧のように、UiChemyはこれらすべてのプラットフォームとシームレスに動作するため、デザインを変換するためにコードを書いたりWordPress開発者を雇ったりする必要はありません。

まだ始めたばかりであったり、予算に限りがある場合は、無料のUiChemyプラグインを使って、月に10個までのFigmaデザインをエクスポートすることができます。

このプラグインには、WordPressで完璧に動作するように設計された10種類のFigmaスターターテンプレートも付属しています。また、UiChemyのレスポンシブ・マネージャーのライト版など、モバイルフレンドリーなサイトを作成するのに欠かせないツールも付属しています。

月に10以上のデザインをエクスポートしたい場合は、アップグレードが必要です。プレミアムUiChemyプランには、追加のテンプレート、高度なタグ付け、レスポンシブマネージャーのより高度なバージョンも含まれています。

UiChemyレビュー：FigmaからWordPressへのコンバーター？

想像してみてください。あなたは、Figmaで数え切れないほどの時間をかけて、素晴らしいデザインを作り上げました。細部に至るまで満足していますが、今度は、そのビジョンをWordPressブログとして機能させる番です。

UiChemyは、デザインと開発者の間のこのギャップを埋めることを目指しています。完成したサイトがあなたのオリジナルデザインを完璧に反映していることを確認しながら、時間の節約をお約束します。

UiChemyはこのような謳い文句を実現しているのだろうか？調べてみよう。

1.使いやすさ

UiChemyは、使いやすさを念頭に置いて設計されています。まずは、他のWordPressプラグインと同じようにインストールして有効化し、画面の指示に従ってWordPressとFigmaアカウントを接続してください。

これで、UiChemyは、Figmaからデザインをフェッチするコネクタとして機能します。実際、UiChemyプラグインを使って、FigmaのデザインをWordPressに直接プッシュすることができます。

また、UiChemyは手動でテンプレートをJSONファイルとしてエクスポートすることもできます。複数のレイアウトを作成した場合、UiChemyはそれらをすべてZIPファイルにまとめてダウンロードし、簡単に整理することもできます。

2.95%の精度でデザインを変換する

WordPressでデザインを手作業で再現するのは大変なことです。元のデザインと完成品に違いがあることはよくあることです。

対照的に、UiChemyは90％から95％の精度であなたのデザインを変換することを約束します。ただ、最高の結果を得るためには、柔軟でモバイルフレンドリーなデザインを作るなど、いくつかのデザインのベストプラクティスに従う必要があることに注意してください。

3.柔軟なインポートと表示設定

UiChemyがあなたのサイトにどのようにデザインをインポートするか、正確にコントロールすることができます。

インストールしたWordPressプラグインやエクステンションに応じて、デザインを新しいWordPressページ、新しいElementorテンプレート、または新しいNexterWPテンプレートとしてインポートすることができます。

また、既存のテンプレートやページを、インポートしたデザインで置き換えたり、更新することもできます。最後に、既存のページやテンプレートに、Figmaのデザインを追加することができます。

こうすることで、サイトやブログ、オンラインストアでのデザインの使い方を正確にコントロールすることができます。

4.Elementorとの統合

UiChemyはElementorの無料版とプロ版の両方に統合されています。ただし、お問い合わせフォームのようなElementorのプロウィジェットを使用する場合は、UiChemyのプレミアムプランを購入する必要があります。

すでに述べたように、UiChemyはFigmaからHTMLへのコード変換ツールではありません。HTMLコードを追加する代わりに、Elementorのウィジェットセットを使ってFigmaのデザインを変換します。

UiChemyは、30以上のElementorウィジェットに加え、Plus Addons for Elementorが提供する30以上のウィジェットをサポートしています。このため、FigmaのデザインをElementor互換のテンプレートに変換するのに問題はないでしょう。

5.Elementorウィジェットタギング

デザインをElementorにエクスポートすると、UiChemyはそれらのデザイン要素を見出し、画像、アイコンなどの一般的なウィジェットに変換します。

しかし、UiChemyは、より幅広いElementorウィジェットをサポートしています。このことを念頭に置いて、特定のFigmaデザイン要素を特定のElementorウィジェットに手動で割り当てることができます。このプロセスは、手動タグ付けとして知られています。

このように、UiChemyがあなたのデザインをElementorのウィジェットやレイアウトに変換する方法を正確にコントロールすることができます。

6.モバイルフレンドリーデザイン

Figmaでレスポンシブ・サイトを作成する場合、絶対位置ではなく、自動レイアウトを使用することが重要です。

UiChemyには、オートレイアウトを使用していないフレームを検出するフレーム最適化ツールがあります。数回クリックするだけで、オートレイアウトを適用することができます。

7.レスポンシブ・マネージャーと計算機

デザインをエクスポートする際、UiChemyのレスポンシブマネージャーでモバイル端末用にレイアウトを最適化することができます。ここで、タブレットやスマートフォンで使用したい値を入力することができます。

最良の結果を得るためには、各モバイルの値をデスクトップの合計値に対するパーセンテージでプロバイダーする必要があります。これは混乱しやすいので、UiChemyはレスポンシブ計算機も提供しています。

10ピクセルなど、モバイル端末で使用したい値を入力するだけです。UiChemyはこれをパーセントで計算します。

これで、レスポンシブマネージャーにパーセンテージを追加するだけです。こうすることで、自分で計算しなくても、スマートフォンやタブレットでレイアウトが正しく表示されることを確信できます。

8.絶対レイアウトに対応

UiChemyはオートレイアウトの使用を推奨していますが、アブソリュートレイアウトもサポートしています。

絶対オブジェクトを含むレイアウトをエクスポートすると、UiChemyはCSS絶対位置を使用して、インポートされたレイアウト内でそれらのオブジェクトがまったく同じ位置にあることを保証します。

9.ライブ・インポート

Figmaのデザインは、ライブ・プレビューとしてエクスポートできます。これは、手動でデザイン・ファイルをダウンロードしてアップロードするのに比べて、膨大な時間と労力を節約することができます。これは、たくさんの異なるデザインを試したい場合に特に当てはまります。

WordPressサイトの異なるページ用のレイアウトなど、複数のレイアウトを同じファイルに追加することもできます。UiChemyは、これらのレイアウトをすべて含む個別プレビューを作成し、ワンクリックで切り替えることができます。

10.最適化コンパニオン

UiChemyには、インポートしたデザインの精度と品質を向上させるのに役立つ最適化コンパニオンがビルトインされています。

このツールは、デザインに問題があれば自動的に検出します。

そして、これらの問題を4つのタブにグループ化します：メディア最適化、フレーム最適化フェーズ、テキスト最適化、メインフレーム最適化。たとえば、複数の要素を使用してベクター画像を作成した場合、UiChemyはこれを潜在的な問題としてフラグを立て、グループをロックして個別画像としてエクスポートするよう提案します。

多くの場合、UiChemyの「Fix」または「Fix All」ボタンをクリックするだけで、これらの問題に対処できます。UiChemyが問題を解決してくれます。

11.メインフレームの最適化

UiChemyは、通常エクスポートされたテンプレートでは無視されるプロパティのために、デザインのメインフレームをスキャンすることができます。これにはgap、horizontal padding、vertical padding、alignmentが含まれます。

通常、これらのプロパティは無視されますが、エクスポートされたファイルにこれらのプロパティが含まれていると、時に予測できない結果をもたらすことがあります。とはいえ、UiChemyのメインフレーム最適化ツールは、数回クリックするだけで、これらのプロパティを特定し、削除することができます。

12.SVGの自動検出と結合

初期設定では、FigmaはSVG画像やアイコンを区切ります。しかし、これはWordPressにそのデザインをインポートするときに問題を引き起こす可能性があります。

この問題を解決するために、UiChemyはSVGとその要素を自動的に検出し、個別SVGファイルとしてエクスポートすることができます。

また、要素をウィジェットにタグ付けしたり、UiChemyのロック機能を使って複数の要素を個別画像にまとめることもできます。これにより、UiChemyがデザインのSVGファイルをどのように扱うかをよりコントロールできるようになります。

13.オブジェクトのロック

初期設定では、UiChemyはすべてのデザイン要素を個別の要素としてエクスポートします。しかし、複数の要素を使用して個別オブジェクトを作成することもあります。例えば、バナー画像、コールトゥアクションボタン、テキストを使ってヘッダーを作成することができます。

その場合、UiChemyはこれらの要素をまとめてロックし、個別画像としてエクスポートすることができます。多くの場合、エクスポートする個々の要素が少なくなるため、エクスポートされるファイルのサイズが小さくなります。その結果、サイト、ブログ、オンラインマーケットプレイスのメンテナンスが簡単になります。

14.インポートのスピードアップ

初期設定では、UiChemyはFigmaデザインから直接画像をインポートします。このため、デザインに画像がたくさんあったり、それらのグラフィックを最適化していなかったりすると、インポートが遅くなることがあります。そのため、Figma に画像を追加する前に、画像を最適化することが重要です。

そうでなければ、UiChemyは、画像なしでFigmaレイアウトをインポートすることができます。これは、元のデザイナーがベスト・プラクティスに従わなかった場合には、良い設定かもしれません。また、Figmaのデザインにプレースホルダー画像があり、それをいずれ交換する予定がある場合にも、良い設定です。

もう1つの設定は、スケーリングされた画像でデザインをエクスポートすることです。使用したいスケール値を入力するだけで、UiChemyはリサイズされたグラフィックでレイアウトをエクスポートします。

15.ビルトインテンプレートライブラリ

美しいレイアウトを素早く作成するために、UiChemcyには、デザイン済みのFigmaテンプレート・コレクションが付属しています。

これらのテンプレートはすべてWordPress用に最適化されているので、完成したデザインをブロックエディターやElementor、Bricks Builderに簡単にインポートすることができます。例えば、UiChemyのテンプレート内のすべてのコンポーネントは、関連するウィジェットにあらかじめタグ付けされているので、手動でタグ付けする必要はありません。

UiChemyには3つのテンプレートタイプがあります：ページ、セクション、コンポーネントです。はじめに、ページテンプレートはUiChemyのデザインガイドラインにすべて従った新しいトップレベルページを作成します。

セクションテンプレートもあり、ページテンプレートの中で使用することができます。最後に、UiChemyのComponentテンプレートは個々の要素を提供するので、現在の編集レイヤーに追加するのに最適です。

16.地域社会と専門家の支援

UiChemyは、FigmaのデザインをWordPressのプレビュー、ページ、サイトに自動的に変換し、時間と労力を大幅に節約することをお約束します。しかし、その過程で、コンバージョンの高いページや素晴らしいサイトを作るために、特別な助けが必要になるかもしれません。

まず始めに、UiChemyには24時間いつでもアクセスできるオンラインドキュメンテーションがあります。ここでは、プラグインのセットアップと使用方法に関するステップバイステップのガイドと、役立つトラブルシューティングガイドを見つけることができます。

さらに、UiChemyチームは、動画チュートリアル、ウェビナー、Figmaアカウントにインポートできる教育コミュニティ・ファイルを作成しました。このファイルには、デザイン・ガイドライン、テンプレート、Figmaデザインでの手動タグの使用例が含まれています。

一対一のサポートをご希望ですか？それなら、プレミアムプランにアップグレードして、ライブチャットまたはヘルプデスクでサポートを受けることができます。UiChemyのサイトによると、通常、週末を除いて24時間以内に返信があります。

無料のプラグインを使用している場合は、WordPress.orgのUiChemyフォーラムに投稿し、基本的な質問に対する回答を得ることができます。

公共のサポートフォーラムに投稿する場合は、専門家があなたの問題を完全に理解し、役立つレスポンスを投稿できるように、できるだけ多くの情報を含めることを常にお勧めします。このトピックの詳細については、WordPress サポートの適切な依頼方法に関するガイドをご覧ください。

UiChemyのレビュー：価格とプラン

WordPressを始めたばかりだったり、予算が限られている場合は、WordPress.orgからUiChemyのライトバージョンをダウンロードすることができる。

この無料プラグインを使えば、毎月10個のFigmaデザインをエクスポートできます。ただ、各ページがそのクォータにカウントされることに注意してください。無料プランには、10種類のスターターテンプレートと基本的なサポートもついています。

月に10ページ以上をエクスポートしたり、高度な機能を使用するには、アップグレードが必要です。

選べるプランは2つ：

• プロ 月額19ドルで、最大100のデザインをエクスポートできます。また、あなたのデザインに使える50以上のプロフェッショナルなテンプレートも手に入ります。
• すべてアクセス。 オール・アクセス・プラン(49ドル)に投資すると、1ヶ月に500個までデザインをエクスポートできます。また、最大5人の他のFigmaユーザーとUiChemyを共有することができます。つまり、このプランは、多くのデザインを作成し、より高度な機能にアクセスする必要があるチームやWordPress開発者に最適です。

どのプランを購入しても、UiChemyのライセンスが失効しても、エクスポートしたデザインはそのまま残ります。

UiChemyレビュー：FigmaからWordPressへのコンバーター？

このUiChemyのレビューをまとめると、FigmaからWordPressへのワークフローを効率化する素晴らしいプラグインだと確信しています。

UiChemyは、デザインを機能的なWordPressレイアウトに変換したいデザイナーやサイトオーナーのための簡単なソリューションです。ブロックエディターと互換性がありますが、ElementorやBricks Builderともシームレスに統合できます。つまり、インポートしたデザインをお好みのWordPressページビルダーで編集・管理することができます。

少数のFigmaデザインだけをエクスポートしたいのであれば、無料プランから始めるのが良いでしょう。しかし、サイト全体をデザインしたい場合や、複数の異なるサイトを運営したい場合は、通常プレミアムプランが必要になります。

このUiChemyのレビューが、あなたにとって適切なFigma-WordPressコンバーターかどうかを判断する一助となれば幸いです。次に、WordPress のスピードとパフォーマンスを向上させる方法についてのガイドをご覧になるか、専門家が選んだ最高のお問い合わせフォームプラグインをご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.