Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

FigmaをWordPressに変換する方法(初心者ガイド)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

FigmaのデザインをWordPressのテーマやページに変換する方法をお探しですか?

Figmaは、サイトの魅力的なユーザーインターフェースを作成できる、クラウドベースのデザインツールです。プロトタイピングを通じてアイデアを素早くテストでき、リアルタイムのコラボレーションもサポートします。これらのデザインをWordPressに変換することで、ユーザーにとってより視覚的に魅力的なサイトにすることができます。

この投稿では、FigmaをWordPressに簡単に変換する方法を順を追って紹介します。

Convert Figma to WordPress

なぜFigmaをWordPressに変換するのか?

Figmaを使えば、サイト用の美しいレイアウトを作成でき、アニメーション・エフェクト、プロトタイピング、ベクター編集など、素晴らしいツールが用意されています。

WordPressサイトをお持ちの場合、このツールを使ってサイトのレイアウトを作成すれば、複数のデザイナーや開発者が、同じFigmaファイルで作業することができます。これにより、共同作業が向上し、メールのやり取りを減らすことができます。

さらに、ブログのインタラクティブなモックアップを作成してユーザーフローをテストし、サイトの開発前にフィードバックを得ることができます。

また、グリッド、ガイド、レイヤー、自動レイアウトなど、Figmaの高度なツールを使って、視覚的に魅力的なページやテンプレートを作成することもできます:

  • ランディングページ
  • ホームページ、ブログページ、商品ページ
  • テーマ全体
  • モバイルサイトのレイアウト
  • ダッシュボードとユーザーインターフェース
  • メールテンプレートとニュースレター

ただし、Figmaは初期設定ではWordPressと統合されていないので、変換ツールを使う必要があることを覚えておいてください。とはいえ、Figmaのデザインを簡単に作成し、WordPressに変換する方法を順を追って見ていきましょう:

ステップ1:Figmaアカウントを作成する

Figmaでページをデザインするには、まずサイトにアカウントを作成する必要があります。

そのためには、Figmaのサイトにアクセスし、画面右上の「無料で始める」ボタンをクリックします。

Click Get started for free button on Figma

新しいタブが開きますので、そこでメールアドレスとパスワードを入力してください。

その後、「アカウント作成」ボタンをクリックする。

Create an account on Figma

そうすると、認証メールが送信されます。

受信トレイからこのメールを開き、「Verify email」ボタンをクリックするだけです。

Click Verify Email button to verify your email account for Figma

Figmaのサイトに移動し、名前を尋ねられます。

その後、ツールの使用方法についていくつかの詳細をプロバイダーに伝え、一番下にある「Continue(続行)」ボタンをクリックする。

その後、料金プランの選択を求められます。無料の「スターター」プランを選択し、「続ける」ボタンをクリックします。

Select Figma free plan

ステップ2: Figmaでページをデザインする

Figmaのダッシュボードが表示されます。

そこに着いたら、右上にある’デザイン・ファイル’ボタンをクリックして、Figmaのページを作成します。

Click Design File button on the Figma dashboard

Figmaビルダーが画面に表示されます。ここで、上から「Frame」オプションを選択する必要があります。

すると、右カラムにデザインフレームのリストが表示されるので、「デスクトップ」オプションを選択してください。これは、FigmaをWordPressに変換するために使用するプラグインが、現在のところデスクトップ・キャンバスにしか対応していないためです。

Choose desktop as Figma frame

次に、上部の四角いアイコンをクリックし、「画像/動画を配置」オプションを選択することで、キャンバスに画像を追加することができます。

コンピューターのフォルダーが開きますので、お好きな画像や動画をアップロードしてください。

Add an image or video to the Figma page

画面上部の「T」アイコンをクリックして、ページにテキストを追加することもできます。

そうしたら、右カラムの設定からテキストサイズ、アライメント、フォント、スペーシングを調整できる。

Add text in Figma

また、上から「ペン」や「鉛筆」のような自由なスタイルツールを使ったり、フィードバックの質問を追加したり、レイヤーやページを増やしたり、背景色を変更したり、他にもいろいろできます。

もしあなたが開発者で、ページにCSSコードを追加したいのであれば、画面右上のトグルを使って「Dev Mode」に切り替えることでもできる。

Customize your Figma page

ステップ3: FigmaページのAPIキーをコピーする。

Figmaページのカスタマイザーに満足したら、APIキーを取得しましょう。このキーを取得することで、プラグインがFigmaページをWordPressに埋め込むことができるようになります。

これを行うには、画面左上の ‘Figma’ アイコンをクリックします。メニューが表示されますので、”Help and account ” Account Settings“オプションを選択してください。

Open the account settings prompt

画面に新しいプロンプトが表示されます。

ここから「パーソナル・アクセストークン」セクションまでスクロールダウンし、「ジェネレート・ニュー・トークン」リンクをクリックします。

Click the Generate New Token link

トークンの名前と有効期限を入力してください。Figmaのページが特定の期間後にあなたのサイトから消えてしまうのを避けたい場合は、トークンに「有効期限なし」オプションを選択することをお勧めします。

その後、ファイル・コンテンツ以外のスコープをすべて「Write」に設定し、「Generate token」ボタンをクリックする。

Add an access token name and expiration date according to your liking

個人アクセストークン」セクションに戻ります。

ここから、新しく生成されたトークンをコピー&ペーストして、メモ帳やその他のプレーンテキストエディターに貼り付けることができます。

Copy the access token

ステップ4:FigmaをWordPressに変換する

APIキーを取得したら、いよいよFigmaページをWordPressに変換します。

そのためには、Animation and Design Converter for Gutenberg Blockプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、Figmaページを追加したいページか投稿を開いてください。画面上部の「Figmaからインポート」ボタンをクリックします。

