AI編集アシスタント開発記

この記事について

こんにちは、icchie です。
AI エンジニアリング室のフロントエンドエンジニアをしています。

この記事では2025年6月にリリースしたおまかせ編集アシスタント(以下、編集アシスタント)の開発ジャーニーを私の個人的な観点からご紹介します。

2024年から2025年にかけて、 AIの世界は大きく動きました。Cursor や Claude Code の登場により、AI 駆動開発が一気に加速したのです。
その流れの中でお客様向けに AI エージェント機能を開発する面白さや工夫をお伝えできれば幸いです。

はじまり

「いっちーさん、Claude Artifacts を作りましょう！」

私の Teachme Biz および編集アシスタントへの関わりは、2024年7月3日、久しぶりに話した近藤さん（@kondokenjibai）の一言から始まりました。

当時、私はちょうど前職を辞めたところで 2ヶ月くらい夏休みを取ってから職を探そうかと思っていたところ、休みに入って 3日目で前職の同僚でもある近藤さんからお声がけをいただいたのでした。

Teachme Biz のマニュアル編集を Claude Artifacts のようにチャットと成果物を見ながら出来るようにしたいということでした。

2024年前半の当時のコーディングエージェント事情を振り返ると、 GitHub Copilot はありましたが、Claude Code はまだなく、ChatGPT にコードを貼ってはコピペしたりしていました。その後、チャットをしながら成果物を確認できる Claude Artifacts が 6月頃にリリースされて AI とのチャットインタフェースとは成果物を分けて扱わせるという体験は新しいものでした。

Claude Artifacts のような体験を既存プロダクトに組み込み、AI に触れていないユーザーでも使いやすく提供するということは非常に面白いプロジェクトであり、夏休みを 2ヶ月取ることよりもプロジェクト参画を私は即決して、8月から参画となったのでした。

Build and Show

参画時点で編集アシスタントの PoC と呼ぶべきものは近藤さんが streamlit で作っていたものがありました。また、サーバーサイドは Yuta さん（@kenzan100）が Rails で先行して開発着手していました。（Yuta さんの編集アシスタントについての記事はこちら）

まず、最初の目標は 9月の全社総会でまずは動くものをお披露目するという予定でした。
このバージョンのスコープはマニュアルの要素のうち、タイトル・本文という文字情報だけを取り扱うものでした。

技術スタックとしては Teachme Biz 本体と同様 Rails + Vue の構成がベースです。
個々のコンポーネントを作っている時間はないので、いったん UI はすべて Naive UI を使う方針で始めました。

当初はいったんリッチな体験を目指さないとしていたものの、Yuta さんが ActionCable 周りを組み込んでくれていたこともあり、 SAX ライクな JSON パーサーを入れて、ストリーミングでもチャットだけではなくマニュアルも表示するようにしたりしました。1ヶ月で作ったにしては結構動くバージョンができたのでした。
以下はそのバージョンになります。
まずはチャット欄とマニュアルプレビューのあるシンプルな 2 カラムとなったのでした。

これを全社総会にてお披露目したところ、多くの期待に溢れた反応をいただいてモチベーションとなったのでした。

メディア対応とプロダクトアウトとしての AI プロダクト

1回お披露目した編集アシスタントでしたが、Teachme Biz のマニュアルは画像を取り扱ってこそなので、次のマイルストーンとして画像・動画というメディアの取り扱いが始まりました。

サーバーサイドにメディアライブラリという仕組みを用意して、AI にどんな画像を使っているかメタデータ生成させて、それとマニュアルの文字情報で付け合わせて、画像の入れ替えなどを出来るようになりました。

当初の想定としては動画からマニュアル半自動作成で作ったマニュアルの手直しを編集アシスタントが行う際に、画像や動画を認識出来ることが目的でした。

しかし、思ってもいなかった副産物として、マニュアルが空の状態でメディアライブラリに使いたい画像を複数枚入れると、その画像同士の関係性を AI が自分で考えてマニュアルを作ってくれるという想定していなかった機能が生まれたのでした。
これは開発陣の誰も想定していなかったので 「AI スゴイ！」という驚きでした。

リサーチ＆デザイン室長の磯野さん（@hideaki_isono）と 1on1 の際に「AI プロダクトはプロダクトアウトにならざるを得ない」という旨をおっしゃっていたのですが、これはまさしく、という感じでした。

使いやすさのための工夫

その他、編集アシスタントを使うハードルを下げるためや使いやすさのための実装を入れています。

まず、1つ目は AI に対するチャット欄があっても何を指示すればよいのかユーザーの戸惑いを軽減する仕組みとして、チームでは「ナッジ」と呼んでいるユーザーからの指示のサジェスト機能が挙げられます。これは AI からの返答後に次にユーザーが AI に指示するとよさそうな指示をいくつかボタンとして提示して、ユーザーはこれを押すだけでも AI 編集ができたり、またはどのような指示を出せばよいのか理解できるというものです。

そして、もう 1つは若干地味であり、ユーザーは気づくこともあまりないのですが、 通信の WebSocket / HTTP Polling フォールバックです。前述の Yuta さんの記事でも触れられていますが、 WebSocket は切れることがあったり、そもそも通らないという環境のお客様もいらっしゃることからこの機能があります。これの頑張りどころとしては、HTTP Polling になっても WebSocket の Streaming とほぼ体験は変わらず、ローディングなどを出すこともなく Streaming として AI との会話やマニュアル生成として提供しています。この辺りはサーバーサイドとのすり合わせが重要で行う UX 改善ですね。

デザイン本格化と Claude Code、そしてリリースへ

そんなこんなで色々な feature を取り込んできた編集アシスタントですが、本番化の前に大きな作業が残っていました。

それはデザインの本番化と同時にエイヤで進めるために入れた Naive UI を剥がす作業が最後に残りました。
デザインは特許周りでも尽力されたhanyuさん に進めていただき、シュッとしたものに決まりました。
そして、 Naive UI を剥がす作業ですが、これはちょうど Claude Code が 2025年2月に Research Preview として公開されたタイミングで個人的に使っていて一番使える！と思っていたので社内利用を可能にしてもらい、早速実践投入して使った結果、コンポーネント置き換えは2週間くらいでサラリと終わり、AI開発の流れを非常に感じたのでした。それから数カ月経って、実際 Claude Code が流行りましたし。

そして、出来上がったのが以下の画面となります。シュッとしている！

その後、リリース前の機能をお客様に紹介・体験・説明するクローズイベントであるスタディストβでのデモや QA を経て、「おまかせ編集アシスタント」としてリリースされ、多くのお客様が使うようになったのでした。

まとめとこれから

編集アシスタントの開発は AI エージェントブームが始まる前から開始し、ちょうど認知が広まるタイミングでリリースできたという時流との一致がありました。そして、それに加えて、AI アウトプットをユーザーの実益につなげる喜び、そして使いやすくするための工夫を重ねていく面白さがあります。

編集アシスタントはまだまだ使いやすくする余地があり、これからもっと役立つものにするため改良を進めています。
AI エンジニアリング室ではこの他にも様々な領域での AI 活用のための R&D や Build & Show を進めています。
今後もご期待をいただけると幸いです。