さて、画像や図を挿入することに決めたのならば、画像や表（TABLE）は横幅が640pixel以下にするとよいでしょう。こうすることでA4で印刷したときに横にはみ出さなくなります。
現在攻略法作りで一般的に使われているのはHTML▼形式です。ここではHTML形式の特徴についてと、攻略法を作るときの注意点としてページ数について考えます。
以上のような特徴があるといえますが、通信環境の向上が見られる昨今ではもはや「a.ファイルサイズはTEXTよりも大きい」に関しては、あまり気をつける必要はないでしょう。
HTML▼の本領は「b.文字修飾ができる」、「c.表を作るのに適している」、「e.印刷をユーザー側が簡単に処理できる」であろうと私は考えます。文字の大きさを変えたり色をつけたりできるため、情報の重要度や標題などがわかりやすく表示できます。また表を簡単に作ることができるので、これをうまく使うことで攻略法の表示が非常に楽になります。さらに環境に依存せず閲覧、印刷にそれぞれの環境でちょうどよい状態にできるという特徴があります。印刷時には自分の環境に応じてフォントサイズを変えることで文字の大きさも変えられ、またそれによって文字送りなども自動的に処理されるので、楽に印刷設定ができます。
|
#ただしHTML▼を印刷するときの問題点として、表が長すぎると途中でちぎれるというものがある。従って縦に長い表を作るときは、ある程度の長さで切って、2分割するなど工夫が必要だろう。 ##「環境に依存しない」とはいってもそのように作るのはけっこう骨である。またデザインという観点から見るとフォーマットが固定している方がやりやすい。試しに適当なページで640x480から1600x1200まで(もしくはそれ以上)の各解像度の全画面表示で見てみたり、フォントサイズを最大に変えてみたりすると、たいていは見づらい環境ができてしまうだろう。 |
「d.図を入れるのには適さない（画像を除く）」は意外に思う方がいるかもしれませんが、例えば下にあるようなフローチャートみたいなものをHTML▼で書くのはなかなか大変です。この画像は<table>タグを駆使して作った上で、NN4.7x▼で画面を表示し、その画面をキャプチャしたものです。ちょっと文字が崩れて見づらいかと思いますが、何よりも図表としてバランスがあまりよくありません。要はこういう図表をHTMLで作るのは難しいし、労力のわりに見栄えが良くならないということです。
| まあテキストで書いて<tt>か<pre>タグで固定ピッチにしてもいいんですが、そうすると解像度がなかば固定になってしまいますし、見る側のフォントサイズによっては印刷時に横にはみ出してしまいます。従ってブラウザの解像度を固定するとか、フォントサイズを固定するとか、あらかじめ画像にするとか、そういった作業をしておく必要性が出てきます。 さて、画像や図を挿入することに決めたのならば、画像や表（TABLE）は横幅が640pixel以下にするとよいでしょう。こうすることでA4で印刷したときに横にはみ出さなくなります。 |
|
#実は上のフローチャートみたいなもの(厳密にはフローではなく家系図)は、できればソースのままでやりたかったがIE▼ではどうしてもうまく表示できなかったためにキャプチャせざるを得なかった。元ソースはこちら。こういうのはPowerPointを使った方が見栄えもいいし作りやすい。 |
作る側としては「f.HTMLに関する知識の修得に時間が必要」は負担ともいえますが、昨今はワープロライクに作ることができるソフトも多数出ていますし、あまり問題はないかと思います。
むしろ「g.ブラウザやバージョンによって見栄えが変わる」という、いわばローカルルールを知る方が大変です。WindowsでもIE▼とNC▼で表示形式が違うのはよく知られていることですが、同じブラウザでもMacではWinで見たときとは違ったふうに表示される可能性があるのです。このあたりの情報をインターネットで調べてもいいんですが、案外インターネットは過去の情報が蓄積されにくいメディアであるので、互換性を考えようとしても、情報を集めること自体が新しくWEBページを作る人にはなかなか面倒な作業になってきます。ただ最近は完全にIEの方が優勢ですし、IEの最新版に絞って作ってもさして支障は出ないでしょう。あるいはHTML4.01規格に準拠していることをもってよしとするのもありなのかもしれません( HTML4.01の文法チェックに関しては『Another HTML-lint gateway』などを参照) 。
|
＃とはいえ、HTML▼関係では見栄えは変わるものの、見られなくなるほど画面が崩れるというのはそうそうない。問題はCSS▼やJavaScript▼で、対応しているか否かで画面が大きく崩れる可能性を持っているので使用する際には注意が必要である。 ただしCSSに関しては <STYLE type="text/css"> <!-- @import url(title.css); --> </STYLE> と記述することで、ある程度対応できる。理由はIE3.x▼とNC4.x▼がこの書式に対応してないためであり、逆にいえばこの手法を採用することで古いブラウザでも大きく乱れることはないはずである。 |
また「h.知識があればユーザー側で加工できる」という点は、加工することが難しいPDFファイルと比べるとよくわかるでしょう。「i.文章構造がしっかりした内容に適している」は、そもそもHTMLが<Hn>や<P>を使って論理的な構造を表現するためのものなのでそういえるのですが、これを知るにはソースを見る必要があり、ある程度中級者向けの話ではあります。
HTMLで攻略法を作るときに最初に決めるのが、このページ数（ファイル数）のことでしょう。とりあえず特徴を書き出した上で、掘り下げてみることにします。とはいえ、手間を惜しまないのであれば、両方作ってしまうというのも手ではあります。
「j.閲覧したときに項目ごとの関係性がわかりにくい」実際に閲覧してみると、今見ている項目と、上や下の項目との関係がわかりにくいと感じるような場合があります。単純な例を挙げてみましょう。
1→→→→2.1 ↓ →→2.2 |
こういう展開があるとします。ここで書かれている数字は、ある程度グループ化される選択肢群だと考えてください。このようなときに「1、2.1、2.2」の順番で説明されていると、「1→2.1→2.2」のように見えることがあります。書き方によっては回避できるかもしれませんが、こう書かなければいけないのであれば、1ページにまとめない方がよいといえます。例としては『AIR攻略法HTML版』の"DREAM"通しチャートを参照してください。
「k.ネタバレしやすい」1ページに全部表示してしまうので、攻略法を見たいキャラだけ見るということは難しくなります。ラベルを使用するなど、よけいな部分を見なくてすむ配慮をすることである程度は解決できますが、1人あたりの攻略法の分量が少ない場合など、攻略法の構造上、解決が無理な場合もあります。
「l.印刷(保存)が楽」これは圧倒的に1ページのものの方が楽です。ヒロインが9人くらいいると9回印刷ボタンを押すはめになりますから。さらにプリンタによっては普通A4の紙1枚に2ページずつ印刷するということもできます(4､9,16ページできるものもある)。こうした機能を使うときには、1ファイルが大きければ大きいほど効果があります(ファイルの保存の観点からも同様のことがいえます。ただしこれに関しては、複数ページに渡っていてもファイルを圧縮してまとめて置いておくことでフォロー可能です)。
「m.1人ずつ印刷するのは困難」これは、「恋愛ゲームでは通常攻略対象キャラクターが複数いて」なおかつ「攻略方法はそれぞれ完全に独立していることが多い」という暗黙の了解があらかじめないと意味が通じませんね^^;HTMLは印刷位置を固定できませんから、1人ずつ印刷できないというのもあたりまえのことではあります。
「n.作り方によっては閲覧時に迷うことがある」これは階層が深かったり、浅くてもページがたくさんあったりすると起こりがちです。フレームを使ってindexを常に表示させる、「進む」「戻る」「目次へ」などのリンクをきちんと表示するなど、使う人への配慮が必要です。
「o.ネタバレしにくい」これは1ページものの攻略法と比べてのことですが、各キャラごとにページを分けてしまえば、見たいキャラ以外の情報が目に入らないためです。とはいえ、初めから自力クリアを諦めてゲームしようとする人にとっては印刷が大変なのですが。
「p.印刷は大変」複数ページの時は攻略法を印刷するのが大変です。同様に保存するのも一苦労でしょう。よくやりがちなのは、一人一殺ヾ(^^;)のページを作ったのはいいものの、その1人の分量が少ない場合ですが、こういうときはまとめてしまった方がいいときもあります。
ただ「1人ページ」の攻略法の場合は、1人ずつ見るわけですから、情報量が制限されるために必要以上のネタバレを防ぐ効果が高く、また途中まで一緒でシナリオの真ん中あたりから分岐といった場合には（1ページの「▼3.2.1.表現」の例みたいな時に）前後の関係が把握しやすいという利点があるので、わかりやすさを重視するか、印刷の手間を重視するか、どちらか選ぶ必要がでてくるでしょう。
その他の点は1ページの方で書いたので省略します。
文字の大きさは固定しない方がよいというお話です。ディスプレイの物理的な大きさや解像度、OS側の文字の大きさによって文字の大きさが変わってくる*ので、ともするとディスプレイ側では見にくい攻略法になってしまいます。
|
*デフォルトの設定でWindowsが72dpi(dot/inch)、Macが96dpiであるために起こる。またWinでもMozillaの場合は96dpiであったりするなど、ブラウザによって異なってくることがある。 |
「pt（ポイント）」と「px（ピクセル）」で文字の大きさを指定した場合に、フォントサイズによって文字がどういう大きさになるかを示したものです。
| OSとフォントサイズ | 実際に表示されるフォントの大きさ |
|---|---|
| Windows Me フォントサイズ72dpi （その他のサイズ） |
|
| Windows Me フォントサイズ96dpi （小さいフォント/標準設定） |
|
| Windows Me フォントサイズ120dpi （大きいフォント） |
右上の画像はNC4.73で表示したものをキャプチャしたものです。このようにptで指定した場合とpxで指定した場合とで、閲覧者の環境によって文字の大きさにかなりの違いが出ることがわかります。これのソースは以下の通り。
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
.pt{font-size:12pt;}
.px{font-size:12px;}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="pt">これは12ptで指定したテキストです</DIV>
<P><DIV class="px">これは12pxで指定したテキストです</DIV>
</BODY>
</HTML>
デザイン的には文字の大きさが固定されていた方がよいのですが、WEBでは文字の大きさがユーザー(閲覧者)側で変えられる方がよいので、絶対サイズで指定するのではなくて相対サイズで指定した方がよいです。
WindowsでもMacでも色ずれしない216色です。256色環境で表示しきれない色は、近い色に置き換えられたりして、作者が本来意図していなかった色で表示されます。このため、ズレをなくすにはWEBセーフカラーを使う必要がでてきます。こちら( →iii.WEBセーフカラーと明度)でも扱ってはいますが詳しくはこのサイトを参照して下さい（『情報・通信辞典e-Words』WEBセーフカラー一覧）。
5.4.【WEBセーフカラーを使う】でも解説しています。
READMEに関しては『6.READMEの作り方』で章を分けて説明しています。このうちHTML▼に関するところは「 6.1.HTMLでREADMEを作る」、「6.2.1ページのものにもREADMEをつける」、「6.3.対応ソフトを表記する」です。
通常はスペーサーGIF(透過GIF▼)のことを指しますが、最近はPNG(透過PNG▼)*も使われるようになってきました。このスペーサーとは何かというと1x1ドットの透明な画像ファイルのことです。透明な画像ファイルなのでどこで使っても背景には邪魔になりません。そのためスペーサーの大きさを指定してやることで、HTMLを使ったデザインでの表現の幅が広がります。たとえばこうやってpixel単位でスペースを空けることもできます(左は100pixel。この文章の下もスペーサーGIFで100pixel開けてあります)。必要な方はどうぞ[スペーサーGIF/スペーサーPNG(PNG-8)/スペーサーPNG(PNG-24)著作権フリーです]。
|
#「GIFは避けた方が無難」という話がある。特許に関わるためだといわれている。しかし特許法では個人の使用に関しては制限をしていないことや、普通の書籍でもGIF▼を使ってのウェブサイト構築方法とかは書いていることから、市販されているソフトを使って作っている限りはあまり考えすぎない方がよいと思う(なお日本においては2003/06/20まで保護されることになっている。補足説明として付録の『i-2.GIF忌避論』参照)。 代用するとなるとPNG▼が有力な選択肢（jpegは透過色が扱えない。またその圧縮方式ゆえに「図」には向かない）だが、この画像形式はNN4▼以上、IE4以上でしか表示できない。最終的に、PNGを使うことはアクセシビリティとのトレードオフになるので、各人の自己責任の元で考えて画像を使っていただきたい。この『攻略法の作り方』でもできるだけPNGを使っている。 なおこのスペーサーGIFはライセンスを受けたアプリケーション(Adobe Photoshop5.0J)で作っている。 |
|
*透過PNGに関して PNG▼にはPNG-8(256色)とPNG-24(24bitフルカラー)の2種類があり、それぞれ透過色に対するブラウザの対応が異なるので注意が必要である。詳しいことはpierre designの『各ブラウザの透過PNG対応度のページ』を参照。これによると、各ブラウザの対応状況は以下のようになっている。
また、このページにあるテストページを利用したところ、以下のような結果が得られた(すべてWindows版)。
この結果から考えると、現段階ではPNG-8を使用した方がよいであろう。 以下に簡易ながらテストできる環境を用意した。この表の中が透明(背景色の■#CCFFFF■と同じ色)なら透過色が有効、白く見えたら無効と考えていただきたい。
|
| <<戻る<< | ▲TOP▲ | ■フレーム化■ | ||
| >>次へ>> | ■INDEX■ | サイトマップ/索引/略語用語集 |
KO-1（myu-myu-myu@nifty.com）
|
|
