無料の「WordPress Studio」使い方と注意点

「サーバーを契約する前に、WordPressを自分のパソコンで試してみたい」「作りかけのホームページを、誰にも見られない場所で作りたい」と思ったことはありませんか。

そんな方に向いているのが、WordPress Studio（ワードプレススタジオ）という無料のアプリです。パソコンの中にWordPressのサイトを作れて、見せたいときだけ7日間の確認用URLを発行できます。

私は千葉市でホームページ制作をしていて、2026年9月から、お客様に見ていただく試作品（デモサイト）の作り方に、WordPress Studioを取り入れました。この記事では、Macでの制作から、Windowsのパソコンへの受け渡し、確認用URLの発行までを1日で通したときの手順と、実際につまずいた場面をまとめています。

WordPress Studioを1日で試した流れ（全体像）
WordPress Studioとは「パソコンの中のWordPress」
私がデモサイトづくりにWordPress Studioを取り入れた理由
1. サーバーの一角にデモを置く方法もある
2. 「作る場所」と「見せる場所」を分けた
WordPress Studioのインストール方法
初めて起動したときに出る2つの確認
1. 「Microsoft Defender」の確認は、外さずに進めた
2. WordPress.comとの連携は、アドレスを確かめてから承認
毎回ゼロから作らない「原本」を複製する使い方
1. よく使う設定を済ませた原本を1つ作る
2. 複製ボタンの場所と、引き継がれたもの
サイトをzipで別のパソコンへ渡す方法
取り込み後に迷いやすいボタンと画面
確認用URL（プレビュー）の作り方と7日間のルール
公開中のサイトのバックアップを取り込むときの注意
パソコンの中のサイトは安全？よくある3つの疑問
こんな人にはWordPress Studioがおすすめ
まとめ

WordPress Studioを1日で試した流れ（全体像）

最初に、私がWordPress Studioで1日のうちに行ったことを表にまとめます。Macで作ったサイトを、制作パートナーのWindowsパソコンに渡し、確認用URLを発行するところまでです。

順番	やったこと	つまずいたこと
1	Windowsのパソコンの種類を確認	Intel/AMD版とARM版の2種類がある
2	Windowsにインストール	1回目は「Installation has failed」で失敗、2回目で成功
3	初回起動の設定	ウイルス対策の設定変更と、WordPress.comのログインを聞かれる
4	Macでサイトをzipに書き出し	画像が多く150MBほどになり、LINEでは送れない
5	Windowsでzipを取り込み	zipは解凍せずに使う
6	管理画面で作業	左のショートカットがMacと違う、支払い方法の案内が出る
7	確認用URLを発行	検索エンジンよけの設定が付いていない

1〜7を合わせて、Zoomをつなぎながらおよそ1日かかりました。英語の画面が出るたびに手が止まりましたが、そのつど画面をAIに見せて、どのボタンを押せばよいのかを教えてもらいながら進めました。

最初の1回は、画面を共有しながら2人で進めると安心です。
迷うボタンがいくつか出てきます。

以下、それぞれの手順を順番にお伝えします。

WordPress Studioとは「パソコンの中のWordPress」

サーバーを借りずにWordPressを動かせる

ふつう、WordPressのホームページは、レンタルサーバー（インターネット上の土地のようなもの）を借りて、そこに置きます。サーバーとドメインの関係は、【個人事業主が最初に知るべき】ホームページのしくみをわかりやすく解説で土地と住所にたとえて説明しています。

WordPress Studioは、この土地を借りずに、自分のパソコンの中でWordPressを動かすアプリです。提供しているのはWordPress.comを運営するAutomattic（オートマティック）という会社で、公式ページではMac・Windows・Linuxで使えると案内されています（WordPress Studio公式ページ）。

作りかけのページを外から見られない

パソコンの中で動いているサイトは、アドレス欄に「localhost:8881」のように表示されます。localhost（ローカルホスト）は「このパソコン自身」という意味で、後ろの数字はサイトごとに変わります。

インターネット上の住所がないので、作業中のページを外から見られることはありません。こうした「自分のパソコンの中だけで動く作業場所」のことを、ローカル環境と呼びます。

日本の「STUDIO」とは別のサービス

