レビュー

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で利用可能です。

機能内容
新規サイト作成自然言語からWordPress Studioのサイトを作成
固定ページ作成ページ本文や構成を生成
投稿作成投稿本文・見出し・カテゴリーなどを追加
コンテンツ編集既存の文章やブロックを変更
画像添付チャットへ渡した画像をサイトで使用
テーマ導入テーマの検索・インストール・有効化
プラグイン導入プラグインの検索・インストール・有効化
WP-CLI実行WordPress関連コマンドをエージェントが実行
ファイル操作サイトディレクトリ内のファイルを読み書き
スクリーンショットサイト画面を取得して表示内容を確認
/annotate画面上の変更箇所を視覚的に指定
/need-for-speedサイトの性能監査
/taxonomistカテゴリー構造の最適化
/previewWordPress.com上へ一時プレビューを公開


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

・関連記事
WordPress専用のAIコーディングCLIツール「Studio Code」ベータ版の無料提供が開始 - GIGAZINE

無料でローカルにWordPress環境を構築する「Studio」レビュー - GIGAZINE

WordPressが「My WordPress」リリース、ウェブブラウザだけで完全に動作しプラグインが使えるWordPressを構築可能でバックアップしてどこにでも復元可能でRSSリーダー化も可能 - GIGAZINE

AutomatticがWordPress.comにAIアシスタントを追加、ユーザーが自然言語コマンドを使用しサイト全体のレイアウトとスタイルを変更できるように - GIGAZINE

独自のデータベースやWordPressなどのアプリを簡単にセルフホストできて管理できるオープンソースPaaS「Coolify」 - GIGAZINE

in AI,   ソフトウェア,   レビュー, Posted by darkhorse_logmk

You can read the machine translated English article A review of my experience trying out the….