HTMLでCG集を作ろう！

はじめに

僕が一番最初にダウンロード販売した作品形態はHTML形式のCG集でした。
売り物にするのだからjpeg画像をフォルダに突っ込むだけでは物足りないかもしれないと思い、
HTMLで作る事を決めました。

作ると決めたものの、HTMLについては全く知識がなく
「アレでしょ、ホームページのヤツ」程度の認識だったのを覚えています。
今もそんなに知識はありませんが、CG集として最低限の体裁を保てる程度の物は作れます。
ここでは、その作り方を書いていきます。

■HTMLでCG集を作るメリット
気にしないのであればフォルダにjpeg画像を入れるだけでも全然問題ありません。
CG集として売るだけなら画像さえあれば良いんですから。

ただ、キャラクターが複数いる場合や、複数の差分イラストがある場合はHTMLで作った方が親切ですね。
jpeg画像だけだと一方通行の閲覧になりますが、
HTML形式なら好きな場面にリンクを貼れるので自由度が高いです。
自分好みの作品に仕上げられるのがHTML形式で作る最大のメリットです。

■ストーリー付きCG集ならHTMLで作る必要はない
イラストにテキストを付けてストーリーになっているCG集をストーリー付きCG集と言います。
大体、ショートストーリー付きCG集とかSS付きCG集と呼ばれてますね。

規定はないのでサークルによってテキスト量は様々ですが、
普通は一本道ストーリーなのでjpeg画像をフォルダにまとめるだけで十分です。

複数の分岐がある場合や音声を入れたい場合は、
はっきり言ってCG集としてではなくアドベンチャーゲームとして作った方が有益です。
労力もさほど変わらないと思います。
ゲームの作り方はまたの機会に説明します。

制作準備

■HTMLエディターを用意する
順を追って説明します。
まず始めにHTMLエディターをダウンロードしましょう。

たくさんの無料HTMLエディターがありますが、僕のお勧めはHosiken Labs様の「HeTeMuLu Creator」です。
HeTeMuLu Creatorのダウンロードページはこちら

エディターが無くてもHTMLドキュメントがあれば
ウィンドウズに最初からあるメモ帳でHTMLの編集は可能です。
じっくり編集する場合はタグ挿入機能のあるエディターが何かと便利です。

■画像を用意する
基礎から学習する場合は実際に自分で触ってみるのが一番早いと思います。
試しに下の画像を全て名前を変更しないで保存してみてください。

イラスト

サムネイル

背景

背景に表示される画像は縦横に延々と続いて表示されるので
上は下と、左は右と繋がるようなデザインが好ましいです。

■フォルダを用意する
デスクトップにでもフォルダを作ってください。
ここでは仮に「シュライン」とします。

「シュライン」フォルダの中に「html」「images」「sozai」の3つのフォルダを作ってください。
この3つのフォルダに付ける名前は何でも構いませんが必ず半角英数字で付けてください。
他の文字を付けるとエラーの元になります。
ここだけに関わらず、半角英数字で表記されている箇所は半角英数字で記載するようにしてください。

フォルダを作ったら先程用意したrin01、rin02、rin03、kayo01、kayo02、kayo03を「images」に、
rinthum、kayothumとtopback、backを「sozai」に入れてください。

HTMLを編集する

■indexを作る
エディターを起動します。
そして下記<Html>から</Html>までコピーしてエディターのファイルにペースト。
名前にindexと付けてHTMLとして「シュライン」フォルダに保存してください。

<Html>
<Head>
<Title>シュラインズゲート</Title>
</Head>
<Body Background="sozai/topback.jpg">
<Div Align="center"><br>
<Font Color="#808080" Size="5">りんぱな</Font><p><br>
<A Href="html/cg01-01.html"><Img Src="sozai/rinthum.jpg"></A>
<A Href="html/cg02-01.html"><Img Src="sozai/kayothum.jpg"></A><br>
<br>
<Font Color="#808080">製作者　シュライン</Font><br>
<Font Color="#808080">ご意見ご要望があればこちらの方にどうぞ。</Font><br>
<A Href="mailto:shrine3939○gmail.com "><Font Color="#808080">shrine3939○gmail.com</Font></A><br>
</Div>
</Body>
</Html>

作成したindexをブラウザで開いて見てください。
ちゃんと表示されていますか？

<>はタグと呼ばれる命令です。
命令の内容は画像の通り。

■htmlを作る
indexもhtmlですけど、ここでは先程作った「html」フォルダに入れるhtmlを作ります。
下記<Html>から</Html>までコピーしてエディターのファイルにペーストしてください。
名前は「cg01-01」と付けてHTMLとして「html」フォルダに保存。

<Html>
<Head>
<Title>イラスト
<style TYPE="text/css">

</style>
</Head>
<Body Background="../sozai/back.jpg">
<Div Align="center">
<A Href="cg02-03.html">前へ　　　<A Href="cg01-02.html">次へ<p>
<A Href="cg01-02.html"><Img Src="../images/rin01.jpg" Border="0"><p>
<A Href="../index.html">初めに戻る
</Div>
</Body>
</Html>

作成したcg01-01をブラウザで開いて見てください。
命令の内容は画像の通りです。

■htmlを量産する
cg01-01をコピーしてペースト、名前をcg01-02に変更して画像を差し替えてください。

cg01-02にはrin02を表示、cg01-03にはrin03、
cg02-01にkayo01、cg02-02にkayo02、cg02-03にkayo03といった具合です。
それぞれのリンク先を次のページに設定します。

全てのhtmlを作成したら完成です。
indexを開いて動作を確認してください。

最後に

CG集ではHTMLで表示させにくい大きいサイズのイラストを同梱するのが一般的です。
read meテキストを付けたら商品っぽいですね。
これで「シュライン」フォルダをzipで圧縮したらダウンロードサイトで販売申請出来る状態が整います。

イラスト画面に差分イラストのサムネを置いて、複数の差分イラストに分岐させる事も可能です。
作成したHTMLタグを削除してみて、どういう挙動を起こすのかを見るのも理解が深まります。
色々試してみてください。
HTMLのタグは種類が豊富なので調べてみるのも面白いですよ。

以上で「HTMLでCG集を作ろう！」は終了です。

HTMLCG集