「スタジオ」と名前の付くホームページ作成サービスには、日本発の「STUDIO」もあります。こちらはWordPressを使わずに、画面上でホームページを組み立てるサービスです。

WordPress Studioは、あくまでWordPressのサイトを作るためのアプリです。検索すると両方の記事が出てくるので、調べるときは「WordPress Studio」と続けて入れるのがおすすめです。

私がデモサイトづくりにWordPress Studioを取り入れた理由

サーバーの一角にデモを置く方法もある

これまで私は、自分が借りているサーバーの中にフォルダを作り、そこにお客様のデモサイトを置いてきました。

今もこの方法で作っているデモがあります。サーバーの中を区切ってサイトを置く考え方は、サブドメインとサブディレクトリの違いとは？ホームページの住所で失敗しないための基礎知識で紹介しています。

この方法でもデモは作れます。ただ、URLを知っている人なら誰でも見られる状態で、作業途中の整っていないページも同じです。

「作る場所」と「見せる場所」を分けた

WordPress Studioで作るデモは、作る作業をパソコンの中で行い、お客様に見ていただくときだけ確認用のURLを発行しています。作る場所と見せる場所を分けたことで、途中の状態を気にせずに作業できるようになりました。

ホームページを依頼するときは、「デモはどこで作って、どう見せてもらえますか」と制作会社に聞いてみてください。
進め方が分かると安心です。

WordPress Studioのインストール方法

Macの場合

公式ページからMac用のインストーラーをダウンロードして、アプリケーションフォルダに入れます。私がダウンロードしたApple Silicon（アップルシリコン）用のファイルは、約470MBでした。

ダウンロードする場所は、公式ページの「無料でダウンロード」の欄です。

Windowsの場合は、先にパソコンの種類を確かめる

Windows版は、「Intel/AMD」向けと「ARM」向けの2種類に分かれています。ダウンロードの前に、どちらのパソコンかを確かめます。

Windowsの「設定」→「システム」→「バージョン情報」を開くと、「システムの種類」の欄に「x64ベースプロセッサ」と表示されていました。この場合はIntel/AMD版です。

公式ページの「Windows版をダウンロード（Intel/AMD）」ボタンからダウンロードしました。

インストールが失敗したら、もう一度開く

インストーラーを開くと、青い画面に「Installing WordPress Studio…」と表示されます。私と制作パートナーが試したときは、しばらくして「Installation has failed」というエラーの小さな画面に変わりました。

▼ 1回目のインストールでは、このエラーが出ました

原因ははっきりしませんでしたが、同じインストーラーをもう一度開いたところ、2回目で無事に入りました。1回失敗しても、慌てずにもう一度試してみてください。

次からすぐ開けるよう、タスクバーに固定する

Windowsでは、インストール直後にタスクバーに出るアイコンは、アプリを閉じると消えてしまいます。起動中にアイコンを右クリックして「タスクバーにピン留めする」を選ぶと、次からクリック1回で開けます。

見つからないときは、タスクバーの検索欄に「Studio」と入れると出てきます。

初めて起動したときに出る2つの確認

「Microsoft Defender」の確認は、外さずに進めた

Windowsで初めて起動すると、「Want to speed up site creation?」（サイトの作成を速くしますか）という英語の確認が出ます。Windowsに入っているウイルス対策（Microsoft Defender）のリアルタイム保護を、Studioに対してだけ外すと速くなる、という案内です。

選択肢は「Sounds good, do it for me.」と「I’m not interested.」の2つです。除外すると、Studioのファイルはリアルタイムの検査の対象から外れます。

パソコンのセキュリティ設定を変えることになるため、私と制作パートナーは「I’m not interested.」を選びました。

その代わり、管理画面を開くときに、しばらく真っ白な画面が続くことがありました。アドレス欄の下の青い線が伸びきるまで待てば表示されるので、何度もボタンを押さずに待つのがコツです。

WordPress.comとの連携は、アドレスを確かめてから承認

続いて、WordPress.comのアカウントでのログインを求められます。ブラウザで「WordPress Studioを連携する」という画面が開き、「個人情報」「投稿」「メディア」などへのアクセスを許可するかを聞かれます。

少し身構える画面ですが、Studioからログインしたときに出る画面です。私と制作パートナーは、アドレス欄が「https://public-api.wordpress.com/」で始まっていることを確かめてから「承認」を押しました。

