Studio by WordPress.comは、WordPressのローカル開発環境を簡単に構築できる無料のオープンソースツールです。爆速で簡単に相手にサイトを共有できたり、PHPの切り替え先も豊富で使い勝手が良く、Localからの移行先候補としてもおすすめになっています。
そこで本記事では、Studio by WordPress.comの使い方はもちろん、Localやwp-envとの違い、最近のWordPressとLocalの開発元が抱える問題に触れながら、Studio by WordPress.comを使っておくべき理由を解説していきます。
この記事を書いたのは
しょーご(@samurabrass)
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
Studio by WordPress.comとは?

Studio by WordPress.comは、WordPressの開発元であるAutomatticが提供する、ローカル開発環境を簡単に構築できる無料のツールです。
Studio by WordPress.comの主な特徴は以下の通り。
- 迅速な環境構築:数クリックでWordPress環境を構築可能
- 依存関係不要:PHP、Webサーバー、DBの個別インストール不要
- デモサイト共有:最大5つのサイトを7日間無料で公開可能
- 開発ツール連携:VS Code、PhpStormなどと連携して開発可能
体感として、競合のLocalよりも高速な印象です。
Local(WP Engine製)のリスクについて
WP Engine社が開発するLocalは、長年WordPressのローカル開発環境として人気を集めてきました。しかし、最近のWordPress開発コミュニティとWP Engineの間に生じた軋轢により、今後に暗雲立ち込めています。
以前からGutenbergエディターの導入やFull Site Editingの推進に関して、WP Engineは懐疑的な姿勢を示していました。一方Studio by WordPress.comは、WordPress.comの公式開発元であるAutomatticが提供しているツールです。
そのため、WordPressの最新の開発方針や機能と完全に整合性がとれており、将来的な互換性も保証されています。またオープンソースであることから、コミュニティの貢献を受けやすく、継続的な改善が期待できます。
以上の理由から、現在のWordPress開発環境としては、Studio by WordPress.comがLocalよりも今後推奨されていく可能性は十分あるかと思っています。
私のLocalはおすすめしてましたし、デイトラWeb制作コースのようなスクールでも推薦しているものなので、今も使っている人はとても多いと思います。。。
Studio by WordPress.comとLocal、wp-envとの違い
Studio by WordPress.com、Local、wp-envの主な特徴を比較した表が以下になります。
特徴 | Studio by WordPress.com | Local | wp-env |
---|---|---|---|
開発元 | Automattic | WP Engine | WordPress |
価格 | 無料 | 無料 | 無料 |
環境構築の速さ | 非常に高速 | 高速 | 相対的に遅め |
共有機能 | あり(最大5つのデモサイト) | あり(共有も可能) | あり(開発環境の共有) |
データベース | SQLite | MySQL | MySQL |
OSの対応 | MacとWindows | MacとWindows | MacとWindows |
カスタマイズ性 | ◯ | ◯ | ◎ |
ユーザーインターフェース | 使いやすい | 直感的 | 開発者向け |
オープンソース | ✔ | ✗ | ✔ |
基本的にLocalやStudio by WordPress.comに適しているユーザーとしては、
- WordPress初心者や、シンプルな環境を求める開発者
- 迅速に環境を構築したい人
- 個人で小規模なプロジェクトを行う人
- デモサイトを簡単に共有したい人
こういった層で、Studio by WordPress.comが適している状況としては以下の通り。
- 依存関係の管理を気にせずに開発したいとき
- ハンズオンやトレーニング
- サイトエディターで簡単な実験をしたいとき
wp-envが適しているユーザーとしては、
- 上級WordPress開発者
- コマンドラインに慣れている人
- チーム開発を行う人
こういった層がいるでしょう。以下の状況では特にwp-envが適していると言えます。
- 大規模なプロジェクトや複数人での開発
- GitHubと連携した開発フロー
- 環境設定を厳密にコントロールしたい場合
- プラグインやテーマの開発で複数の環境が必要な場合
Studio by WordPress.comは簡単さと速さ、Localは使いやすさとカスタマイズ性、wp-envは高度な制御と柔軟性が特徴です。
Studio by WordPress.comの使い方
インストールを行う
まずはインストールして準備しましょう。現在はMacOSでもWindowsでも両方対応しています。

アプリアイコンは以下になります。

サイト名と保存先のローカルパスを選択して、「サイトを追加」をクリック。


すると、30秒ほどでサイトがローカル環境上に公開されました!早い!!

この段階で指定ディレクトリ以下にファイル群が生成されているのが分かるかと思います。

概要

設定部分できることは、基本的に管理画面上での「カスタマイズ」が中心になります。ブロックテーマ以外では使う機会はそこまで多くないかもしれません。
「Viaual Studio Code」をクリックすればVSCodeですぐに展開できますが、私はCursorエディターを使うので、これもあまり使いませんかね(^_^;)

シェア
デモサイトのシェア機能により、開発者はクライアントやチームメンバーと簡単に進捗を共有し、フィードバックを得ることができます。従来のNgrokのようなトンネリングツールを使用する必要がないため、とても便利です。

まずは「WordPress.comにログイン」してください。アカウント開設は無料です。

ログイン後、「デモサイトを追加」ボタンをクリック。

すると、早速URLが発行されます。これだけ!!とても簡単ですね。デフォルトでSSL化されてました。

共有リンクは7日間有効ですが、「デモサイトを更新」することで延長可能です。
インポート/エクスポート

インポート/エクスポートでは、 Jetpackバックアップなどからサイトを読み込むことが可能です。基本的にここでインポート/エクスポートするより、サイトの管理画面からAll-in-One WP Migrationを使ったほうが楽かと思います。
この画面上で当該ファイルをインポートはできません。

設定

一番見ることになるのが設定になるかと思います。
- ローカルURL
- ローカルパスの確認
- PHPバージョンの変更
- 管理画面URLとログイン情報
設定ではまずPHPのバージョン変更が可能です。

また、管理画面に入る情報も見ることができます。
Studio by WordPress.comはこれから進化する
Studio by WordPress.comは、Automatticが提供する無料のWordPressローカル開発環境ツールです。数クリックで環境構築が可能で、依存関係のインストールが不要です。
軽量で効率的な開発が可能で、デモサイト共有機能も備えています。オープンソースで、初心者から上級者まで幅広い開発者に適しており、WordPress開発の効率化に貢献しています。
現状ではまだまだ細かいカスタマイズが不可能ですが、オープンソースなためコミュニティの貢献によって継続的に改善されていく可能性があります。
今後Localを使い続けられるのかは不透明なため、ローカル環境の選択肢として検討しておくのがいいでしょう。しょーごログのWeb制作ロードマップを学習されている方もぜひ導入してみてください。
Web制作を独学していると、最新のWordPress情勢に触れるのは難しいと思いますが、どんな状況でも対応できるようにしておくといいですね。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新!被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル!!
他者と差をつけられるポートフォリオが準備できます!

制作会社も使用する専用レビューツールで分かりやすく添削していきます!
基本的に「まとめて購入」していただくとかなりお得になります↓

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください!

\課題の購入はこちらから/
ご寄付を頂けると今後の更新の励みになります!