FigmaとSTUDIOの違いとは？役割分担とFigma to STUDIOの使い方、案件別の選び方

FigmaとSTUDIOは、どちらを選ぶかというより役割が違います。Figmaはデザインを設計して共有するためのツール、STUDIOは作ったデザインをWebサイトとして公開できるノーコードツールです。Figmaのカンプは「Figma to STUDIO」でSTUDIOへ取り込めますが、引き継がれるのは見た目が中心で、アニメーション、フォームの動作、HTMLの意味構造は取り込み後に作り直す必要があります。

FigmaとSTUDIOは何が違うのか

機能の数を比べても判断しづらいので、成果物と担当する工程で整理します。

Figmaはサイト公開を主目的にしたツールではありません。公開までを担うのがSTUDIOで、ここが最大の違いです。

役割分担：Figmaが「設計」、STUDIOが「公開」

両方を使う場合の流れは分業になります。

1. FigmaでPC・スマホのカンプを作り、クライアントの承認を取る
2. 承認済みのフレームをFigma to STUDIOでSTUDIOへ取り込む
3. STUDIO上でレイヤー構造・余白・テキストを調整し、ブレークポイントを割り当てる
4. ページを複製して各ページの役割に合わせてセクションを絞る
5. 公開後に実寸と表示を確認する

デザインの正解をFigmaに置き、公開と運用をSTUDIOに任せる形です。修正が入ったときも、どちらを直すのかが明確になります。

Figma to STUDIO 公式プラグインの仕組みと使い方

Figma to STUDIOは、Figmaのプラグインとして動き、選択したフレームをSTUDIOのプロジェクトへ送るツールです。画像を1枚貼るのではなく、テキスト・図形・画像を編集できるレイヤーとして取り込みます。

1. Figmaでプラグインを起動し、STUDIOのアカウントと連携する
2. 送信先のSTUDIOプロジェクトを選ぶ
3. 取り込むフレームを指定する（PC用とスマホ用を別フレームで用意しておく）
4. 取り込み後、STUDIO側でブレークポイントごとに表示するフレームを割り当てる
5. レイヤーの階層、余白、文字サイズをSTUDIO上で調整する

取り込みはゴールではなく出発点です。プラグインの画面や対応範囲は更新されるため、最新の仕様は公式ヘルプで確認してください。

案件ごとの選び分け

どちらを使うかは、公開後の運用と、デザインの再利用が必要かどうかで決まります。

• 1ページのLPを短期間で公開したい：Figmaでカンプを作り、STUDIOへ取り込んで公開する
• デザインのルールを資産として残したい：Figmaを中心に据える。コンポーネントと変数で再利用できる
• 独自のアニメーションや複雑なフォーム、会員機能が必要：HTML・CSSでの実装を選ぶ。Figmaはカンプの受け渡しに使う
• 公開後も自分たちで更新したい小規模サイト：STUDIOで構築する
• 支給カンプからのコーディング案件：Figmaは数値とレイヤーを確認する側で使う

学習コストはどちらが低いか

公開というゴールに早く届くのはSTUDIOです。要素を置いて公開までの流れを一度通せば、サイトとしての形になります。ただしレイヤー構造とブレークポイントの考え方は覚える必要があります。

Figmaはフレーム、Auto Layout、コンポーネント、変数といった設計の概念が多く、最初の1本を仕上げるまでに覚えることが増えます。その分、一度作った型を別案件へ流用しやすくなります。これから両方を使うなら、FigmaのフレームとAuto Layoutだけを先に押さえ、残りは必要になった順に足す進め方が負担を減らせます。

取り込みで再現できないもの

• アニメーションとインタラクション：Figmaのプロトタイプで付けた動きは引き継がれません。STUDIO側で設定し直します
• レイヤーの意図と異なる要素への変換：ボタン風のレイヤーがフォーム要素として生成されることがあります
• HTMLの意味構造：テキストが段落要素として生成され、見出しやmainランドマークは別途整える必要があります
• 寸法の一致：写真の比率、カード幅、セクション間の余白はピクセル単位では一致しません