毎回ゼロから作らない「原本」を複製する使い方

よく使う設定を済ませた原本を1つ作る

WordPress Studioには、サイトを丸ごと複製する機能があります。私は、テーマの初期設定や、どの案件でも使うプラグイン（機能を追加する部品）を入れたサイトを1つだけ「原本」として作っています。

案件ごとに、この原本の複製から作り始めます。この進め方は、ほかの制作者の方から教わったものです。

複製ボタンの場所と、引き継がれたもの

Macでは、左のサイト一覧で原本を選び、「概要」タブの下のほうにある「管理」欄の「複製」を押します。押すと名前を聞かれずに、すぐ「元の名前 Copy」というサイトができました。

複製で何が引き継がれるかは、公式の説明には書かれていませんでした。実際に比べたところ、テーマ、プラグイン、固定ページ、日本語の設定、テーマの細かい設定まで、元のサイトと同じ状態になっていました。

原本には手を入れず、作業はいつも複製した側で行います。
原本を触ると、次の案件にも変更が引き継がれてしまうためです。

サイトをzipで別のパソコンへ渡す方法

なぜ制作パートナーのパソコンに渡したのか

私は、ホームページのデザインの組み込みなど、制作の一部を制作パートナーにお願いしています。

ところが、WordPress Studioのサイトは私のパソコンの中だけで動いているので、そのままでは制作パートナーが開いて作業することができません。

そこで、サイトをzipファイルにして渡せば、相手のパソコンでも同じサイトを再現して作業を分担できるのかを、実際に試しました。制作パートナーのパソコンはWindowsだったので、MacからWindowsへ渡せるかどうかも確かめたかった点です。

書き出す側：「サイト全体をエクスポート」

MacのWordPress Studioで渡したいサイトを選び、「概要」タブの「管理」欄にある「サイト全体をエクスポート」を押します。サイト全体が1つのzipファイルになります。

画像の多いサイトでしたので、150MBほどになりました。LINEに添付するには大きいため、Googleドライブの共有フォルダに置いて、そこからダウンロードしてもらいました。

取り込む側：「バックアップからインポート」

Windows側では、左上の「＋」から「サイトを追加」の画面を開きます。「新規サイトを作成」「サイトを連携」「バックアップからインポート」の3つが並ぶので、「バックアップからインポート」を選んでzipを選びます。

▼ 右端の「バックアップからインポート」から、zipを選びます

ここで大切なのは、zipを解凍しないことです。zipのまま選べば、WordPress Studioが中身を読み取ってくれます。

取り込み中は触らずに待つ

「インポートしたサイトを設定」の画面でサイト名を入れて進めると、取り込みが始まります。画面の上に「100%・データベース」と出たあと、青いボタンの中でくるくる回る表示がしばらく続きました。

数分待つと、Macと同じデザインのサイトが表示されました。途中で閉じたり、ボタンを押し直したりしないのがコツです。

戻すときは「新しいサイト」として取り込む

Windowsで作業したサイトをMacへ戻すときも、手順は同じです。このとき私は、既存のサイトに上書きせず、新しいサイトとして取り込むことにしています。

既存のサイトに取り込むと、そのサイトが丸ごと置き換わり、元に戻せないためです。

取り込み後に迷いやすいボタンと画面

「支払い方法を追加」は押さなくてよい

取り込みが終わった画面の左側に、「Studio Code ベータ」の案内と「支払い方法を追加」のボタンが出ました。これは、AIにサイトを作ってもらう別の機能の案内です。

サイトを作ったり編集したりするのには使いません。何も押さずにそのままで大丈夫です。

管理画面への入り方

WordPressの管理画面に入るには、右側のサイトの上に出ている黒いバーの、サイト名をクリックします。または、アドレス欄の最後に「/wp-admin」を付けて開きます。

ログインのユーザー名とパスワードは、Macでは「設定」タブの「WordPress admin」欄で確認できました。管理画面の基本操作は、個人事業主がWordPressでできること｜HP制作のプロが解説でも紹介しています。

左のショートカットがMacと違ったとき

Macでは、左側のショートカットに「カスタマイザー」「メニュー」「ウィジェット」が並びました。ところがWindowsでは、同じサイトなのに「サイトエディター」「スタイル」「パターン」「テンプレート」が並んでいました。

