新しいJetpack.com、その後1か月

4月にJetpack.comの再構築を始めました。数日後には、ほぼすべてのコーディングをAIコーディングツールに任せながら、すでに動作するテーマとステージングサイトができていました。

予想以上の速さでした。そこで、プロジェクトはさらに大きくなりました。

8月27日、新しいJetpack.comが公開されました。公開から1か月余りが経った今、何が変わったのか、どのように構築したのか、そして今何ができるようになったのかをお伝えしたいと思います。

意図的に、これまでと同じ状態で公開しました

公開日に目指したのは、劇的なリデザインではありませんでした。訪問者にとってすでに機能していたものをすべて維持し、その土台だけを置き換えることでした……同時に、デザインにもその場でいくつか手を加えました。

同僚のRobertがバックエンドとインフラという難しい部分を担当し、私はフロントエンドとデザイン（得意分野です）に集中しました。

元のデザインから最も大きく変わったのは、ホームページと料金ページです。以前、料金ページは別のアプリにあったため、「料金」をクリックするとサイトの外へ移動していました。これは使い勝手の悪い状態でしたが、今ではJetpack.comの他のページと同じような1つのページになっています。ほとんどの製品ページは内容を維持したまま、新しいデザインに移行しました。

初期の数字を見る限り、切り替えによってコンバージョン率が悪化することはなく、実際には少し向上しています。目標は基準値を維持することだったので、それ以上の成果は嬉しいおまけです。

WordPressのブロックテーマです

新しいサイトはWordPress.com上で動作するブロックテーマです。すべてのページがブロックとパターンで構築され、インタラクティブな部分はInteractivity API上でTypeScriptによって記述されたカスタムブロックです。

ページビルダーもヘッドレスのフロントエンドもありません。WordPressそのものです。

コンテンツもgitで管理します

ここが、WordPressビルダーの皆さんに最も関心を持ってもらえる部分だと思います。

Jetpack.comのすべての投稿、ページ、サポートガイドは、プレーンなブロックマークアップとしてgitリポジトリにも保存されています。ブログ記事は約1,000件、サポートガイドは約350件、ページは77件あり、すべてテーマと並べてバージョン管理されています。

変更がサイトに反映される方法は3つあります。

どちらか一方を選ぶ必要はありません。これまでどおり、Happiness Engineersはwp-adminでサポートガイドを修正できます。開発者は、1つのプルリクエストで12ページを変更し、公開前に別の人のチェックを受けることもできます。

人が判断し、エージェントが入力します。

このサイトはAIコーディングエージェントとともに構築し、今も同じ方法で運用しています。

リポジトリには、Claude Code、Codex、またはCursorが従える指示が含まれています。希望する内容を、次のように指示します。たとえば「古いブログ記事のアイキャッチ画像を更新して」または「ホームページのアニメーション用のブランチを作成して、ローカルプレビューを表示して。」エージェントはコンテンツを取得し、変更を加えて確認したうえで、プルリクエストを作成します。

何かが本番サイトに触れる前に停止して確認を求めます（YOLOモードでない場合）。自動チェックはすべての変更に対して実行され、人が承認してから公開されます。

マーケター、サポート担当者、エンジニアが、同じプロセスを通じて同じサイトで作業できるようになりました。

翻訳が自動的に最新の状態になります

英語で公開するすべてのページと投稿は、スペイン語、フランス語、ドイツ語、日本語に自動翻訳されます。この4言語を選んだのは、以前のサイトで最も利用者が多かった言語だからです。

英語版が変更されると、変更された段落だけが再び翻訳されます。公開前に、各翻訳がレビューを受けます。9月にはサポートガイドも同じ流れに加わりました。

1日でサポートをリデザイン

例を見てみませんか？

1週間ほど前、Jetpack Happinessチームとの定例会議で、適切なサポートガイドを見つけるのがいかに難しいかを話し合いました。製品のガイドへたどり着くには、各記事の下部にある手作業で選ばれたリストを使うしかありませんでした。VaultPress Backupには11件のガイドがありますが、そのリストに表示されていたのは約8件でした。

リデザインは1日で完成し、その週のうちに公開されました。

jetpack.com/supportでの新着情報：

• サポートガイドだけを返す検索、検索ボックスのすぐ下には人気の検索が表示されます。
• 「よくあるシナリオ」カード人々が困った状態で訪れるケースに対応するカードです。サイトがダウンしている、ハッキングされた、接続がうまくいかない、バックアップを復元したい、といったケースです。
• 「トピックから探す」と「製品から探す」、名前が分からないガイドも見つけられます。
• すべての記事にサイドバーを設置し、その製品のすべてのガイドを一覧表示します。
• 各記事の最後に「この記事は役に立ちましたか？」を表示し、どのガイドに改善が必要かを把握できます。
• 当社のハピネス・エンジニアを紹介し、検索ボックスの周囲に写真と名前を掲載します。

「サポートに問い合わせる」ページも変更しました。Support AIアシスタントを先頭に配置し、お客様の場合でも無料プラグインを利用している場合でも、次に進む場所が分かるようにしています。

公開後の修正は49件

公開以来、チームは49件のフォローアップ修正と改善を完了しました。Gergely JuhászとManzoor Waniが中心となって進めました。

小さな修正もあります。キーボードでスクロールできるテーブル、ホームページのカルーセルに追加した一時停止ボタン、移行時に段落の書式が失われた古い投稿などです。

サイトを利用する人々を見ていて、直接得た気づきもありました。公開から数日後、私が見守る中、あるWordPressの講師にJetpackを設定してもらいました。彼女はホームページにたどり着き、Jetpackに無料プランがあることが分かりませんでした。

そのため、人々はそのまま離れてしまいます。

彼女の言うとおりでした。現在のホームページには「Jetpackを無料で入手」ボタンがあり、その下には、クレジットカード不要で永久に無料のプランがあると書かれています。

次は何でしょうか

最初に、以前のサイトを再現しました。今度は、それを改善していけます。より分かりやすい製品ページや、今後増やしていく多言語対応を実現し、推測ではなく変更をテストしていきます。

Jetpack.comで壊れているところや分かりにくいところを見つけたら、お知らせください。また、WordPressのサイトを仕事として構築していて、gitとエージェントのワークフローがどのように機能するのかを詳しく知りたい場合は、お知らせください。喜んで続編を書きます。