STUDIOはHTML・CSSをエクスポートできる？サイトをWordPressへ移す方法を解説

「STUDIOで作ったサイトを、HTMLとCSSで書き出してWordPressに持っていきたい」。WordPressへの移行を考えたとき、まず思いつくのがエクスポートです。

結論から言うと、STUDIOには、ページやデザイン、ソースコードをエクスポートする機能はありません。ただし、「エクスポートできない」ことは「移行できない」ことではありません。この記事では、STUDIOから持ち出せるもの・そのままでは持ち出せないものを項目ごとに整理し、WordPressへ移す現実的な方法を解説します。

※ STUDIOの公式ヘルプでは、サービス名が「Studio」と表記されています。この記事では「STUDIO」と表記します。

公式ヘルプの結論：ページ・デザイン・ソースコードは書き出せない

STUDIOの公式ヘルプでは、CMSのデータを書き出す機能は提供しておらず、「ページ情報、デザインやソースコード」もエクスポートできないと案内されています（Studio Help「CMS記事などのStudioのサイトデータを他のプラットフォームへ移行するためエクスポートしたいです」。ヘルプの最終更新は2026年3月23日、2026年9月29日に確認）。

有料プランでHTML・CSSをZIPで書き出せるWebflowとは違い、STUDIOの管理画面から「ファイル一式」を受け取ってWordPressに置く、という移し方はできません。

項目別：持ち出せるもの・持ち出せないもの

項目	STUDIOから持ち出せるか	WordPressへ移す方法
ページのHTML・CSS	書き出す機能はない	公開中のページをもとに作り直す、または取り込む
デザイン（レイアウト、端末ごとの表示）	書き出す機能はない	同上。PC・タブレット・スマホそれぞれを確認する
CMSのデータ（記事など）	書き出す機能はない	公開中の記事を見ながら、WordPressの投稿として作り直す
フォームの回答	CSVでダウンロードできる	CSVを保管し、WordPressでは新しいフォームで受け付ける
独自ドメイン	STUDIOはドメインを販売していない（外部のサービスで管理）	DNSレコードの向き先をWordPressのサーバーに変える
フォント（TypeSquare・モリサワなど）	STUDIOを通して提供されているもの	自分でフォントサービスを契約するか、近いフォントに置き換える

画像は、制作に使った元のデータが手元にあれば、それを使うのが確実です。ない場合は、公開中のページに表示されている画像を取り込みます。

「エクスポートできない」は「移行できない」ではない

STUDIOのページも、公開されている以上、ブラウザの中ではHTMLとCSSで表示されています。WordPressへ移すときの材料は、この「ブラウザに表示されているページ」です。

ただし、ブラウザの「ページを保存」で保存したHTMLをWordPressに置けば済む、というほど単純ではありません。WPSitePortの開発で確認した、STUDIOの公開ページの特徴を紹介します（2026年9月時点）。

開発で確認したSTUDIOのページの特徴

• ページはブラウザの中で組み立てられる：サーバーから最初に届くHTMLには、ページの中身がほとんど入っていません。JavaScriptが動いてから、ページが表示されます。HTMLを取得するだけのツールでは、中身を取り込めません
• スタイルは、要素ごとに自動で付けられた名前に対して書かれている：人が読んで直すことを前提にしたCSSではないので、そのまま持ってきても、あとから手で直すのは大変です
• 画面に入ったときに読み込まれる画像がある：一部の背景画像は、その要素が画面に入ったときに読み込まれます。スマホの幅でだけ使われる背景もあるため、画面幅ごとにページを最後までスクロールしないと、すべての画像がそろいません
• スクロールで表示される要素は、最初は見えない状態：スクロールに合わせて表示される要素は、表示される前は透明になっています。そのまま保存すると、見えない要素が残ります
• 表示されている画像は縮小版のことがある：画面幅に合わせて縮小された画像が表示されていることがあり、元の画像とは縦横の比率がわずかに違う場合があります

WPSitePortでは、PC・タブレット・スマホの3つの画面幅で、実際のブラウザでページを最後までスクロールしてから読み取り、画像やフォントのファイルをWordPressに保存します。

本当に難しいのは「編集できる形」にすること

見た目をコピーするだけなら、取り込んだHTMLとCSSをそのまま表示すれば、近いものは作れます。しかし、それでは移行したあとに文章を1行変えるだけでも、HTMLやCSSを直接触る必要があります。

WPSitePortでは、STUDIOのページを、端末ごとのスタイルを持つ要素に組み直して取り込みます。文字はダブルクリックで書き換え、色や余白はパネルで変えられるので、HTMLやCSSを直接触らずに編集できます。STUDIO以外のサイトは、元のHTML・CSSを保ったまま見た目をそのまま複製し、エディタでの変更をその上に重ねます。どちらの方法になるかは、ページを見て自動で決まります。

コピーしたあとのレポートで確かめられること

WPSitePortは、コピーが終わると次の内容をレポートに表示します。「エクスポートできないページを、どこまで取り込めたか」を、自分のサイトで確かめられます。

• 見た目の一致度：コピー元とコピー後のページを、PC・タブレット・スマホの3つの画面幅で比べた結果
• 取り込んだファイル：画像・フォント・CSS・動画を取り込めたかどうか
• 内部リンク：WordPress側のアドレスに書き換えたリンクの数
• フォント：近いフォントに置き換えたフォント
• 確認が必要な項目：外部の埋め込みやフォームなど

無料版でも1ページをコピーしてレポートを見られるので、まずはいちばん作り込んだページで試してみてください。

持ち出せないものは、こう移す

CMSの記事

STUDIOのCMSは書き出せないため、公開中の記事を見ながらWordPressの投稿として作り直します。作業の前に、記事の数、URLの形（例：/news/記事の名前）、カテゴリー、公開日を一覧にしておくと、WordPress側で同じURLにしやすくなります。

フォント

TypeSquareやモリサワなど、STUDIOを通して提供されているフォントは、WordPressへ移したサイトでそのまま使えるわけではありません。同じフォントを使うにはフォントサービスを自分で契約し、近いフォントで代用する場合は、文字の幅の違いに注意します。

WPSitePortの開発中に、実際のサイトの文章で文字の幅を測ったところ、「palt」（約物やかなを詰める設定）を使ったゴシック体の代わりには、Google Fontsの日本語フォントの中ではNoto Sans JPが最も近く、幅の差は2〜5%でした。paltが効かないフォントでは8〜12%広がり、見出しの改行位置が変わりました。

フォームの回答

過去の回答は、フォームダッシュボードからCSVでダウンロードできます（Studio Help「フォーム回答管理：ダッシュボードでの管理」）。WordPressでは、新しいフォームで受け付けます。

独自ドメイン

STUDIOはドメインを販売していないので（Studio Help「Studioでドメインを購入できますか？」）、ドメインはもともと外部のサービスで管理されています。そのサービスでDNSレコードをWordPressのサーバーに向ければ、同じドメインで公開できます。手順と注意点は、STUDIOを解約してもサイトは残せる？で紹介しています。