HTML漫画について

こんにちは。明田ミオと申します。

このページでは「HTML漫画」の提案と、その基本的な考え方について説明します。

もし #HTML漫画 の試みを他の誰も先にやっておられないのであれば、それを2014年頃に発案した先駆者としてきちんと名を残したい
HTML漫画の生みの親と呼ばれたい

— 明田ミオ🦇 (@aketamio) December 29, 2023

HTML漫画とは

HTML漫画とは、HTMLとCSSおよびJavaScriptで描画する漫画のことです。

まず、HTMLとは、HyperText Markup Languageの略で、Webページを作成するために使われるマークアップ言語のひとつです。HTMLはコンテンツの構造を定義し、コンピュータが理解できるようにします。見出しの文字を装飾したり、画像を表示させたり、単語をハイパーリンクさせたりできます。

HTML漫画では、Webページを構造的に作成する考え方を漫画に取り入れます。Web漫画やWebtoonとは異なり、単に漫画の画像をそのまま画像としてWeb上で表示させるわけではありません。漫画の一部をHTMLとCSSで描画します。たとえば、漫画の絵と台詞とを分離して画像とテキストとしてHTMLで記述し、ブラウザ上で描画させます。これにより、様々なギミックを仕込むことが可能になります。例えば、クリックやスクロールといった読者のアクションが漫画に影響を与えるようにしたりすることができます。テキストが独立しているので、自動翻訳も容易になります。画像単体ではなく、Webページの画面全体が作品となるのです。

HTML漫画とは、いわばWEB上で見るしかけ絵本です。

HTML漫画の作例

私は2014年から2016年にかけて、このHTML漫画の考え方で作品を制作していました。一部の作品は現在も公開していますので、ここで例として紹介します。

漫画の一部をHTMLとCSSで描画する

『漫画の白、背景の白』（2014年）という作品では、HTML漫画の基本となる考え方を提示しています。つまり、1ページの漫画を1枚の画像で表現するのではなく、1ページのwebページで表現するということです。

ここでは、漫画のコマ枠の枠線をCSSのborderプロパティの指定によって描画しています。

漫画の一部をHTMLとCSSで描画することは、HTML漫画の基本的な考え方です。

スクロールで風船が飛ぶ

もっと面白い例を紹介しましょう。

『この浮力』（2014年）という作品はWebtoonのように縦長の漫画ですが、ひとつだけ「しかけ」があります。

スクロールしていくと、風船が浮かびあがるように見えます。（ぜひPCからアクセスして、風船を飛ばしてみてください！）

スクロールという読者のアクションが漫画に影響を与える例です。

クリックでコマ数やコマの内容が変わる

読者のアクションを必要とする作例は他にもあります。

『ニコイチ』（2015年）では、１コマ目（1枚目）の画像をクリックすると、3コマだった漫画が7コマになり、最後のコマの画像が切り替わります。1コマ目の画像をもう一度クリックすると元に戻ります。

普通、ひとつの漫画はひとつのストーリーを伝えるものです。しかし、このようなギミックを活用すれば、ひとつの漫画に複数のストーリーを持たせるという実験的な試みができます。

台詞が切り替わる

『休憩中』（2016年）では、絵と吹き出しの台詞とを完全に分離しています。吹き出しはCSSで描かれ、画面下部にはボタンがあります。この「次へ」のボタンをクリックすることで登場人物2人の会話が進むようになっています。

HTMLのinput要素を応用した作例です。

HTML漫画を作るには

HTML漫画を作るために必要なのは、Web制作と漫画制作両方の知識および技術です。

また、HTML漫画を公開するWebサイトも必要です。現状、この形式の作品をそのまま公開できるような投稿サイトはありませんから、各自でサイトを容易する必要があります。

制作者に求められるのは、漫画を描き、コードを書き、Webにアップロードすることです。

さいごに

私が2014年から2016年に書いていたHTML漫画はかなり拙いと思っているので、また新たに制作したいと思っています。

タイトルは『Aranea Area(アラネアエリア)』、魔法を使えなくなった魔法使いのお話です。

この作品を通して、WEB上で見るしかけ絵本とも言えるHTML漫画に触れていただき、もっと楽しんでいただけるようにしたいです。

応援のほど、よろしくお願いいたします。