ラクスルの印刷事業でエンジニアリングマネージャーをしている堀です。
直近では、Canvaとラクスルのパートナーシップに伴い、Canvaのデザインデータをそのまま入稿できる機能をチームで開発し、10月末にリリースしました。
本記事では、このプロジェクトを題材に、8月から10月にかけて実践した「プロダクト開発におけるAI活用の登り方」を振り返ります。
想定読者
- 開発チームでのAI活用の始め方や進め方の具体像がまだ見えていない方
- 既にAIを活用しており、プラクティスや改善提案の観点で知見を共有いただける方
- 前提となるCanva連携の開発概要に興味のある方
前提：どんな開発をしていたか
ラクスルは、名刺やチラシなどをオンラインで簡単に注文できる印刷ECプラットフォームです。今回の取り組みでは、Canva上で作成したデザインをそのままラクスルで入稿できる機能を開発し、10月末に公開しました。
- canva.comでデザインを開き、アプリから
RAKSULを起動すると、デザインサイズに応じた名刺などの購入動線が自動で提示されます。 - raksul.comの入稿フローで「Canvaから入稿」を選ぶと、Canvaのデザインデータを直接取得して入稿できます。
詳しくはこちら
ラクスルとしての機能はシステムを分割して実装し、raksul.comに組み込んでいます。将来的な横展開を見据え、拡張しやすいアーキテクチャを採用しました。
開発期間と技術選定
本プロジェクトは、8月下旬に本格始動し、約2ヶ月で10月末リリースまで到達しました。短期間で品質とスピードの両立が求められる中、以下の方針をチームで合意しました。
- 早期にユーザー価値を届けるため、短いサイクルでアウトプットを出す
- 横展開しやすく、技術的負債になりにくいアーキテクチャを選ぶ
- AI活用を前提に開発プロセス全体を設計する
技術選定の考え方
ラクスルのECは取り扱う商材やサービスごとに複数のシステムに分割され、さらに「入稿」「決済」「デザインシステム」などのコンポーネントで構成されています。新しいコンポーネントを増やすと横展開は容易になりますが、メンテナンスコストの増大が課題になります。
「Canvaからデザインデータを取得する」コンポーネントをnpmパッケージとして配布する際、特定のフレームワーク前提となると、導入先のECの技術スタックに依存します。そこで、デザインデータを扱う「UIKit」として切り出し、Web標準であるWeb Componentsで実装する方針を採用しました。これによりフレームワーク非依存での再利用性を確保し、将来の展開時に生じうる制約を最小化しました。
こうした背景の中で、短期間の開発でも質とスピードを両立させるため、AIでスループットを高めてやり切るという意識をチーム全体で共有しました。
AI活用の目標設定とアクション
本題です。
プロジェクト開始時、全社的なAI活用推進に呼応し、チームの目標を「AI Editorをフル活用し、新しい高生産性の開発スタイルを確立する」としました。
まずはチームでその目標についてブレインストーミングを行い、実行可能なアクションを洗い出し、Cursorの活用方針やAIによるコードレビューなどの具体策を合意しました。
開発プロセスへのAI組み込み：実体験
当時Copilotの補完やChatは使っていた一方で、エージェントに主導させるVibe Codingの経験が少ないメンバーもいました。水準を引き上げるため、以下の2点に取り組みました。
- コマンド化したワークフローで、ほぼ自律的にAIに実装させる体験から始める
- 使い方やTipsを同期的に共有する場（モブプロ、勉強会）を定期的に設ける
1. コマンド化したワークフローで自律実装を促す
当時、Devinは利用可能でしたが、複雑な実装ではやりきれないケースが目立ちました。まずはCursorを軸に、やりたいことを柔軟に実現しアウトプットを増やすことを優先しました。
各工程を自動実行するコマンドを用意し、それらを連続実行するワークフロー（例: /full-workflow）を用意。Issueを作成したらコマンドを実行するだけで、TDDによる実装からPR作成まで進むようにしました。コマンドはリポジトリ内に配置し、チームで共通利用できるようにしました。
2025年8月当時はCursorにPlanモードやSlashCommandがなく、mdファイルとルール定義で代替していました。現在は公式機能として提供されており、汎用コマンドはチーム、ドメイン特化はリポジトリという配置が相性が良いと感じています。
2. 同期的な場で使い方とコツを共有
コマンドがあっても、どの場面でどう使うかが掴めないと活用の差が出ます。モブプロや共有会で実演し、使い方の底上げを行いました。
例えば、MCPの活用については、以下のような使い方を紹介しました。
- Canvaが公開しているMCP dev serverを活用し、設計シーケンス図（Mermaid）をラクスルのコードと併せて自動生成
- Canva Appのコンポーネントやガイドライン適合性を、MCP経由で情報取得しつつ確認
- Figma MCPとPlaywright MCPを組み合わせ、デザインデータ取得から実装、補正までを半自律化
ラクスル側とCanva側の両コンテキストを与えた状態で設計させると、設計品質の向上が顕著でした。各メンバーの経験に閉じがちな知見は、積極的に共有しました。
活動の結果
Vibe Coding未経験のメンバーからも「活用のハードルが下がり、工夫できるようになった」という声が多く上がりました。開発だけでなく、以下の工程でもAI活用が活発化しました。
- 要件確認・設計支援
- 結合試験項目の自動生成
- レビュー支援（コードレビューの観点出し、差分要約など）
- ドキュメント自動生成（外部チーム向け資料、MCPの生成など）
定量面でも、プロジェクト進行時のベロシティは過去比で約1.5倍、マージPR数も倍以上に増加。アウトプット増に合わせてペア・モブレビューを増やし、スループット最大化を意識したことが生産性向上に寄与したと考えています。
さいごに
2025年はAIの進化が特に大きく、チーム開発の在り方にも変化をもたらしました。重要なのは、ツールの有無ではなく、チーム全体で「どう使うか」を具体化し、継続的に学習していくことだと実感しています。今回の事例が、AI活用の初手づくりや次の一歩を考えるきっかけになれば幸いです。
