MarkupGenでFigmaからHTML5バナーを作成：デザイン、変換、Studio Editorで編集

バナーは、コードとして完成するよりずっと前にFigma上では完成して見えます。見出し、商品画像、ボタンをHTMLとCSSで組み直す作業が残っており、コピーが変わったり、ボタンを8px動かしたり、サイズを3つ追加したりするたびにやり直しになります。時間の大半は最初の実装ではなく、細かな修正に費やされます。

MarkupGenはこの両方を短縮します。FigmaのフレームをHTMLとCSSに変換し、その後はStudio Editorで結果を視覚的に調整し続けられるため、小さな変更のたびにFigmaへ戻る必要がありません。この記事ではFigma to HTML5 bannerのワークフロー全体を紹介し、ツールができること・できないことを具体的に説明します。

Figmaデザイン → MarkupGenプラグイン → HTML/CSS生成 → Studio Editor → 確認 → エクスポート

FigmaデザインをHTML5バナーに変換する

ワークフローはMarkupGenのFigmaプラグインから始まります。バナーのフレームを選択して送信すると、フレームの構造、テキスト、画像がプロジェクトとしてMarkupGenのワークスペースに届き、そこでコードを生成します。

バナーも他のフレームと同じ方法で変換されるため、バナーによくある要素はそのまま引き継がれます。

• 見出しとプロモーション文は、1枚の画像に統合されず、実際のテキストとして残ります。
• 商品画像と背景画像はプロジェクトと一緒に書き出されます。
• CTAボタンは塗り、角丸、ラベルを保ちます。
• シェイプ、レイヤー、タイポグラフィ、余白は、スクリーンショットからの推測ではなくデザインファイルから読み取られます。

得られるのは、多くの場合デザインに近い出発点であり、ピクセル単位での完全一致を保証するものではありません。特殊なエフェクト、Google Fontsにないカスタムフォント、重なりの多いレイヤーは最初に確認したい箇所です。変換の仕組みについてはMarkupGenのFigma→HTML/CSS変換の仕組みをご覧ください。

Studio Editorでバナーを直接編集する

ここがMarkupGenを単なるコードジェネレーター以上のものにしている部分です。生成されたコードがバナーの最終版になることはほとんどありません。注意書きが長くなる、CTAの余白を広げたい、ロゴを大きくしてほしい、といった修正が入ります。多くのツールでは、CSSを手で書き換えるか、Figmaに戻って再変換することになります。

MarkupGenでは、プロジェクトのツールバーでビジュアルエディタ（プロジェクトスタジオの編集モード）をオンにし、バナーそのものを操作します。

MarkupGenのビジュアルエディタの実際のスクリーンショット（英語UI）。ここでは商品ページのデザインを開いています。要素を選択すると、そのコンテンツ、リンク、レイアウトの項目が開きます。

プレビューまたはHTML ツリーで要素を選択すると、インスペクターに変更できる項目が表示されます。

実務上のメリットは次のとおりです。

• スタイルシートを開かずに、対応している要素のレイアウトと位置を調整できます。
• 正確な数値でサイズ、余白、配置を微調整できます。
• 小さな修正のたびにFigmaへ戻ることなく視覚的に変更できます。
• 結果をすぐに確認し、元に戻す・やり直すを使い、納得したら保存できます。
• デザインとコードの往復を減らせます。 変更はすべてHTMLとCSSに書き戻されるため、エクスポートされるコードは目の前のバナーそのものです。

正直にお伝えすべき制限が2つあります。編集は要素を選択してインスペクターでプロパティを変更する方式であり、自由にドラッグ＆ドロップできるキャンバスではありません。また編集は一方向で、生成されたコードは変わりますが、Figmaファイルは変わりません。

Studio EditorはFreeプランに含まれ（月間の生成回数枠を共有）、有料プランでは無制限に使えます。

複数のコード生成オプション

レスポンシブ HTML出力では、コードを書くCSSツールキットを選べます。

• Vanilla CSS — 依存関係のない素のCSS。広告枠やCMSのブロックに最も組み込みやすい形式です。
• Tailwind CSS — ユーティリティクラス。バナーをTailwindのサイト内に置く場合に便利です。
• Bootstrap — すでにBootstrapを読み込んでいるページを持つチーム向けです。

