WordPress.comの「Studio Code」ベータ版がデスクトップ版で無料利用可能なので試しに使ってみたレビュー

ローカル環境でWordPressサイトを作成し、完成したページを一時公開して共有できる無料のデスクトップアプリが「WordPress Studio」です。このWordPress Studioに「WordPress専用のAIコーディングCLIツール『Studio Code』ベータ版」が統合され、デスクトップアプリ上のチャットからページの作成やテーマ・プラグインの操作ができるということで、実際に使って機能を確認してみました。

Studio Code – 開発者向けリソース
https://developer.wordpress.com/ja/docs/developer-tools/studio/studio-code/

WordPress Studio – エージェント型ローカル開発
https://developer.wordpress.com/ja/studio/

デスクトップアプリのインストールは「無料でローカルにWordPress環境を構築する『Studio』レビュー」を参考に行ってください。

◆Studio Codeの起動方法
Studioを起動するとサイトの初期画面が表示されるので右側にある「Studio コード」をクリック。

「WordPress.comにログイン」をクリック。

ブラウザが起動しログインフォームが表示されるので「メールアドレスまたはユーザー名」に登録済みのメールアドレスもしくはアカウントを入力し「次へ」をクリック。

「パスワード」にパスワードを入力し「ログイン」をクリック。

WordPress Studioを連携するか許可を求められるので「承認」をクリック。

Studioを開くかどうかダイアログが表示されるので「Studioを開く」をクリック。

Studioに戻りチャット画面が表示されます。

◆利用できるモデル
AnthropicのSonnet 5・Opus 4.8およびOpenAIのGPT 5.5が利用可能。

◆チャットの利用例
・サイト構築
「日本の大阪府の観光地を紹介するWordPressサイトを作成してください。トップページには大きなメイン画像・観光地一覧・アクセス案内を配置してください。」と指示してみました。

「active site (マイWordPressサイト) がありますが、今回の『大阪観光地紹介サイト』はこの既存サイトを更新しますか、それとも新しく別サイトとして作成しますか？」と返答があったので「現在のサイトを使う」を選択。

「サイトの構成はどちらにしますか？」と聞かれたので「複数ページ構成」を選択。

「デザインの方向性はどれが好みですか？」に対して「ネオン都会派(道頓堀風)」を選択。

「管理画面のパスに問題が見つかりました。」とのこと、日本語のサイト名だとフォルダ名に日本語が含まれるため不具合が発生し、作業が中断したようです。「英数字名で新規作成」を選択。

新たにサイト「osaka-neon-guide」が作成されチャットの移動を促されたので「osaka-neon-guideを開く」をクリック。

移動したチャットはすでに稼働状態で、そのまま30分程度の作業でサイトが完成。確認のためサイトURLをクリック。

下の画像のようなサイトが表示されました。

・プレビュー画面から直接部品を選択して修正
「スラッシュコマンド」アイコンをクリックし「/annotate」を選択。

ブラウザが起動しプレビュー画面が表示されます。「Annotate」をクリックして修正したい場所「隠れているボタン」のうち左側をクリック。

チャットがポップアップ表示されるので「ボタンが親エレメントの下に隠れて半分しか見えません。」と入力し「Save」をクリックして保存。

もう1つのボタンにも同様に修正依頼の文章を入力して保存し、登録が完了したら「Done」をクリック。

修正作業が行われ意図した通りボタンの全体が表示されました。

このようにチャットで指示するだけでサイト構築や修正作業が可能です。

◆機能一覧
その他、以下の機能がStudio Codeで利用可能です。

◆まとめ
ベータ版ということでフォルダ名に日本語が使われているとエラーが発生するなど、動作が不安定な部分もありますが、30分以上動作させても利用制限などはなくサイトの構築まで完走できました。プレビューから直接修正箇所を指定して指示を出せる機能が特に便利で、HTMLやCSSおよびJavaScriptなどデザインコーディングの知識が無くても会話だけでサイトが構築できるツールとなっています。