PowerpointとiSpring Suiteでweb漫画を作れるか?

ツール

突然なのですが、PowerpointとアドインソフトiSring Suiteを使ってweb漫画を作れるか? について試してみました。

iSpring SuiteはPowerpointでeラーニング教材を作るためのソフトウェア製品です(iSpring社のサイト )。私はこれを主に工学部の学生さん向けの教材作りに使ってきました。

どうして教材作りのためのソフトウェアでweb漫画を描こうなんて思ったのか。その説明をしなければなりません。でもその前に、せっかちな方のために結論から申し上げると、

  • PowerpointとiSpring Suiteの現在の仕様では不十分
    元々スライドショーによるプレゼンを目的とした製品なので、web漫画用には向いていないところがある。また、iSpring Suiteには正確に変換できないPowerpointアプリの効果があることもわかった。
  • 漫画・イラスト・絵本などの新しいメディアとしての可能性
    絵(グラフィックス)と文章、セリフ(“吹き出し”)などを組み合わせた作品の閲覧や配布の方式としては可能性がありそう。

結果を早く見たいかたは、以下のリンクをクリックしてください。別タブで表示されます。画面内でのマウスクリックまたは下向き矢印でコマ送りされます。詳しいことは、投稿の後ろの方で説明します。

<サンプル(通常版)>   

<サンプル(オーバーレイ版)>

そもそも教材と漫画では設計思想がだいぶ異なります。実際、私が作ってきた教材は漫画のようなアナログで芸術性も求められるものとは対極のものです。グラフィックスもデジタルで作っているし、内容は技術系のものばかりです。

ですから、「どうして唐突に漫画の話になったのか」が気になると思います。

発端

友人の佐川俊彦に手紙を出したのは今年(2024年)の6月の末のことです。佐川とは小中高と同窓でした(佐川の御父君の転勤のため空白期間はありますが)。

<注を読む>

「読書日記」のどこかの投稿にも書いたと思いますが、このwebサイトの投稿では、ちゃんとした書籍の著者や研究者・学者の氏名には敬称をつけません。それが敬意を表すことになるからです。

研究者、学者、クリエイター(気取った呼び方ですが)でも何でも、その個人を独立したプロとして認めている場合は敬称をつけないのです。少なくとも理科系の学問ではそうなっています。“アインシュタインの相対性理論”であって、“アインシュタイン先生の相対性理論”などとは呼びませんよね。〇〇教授の研究室に院生□□君がいたとします。公の場では、〇〇教授は「□□の提案した方法」、□□君は「〇〇らの提案によれば・・・」のように発言します。文科系の学問ではどうなのかはわかりませんが。

もっとも、佐川とは会えばタメグチで話す仲です(めったに会ったり話したりしないのですが)。敬称を略しても、互いに何てことはないのです。

<注を閉じる>

佐川は、長らく漫画編集者として働いていて、Juneという雑誌を立ち上げたことで知られています。現在は京都精華大学マンガ学部の教授です。(先日、図書館に行ったら、週刊文春のコラムにインタビュー記事が掲載されていた。7月4日号?。)

その彼に手紙を出さなければならない用事があり、その後、電話とメールでのやりとりが続きました。

そのさい、幾つか質問をしたのです。

  • イラストを引用するとき気を付けるべき著作権の問題
    在籍中は教育目的の利用だったので著作権の問題はそれほど気にしていなかった。このwebサイトではイラストを引用することがあるが、「記憶スケッチ」をしたり模写も一部のみに留めたりするなど、気を使っている。
  • web漫画の「縦スクロール」ってどうなの?
    ここで「縦スクロール」とはスワイプによりページ単位ではなく1コマ単位で縦に閲覧していくウェブトゥーン(Webtoon)のこと。スマホの縦長の画面に適しているらしいのでスライドショー教材に利用できるかしらと興味を持った。
  • 漫画業界でのAIの利用について
    昨今は、どうしても、この話題が出てくる。

やはり何でもその道のプロに聞いてみるもので、いろいろ面白いことがわかりました。「著作権の問題」、「AIと漫画」については別の機会にゆずることにします。二つめの質問「web漫画の切り替え方式」に関してお話していきます。

