Zenn
🐙

InDesignとVRoid Studioを用いてイラスト付き対話形式の技術同人誌を作ってみた話

2022/09/18に公開
InDesign
技術書典
VRoid
技術書典13
技術同人誌
tech

はじめに

現在、技術書典13が開催中です(2022/9/25まで)。
今回は久々にオフライン開催もあった為か新刊が数多く出展されています。
そして、その中でも特に対話形式や物語形式のものが増えてきたかな、という印象があります。
対話・物語形式のような表現方法は、難易度の高い技術情報の敷居を下げ、読者の裾野を広げる良い手法だと思います。
私もこうした形式の技術同人誌を執筆しているのですが、ありがたいことに「楽しく学べた」や「ずっとガチの技術解説だと読むのが疲れてしまうので対話パートで息抜きできるのは良い」といった感想をいただいています。


こんな感じの本を執筆しています
https://quic.booth.pm/items/3848264

しかし、対話・物語形式の技術同人誌の中で、上記のような本文までイラスト付きのものはまだそれほど多くありません。
そこで、当記事では「イラスト付き対話・物語形式の技術同人誌作成ノウハウ(自分でイラストが描けない人向け)」について共有してみます。
イラストを用いた技術同人誌を執筆したいと考えている人の力に少しでも慣れたら幸いです。

当記事を読んで得られること

  • VRoid Studio という 3D キャラクター作成ツールを使って技術同人誌向けのイラストを自前で用意する方法
  • 3D キャラクター作成ツールをイラスト作成に活用するメリット
  • InDesign を使った本文内にイラストを用いた技術同人誌の編集方法

対話形式に関するノウハウではなく、イラストの作成とその編集にフォーカスをあてた内容であることに注意してください

キャラクターイラストの作成

まず、自分が用いているキャラクターイラストの作成手法を、採用の経緯も含めて紹介します。
その後、そのイラストを用いて技術同人誌を編集する事例の解説を行います。

きっかけ

私の場合、「りあクト！」の著者である大岡由佳さんの blog 俺の技術同人誌がこんなにラノベ仕立てなわけがない に感銘を受け、対話・物語形式で技術同人誌を書いてみようと思い立ちました。
ただし、単に真似するだけでは面白くないので、自分なりの色を出せればと以下の特徴を持たせています。

  • キャラクタをより立たせ、ライトな雰囲気を出す為にイラスト付きの対話形式に
  • イラスト付きの対話で全て解説するとページ数がすごいことになるので対話部と解説部を分ける
  • 異世界ものの小説やアニメが流行っていたので、よりエンターテイメントテイストを強く出せる異世界を舞台に
    • (この点についてはやり過ぎたかなと正直反省しています)

特にイラスト付きの対話形式については、前述した通りまだ採用している技術同人誌が少なかった為、手探りで調査を始めました。

外注の検討

対話・物語形式で技術同人誌を作成するには、以下のように非常に多くのイラストのバリエーションが必要です。

  • 表紙イラスト
  • 対話形式用のバストアップイラスト × キャラ分
  • 上記バストアップイラストの表情差分！ × キャラ分
  • キャラ紹介用立ち絵 × キャラ分

ストーリー展開に多少厚みを持たせたかったり、会話のバリエーションを増やす為に、登場キャラクターも 3 人以上にしたいところです。
しかし、残念ながら自分は絵心は全くありません。
ありがたいことに、最近はココナラさんのような手軽にイラストを外注できるサービスがたくさんあります。
そこで、こうしたサイトで上記の条件で依頼を試算してみました。
結果、軽く 10 万円を超えてしまうような予算感になることが分かりました……。

私の一作目の技術同人誌売上は 70 冊程度(利益は 3 万円程度)でしたので、「最低でも 10 万円」という予算規模はちょっと用意できそうにありません。
表情差分の数を削ったり、キャラ紹介の立ち絵を削ることで減額は可能ですが、こうした妥協は最終手段にしたいところです。
何とか代替手段はないか、と探していたところ、 3D キャラクターを自作できるあるサービスが目に入りました。