BENTEN Web Works の対応事例から

自主制作で、社会人向けスクール「WEEKEND LAB」（架空のサービス）の縦長LPを、HTML・Figma・STUDIOの3形態で作りました。同じデザインを別の制作フローに通すと、どこが引き継がれ、どこが落ちるのかを確認するためです。記録はHTML・Figma・STUDIOで比較した自主制作LPにまとめています。

判断として大きかったのは、カンプの承認より前にコードを書き始めないと決めたことです。第1稿は表示速度とアクセシビリティの検査に通っていましたが、カンプと実装で写真・コピー・料金・配置が変わり、デザインも既視感のある型に寄っていました。数値が良くても、承認した内容と違えば実績として出せません。そこで実在LP4件を調査して構成の考え方を言葉にし、PCとスマホを一枚で確認できるカンプを先に作り、承認後に実装へ進みました。

Figmaカンプは、見出し・本文・写真・ボタン・料金表・FAQを編集できるレイヤーに分け、Auto Layoutを設定しました。Starterプランの3ページ上限に合わせて3ページ構成にし、カラー7変数、寸法12変数、文字16スタイル、エフェクト1スタイル、主要コンポーネント9件を登録しています。カンプはこちら、デモはこちらで確認できます。いずれもクライアント支給データではなく、支給を想定した自作カンプです。

PC 1440px

Figmaカンプ：

HTML実装：

スマホ 375px

Figmaカンプ：

HTML実装：

比較すると、コピー、料金、写真、配色、セクション順、スマホの読み順は共通しています。一方、ヒーローの写真比率、カード幅、セクション間の余白は同一ではありません。ピクセル単位の完全一致とは表記せず、比較画像と差分を残すことにしました。

HTML実装の公開後チェック

デモ環境へ公開した後、375px、768px、1440pxで再監査しました。

デモページは実在サービスと誤認されないよう、自主制作であることをフッターに記載し、HTTPヘッダーとHTMLの両方でnoindexを設定しています。

同じカンプをSTUDIOで4ページに再構築した結果

FigmaカンプをSTUDIOへ取り込み、TOP、COURSE、STORIES、BRIEFINGの4ページに再編集しました。PC用とスマホ用のフレームをそれぞれ取り込み、ブレークポイントで切り替えています。公開後の実寸確認でTOPが長すぎたため、概要を伝えるダイジェスト構成へ短縮し、詳細をCOURSE、STORIES、BRIEFINGへ分けました。

• TOP
• COURSE
• STORIES
• BRIEFING

STUDIO版 PC 1440px

STUDIO版 スマホ 375px

4ページを375px、768px、1440pxで確認したところ、全URLがHTTP 200、横スクロール0、画像読み込みエラー0でした。LighthouseはPerformance 99、Accessibility 92、Best Practices 100です。

一方、Figmaから取り込んだテキストが段落要素として生成され、見出しやmainランドマークなどHTMLの意味構造にはaxe-coreの指摘が4種類残りました。また、ボタン風レイヤーがフォーム要素へ変換されたため、CTAは見た目だけの静的デモで、フォーム送信やページ遷移には使用していません。見た目の再現だけでなく、この変換上の制約も記録しています。

記録できた範囲の制作時間も残しました。ファイルの保存時刻と監査レポートから確認できた、カンプ保存からローカル監査完了までの経過時間は9分25秒です。生成AIによる画像カンプ作成とコーディング支援を含む時間で、人手だけのコーディング時間ではありません。開始時刻を記録していない工程は合計に足さず、測れていない時間を推定値で埋めない方針にしています。

この事例から言えるのは、STUDIOを選ぶときは「見た目の再現」と「動作・HTML構造の作り直し」を別の工程として見ておく必要がある、ということです。Figmaのカンプが支給される案件でも、取り込んだあとにどの要素をSTUDIO上で組み直すかを先に決めておけば、公開間際の手戻りを減らせます。

Figmaの支給カンプからのコーディングや、STUDIOでの構築をどこまで外部に任せるかで迷う場合は、Web制作の内容をご確認いただくか、お問い合わせフォームからご相談ください。