本題に入る前に、「導入」として2コマ漫画の例を示しましょう。

「世界で一番短い推理漫画」(ヤじるし) 書いた当時は鉛筆描き 筒井康隆並びに青山豪昌に負うところ多し

これは、今をさかのぼること二十数年前に私が描いた2コマ漫画を、記憶を基に再現したものです。当時小学生だった子供が、宿題かなにかの課題で提出しなければならない、でも描けない何とかしてくれ、と泣きついてきたのです。提出の日の朝に。

それで、出勤を15分ほど遅らせて描きました。「これは原案だからね。後は自分で何とかしなさい。」と言って鉛筆で描きました。コマ数も4つなんて描けないので2コマにしました。その後、色くらいは本人が塗ったのかもしれませんが、ほぼそのまま提出したようです。

<詳しく読む>

1コマ目の人物は、1994年連載開始の推理漫画の主人公だということはわかるでしょう。ストーリーというかプロット(2コマ漫画にそんなものあるのか?)の方は、どうでしょうか? セリフは、筒井康隆のショートショートにあった「世界一短い推理小説」(題名は間違っているかも)を借りてきました。筒井康隆の意図を活かすのなら、2コマ目だけを使った1コマ漫画にすべきなのです。でも課題が「複数コマの漫画を描く」だったので1コマ目を加えたのだと思います。

というわけで「キャラクターもセリフも他人の作品のパクりじゃないか」と言われれば、その通りです。気持ちは「本歌ほんか取り」なんですけどね。

<閉じる>

この例でもわかるように、通常の漫画は複数の「コマ」で構成されており、それが一度に画像として表示されています。新聞の4コマ漫画では4コマ全部が提示され、複数のページにまたがることはありません。雑誌の場合は、1つのページが複数のコマに分割されていて、それが複数のページにわたって提示されます。

漫画のリテラシー

上に述べたように一度に目に入ってくる複数のコマを、読者は1つ1つ順番に読んでいきます。新聞などの4コマ漫画の場合は、上から下へという順になります。

4コマ漫画のコマの並びは1次元です。ほとんどの人は上から順番に読んでいくと思います。(もちろん生まれて初めて4コマ漫画を読む人、赤ちゃんとか、がどんな順番で読むかは、調べてみないとわかりませんが。)

一方、漫画雑誌の場合は2次元つまり縦と横に拡がった配置になります。そして、日本の漫画雑誌の場合は、右から左、上から下という順にコマを読んでいきます。

<詳しく読む>

実際の読み手の眼や頭の動きは、もっと複雑なことをしているのかもしれません(既に誰かが調べているかもしれません)。読み手はあるコマを見ていると同時に、前後の(あるいはページ全体の)コマに描かれている情報も利用している可能性があります。また、コマの間の「つながり」を周辺視覚から得ているかもしれません。複雑になってしまうので、この辺りのことには深くつっこまないことにします。

<閉じる>

実はこのような読み方が公式(?)なのだ、ということを今回調べて初めて知りました、そんなことを教えてもらったことはありませんし、親や友人・先輩が読み方を教えてくれたという記憶もないです。でも当たり前のように漫画は読めています。たぶん日本にいるほとんどの人は意識しないで漫画を読んでいるでしょう(例外はあるみたいです)。しかし、このような漫画の「読み方のリテラシー」は万国共通ではないようです。