プロンプトが表示されますので、先ほどコピーした Figma ページのアクセストークンをペーストしてください。

Click Import from Figma button

その後、FigmaページのURLを’FIGMA FILE URL’フィールドに追加します。

この URL を取得するには、Figma ファイルを開き、ブラウザー・タブにあるリンクをコピーしてください。URLをコピーする前に、デスクトップ・フレームが選択されていなければならないことに注意してください。

Copy the Figma page URL

WordPressにリンクを貼り付けたら、「Start Import」ボタンをクリックします。

プラグインは、Figmaページをグループブロックに変換します。ブロックの配置、位置、タイポグラフィ、色は、ブロックパネルからカスタマイズできます。

Figma file will now be converted into the Group block

その後、「公開する」または「更新する」ボタンをクリックして、設定を保存します。

変換されたFigmaファイルは、デモサイトでこのように表示されます。

Figma to WordPress conversion preview

代替案シーホーク・メディア・サービスを使ってFigmaをWordPressに変換する

サイト全体をFigmaで作成した場合、プラグインはデスクトップフレームでしか動作しないため、上記の方法は適していません。

さらに、Figmaがデザインのみに焦点を当てるのに対し、WordPressは動的コンテンツと機能のためのコーディングが必須であるため、プラグインは複雑なデザインを正確に転送するのが難しいかもしれません。つまり、Figmaで追加した要素の一部がWordPressで動作しない可能性があるということです。

シーホーク・メディアは、FigmaをWordPressに変換する際に、これらの要素をすべて考慮します。

シーホークメディアは、開発、デザイン、メンテナンス、移行、サポートなど、数多くのサービスを提供するWordPressサービス会社です。

Figmaは、1000を超える企業から信頼を得ており、完全レスポンシブ、クリーンなコーディング、SEO対応、ピクセルパーフェクトなFigmaからWordPressへの変換を行います。

Seahawk Media Figma to WordPress conversion

あなたがしなければならないことは、Figmaファイルをビジネスに送ることだけです。

お客様の必須条件を理解した後、シーホークはおおよそのスケジュールを設定し、わずか数日でお客様のFigmaファイルをWordPressサイトに変換します。

Figma to WordPress conversion steps

また、SEO監査、コンテンツライティングサービス、ホワイトレーベルサービス、サポート、ハッキングされたサイトの修復など、同社のサービスを利用することもできる。

ボーナス:SeedProdを使用して視覚的に魅力的なサイトを構築する

Figmaでページを作り、それをWordPressに変換するのが面倒だと感じるなら、代わりにSeedProdを使えばいい。

ドラッグ&ドロップで簡単にカスタマイザーやランディングページを作成できるWordPressテーマビルダーです。

SeedProd Website and Theme Builder

SeedProdは、ユーザーフレンドリーなドラッグ&ドロップビルダー、300以上のテンプレート、高度なWooCommerceブロック、メールマーケティングサービスとの統合を備えています。

画像、見出し、動画、CTA、オプチンフォーム、景品、段落ブロックをビルダーの左カラムからドラッグ&ドロップして簡単に魅力的なページを作成できます。

それができたら、追加したブロックをクリックするだけで、左カラムの設定が開きます。ここから、ダイナミックテキストを挿入したり、フォントサイズ、配置、色などを変更することができます。

Landing page will be launched on the screen

最後に、上部にある’保存’と’公開’ボタンをクリックして、設定を保存し、変更を有効にします。詳しい手順については、WordPressでランディングページを作成する方法のチュートリアルをご覧ください。

プラグイン全般についての詳細は、SeedProdのレビューをご覧ください。

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

FigmaとWordPressについて、読者からよく寄せられる質問を紹介します。

FigmaとWordPressは連動しますか?

初期設定では、FigmaとWordPressを直接統合することはできません。しかし、UiChemy、pxCode、Animation and Design Converter for Gutenberg Blockのようなツールやプラグインを使って、FigmaのデザインをWordPressに変換することができます。

この方法が複雑すぎる場合は、開発者やシーホーク・メディアのような専門会社に依頼すればよい。

FigmaをWordPressに変換するには、コーディングの知識が必要ですか?

FigmaのデザインをWordPressに変換するには、コーディングの知識がなくても、プラグインや開発者を雇えば簡単にできます。

しかし、プラグインを使わずに自分でサイトを作成する場合は、HTML、CSS、そして場合によってはPHPの知識が必要です。なぜなら、Figmaのデザイン要素の一部は、WordPressで機能をプロバイダーするためにコーディングする必要があるからです。

詳しくは、サイトのコーディング方法をご覧ください。

FigmaからWordPressへのコンバージョンはSEO(検索エンジン最適化)に影響しますか?

FigmaのデザインをWordPressに変換しても、コンテンツやバックリンクに影響はありません。しかし、Figmaのデザインは、サイトの構造、ページ速度、画像に悪影響を及ぼす可能性があります。

FigmaからWordPressへの変換をシーホークメディアに依頼することをお勧めする理由は、シーホークメディアが、変換後のサイトが完全にレスポンシブで、きれいにコーディングされ、SEO対策が施されていることを確認してくれるからです。

この投稿が、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

4件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Prajwal Shewatkar says

    This saved me a tonne of manual work. Thanks for the amazing post WPbeginner. But I belive this is not an official plugin by figma, is it?

    • WPBeginner Support says

      Correct, the plugin is not handled by Figma at the moment but not all plugins need to be ran by the original tool. :)

      管理者

  3. Arafath Ahmed says

    Thanks for providing the alternative option that is Seahawk, I was looking to find a way to convert some designs/ideas I made on Figma onto WordPress. I thought it would’ve been a lot of hassle to deal with this otherwise!

    Once again,
    Many Thanks

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。