Works／ 制作実績へ
自社システムCREATIVE TOOL
漫画制作Webエディタ「Canvas Studio」
コマ割り・吹き出し・効果音・セリフを、 ブラウザだけで自在に扱う漫画制作エディタ。
Ruby on RailsPostgreSQLHotwireFabric.jsTransformers.jsTailwind CSS
Overview
システム概要
漫画制作には、コマ割りや吹き出し、セリフ、効果音など、多くの要素を配置する手間があります。 Canvas Studioは、これらをCanva風の直感的な操作でまとめ、ブラウザ上で完結。AIによる背景透過まで含め、制作のテンポを止めません。
Features
主な機能
コマ割り
ポリゴンベースの自由なコマ配置。テンプレートからの適用も可能。
吹き出し
プリセットシステムで配置。フォルダ管理のエクスプローラーで素材整理。
セリフ（縦書き対応）
縦書き/横書き対応、Google Fonts 40種以上。自動スケールにも対応。
テキストエフェクト
袋文字・中抜き・グラデーションなどを一括適用。
効果音
フォルダ管理と色違いバリエーション。クリックでランダム配置。
背景透過AI
ブラウザ上のAI処理（Transformers.js + RMBG-1.4）。調整ブラシ付き。
Undo / Redo・自動保存
キャンバス操作50回分の取り消しと、デバウンス方式の自動保存。
一括ZIP出力
全ページをPNG/JPEGでまとめてZIPエクスポート。
招待・管理画面
管理者が招待リンクを発行。ユーザー管理・ロール付与に対応。
In the Browser
ブラウザで完結する制作体験
インストール不要。重い処理もブラウザ内で行い、制作の流れを止めません。
01
AI背景透過
Transformers.js + RMBG-1.4 をブラウザ内で実行。画像をサーバーに送りません。
02
縦書き＆40書体
Google Fonts 40種以上に対応し、漫画らしい縦書き表現も自在。
03
止まらない操作
自動保存とUndo/Redoで、思いついた配置をテンポよく試せます。
Tech Stack
技術スタック
Fabric.js でキャンバス描画を行い、Transformers.js + RMBG-1.4 によるブラウザ内AI背景透過を実装。本番ではファイルを Cloudflare R2 に保存します。
Ruby on RailsPostgreSQLHotwireFabric.jsTransformers.jsTailwind CSSJSZipDeviseCloudflare R2