以下は佐川から電話で聞いた話の、web漫画に関する部分の要点です。

  • 漫画が読めない人がいる
    京都精華大学の彼の研究室には中国や韓国からの留学生が在籍しています。その中には、雑誌の漫画が読めない人がいて、例えば大きいコマから先に読んでしまう、というのです。欧米の雑誌は左から右の順なので、日本の漫画を海外で出版するときは版を左右反転するということは知っていました。しかし、コマを読み取れない人がいるということは意外でした。
  • 絵本
    そのせいかどうかわからないけれど、現在、中国や韓国で絵本に興味を持つ若い人が増えているそうです。ほとんどの絵本は1ページまたは見開き2ページで1枚の絵になっているので、コマの読みとりの問題はなくなります。
  • 縦スクロールのweb漫画
    佐川によると「縦スクロールのweb漫画の出現の背景には、簡単で安易な方に流れる傾向がある」ということです。縦スクロール方式では、スマートフォンの画面に一コマの画像が表示されていて、縦方向のスワイプで上下にスクロールします。これなら、コマの配置は一次元つまり一方向になり、二次元配置の場合の読者の読みとりリテラシーは不要になります。要は「読むのが楽」ということになります。
    今後、漫画の新しい閲覧や配信の技術が出てくるとして、それは読者の「認知的コスト」や「認知的負荷」を小さくする方向、つまり楽な方向に進んでいく。その結果、印刷された漫画の単行本や雑誌は読まれなくなっていくだろう・・・というのが佐川の意見です。

漫画のコマの読みとりリテラシーがあること、リテラシーの無い人でも読めるように工夫されているのがウェブトゥーン(Webtoon)に代表される縦スクロールのスマホ漫画であり、漫画業界もその影響を受けていくだろう、ということです。

縦スクロールの漫画を閲覧してみたら

Androidスマホを使って、縦スクロールの漫画(ウェブトゥーン)を閲覧してみました。ほんの1,2の例だけです。私が気が付いたことをまとめると以下のようになります。

  • コマとコマの間に余裕を持たせている
    たぶん、1つのコマを閲覧しているときに上下のコマが画面に入らないようにするためだろう。
  • 上下のコマの情報もある程度把握できる
    とは言え、コマとコマの間隔はあまり広くはなっていないので、上下のコマの情報が把握できる。読み終わった上のコマや、次にくる下のコマを目に入れた状態で画面の切り替えが可能になる。
  • 背景
    セリフの“吹き出し”がコマからはみ出している作品があった。また、別の作品ではコマとコマの間の背景にあたる部分に紙の表面のような模様(テキスチャ)がつけられていた。個人的には、これらの演出により、コマとコマのつながりやスクロールの“流れの速さ”を実感できるように感じた。また、縦方向のスクロールはスワイプの動作に比例したアナログな動きになっている。

以上のように、コマからコマへの移動や注目は楽にできると同時に、漫画全体の流れも意識できるように工夫されているようです。これは、元々複数のコマを同時に見せていた紙の漫画を、アナログ感を残してデジタル化したことから来るのだと思います。1枚1枚の静止画を切替えながら見せるスライドショーをルーツに持つPowerpointとの違いでしょう。

他にもいろいろと工夫がされているところがあるだろうと思います。私は上に紹介したような演出が印象に残りました。「部分に注目させると同時に全体の流れも意識させる」ための工夫はPowerpointを使ったプレゼンでも重要になるからです。

PowerpointとiSpringでweb漫画を作ってみる

私は冒頭で例に挙げた「世界一短い推理漫画」しか描いた経験がありません。誰かに原画を作ってもらうのでは時間がかかるし「棒人間」でごまかすのは面白くありません。自分でやってみると得られるものがあるかもしれないというので作ってみました。線画を作る処理に興味があったので、3DCGを基にします。手順は以下のとおりです。

ⅰ)原画を用意する
 3DCGソフトのDAZ Studioでキャラクターにポーズを取らせて画像を生成。これを画像処理ソフトのGimpで加工。

ⅱ)Powerpointのスライドショーを作る
 画像をスライドに貼り付け、吹き出しなどを付ける。2枚目以降のスライドの「画面切替え」を“プッシュ”にしておく。これは、スライド切替えのときに上から下へのスクロールのような効果を持たせるため。複数の吹き出しが同時に表示される版と、オーバーレイ方式で追加されていく版2つを作成した。

ⅲ)iSpring SuiteでHTML5変換 
 <PowerpointとiSpring Suiteでweb教材を作る>に紹介した方法でPlayerの設定をする。さらに、Playback and Navigationの設定に移り、矢印キーでスライド切替えができるように設定する。

ⅳ)webサイトにアップロード
 WordPressのプラグイン(Insert or Embed Articulate Content into WordPress)を使った。