3D キャラクター作成ツールの検討

丁度この頃(2019 春あたり) VTuber のブームが盛り上がってきたこともあり、商用利用可能でお手軽にクオリティの高い 3D キャラクターを作成できるサービスが登場し始め、自分の目に入る機会も増えてきていました。
そこで、こうしたサービスを使って 3D モデルを撮影することでイラストに用いることを思いつきました。
3D モデルを自作できれば、表情やポーズ等の差分イラストも作成し放題です。
こうしたサービスはその背景から漫画やイラスト風の表現ができるものが多く、イラストに向いているのも大きな要因でした[1]。
絵心がない自分がちゃんとしたキャラクターを作成できるかが懸念事項でしたが、ゲームのキャラクタークリエイトに UI が似てる事が多く、ゲーマーである自分にもある程度良い感じに作成できそうなのも幸いしました。

後は技術同人誌のイラストとして採用できる為の条件を細かく詰めて、

  • 様々なポーズ、アクセサリーがデフォルトで用意されている
  • 商用利用可能

といった理由から Vカツ というサービスを使うことに決めました。

Vカツ

VカツはIVRがサービスを展開していた(詳細は後述)VTuber支援サービスです。
母体が長年 3D のアダルトゲームを作成してきた ILLUSION という会社なのもあってか[2]、当時としては素人でも比較的簡単に高クオリティの 3D モデルを作成することができました。

Vカツは本来 VTuber 支援向けのサービスなので、キャラクターをクリエイトしてそれを他のオンラインサービスへ展開するのが主な機能です。
一方で、作成したキャラクターを確認する為のスタジオ機能も持っており、更にそこで撮影したスクリーンショットの商用利用が可能と規約に明記されている、当時では珍しいサービスでした。
この規約は本来は VTuber のグッズ販売を意識した者だと思いますが、技術同人誌への活用にも適用できそうです。

と言う訳で、まずはこのVカツを使ってイラスト付きの対話・物語形式の技術同人誌を実現しました。

Vカツの終焉

Vカツを使ったイラストの技術同人誌を二冊程頒布し、更なる展開を検討していたたある日(2022年1月13日)、突然Vカツのサービス終了が発表されました。
更に、これに伴い規約が以下のように変更されてしまいました。

■サービス終了後（2022年6月30日以降）のキャラクターの使用制限について
サービス終了後はVカツのキャラクターの使用は出来ません。
それに伴い、「キャラチケット」を使用してニコニ立体・THE SEED ONLINEにアップロードしたVカツのキャラクターもご使用いただけなくなります。サービス終了後は該当のキャラクターをユーザーさま側にてご削除いただけますようお願い申し上げます。
また、Vカツのキャラクターを使用した画像・動画コンテンツ等につきましても、サービス終了後の新規投稿・配布・販売は出来ません。
なお、本件サービス終了に伴い、Vカツ利用規約の一部を変更させていただきました。恐れ入りますがご確認宜しくお願い申し上げます。

サービス終了だけだったら終了前にスクリーンショットの撮影を行っておけば何とかなったのですが、この規約の変更は既刊であってもイラストが使えなくなる[3]ので、イラストを全て作成し直し、差し替える必要に迫られてしまいました。

Vカツからの移行先の検討

Vカツのサービス終了が発表されたタイミングは最初にVカツの採用を検討した時から 3 年ほど経過しており、VRChatやVTuberブームの過熱を背景にその他の 3D キャラクタークリエイトサービスの選択肢もかなり増えていました。
そこで、以下の選定基準で各種ツール・サービスの検討を行いました。

  • 権利関係がはっきりしている
    • Vカツのように変更されるパターンは諦める
  • 表紙や立ち絵にも使える
    • 全身がモデリングでき、ポーズを取らせることができる
  • 服装やアクセサリーなどを自由に変更できる

結果、専用の服装やアクセサリーが Booth で数多く出展されていたのが決め手となり、 VRoid Studio を採用する事に決めました。

