2026年9月7日

WordPressのFigmaを埋め込む方法

メディア・画像

はじめに

ウェブ開発において、設計図やユーザーインターフェースのプロトタイプは非常に重要です。Figmaはそのようなツールとして広く使われており、デザイナーや開発者が共同で作業を行うのに最適なプラットフォームとなっています。WordPressサイトに直接Figmaプロジェクトを埋め込むことで、クライアントやチームメンバーとリアルタイムで設計情報を共有することが可能になります。

症状・背景

このテーマが必要になる主な場面:

クライアント向けのウェブページにUIデザインを表示したい
チーム内でFigmaファイルを直接リンクする代わりに、WordPressサイト上で共有したい
WordPressプラグインや高度なカスタマイズなしで、Figmaのインタラクティブな要素を埋め込む必要がある

手順・設定方法

ステップ1: Figmaプロジェクトの共有リンク取得

# Figmaプロジェクトを開き、「共有」タブを選択します。
# 「共有リンク」セクションで「編集権限なし」または「表示のみ」をクリックし、リンクをコピーします。

ステップ2: WordPressページに埋め込むコード追加

# WordPressの管理画面から、「ページエディタ」を開きます。
# 「テキスト」モードで以下のようなHTMLタグを挿入します。ただし、実際のリンクはステップ1で取得したものを使用してください。

<iframe src="https://www.figma.com/embed?embed_host=figma&url=https%3A%2F%2Fwww.figma.com%2Ffile%3Fid%3D{{PROJECT_ID}}" width="100%" height="500" allowfullscreen></iframe>

# {{PROJECT_ID}}をあなたのプロジェクトIDに置き換えてください。

ステップ3: カスタムCSSの追加（オプション）

# Figma埋め込みの見た目をカスタマイズする場合、カスタムCSSが必要です。以下は例です。

<style>
.iframe-container {
    width: 100%;
    height: auto;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

# このCSSを使用して、埋め込みの高さを動的に調整することができます。

ステップ4: 埋め込んだFigmaプロジェクトのテストと確認

# 完成したページを「プレビュー」モードで開き、Figmaが正しく表示されることを確認します。

# すべて問題ないことを確認したら、「公開」ボタンをクリックして変更を保存します。

注意事項

<実践的な注意点1>: Figmaの共有リンクは定期的に更新される可能性があります。そのため、最新のリンクを使用することを忘れないでください。
<実践的な注意点2>: 埋め込むFigmaプロジェクトは公開設定になっていることを確認してください。それ以外の場合、公開できない場合があります。
<セキュリティ上の注意>: 公開する前に、埋め込んだFigmaプロジェクトが適切な権限で設定されていることを再度確認します。
<パフォーマンス/運用上の注意>: 埋め込みページの読み込み時間を短縮するために、CSSとJavaScriptを最適化することを検討してください。

まとめ

1. <キー1>: Figmaプロジェクトが正しく公開されていることを確認します。

2. <キー2>: WordPressのページエディタで埋め込むHTMLコードを挿入します。

3. <キー3>: 必要に応じてカスタムCSSを使用して、埋め込みの見た目を調整します。

4. <キー4>: ページが正しく表示されることを確認し、公開する準備が整ったら更新を行います。

5. <キー5>: Figmaプロジェクトを直接WordPressページに埋め込むことで、よりインタラクティブな共有とコラボレーションを可能にします。

Post Views: 1