WordPressのテーマには、「カスタマイザー」で設定するクラシックテーマと、「サイトエディター」で編集するブロックテーマがあります。

私が使っているテーマはクラシックテーマなので、Windows側ではショートカットを使わず、管理画面の「外観」→「カスタマイズ」から操作しました。なぜWindowsだけ表示が違ったのかは、分かりませんでした。

閉じるときは「Stop site」を選ぶ

右上の「×」でアプリを閉じると、「Keep the site running?」（サイトを動かしたままにしますか）と聞かれます。「Stop site」を選ぶとサイトも止まり、「Keep site running」を選ぶとサイトだけ裏で動き続けます。

私は「Stop site」を選んでいます。どちらを選んでもサイトの中身は消えず、次に開いてから「開始」を押せば元どおり使えます。

全画面から戻れなくなったら、開き直す

右側のサイトの表示を画面いっぱいに広げたら、戻り方が分からなくなったことがありました。キーボードのEscを押しても戻らず、ボタンも見当たりませんでした。

このときは、いったんアプリを閉じて開き直すと、元の画面に戻りました。

確認用URL（プレビュー）の作り方と7日間のルール

サイト名の「⌄」から発行する

画面の左上にあるサイト名の横の「⌄」を押すと、「スタジオ」「プレビュー」「ライブ」の3つが並んだメニューが開きます。「プレビュー」の欄のボタンを押すと、「プレビューを公開しています…」と表示されました。

数分で「〜.wp.build」で終わるURLができます。このURLを送れば、作った人のパソコンの電源が切れていても、相手は同じサイトを見られます。

▼ 「プレビュー」の欄から、確認用URLを発行します

「ライブ」の「公開」は、WordPress.comなどの本番サイトとつなぐ機能です。デモ作りでは使わないので、押していません。

公式が定めている3つのルール

公式の説明では、プレビューには次の決まりがあります（Preview sites・WordPress.com Developer Resources）。

WordPress.comのアカウントでログインして作る
最後に更新してから7日で自動的に消える。更新すると、また7日に戻る
1つのアカウントで同時に作れるのは10件まで

今回は、サイトを1つも持っていない、作ったばかりのWordPress.comアカウントで発行できました。打ち合わせが1週間以上先のときは、前日に更新してからURLをお送りすることにしています。

検索エンジンよけの設定は、自分で入れる

できたURLを調べたところ、「このページを検索結果に出さないで」という設定（noindex）が付いていませんでした。サイトマップ（ページの一覧表）も、誰でも見られる状態でした。

URLを個別に送るだけなら、検索エンジンに見つかる可能性は低いと考えています。それでも、本番のホームページと同じ内容が別のURLにあると、検索エンジンにとって紛らわしい状態になるおそれがあります。

noindexの考え方は、ホームページが「検索されない」ときの確認手順と対策でも取り上げています。

そこで、プレビューを作る前に、WordPressの「設定」→「表示設定」で「検索エンジンがサイトをインデックスしないようにする」にチェックを入れることにしました。確認が終わったプレビューは、早めに削除します。

確認用URLは、URLを知っている人なら誰でも開ける状態です。noindexは検索結果に出にくくする設定で、閲覧を止める設定ではありません。

そのため、お客様の情報やお問い合わせの記録を含むサイトは、プレビューに上げないことにしています。

プレビューを作る前に、表示設定のチェックを1つ入れるだけです。
手順に組み込んでおくと忘れません。

公開中のサイトのバックアップを取り込むときの注意

そのままでは読めない形式がある

公開しているホームページのバックアップから、WordPress Studioにデモを作ることもできます。ただし、取り込めるファイルの形式は決まっています。

公式の説明では、WordPress Studio自身が書き出したzip、All-in-One WP Migrationというプラグインのファイル、データベースのファイルなどが対象です（Import/Export・WordPress.com Developer Resources）。普段使っているバックアップのファイルは、そのままでは取り込めませんでした。私はAIに手伝ってもらい、WordPress Studioが読める形に整えてから取り込みました。

どのファイルをどこに入れればよいのか、私ひとりでは分かりませんでした。AIに画面や状況を伝えながら、ひとつずつ教えてもらって進めています。