補足 : VRM 形式

VRoid Studio をはじめとして、多くの 3D キャラクタークリエイトサービスは VRM という共通形式の出力に対応しています。

「VRM」はVRアプリケーション向けの人型3Dアバター（3Dモデル）データを扱うためのファイルフォーマットです。glTF2.0をベースとしており、誰でも自由に利用することができます。
また、Unity向けのVRMファイルの読み書きを行うC#による標準実装（UniVRM）がオープンソースで提供されます。
(公式ドキュメントより)

VRM は日本国内ではかなり利用者が多く、 VRM モデルにポージングを付けて撮影するのような様々ツールを有志が提供してくれています。
上記ドキュメントにもあるように、VRM に出力後は Unity で編集することもできるので、各種サービスから出力したデータにパッチをあてるようなことも可能です[4]。
この辺も考慮して、出力するデータの権利関係がしっかりしたサービスを選びましょう。

VRoid Studio とは

VRoid Studio は Pyxiv が開発・運営している 3D キャラクター作成ツールです。
Vカツと同様にあらかじめ用意された人型の 3D モデルに対し、パラメータを変更するだけでキャラクターの作成ができる形式なので、そこまで違和感なくVカツから移行することができました。


パラメータ調整画面例

VRoid Studio でキャラクターを作成する

VRoid Studio でキャラクターを作成するコツはたくさんの方が blog や Youtube 等で紹介してくださっているので、ここでは自分が気を付けたことのメモのみの共有に留めます。

  • 髪や肌のテクスチャは有料のものを使う
    • イラストに向いたテクスチャを販売してくれてる方が居るので、それに差し替えるとグッとスクショ映えするようになります
  • 公式のサンプルモデルをベースにしないで素体モデルから作成する
    • 素体モデルのライセンス

      • ▼CC0ライセンスのモデル
        VRoid Studioベータ版に付属してている以下素体モデル・サンプルモデルは、CC0ライセンス（※）です。著作権を放棄しており、特に利用条件は設けていませんが、提供の主旨をご理解頂き、良識ある利用をお願いいたします。

    • サンプルモデルのライセンス

      • ▼個別の利用条件があるモデル
        VRoid Studioベータ版に付属されている以下サンプルモデルは、利用条件の範囲内で自由に利用できます。著作権は放棄していませんが、改変や配布のほか、幅広い用途での利用を許可しています。
        以下ヘルプ記事にある「利用条件」に従ってご利用ください。

  • パラメータは直接入力することでスライダーより大きい(小さい)値を入れることができる
    • 3D モデルとしては破綻することがありますが、スクリーンショットを撮影するのみであれば問題ないこともあります
  • 自作モデルが上手くいかない場合
    • 改変可能な VRoid Model を販売している方がいるので、それを購入して自分なりにアレンジするのも有りです
    • まずはこうしたモデルでコツを覚えるのも良いと思います

VRoid Studio で服装を変更する

世界観を大事にしたい場合等、服装やアクセサリーをデフォルトから変更したい場合があります。
VRoid モデルに対応したものや VRM に対応したものは Booth に数多く出品されているので、自分のお気に入りのものを探してみましょう。
ただし、服装やアクセサリーは個別にライセンスが設定されていますので、商用利用可能なのかどうかよく確認してから購入しましょう。
商用試用版が通常版と別に用意されていることもあるので注意が必要です。
また、正式版から互換性のない[5] β 版にのみ対応したものも売っているので、自分の使っている VRoid Studio のバージョンにあったものを購入するように注意しましょう。

VRM に出力後に服装変更する

Booth に出品されている 3D キャラクター用のアクセサリーは VRoid Studio ではなく、 VRM 用のものが多いです。
こうした VRM 用のアクセサリーは Unity を使って適用を行います。
アクセサリー適用については Web に多くの情報が公開されていますのでそちらを参考にしてみてください。
自分がお世話になった記事 → Vroid製モデルにunityでアクセサリーを付ける

