技術戦略部 Developer Engagement ブロックの @ikkou です。Developer Engagement ブロックは社外向けのいわゆる「技術広報」を担っていて、ZOZO のテックブログである『ZOZO TECH BLOG』の運営全般を担っています。
背景
2023年の夏に『ZOZO TECH BLOGを支える技術 #1 これまでとこれから』という記事を公開しています。
その中で「デザイナーチームに画像の作成依頼」と記載している通り、当時は ZOZO TECH BLOG のカバー画像はすべてデザイナーチームに依頼していました。
しかし、デザイナーチームの負荷やレビュープロセスの複雑化を鑑み、2024年5月からカバー画像ジェネレーターを運用しています。
ベースとなるテンプレートはデザイナーチームに作成してもらい、背景と画像を選択してテキストを入力すると ZOZO TECH BLOG に最適化されたカバー画像を出力できるツールを Vue.js で作成しました。
このツールを導入したことで、記事のレビューが終わると同時にカバー画像の追加と本番公開の準備が整うようになり、結果としてレビュー完了から記事公開までのタイムラグを大幅に短縮できました。
その後、大きな不都合はありませんでしたが、細かい点で気にことがあり、改善したい気持ちはありつつ、日々の業務に追われてなかなか着手できていませんでした。
AI ツールの導入
そんな状態で日々を過ごす中、AI ツールが立て続けに正式導入されました。
ZOZO では GitHub Copilot, Gemini CLI, Claude Code (Maxプラン), Codex をはじめとする AI ツールを利用できます。せっかくの機会なので Claude Code さんに“こうして欲しい”を伝えつつ、技術スタックもアップデートしてもらいました。
見た目のアップデート
主目的は機能追加且つ限られたメンバーしか触らない社内ツールなので、見た目にこだわりすぎる必要はなかったものの、Claude Code さんは“いい感じ”にしてくれました。
技術スタックのアップデート
あわせて技術スタックもモダナイゼーションを図ってもらいました。コードベースは全面的に書き換えてもらいました。私は◯◯して欲しいを指示しただけです。
| カテゴリ | 移行前 | 移行後 |
|---|---|---|
| ビルドツール | Vue CLI 5.0.8 | Vite 6.0.5 |
| 言語 | JavaScript (ES5) | TypeScript 5.7.2 |
| Vue バージョン | 3.2.13 | 3.5.13 |
| 画像生成 | dom-to-image | html-to-image |
| 型チェック | なし（jsconfig.json） | TypeScript + vue-tsc |
| コンパイラ | Babel | Vite (esbuild/Rollup) |
| ESLint | 7.32.0 | 9.17.0 |
| 設定ファイル | babel.config.js, vue.config.js | vite.config.ts, tsconfig.json |
このカバー画像ジェネレーターの肝は、HTML で構成された画像とテキストを、ZOZO TECH BLOG のカバー画像に最適化させる形で出力させるところにあります。ツールを作った当時は安易に dom-to-image を選択していましたが、その時からメンテナンス性や使いやすさの観点から html-to-image に分があったことを踏まえ、html-to-image を利用する形で書き換えてもらいました。
奇しくも同日の別シリーズに HTML(DOM) を画像化する技術背景を紹介した記事が公開されています。あわせてご覧ください。
おわりに
AI ツールは 0➔1 も得意だと認識していますが、今回は既存コードからその仕様を汲み取り、さらに追加要件を満たしてもらいました。
ZOZO の技術広報ロールは開発組織に属しているメンバーで構成されているので、AI ムーブメントの勃興以前から自分たちでどうこうできることが多い方でしたが、昨今の AI ムーブメントは ZOZOTOWN や WEAR をはじめとするプロダクトコードはもちろん、その周辺ツールや、今回のような直接プロダクトとは関連しない領域にもプラスの影響を与えています。
今回紹介した例はあくまで一例です。エンジニア系ではない職種・職域の方が技術広報ロールを担っていることも多々あると思いますが、AI ツールによって技術広報ロールの働き方はもちろん、ちょっとしたツールであればもはや誰でも作れる世界がきているので、そういった観点で取り組んでみると面白いかもしれません。
現場からは以上です！
Discussion