結果について

作った「web4コマ漫画モドキ」を以下に示します。この投稿の冒頭で示したものと同じですが、ページ内のウインドウに表示されます。通常版は、1コマ分が一度に表示されます。一方、「オーバーレイ版」では、吹き出しが発言の順に現れ、コマが切り替えられるまでその場に残っています。次の吹き出しが現れると同時に消すというやり方も可能ですが、試してはいません。

サンプル(通常版)

サンプル(オーバーレイ版) 吹き出し発話順に出現していきます

結論は冒頭でまとめた通りです。補足します。

1)PowerpointとiSpring Suiteの現在の仕様では不十分
 問題と思われる点は以下のとおりです。

  • 画面切り替え
    前後(上下)のコマのつながりを意識させた画面切り替えが難しい。今回、スライド切替えの効果を“プッシュ”にすることで、縦スクロールのような雰囲気を持たせようとしているが、十分とは言えない。
  • スクロール
    画面を自由にスクロールできない。このため、複数のコマが同時に提示される漫画の「アナログ感」が乏しい。
  • 効果イフェクトを再現できないことがある
    Powerpointの効果をiSpring Suiteのスライドショー変換で再現できないことがある。今回わかったのはスライド切替え効果の“プッシュ”で、スライド前進のときは問題ないが後退のときにPowerpointアプリとは異なる挙動になる。他にも変換できない効果があるかもしれない。iSpring社のサポート担当に問い合わせてみるつもり。

2)新しいメディアとしての可能性
 絵、吹き出し、文章などを組み合わせた静止画をコマ単位で見せるだけでなく、これらの要素を出現・消滅や動きなどの効果を付けて表示できます。ウェブトゥーンではアニメーションを組み込んだ作品もあるそうですが、Powerpointでもアニメーションを組み込むことはできます。そのような作品はもはや「漫画」とは言えないものになるかもしれませんが、漫画から派生した新しい表現媒体になる可能性はあります。

今回は、プレゼンでよく使う「オーバーレイ方式」を吹き出しの表示に試してみました。でも余計なお世話という印象も持ちました。「漫画のリテラシーを身に付けさせる教材」に使えるかもしれませんが、そんなのいらない! と言われそうです。

3)その他
 今回注目したスライド切替えやスクロールとは別に、気が付いたことがあります。キャラクターは、手描きではなく3DCGソフトのDAZ Studioで作成したフォトリアルな画像を「漫画風」に加工して描きました。しかし、諧調が残っているので細部に注意が向いてしまい、漫画として読むときに邪魔に感じます。

実際、フォトリアルな画像に吹き出しを付けた作品がありますが、細部に注意が向くためなのか読みにくいと感じます。

漫画の、濃淡情報を省いた線画は、手抜きのために採用されたものかもしれませんが、結果としてセリフやストーリーを邪魔しない表現になっているのかもしれません。家電製品の取り扱い説明書でも、写真ではなくイラストを使った方が理解しやすいと言われています。このことは、スライドショーのデザインで一番大事だと思うポイント「注目させたい情報を制限する」と共通しています。

※画像の一部を変更しました(2024/07/29) 肌の塗りや髪の諧調を減らしています。個人的には変更後の方が好みです。

結局、ウェブトゥーンってどうなの?

ウェブトゥーンに関しては、漫画表現が縦長ディスプレイを持つスマホに合わせて変化して出てきたものです。なので靴に足を合わせるような無理な感じを受けてしまいます。視野が狭い縦長の世界に閉じ込められるようです。

一方、それは私が古い漫画のリテラシーしか持っていないから感じるものかもしれません。ウェブトゥーンの市場は拡大しつつあるようで漫画業界にとっては無視できない分野になりそうです。印刷技術などのハードウェアがコンテンツの創造や鑑賞のありかたに影響を与えることは、これまでも繰り返されてきました。web漫画の流れがどんな方向に向かっていくかは興味があります。

さて、今回の試みによって教材作成について何か得るところはあったのか?です。これは別の機会に譲りたいです(今回はそんなのばっかり・・・)。

コメント