ちなみに、 VRM への出力にはほとんどのサービスが対応していますが、VRM を読み込むことができるサービスはほとんどありません。
この為、VRM でアクセサリー適用したデータを VRoid Studio 側で修正を加えたい場合には一度 VRoid Studio でアクセサリー無しデータを修正し、それを VRM 出力して再度アクセサリーを適用してあげる必要があります。

VRoid で作成したキャラクターのスクリーンショットを撮影する

3D キャラクターが完成したらいよいよ撮影です。

VRoid Studio にもスタジオ機能はあるのですが、ポーズのバリエーションがあまり多くない為、 VRM に出力して別の撮影ツールを活用するのをお勧めします。
無料～有料で様々なスタジオ系ツールが公開されているので、自分のキャラクターに合ったものを選択しましょう。
大体のツールは表情を編集する機能がついていますので、ポーズやアクセサリーの着用などの機能を重視して選定するのが良いと思います。
また、ポーズについてもライセンスが存在するので、ツール選びの際にはライセンスが明記されているツールを選択しましょう。
私は 松VRさん が開発・公開している VRM Automatic Photographing というツールを利用させて頂いています。
ポーズの種類も豊富で撮影もし易いのでとても助かっています。


VRM Automatic Photographingによるポーズ変更

デフォルメ表情を撮影したい

以下のようなちょっとコミカルなデフォルメ表情をさせたい場合、デフォルトの VRoid モデルでは実現できません。

こうしたデフォルメ表情の実現について検索すると EYE_EXTRA ブレンドシェイプを使った記事が出てきます。
しかし、EYE_EXTRA は VRoid Studio のβ版にのみあった機能なので現在は使えなくなってしまっています。
そこで、自分は VRoid Studio 側で目を限りなく小さくして、Unity 側で表情を付ける際のモデルを差し替えることにより対応を行いました。


目小さくしたモデル

長くなってしまうので詳しい説明は省略しますが、需要があれば解説を別途作成しますのでお気軽にご要望ください。

諸々に掛かった費用

これまでの記事を見て、「肌や髪のテクスチャ、服装やアクセサリーを購入する必要があるのであれば結局外注費用と変わらないのでは？」と思った方も居ると思います。
そこで、折角なので費用についても公開してみます。
まず 3D キャラクタークリエイト関連[6]でトータルで掛かった費用は 22,480 円です。
購入したけど使ってないものが数多くあったり[7]、間違えて非商用利用版を購入してしまって買い直ししたものを引くと 1 万円くらいに収まったのではないかと思います。
実際に利用しているものをざっくりリストアップすると以下のような感じです。

  • 肌、髪のテクスチャ
  • 髪型 (4キャラ分たくさん)
  • 制服 (2種類)
  • パジャマ (1種類)
  • 着物 (1種類)
  • 靴や各種アクセサリーなどの小物

見てわかる通り、点数の割に価格が抑えられているのが分かると思います。
これは Booth で公開されている衣装類の値段が非常に低価格なことに起因しています。ありがたいことです。
ですので、多少試行錯誤してもそこまで費用が嵩みません。
この辺りも 3D キャラクタークリエイトサービスでイラストを作成するメリットと言えるかもしれません。

3D キャラクタークリエイトツールを採用して良かった点

私は対話形式では表情差分がとても重要だと考えているので、低予算で差分をたくさん作れたのが何より良かったです。


主人公表情差分


メインキャラ表情差分

表紙についても気のすむまで試行錯誤できるので、自己満足度がとても向上する効果があると思います。


没表紙

VRM の更なる活用

今回イラストに活用した VRM は、前述した通り 3D のモデリングデータです。
つまりイラスト以外にも、例えば
合成音声とリップシンクを組み合わせて宣伝動画を撮影する
という使い方もできそうです。
宣伝動画以外にも、 Youtube で技術解説動画を作ったり、VTuber としてライブコーディングしたり、技術書を超えた可能性があると思います。
自分もまずは宣伝動画あたりに活用できればと考えています。

