チームで挑むWebtoon制作の爆速効率化【Figma活用方法】
こんにちは！ taskeyのプロダクトマネージャー（PM）のusuiです！
私の所属するPlatform Division（開発チーム）には、PMの他にもエンジニアやデザイナーが所属し、taskeyが運用するアプリ「peep（ピープ）」の開発だけでなく、Webtoon事業における効率化も行っています。
今回のnoteでは、デザインツールとして使われることの多い「Figma（フィグマ）」を導入し、Webtoon制作における課題をどのように解決したか・どのように効率化したかという話を書いていきたいと思います！
1. Webtoon制作の課題
前提として、Webtoonの1話分は縦幅が数10万pxにも及ぶ超巨大なファイルです。かなり重くなるため、制作過程では1話分が複数に分割され修正・納品されていました。また、複数人のチームで制作を進めるため、赤入れ（修正指示）を複数人に共有する必要があったり、修正前後での確認も必要になるなど、それに対応できる環境が必要でした。
Webtoonプロデューサー（編集者）にヒアリングを行い、下記のような要望がありました。
＜Webtoon制作における課題・要望＞
🤨 1話をひとつなぎにして簡単に確認したい
🤨 チーム内への「赤入れ」の共有を楽にしたい
🤨 修正前後のデータを横並びにして確認したい
🤨 スマホで読んで実際の読書体験の確認をしたい
以前は、分割されたファイルを打ち合わせの度に調整して1話分としてまとめ全員に共有していたり、赤入れ方法が属人化しており効率的にメンバーに共有できていなかったり、修正差分の確認も前後のファイルをいちいち開いて行っていたり……ネーム・下書き/線画・着彩など、各工程でブラッシュアップを加えるたびにこのような作業が発生し、作業的な部分に多くのリソースを割いている状態でした。
2. 効率化ツール「Figma」とは？
前述のような課題解決に「Figma」を使ったのですが、このツールはブラウザで使えるデザインツールで、元々はtaskeyでもデザイナーチームがアプリ開発に取り入れていました。利便性が高く直感的に使えるため、デザイナーでない私もアプリ向け施策の進行に重宝していました。
＜Figmaの利点＞
✍ デザインの修正を複数人でリアルタイムに行うことができる
✍ デザイン上のどこにでもコメントを入れることができる
✍ プロトタイプモードでUIの確認がすぐできる（スマホでの確認できる）
✍ ワイヤーフレームが簡単に作れる
3. Webtoon制作工程でのFigma活用例
このように、Figmaはとても便利なデザインツールで、Webtoon制作においては制作の実作業ではなく主にチームでの情報共有に活用しています。1作品に複数人が携わるWebtoon制作を進めるにあたって、クオリティと効率を担保しながら、チームの視座を揃えて制作を進められるのがFigmaです！
Figmaでは、一度にインポートしたいくつもの画像をオートレイアウト機能で整列させることが数秒でできます。また、修正前後のファイルを横並びにして確認することも可能です。（Googleドキュメントのように作業は全て即時反映され、保存の操作も必要なし）
コメント機能や別途作成したメモを使うことで、チーム全員で赤入れをし、その赤入れに対するやりとり内容を残しておくことも簡単にできます。
スマホでの読書体験の確認に関しても、スマホに見立てた画面をPCで確認できますし、Figmaアプリを使えば実際のスマホを使っての確認もリアルタイムで可能です。
4. さらなるFigma攻略法
実際にWebtoon制作過程でFigmaを使ってみると、いくつかの課題がありました。
①超巨大ファイルのアップロード攻略
Figmaの仕様上、長辺が4096pxを超えるファイルは圧縮して表示されてしまうためWebtoonの1話分のファイルを読み込ませてみると、画像がガビガビに……。画像も文字も荒くなって読めない事態が起こりました。
しかしながら、Figmaには先人の方々が作ったプラグインが使えるという強みがあります！
大きな画像ファイルをFigmaで表示できるサイズに切り出してくれるInsert Big Imageというプラグインを使うことで解決しました👏
②超巨大ファイル書き出し攻略
これはFigmaだけでなく、OS・ブラウザの限界でもあるのですが、1辺数万pxを超える超巨大な画像ファイルが書き出せなかったり、途中から表示が崩れほぼ見れなかったりしました。
先人たちが作ったプラグインも見つからず、諦めるしかないかな……と思っていたのですが、「プラグイン作れると思います」という社内エンジニアの心強い言葉が！！なんと、社内で開発することで解決。PDFとZipファイルは社内で使えるところまでプラグインの実装が進んでいます👏
ここまで攻略が進んでいるものの、Webtoonのような超巨大ファイルをいくつか横並びにしていると画像読み込みに時間がかかってしまうという課題も残っています。いくつかの対処で少し改善した部分はあるのですが、あくまで対症療法だなという印象です。（有益な情報をお持ちの方がいらっしゃったら、ぜひお聞きしたいです！）
5. 開発視点でのWebtoon効率化について
3月からトライアルでFigmaを使い始め、社内での反応も良く、まずは上々な滑り出しかなと思っています！ チームでの情報共有にお悩みの方は、無料で一通りの機能が使えるSTARTERプランもあるので、使用感を試してみるのもありだと思います！
最後に、今回はFigmaメインでの効率化施策でしたが、開発チームではアプリの改善とともに、他にもいくつかWebtoon制作を効率化できる施策の実行を予定しています。
できる限りtaskey STUDIOでのWebtoon制作がストレスフリーなものになるよう、今後も開発視点を活かしていこうと思っていますので、エンタメ業界に興味がある方、何より「ヒット作をつくりたい！」という熱意のある方は、ぜひ一緒に働きましょう〜！！！
taskey STUDIOでは、Webtoonを一緒につくる仲間を募集しています！
👇ご応募はこちら👇
taskey STUDIO公式Twitterでは、Webtoonに関する情報を発信しています！Webtoon制作について興味を持たれた方や今後も情報を集めたいという方、是非フォローをお願いいたします！
👇taskey STUDIO公式Twitter👇
この記事が気に入ったらサポートをしてみませんか？