この3つはすべてFreeプランで利用できます。Bulma、Materialize、Pico CSSにも対応しており、こちらは有料プランが必要です。迷う場合はVanilla CSS vs Bootstrap vs Tailwindの比較を参考にしてください。単体のバナーであれば、Vanilla CSSが最も軽く持ち運びやすいファイルになることが多いです。

Freeプランではコード生成が月5回まで、有料プランは1日あたりの枠が設定されています。

プレビュー、AI評価、調整

生成後は、ワークスペースでプレビューと元のデザイン画像を見比べ、気になった箇所をStudio Editorで直します。

有料プランではAI評価がもう一つの視点を加えます。生成結果を元のデザインと比較し、レイアウトと構造、余白と配置、タイポグラフィ、色、コンテンツと画像、寸法とエフェクトという6つの重み付き基準で0〜10の一致スコアを返します。あわせて差分の一覧と、再生成に使える編集可能なプロンプトも提示されます。

スコアは「どこを見るべきか」の目安として扱ってください。これはデザインとの視覚的な一致度を測るものであり、バナーがピクセルパーフェクトであること、本番投入できること、すべてのブラウザで同じに見えることを保証するものではありません。手作業で確認すべき項目はAI生成HTMLの評価方法にまとめています。

HTML5バナーをエクスポートして使う

バナーが整ったら保存し、画像とフォントを含むHTMLを.zipでダウンロードするか、コードをコピーします。有料プランでは同じデザインをReact、Vue、Svelte、Angularのコンポーネントとして書き出すこともできます。

「HTML5バナー」とひとくくりに呼ばれがちな3つを分けて考えると分かりやすくなります。

つまりエクスポートされるのは、自由に使えるクリーンなバナーのマークアップです。広告ネットワークに入稿する場合は、そのプラットフォームのクリックスルー用コードとパッケージングを後から追加し、プラットフォーム側のバリデーターで検証してください。自社サイト、ランディングページ、CMSに置く場合は、書き出したHTMLとCSSだけで足りることが多いでしょう。メールに入れるバナーについてはEmail Readyをご覧ください。

このワークフローが役立つ人

• フロントエンド開発者は組み直しを省き、判断が必要な部分に時間を使えます。開発者向けMarkupGenをご覧ください。
• デザイナーとクリエイティブチームは、修正依頼を書く代わりに、実際のバナー上で余白やコピーを直せます。
• デジタルマーケティングチームは、開発の空きを待たずにキャンペーンのデザインを使えるマークアップにできます。マーケティングチーム向けMarkupGenをご覧ください。
• 代理店と広告制作チームは、クライアントからの修正を作り直しではなく編集で処理できます。代理店向けMarkupGenをご覧ください。

ワークフローのまとめ

1. Figmaでバナーをデザインする（サイズごとに1フレーム）。
2. MarkupGenのFigmaプラグインでフレームを転送する。
3. 必要なツールキットでHTMLとCSSを生成する。
4. Studio Editorでバナーを調整する。
5. プレビューをデザインと照らして確認し、プランに含まれていればAI評価で評価する。
6. コードをエクスポートし、バナーを掲載する環境でテストする。

よくある質問

MarkupGenはGoogle広告などの広告ネットワークにそのまま入稿できるZIPを書き出しますか？ いいえ。MarkupGenが書き出すのはバナーのHTML、CSS、画像、フォントです。クリック計測、容量制限、各広告プラットフォームのパッケージ規則には対応していないため、ご自身で追加・検証する必要があります。

バナーにアニメーションを付けられますか？ fade、slide、zoom、flipなど、要素がビューポートに入ったときに再生される登場アニメーションのプリセットを適用し、再生時間、遅延、イージングを設定できます。タイムラインやキーフレームのエディタはありません。

Studio EditorはFreeプランで使えますか？ はい。視覚的な編集はFreeプランに含まれ、月間の生成回数枠を共有します。AI評価には有料プランが必要です。

編集内容はFigmaに同期されますか？ いいえ。編集で変わるのは生成されたHTMLとCSSだけです。Figmaファイルは変更されません。

バナーはデザインと完全に一致しますか？ 多くの場合かなり近くなりますが、完全一致は保証されません。プレビューを元のデザインと比較し、差分をStudio Editorで修正してください。

Figmaデザインを編集可能なHTML5バナーに

Figmaでデザインし、MarkupGenでコードを生成し、Studio Editorでバナーを仕上げましょう。

MarkupGenでFigmaをHTMLに変換する →