おまけ : Vカツからの移行工数

Vカツの代替のサービスの調査からスクリーンショットの完成までに掛かった期間(時間ではなく期間です)が気になる人が居るかもなので、おまけとして記載しておきます。
　Vカツからの移行工数 : 3週間
細かい作業が多かったのもありますが、やはりツールに慣れて満足のいくキャラクターを作れるようになるまでに一番時間が掛かりました。


一日目に作ったキャラクター……

ちなみに、VRM のモデル作成についてもイラストのように外注することが可能ですが、イラストより高くつくことが多いです。
更なる活用等を考慮してクオリティの高いモデルを外注するケースもこれから出てくるのかな、と考えています。
例えば、配信で活躍している VTuber が本の中でイラストで解説してくれる、とかも面白いと思います。

作成したイラストを使って技術同人誌を作成する

イラストの目途が立ったので、次は技術同人誌にどうやってイラストを組み込んでいくかを考えます。
技術同人誌の執筆には Re:VIEW というツールがよく採用されています。

Re:VIEWは電子書籍と紙書籍のための、簡潔かつ強力なデジタル出版ツールです。コンピュータ書等の技術書籍（紙・電子）の商業出版や同人出版に利用されています。
(公式ドキュメントより)

Re:VIEW は独自の記法を採用していますが、マークダウンに慣れ親しんでいる人ならそこまで違和感なく受け入れられると思います。

Re:VIEW フォーマットはアスキー社（現カドカワ）の EWB を基本としながら、一部に RD や各種 Wiki の文法を取り入れて簡素化しています。
(Re:VIEW フォーマットガイドより)

更に原稿を GitHub のような VCS で管理し易し為、非常にエンジニアに親和性が高いツールです。
更に、技術書籍に特化している為、細かい設定を必要せずにそれなりの見栄えの技術同人誌を書くことができます。
実際、自分も一冊目の技術同人誌を書いた際は Re:VIEW に大変お世話になりました。

しかし、Re:VIEW はその特性上イラストの取り扱いや自由なレイアウトは苦手です。
イラスト付きの対話形式は取り扱うイラストも多く、レイアウトもかなり凝った形にする必要がある為、残念ながら Re:VIEW で執筆を行うのは厳しそうでした。
そこで、他の執筆ツールを色々検証した結果、結局 InDesign というツールを採用しました。

InDesign とは

InDesign は Illustrator や Photoshop 等で有名な Adobe 社の書籍執筆向けのツールです。
プロユースなのでレイアウトは自由自在で、その他の機能も物凄く豊富です。


InDesign編集画面例


透かしを入れたりちょっと凝った文字表現も自由自在

ただし、自由が効くということは、その分自分で頑張ってレイアウトを作らないといけないことも意味します。
無料のレイアウトテンプレートは数多く用意されていますが、自分なりの書籍にするにはやはり数多くの設定が必要です。
更に、操作もちょっと癖が多く(Illustrator や Photoshop に慣れているとそんなことはないようですが)、個人的には慣れるまでには時間が掛かりました。


ルビ一つ取っても設定の数がものすごい

InDesign でキャラクターイラストを管理する

それでは InDesign でイラストをどう管理するか見ていきましょう。

InDesign では、ページに埋め込む画像はローカル PC または CC (Creative Cloud) へ保存したものから参照できます。
CC は Adobe が提供するクラウドストレージサービスで、Adobe の各種製品と連携ができます。
InDesign を年間契約した場合は容量はなんと 100GB [8] です。
技術同人誌の用途としては無限の容量ですね。


CC 管理画面

画像の管理は専用のウィンドウが用意されています。
使っているページへのリンクやローカル参照でリンク切れしている際の警告等、同じイラストを色々な所で用いる対話形式のイラストの管理にはもってこいです。


画像リンクの管理画面


一括差し替えも勿論できます

InDesign で技術書を執筆する

イラストの用意ができたので、軽く InDesign の使い方も紹介しようと思います。
細かい InDesign の使い方については公式のチュートリアルが非常に充実しているのでそちらを見て頂くのが良いと思います。

InDesign でイラストを配置したい場合は配置したいオブジェクトをクリックして、 CC ライブラリから「リンクを配置」を選べば OK です。


イラスト配置手順例

文字サイズの変更等、コンパイルを必要とせずにリアルタイムで完成形を閲覧しながら調整ができるのが大きな強みです。
イラスト付きの対話形式のような細かくイラストを配置し、レイアウトを調整したい形式の書籍にはこうした機能が大いに役立ちます。

InDesign で技術書を印刷する

最後に InDesign で完成品を印刷する際の便利機能についても紹介します。

InDesign には PDF の書き出し機能があるので、私はこれを用いて入稿を行っています。

PDF 出力は設定が豊富で、カラーデータから白黒で印刷するようなプリセットもすぐに作成することが可能です。
面倒な埋め込み画像の ppi の調整についても出力時に指定 ppi 以上のものを圧縮するような機能があります。便利。


埋め込み画像の ppi 設定

また、初期プリセットが非常に優秀で、これを用いることで入稿時の細かい設定を省くことができる印刷所もあります。
例えば「ねこのしっぽ」さんの PDF 入稿では、書き出しプリセットを「雑誌広告送稿用」にすれば他に細かい設定は不要です[9]。

InDesign の欠点

ここまで InDesing の良いことばかりを挙げて来ましたが、勿論欠点も存在します。

まず、年間契約する場合、お値段が 28,776 円も掛かってしまいます。
幸い月々プランも用意されているので、執筆期間を集中させることで利用料を節約することが可能です。


InDesign の月々プラン

次に、レイアウト調整に無限に時間が取られる点が挙げられます。
気付くと時間が溶けています。
自制すれば良いだけの話なのですが、凝り性の人はついついやってしまうので注意しましょう。
ちなみに、自分の場合はレイアウトやらフォントに凝り過ぎて印刷した時に読み辛い感じが出ていまっているので、次はもう少し読み易いシンプルなレイアウトを心掛けたいところです。

まとめ

「イラスト付き対話・物語形式の技術同人誌作成ノウハウ(自分でイラストが描けない人向け)」の共有は以上で完了です。
長くなってしまったのでまとめで振り返っておきましょう。

  • VRoid Studio でキャラクターイラストを作成するメリット
    • 外注するより安価でイラストの用意ができる
      • 特に豊富な表情差分を用意できる
    • 追加費用無しで試行錯誤を繰り返すことができる
    • イラスト以外の用途にも展開することができる
  • InDesign を使うメリット
    • 多数のイラストの管理・配置を楽に行うことができる
    • イラスト付きの対話形式のような凝ったレイアウトにも対応できる

当記事を読んで、「自分もイラスト付きの対話・物語形式の技術同人誌を書きたい！」と思って頂ける方が少しでも増えれば嬉しく思います。

脚注

  1. 最近はアニメにおいて CG が使われる事も多いので、ユーザが違和感を抱き辛い下地も出来ていそうに思います ↩︎

  2. Vカツ自体は全年齢向けのサービスです ↩︎

  3. Vカツを使った画像の紹介が当記事にないのはこの規約変更によりblogでの利用もできないからです ↩︎

  4. サービス側で対応していない表現や拡張を自分で頑張れば何とかできるのはエンジニア的には魅力的だと思います ↩︎

  5. 手動でごにょごにょすることで着用することはできますが、表示が崩れたりすることも多いのであまりお勧めしません ↩︎

  6. 『くいっく』HTTP/3編 及びその続編の DATAGRAM 編のキャラクター作成に掛かった費用 ↩︎

  7. 着せ替えが楽しくなってつい…… ↩︎

  8. プランによって容量が異なるので契約時にきちんと確認しましょう ↩︎

  9. https://www.shippo.co.jp/neko/howto/tips/15mameneko_InDesign.pdf 参照 ↩︎

Discussion