| 選択肢列記 | 自由度の高い | 補足 | |
|---|---|---|---|
| 最初から | ○ | ○ | |
| 途中から | △ | ○ | |
| 最後に | ？ | ？ | 付加情報が必要 |
この文章は『攻略法の作り方』の本文を連結したものです。印刷するときなどにお使いください(付録用もあります)。ただ、実例だけは印刷されません。これに関してはディスプレイ上で確認してください(サイトマップから見に行くことも可能です)。
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
この文章は、ゲームの攻略法を作っている人を対象に書かれています。ゲームの攻略法に対する需要は確実にありますが、それに対する要望・要求というものはあまり表面には出てきません。読んでいる人・利用する人が実際にはどう思っているのか、どんな点を不満に思っていてどういう点に気をつけて作ればいいのか。こういったことは、個人で作っているだけでは、なかなかわかりにくいものです。
私自身いくつかの攻略法を作ってきましたが、その大半は共同作業で作ってきた*ものでした。こうした共同作業を通じて攻略法を作ることで、個人では気がつかないことがわかり、大変有意義な経験をすることができました。この時の経験をもとに、攻略法を作るときにどういう点に気をつけるのがよいのか、またどういうTipsがあるのかをまとめて公開することにしました。この情報を作る人の間で共有することができれば、きっと「攻略法を作る人」の手助けになるだろう。そんなことを思いこの文章を作りました。
これがきっかけとなり、見やすく使いやすい攻略法がたくさんできれば嬉しいと思っております。
|
*共同で作ってきた 『攻略プロジェクトルーム』というＫｅｎさん主宰のパティオで、情報を持ち寄るなどして共同作業で攻略法を作成したこと。このパティオは2001年末の閉鎖までに85の攻略法をFCGAMEXに供給した。なお「パティオ」は、旧Nifty-Serve（現在の@nifty）のサービスの1つで、WEBでいうところのツリー形式の掲示板を個人がもてるniftyのシステム。「FCGAMEX」は、niftyの年齢制限つきゲームに関するフォーラム。 |
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
ウェブで探すとゲームの攻略法はたくさんでてきます。この文章はそんなゲームの攻略法そのものの作り方について解説をしています。
この『攻略法の作り方』を作る際に念頭に置いたことが2つあります。それは
ということです。これらを実現するために実用的で役立つ情報を詰め込んだつもりです。
巷で公開されている攻略法を使っていて「見にくい攻略法がある」ということをしばしば感じます。それは「使う側が見やすく使いやすい攻略法を作ること」を意識して作っていないことが多いからでしょう。実際に自分で使ってみて使いやすい攻略法とはいったいどんなものかとよく考えてみる必要があります。
また「ディスプレイ上での表示だけでなく印刷しても見やすく使いやすい攻略法を作ること」ということも重要なことです。作っている側には気づきにくい点ですが、使う立場にとっては印刷して使うことも多いので、印刷後のことを考えることが重要になってきます。実際、フルスクリーンでしかプレイできないゲームもありますし、そうでなくても大きな画面でやった方が絶対にいいです。
ほかにも大切なことはあるかと思いますが、とりあえず必要最低限の基準としてこの理念を採用し『攻略法の作り方』として作成しました。
ここでは各項目の内容や、それらを選んだ意図を説明します。
この文章です。
攻略法といってもその構造にはいろいろなものがあります。ここでは攻略法の「内容」そのものについての考察をします。
現在一般的なHTML▼形式で攻略法を作ることについての利点と注意点です。また通常はあまり気にしないかもしれませんが、何ページで1つの攻略法にするかについても考察しています。実は、この見極めによって、見やすい・使いやすい攻略法になるかどうかが大きく変わってきます。
攻略法をどんなファイル形式（HTMLなど）にするかということについてです。常にHTMLで作る必要性はないわけですし、HTMLや他のファイル形式の特徴を見極めた上で一番見やすいものを使うのが良いと思います。
HTMLなどで攻略法を作るときに色をつけると思います。しかし、つけた色がはたして効果的に使われているでしょうか？色をつけたことで見にくくなっては意味がありませんので、そのあたり、どう折り合いをつけるかについて書いています。
攻略法の説明文です。個人サイトに置いてある攻略法ではあまり見かけませんが、誰が作ったのか、使用条件はどうかといったことを書いておくことは、作成者にとっても利用者にとっても重要です。
ここまで触れてこなかったことや、ちょっとしたテクニックなどを紹介してます。
攻略法を作るだけではなく、その攻略法をサイトの中でどう位置づけ公開・保存するかによって、利用のしやすさが格段に変わってきます。そういうわけで攻略サイト本位の運営方法についてです。
この文章を作るときに参考にした文献や、参照した攻略法です。
この文章の説明文です。
攻略法の作成者も著作権者です。攻略法とも無関係ではない知的財産権についてです。
日本人男性のうち、色覚異常者は約5%です。使う色次第で見にくくなることがあるわけです。色覚異常への基本的な対処法について書いています。
WEBで256色環境でも正確に再現されるWEBセーフカラーとその明度について表にしています。
これまでに本文で触れてきた内容のチェックリストです。攻略法を作るときにお役立てください。
サイトマップは数字が振ってある項目を網羅してあります。
索引はこの文書全体の索引です。
略語用語集はこの文書で使われている略語を簡単に説明しています。
攻略法の作成時に使えそうなフリーサンプル・テンプレート集です。このページにあるものは著作権フリーですのでご自由にお使いください。
付録i〜ivまでを1つのファイルにまとめてあります。まとめて印刷するときにお使いください。
本文1〜10までを1つのファイルにまとめてあります。まとめて印刷するときにお使いください。
この『攻略法の作り方』の更新履歴です。項目の追加や見解の変更があったときには書き込んでいきますので、バージョンが上がったときに参考にしてください。なお、このページ自体は簡易版として、書庫バージョンに添付されている「更新履歴.txt」を正本とします(これは作成時に更新履歴.txtを更新しているためで、内容自体に違いをつけているわけではありません)。
各ページの表記について説明します。
▼という記号がついている単語があります。これは付録の略語用語集で取り上げられている単語です。各項目で最初にその言葉が出てきたときにつけてあります。▼の部分をクリックすると略語用語集に飛びますので、略語の意味がわからないときなどに使用してください。
例として攻略法へのリンクが張ってある場合がありますが、これらの攻略法は、基本的に元の攻略法から該当するページだけを抜き出してきたものばかりです。通常はフレームで上に説明、下が例となっていますが、フレームを使えないブラウザをお使いの場合は、近くに(フレーム無し版)と書いたリンクがありますので、そちらからごらんください。その際はブラウザのリンク機能でお戻りください。
この『攻略法の作り方』はフレーム化して見ることができます(各項目のタイトルリストが左、内容が右に表示されるようなフレーム表示にします)。各ページ一番下部のフッタ部分で「■フレーム化■」と書いてあるところをクリックすることでできます。ただし、どこで「フレーム化」しても、必ずトップページに移動してしまいますのでご容赦ください(非フレーム化も同じです)。
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
攻略法の本文を作るときに問題となるのが、選択肢を羅列するだけで済ませるのか、それともある程度幅を持たせてプレイヤーが自由に選べる選択肢を多くとるのかという問題です。
特徴としては以上のような感じです。なんといっても選択肢列記の場合は「c.あくまで攻略法作成者の攻略リプレイにすぎなくなる」ことを頭に入れておくべきでしょう。勢い選択肢によっては、その人にとってのゲームの評価に直結しかねませんし、いわばそのゲームのプロデューサーのような立場に立つことを自覚して作るべきです。従って、どうせ選択肢列記でやるのなら、攻略法作成者の「お薦めプレイ方法」あるいは「CGなどがすべて最短でフォローできる方法」など、何らかのアレンジをするのがよろしいかと思います。
「お勧めプレイ法」についての例は『Moe攻略法』の奈津美(フレーム無し版はこちら)を、「CG最短」についての例は『Phantom攻略法』(フレーム無し版はこちら)参照。
こちらは、ちゃんと攻略できるように作るのが、とにかく難しくて時間がかかるということに尽きます。しかしそれによってできたものは「e.『攻略法らしい』攻略法」になります。
これとはちょっと毛色が違いますが、フローチャートで描くタイプの攻略法もあります。この場合はどのルートから行くかをプレイヤーが決めることができますが、作るのはやっぱり大変でしょう。HTML▼ではフローチャートが描きにくいのですが、そのほかのアプリケーションソフトで作って画像化することで回避することはできます。
HTMLでフローが作りにくい点については3.HTMLで攻略法を作る「▼意外と使いにくい点」参照。
ほかのアプリで作った例では『POWDER SNOW攻略法』参照(Power Point97を使用。それを画像化)
選択肢列記か自由度を持たせるかの兼ね合いは、攻略法を見にくるプレイヤーの動向から考えることもできます。攻略法を見にくるプレイヤーは、基本的に次の3タイプに分けられます。
・最初から攻略法を見てゲームをプレイしようと思っているプレイヤー
・ゲームの途中で詰まって答えを探しにきたプレイヤー
・ほとんどクリアしたが最後にCGなどの穴埋めのために攻略法を利用しようとするプレイヤー
この3タイプのプレイヤーが、それぞれどういった攻略法であれば攻略に必要な情報を得られて満足するのかということについて考えます。
まず「最初から」攻略法を見にくるプレイヤーには、選択肢列記でも自由度があってもどちらでも攻略に必要な情報は得られるので、どちらでもよいでしょう。
次に「途中から」攻略法を見にくるプレイヤーにとって、選択肢列記方式では攻略するために必要な情報が得られるかどうかわかりません。しかし少なくとも最初からやり直せば攻略は可能です。自由度がある攻略法の場合は、要所を押さえないと作れませんから、たいていはこういったプレイヤーの要求を満たすことができるはずです。
「最後に」穴埋めのためにくるプレイヤーにとっては、すでにゲームの内容自体は終了していますから、選択肢が列挙してあるだけでは意味がないでしょう。とはいえ、自由度があればよいというわけでもなくて、少なくとも求めている情報(CGなどの回収場所)が書いてなければ意味がありません。これらをまとめると次のような表になります。
| 選択肢列記 | 自由度の高い | 補足 | |
|---|---|---|---|
| 最初から | ○ | ○ | |
| 途中から | △ | ○ | |
| 最後に | ？ | ？ | 付加情報が必要 |
こうしたことから、自分の攻略法を見にくる人がどういった攻略法を求めているかを考え、実際にどういう攻略法を作っていくかを考えてみてください。
「選択肢の出てくる時」ができるだけわかるように書くのが基本です。日時や場所、シーン名が表示されるゲームであれば、そういう情報について書いておきましょう。また選択肢自体はすべて完璧に写す必要はなく、閲覧者にわかるように圧縮しても構わないでしょう。
もう1つ、これは攻略法というよりもヒントといった方がいいのかもしれませんが、直接選択肢を書いていくのではなく、どういう行動をすべきかの指針を書いておくという方法もあります。特定の場所に通い詰めるとか、意地悪な選択肢を選ぶとか、そういった類のことです。ぼかした書き方になるので攻略に失敗する可能性というのもでてきますので、これが閲覧者に喜ばれるかどうかは微妙なところですが、こういった表記の方がいいと思えばそれもありではないかと思います。
2.1.3で述べたように、攻略法を見る人の中には、最初から攻略法を見てゲームをプレイする人がいます。そういう人たちのためにも攻略法の中でのネタバレは避けるべきです。ストーリーについてのネタバレはもちろんのことですが、わかりやすい攻略法を心がけるあまりに攻略情報にネタバレを紛れ込ませてしまうこともありますから、注意する必要があります。例えばデートの行き先がシナリオ上重要な場合、単に「デートイベント」とだけ書いて、その行き先については書かない方が望ましいといえます。
もちろん一番良いのは「デートイベント」とも書かないことでしょうが、小さなネタバレを防ぐあまりわかりにくい攻略法になっては本末転倒です。当然のことながら書く内容を絞ることによってゲームの進行が分かりにくくなるので、このあたりのさじ加減が難しいところです。対策としては、例えば攻略法の一番下に「ネタバレ」を明記してイベント内容を補完して書いてみたり、フォントカラーを背景色と同じ色にしてみたり、いっそのこと攻略法の冒頭でネタバレがある旨を明示して閲覧者の注意を喚起したりといった方法が考えられます。『こみっくパーティー攻略チャート』(フレーム無し版はこちら)では攻略法の下にイベント内容を書いて内容を補完しています。
ただ、実際には選択肢自体がネタバレを含むというものもあります。そういうときは選択肢を直接書かないような攻略法にしない限りネタバレを防げませんので、ある程度はどうしようもないことでもあります。
WEBはどこから入ってこられるかわからないことを考えると、すべてのページに著名を入れた方が良いと思います。できれば明示するのがいいのでしょうが、見えないところ(HTML▼のソースの方)に書き込むのもアリでしょう。
著名を入れることの意味としては、著作権の明示または文責の明確化といったところがあります。ただ、書く場合はきちんと正確に書く必要があります。特に複数人で作っている場合には、誰がどのページを作ったのかわからなくなりがちなので、注意しなければなりません。
|
＃日本を含むベルヌ条約を批准している国では無法式主義を取っているので、特に何をしなくても著作権は発生する(名前や作成年を書いていなくても発生する)。従って著作権の明示として書くのであれば、方式主義を取る万国著作権条約の保護要件にのっとって書く方がよい。その要件とは、(C) (○の中にCを書いた)記号と著作権者名及び最初の発行の年、が書いてあることである(万国著作権条約第３条)。従って、 ©KO-1 2000 とでも書いておけばいい。「まるしー」記号は©とHTML▼のソースに書くことで出るが、ブラウザによっては(C)みたいに見えることがあるようである。 付録の方でも著作権を含む知的財産権について扱っている。 |
ゲームの性格を考えて攻略法を作るということはなかなか難しいものです。
「ただただCG全入手とクリア」のためだけに、Firstプレイからすべての選択肢が書いておき、なおかつ「ここでセーブして、ここまでやったらやり直し」とまで書くという攻略法で十分というゲームもあります。シナリオ中心のゲームなんかは、こういうものでも比較的大丈夫なケースが多いでしょう。しかし、いかにも「ゲーム」らしい、遊び心の必要なゲームの場合、そのゲームのおもしろさを損なうことにもなりかねません。たとえばPANDA HOUSE『青い鳥』とかCat's Pro『SPARK!』なんかが後者の例としてあげられます。
ゲームの攻略法以外のおまけ情報などを一緒に書くことで、全体の価値が上がることもあると思います。たとえば、
・CGモード補完…CGの数がわかりにくいゲームでCGの合計数。または見るのが難しいCGの見方など。
・おまけモードの出し方…おまけモードの出る条件を書く。
・曲名のリスト…BGMの曲名リストを書く。
・リスト…いろんなものが考えられます。アイテムのリストやCGのリストやENDINGリスト。マニアックなところでイベントと台詞のファイル名対照表とか。
・蘊蓄…ある分野に特化した情報を書き出す。例えばBGMにクラシックが使われている場合は作曲者名を出してみるとか。
・ウラ技…テストモードなどがある時にその出し方を書く。
・ツールなどの紹介…あると便利なツールの紹介をする。テキスト書き出しツールとかメッセージスピード変更ツールとか。
etc.etc.
この他にもいろいろあるかと思いますが、あとは趣味でどうぞ。ただこういう情報がなかったとしても問題はありません。
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
現在攻略法作りで一般的に使われているのは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■と同じ色)なら透過色が有効、白く見えたら無効と考えていただきたい。
|
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
HTML▼形式以外のファイル形式を使って攻略法を作るという手もあります。ここではTEXTファイル、PDFファイル、MS▼ Word、MS PowerPoint,MS Excelについて解説します。
TEXTファイルの特徴としては
HTMLファイルの項でも挙げましたが、ファイルサイズに関しては、さして気にする必要はないと思います。ただそうなるとTEXTファイルの利点というものが薄くなるのも事実です。さらに「f.ワープロが使えれば使える」や「g.どの機種でも見られる」という点にしても、ワープロライクなHTMLエディタやWebブラウザがすでに普及しており、TEXTファイルのアドバンテージはさらに小さくなっています。
「d.図を入れるのには向く場合もある（でも普通は向かない）」ということですが、これはASCIIアートで図を作るということです。HTMLで作る場合は、表示が相手の使用するフォントに依存することが多いので、均等フォントを指定してもASCIIアートが崩れてしまうことが多々あります。しかしながら通常のテキストエディタでは均等フォントがきれいに表示されるので、この心配をすることはありません。
そうはいってもASCIIアートを使うのではなくて画像ファイルにしてしまえば、HTMLでもこの問題は回避できます。というより、むしろ画像ファイルを埋め込むことでHTMLの方が見やすく作れます。あくまで容量とのトレードオフではありますが。
|
さらにTEXTファイル版の場合は、『改行を入れるかどうか？』という重大な決断をしなければなりません。通常niftyでは70〜78文字で改行を入れるのがスジとなっていますが、これを攻略法でも入れるかどうかということです。というのもWindows付属のテキストエディタ『メモ帳』が、デフォルト状態では改行しないようになっており、さらに「右端で折り返し」しかできないからです。 『EmEditor Free』などのテキストエディタでは改行位置が文字数単位で決められますが、初心者でテキストエディタを使用している人は少ないでしょう。こういうソフトの場合は改行がない方が印刷時には便利です。また改行してあった場合、印刷すると空間が多く残り間が抜けた感じになります（右図参照）。また閲覧者側のフォントサイズによっては印刷時に切れてしまうかもしれません。 しかし、メモ帳で開く場合は改行があった方がいいでしょう。閲覧時には改行していなくても大きな問題はありませんが、印刷時に画面上でメモ帳の大きさをいじってサイズを決める必要があり、なかなか面倒だからです。ただし、ワープロソフトで開く場合は改行がない方が見やすいと思われます。したがって、一概に改行した方が良い・悪いということはいえないでしょう。 |
|
|
#EmEditorの本家サイトはhttp://www.emurasoft.com/jp/index.htm 2002年5月現在、本家のサイトではフリー版の配布は行っていないが『X-GAME STATION ANNEX』などで再配布されている。 |
TEXTファイルでも文章の構造を表すことができます。たとえば以下の如し。
1【はじめに】
2【攻略法本文】
2-1【"DREAM"前半】
2-1-1【"DREAM"美凪、佳乃共通ルート】
2-1-1-1【"DREAM"佳乃ルート】
2-1-1-2【"DREAM"美凪ルート】
2-1-2【"DREAM"観鈴ルート】
2-2【"SUMMER"】
2-3【"AIR"】
2-4【CG補完上の注意点】
2-5【"DREAM"観鈴＆"AIR"モデルルート】
2-5-1【"DREAM"観鈴】モデルルート
2-5-2【"AIR"】モデルルート
3【Liner note】
4【Readme】
『AIR攻略法（TEXT版）』より目次を抜粋。
こういった数字を使って文章の論理的構造を明示するやり方は、Linux関係のドキュメントによく見られます(野口悠紀雄『「超」勉強法』にもちょっとだけ出ていました)。
こういった文章の構造をTEXTファイルで表すことは構造化エディタを使うことでも実現できます。ただし構造化エディタ自体に印刷機能がないため、直接印刷することができない点がネックとなります。構造化エディタで作ったファイルは他のTEXTエディタで開いて印刷することができますが、その場合は普通のTEXTファイルを印刷した場合と変わりがなくなってしまいます。
|
「超」勉強法 野口悠紀雄 (1995/12/01) 講談社 ; ISBN: 4062076012 P.105〜107 3.国語の「超」勉強法 論文構造の例 現在は文庫版が出ています。 「超」勉強法 野口悠紀雄 講談社文庫 (2000/03/01) 講談社 ; ISBN: 406264827X 構造化エディタ(213KB) 松崎 暁 HP http://club.pep.ne.jp/~momotan/ |
Adobe社の販売している『Adobe Acrobat』で作られるファイル。「文字の大きさなどを固定してしまう」「レイアウトなどの調整を厳密にできる」「内容をなかなか改変しにくい」といった特徴があります。文字の大きさやレイアウトを固定してしまうために、閲覧者側の環境に依存しません。このため小さい画面では見にくくなることもありますが、デザインということを考えるとこちらの方が高度なことができるでしょうし、印刷するときもこちらの方がきれいにできるでしょう。また内容をなかなか改変しにくいというのは、複製を防止する抑止力として働くのではないかと思います。
ただ一番の難点は攻略法作成者にとって「ソフト(Adobe Acrobat)が高い」ことと、閲覧者にとって「Acrobat Readerを入れるのが手間である」ということです。
|
Adobe Acrobat Acrobat Reader ダウンロードページ(10.008KB) |
一番普及率の高いワープロソフトであるMS▼ Wordを使って攻略法を作るということもいいかと思います。図表なども入れやすいというメリットがあります。
ただし、Wordを持っていない人には見ることができませんし、新しいバージョンで作った場合は古いバージョンで見られない人が出てくる可能性がありますので注意が必要です。とはいってもMicrosoftが、Word・Excel・PowerPointのビューアソフトを無償配布していますし、また転載も可能なので、それを自分のウェブサイトにおいたりリンクを張ったりして、閲覧者に導入してもらえば問題は解決する可能性はあります。しかしながら、これらのビューアソフトでも見ることができるバージョンに制限がありますので注意が必要です。一太郎などの他のワープロソフトでも読み込みが可能な場合もあります。
それからマクロウィルスなどのセキュリティの関係上、閲覧者が見ず知らずの人（攻略法作成者のあなたのことです）からもらったファイルを開くのに抵抗がある場合があります。この点に関しては自らウィルスチェックをしていることなどを明示しておくなどの方法はありますが、根本的な解決方法としては信用を得るしかありませんから対処の難しい問題ではあります。
|
Midrosoft Word Viewer 97(5078KB) http://office.microsoft.com/japan/downloads/9798/wd97viewer.aspx |
基本的にプレゼンテーション用のソフトなので、一見こういった用途に向かないように思えますが、1ページが完全に固定されているし図を入れるのも簡単だしということで、意外と使い勝手がいいです。フローチャートのようなものを作るのにも向いています。従って、フローチャートだけPowerPointで作って、画像としてHTML▼に組み込むというのもいいやり方だと思います。
なおpptファイル(PowerPoint形式のファイル)にリンクを張っておくと、IE▼でなおかつPowerPointがインストールされている場合はシームレスに見ることができます。単独で使ってもよし、HTMLなどと一緒に使ってもよし、図だけ作って他の画像形式で保存するもよしと、応用の方法次第でいろんな使い方ができると思います。
先ほども少し書きましたが、pptファイルをそのまま使う場合は利用者のPCにPowerPointがインストールされている必要があります。ビューアソフトを使うことも可能ですが、見ることのできるバージョンに制限がありますので注意してください。攻略法配布者は、保存するときに出来るだけ古いファイル形式(PowerPoint95や97で開くことのできる形式「PowerPoint95(*.ppt)」など)で保存する配慮が必要です。
|
Microsoft PowerPoint Viewer 97 (PowerPoint 2000 対応版)(2842KB) http://office.microsoft.com/japan/downloads/9798/ppview97.aspx |
表計算ソフトのExcelを使って作ることも出来るでしょう。表が作りやすいことはもちろんのこと、ソートがしやすかったり色々なマクロがついてきたりしする多機能ソフトですし、攻略法の作成などにはお役立ちのソフトです。
ただ、Excelそのものを使わない人にはとってはハードルの高いものですから、攻略法として配布をするならば初心者に対する配慮をしないと見づらく感じられてしまうでしょう。シートを分けたりするのはExcelを使う上では当たり前のことですが、Excel初心者には存在そのものがわかりにくかったりしますので使わない方が無難です。
CSV→HTML▼変換ツールなどもありますし、変換して見栄えが変わらないようでしたらhtmlに変えてしまった方が良いかもしれません。またこれもExcelがないとそのままでは見られないものですのでExcel Viewerなどをアナウンスする必要があるでしょう。
|
Microsoft Excel Viewer 97(4042KB) http://office.microsoft.com/japan/Downloads/9798/xlviewer.aspx |
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
配色やデザインに関することは、攻略法作りにはあまり関係ないと思われるかもしれません。しかし配色やデザインが悪いと、利用者が情報に対して情報の確かさ以前に先入観として不信感を持ちやすいので、ある程度考慮に入れておく必要があります。
なお、このページでは本格的な配色やデザインの知識には立ち入りません。各自で勉強してください。
自分が読者としてWEBサイトを見るときのことを考えてほしいのですが、読者というものは内容を見る前にサイトの雰囲気で先入観を持ち、それが中身を読んでいく時に大きく影響しています。サイトの雰囲気を決定する配色やデザイン次第で情報の信頼性というものは大きく変わってくるのです。
大企業のサイトの情報が信頼できて中小企業や小さな団体のサイトが信頼しにくいということを体験した人も多いでしょう。これはもちろん様々な要因が考えられますが、配色やデザインがちゃんとできているか否かも要因の1つとして大きいです。
具体的に悪い方の例を出すと『おにいちゃんといっしょ攻略チャート』なんかはあまり信用できない例としてあげられるでしょう。色がきついし、垢抜けないしで、これを見て「この情報は信頼できる」と思う人はなかなかいないような気がします(フレーム無し版はこちら)。
このあたりは簡単に説明できることではなくとても難しいことなのですが(そもそも誰もができるのであればデザイナーという職業がいらなくなってしまいますね)、「攻略法という情報」を発信する側として意識しておいて損はないことだと思います。
当たり前のことですが攻略法は当然ながら見やすいものでなくてはなりません。そのためにまず第一に、文字を背景色や背景画像から見分けやすくする必要があります。簡単なのは明度差をつけることで、一番わかりやすいのは白と黒の組み合わせです。また、補色同士を組み合わせるという方法もありますが、色の組み合わせに気をつけないと読者にきつい印象を与えて情報の信頼性を失うことになります。
|
＃白と黒の組み合わせが見やすいのは確かである。
|
ところで実用的なテクニックとして、背景色が白またはそれに近い色の時には、普通の字の文字色を灰色(#999999や#666666など)にしてやると、通常の黒色(#000000)の文字が少し強調されるようになり見栄えがよくなります。この文章は青みがかった#006699にしてあります。
判断の基準を色の識別に任せるのは避けた方が無難です。たとえば選択肢の場合、出てくる選択肢をすべて書いておいて正解を青で表記し不正解を赤で表記するだけではなくて、◎や×といった記号を使って、色以外でも判断できるようにしようということです。
| 帰っていいぞ |
| だめだ |
| ○ | 帰っていいぞ |
| だめだ |
上のサンプルのように、色だけで識別した場合を考えてみましょう（『おにいちゃんといっしょ攻略法』から抜粋）。この場合、モノクロプリンタで印刷すると、色が出ないため識別がしにくくなります。実際にはグレースケールで表示されるわけですが、判別のしやすさは色の有無に大きく左右されます(フレーム無し版はこちら)。
インクジェットプリンタはカラーが普通ですが、レーザープリンタはモノクロが普通です。従ってモノクロで印刷してもわかるように編集することが、利用者への配慮といえましょう。
WindowsでもMacでも色ずれしない216色です。256色環境で表示しきれない色は、近い色に置き換えられたりして、作者が本来は意図しなかった色で表示されます。このため、ズレをなくすにはWEBセーフカラーを使う必要がでてきます。こちら( →iii.WEBセーフカラーと明度)でも扱ってはいますが詳しくはこのサイトを参照してください（『情報・通信辞典e-Words』Webセーフカラー一覧）。
|
#とはいえ、このWEBセーフカラーを使えば「作成者」の環境と「閲覧者」の環境で必ず同じ色になるかというとそういうわけにはいかない。MacとWindowsではデフォルトのガンマ値が違うし、ディスプレイやグラフィックカードの個性が出る(「そもそもセーフではない」という話もある)。 また、そもそもPCは工業製品なので、同じメーカーの同じロットでさえ、まったく同じ色が出力されるということはまずない。ICCプロファイルなどでの補正もされてはいるが、必ずしも同じ色が出るわけではなく、あくまでも仕様として同じ色が出るはずだ、という風に理解してほしい。 「セーフではない」：『Webサイトをキレイにみせる色彩活用術』P.80 VisiBone:"Web Palette Color Distinction Test(Sat, 30 Jan 1999)"別の日本語訳された部分 WebMonkey:『ウェブセーフカラー・パレットは死んだのか？(日本語訳)』を参照 ICCプロファイルについて：色の話その2／色の管理実践＿モニタ編(Ryo's Graphic Market) |
本格的に色を勉強するときの参考資料としてください。
書籍ならばまず色の資格試験(A・F・T色彩検定/東商 カラー検定/色彩士検定)の本を読んでみるといいと思います。彩色の基本から学ぶことができて普通のWEBサイトの作成にも参考になる点が多いはずです。
また、WEBで実践的に使うなら配色サンプルを用意した方がよいでしょう。
『WebDESIGN配色サンプル for Web safe color』内田広由紀著 視覚デザイン研究所編 ISBN4-88108-162-4 \2.300+税
『Webデザインのためのデジタル色見本帖』クロスライン プラス株式会社 土橋敬彦著 オーム社 ISBN=4-274-06394-1 \2.500+税
などがあります。前者はWEBセーフカラーに対応しており、後者はWEBセーフカラーにこだわらないことを前提として作られています。
その他参考として以下の2冊を挙げておきます。
『配色ノート』 視覚デザイン研究所 編 ISBN4-915009-18-1 \3.400+税
『Webデザインの基礎講座』 視覚デザイン研究所 編 ISBN4-88108-157-8 \2500+税
『配色ノート』の方では、色彩に関する基礎的な理論から例を踏まえてわかりやすい説明がされています。また、6色配色の見本などにCMYK▼の数値とともにどんな色か表示してある点がいいところです。
|
#注意しておきたいのは、パソコンはRGB▼の加色混法であり、印刷媒体はCMYK▼の減色混法であってそれぞれ違うということ。CMYKで書かれた書籍の場合は、印刷での見え方とディスプレイ上の見え方に差があるし、数字をそのままCMYK→RGBに変換しても見え方が変わってしまうので、実際に自分の目で見て調節する必要がある（実はこれをしなかったのが冒頭の悪い例で出した『おにいちゃんといっしょ攻略』）。 |
スタディルーム(Color Dream Net)
とにかく詳しい。とりあえずはここから読むとよいでしょう。
MSDN Web Workshop 『More or Hess コラム アーカイブ』
・色相環
・配色
・色覚に障害を持っていたとしたら、あなたのサイトは見えるでしょうか ?
ここでは取り上げませんが色覚異常者への配慮ができるとなおよいでしょう。
この点に関しては付録：色覚異常者への配慮で少し説明をしています。
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
READMEってなんでしょう？そう、よくゲームのCD-ROMにはいってたり、フリーウェアやシェアウェアを解凍したときに一緒にでてきたりする、あの説明文です。個人WEBサイトで公開されているゲームの攻略法にはついていることは少ないのですが、niftyではライブラリにアップするときに説明文を一緒にアップしなければならないため、きちんとしたものが作られています。この説明でよくわからない場合は、実際の例を見てもらった方が早いと思いますので、こちら(『6.4.README例文』)をご覧ください。
READMEが嫌であれば「著作権ポリシー」などの形で文書についての説明をしてもかまいません。とにかく何らかの形でそういったことを表記しておいた方がよいだろうということです。
なんのことはありません。HTML▼で攻略法を作った場合はHTMLでREADMEを作ってリンクを張った方が、使う側が見る機会も多くなりますし、統一性があってよいというだけの話です。攻略法のタイトルロゴなんかを作った日には、そのタイトルロゴをクリックするとREADMEに飛ぶなんていうのも遊び心があってよろしいかと思います。
上の項目とも関係してきますが、HTML▼で1ページのみの攻略法の場合も、最後にREADMEをつけた方がよいだろうということです。1ファイルのみではTEXTファイルの添付ができないという問題点が解消されるだけでなく、利用者がREADMEを見る回数が増えるという利点もあります。(『Moe攻略法HTML版』参照)
HTML▼で書いたのなら対応ブラウザを、その他のソフトで作ったのならどのソフトで作ったのかを書いておきましょう。
HTMLで作ったときは対応ブラウザ以外で見られることを意識して、READMEをTEXTファイルで作る、あるいはCSS▼などを使用しないようにするのがよいでしょう。読めないREADMEに「読めません」と書いてあっても意味がないですから。その際には以下のように「◎」「○」「△」「Ｘ」などの記号と説明を書いておくとわかりやすくてよいかと思います。
| 記号 | 説明文 | 具体的な説明 |
|---|---|---|
| ◎ | (ほぼ作者の意図したとおりに表示) | 完全に意図どおり、もしくはちょっと意図とは違うというくらいの場合。 |
| ○ | (閲覧には支障ありません) | CSSが無効になっている場合やいらないスペースが入っている場合などです。 |
| △ | (使用は困難です) | ほとんど崩れているが一部が判別可能である場合などです。実際には実用に耐えないものと思われます。 |
| × | (御覧になれません) | 判別が絶対できない場合。 |
また個人WEBサイトで攻略法を作っている場合、READMEも一覧リストからすぐに見られるようにしておけば、利用者は使いやすいでしょう。
こういうのはほとんど定形文なので、下の例文をコピーして付け加えたり削除したりして仕上げたりするといいでしょう。下の文は自由に改変して使用してもらってかまいません。著作権フリーの例文と考えてください。HTML▼でREADMEを作る際にはこの『攻略法の作り方』のREADMEを参考にしてください。
======================================================================
【データ名】Moe-萌黄色の街-攻略チャートHTML版
【登 録 名】Moe.htm 【moe】攻略チャートHTML版
【検索キー】1:攻略, 2:Moe 3:萌黄色の街 4:ユニゾンシフト
【著作権者】KO-1(DZR05634)
【作成協力】攻略プロジェクトルーム有志
【動作環境】HTMLファイルの読める環境。
CSS対応ブラウザを推奨。
【転載条件】作者に連絡ください
======================================================================
【チャート紹介】
・メインヒロイン6人+αの攻略法
・CG及び"ひみつメモ"コメント欄の出し方を網羅
基本的にこのゲーム、オンリープレイで追っかけをやってれば大抵クリアで
きます。そういうわけであんまり難易度は高くないんですが、かといって正解
の選択肢を探したり力技でクリアしたりするのは軽妙なギャグの掛け合いのテ
ンポを崩してしまって面白くなくなるので作ってみました。
※このチャートは元々テキストファイルで作成されたものをHTMLに再編集した
ものです。HTML向けに再編集したところはありますが、攻略法自体は基本的に
テキストファイル版と変わりません。
【使用方法】
このファイルはHTMLファイルです。Moe.htmという名前でダウンロードして
いただければ、ダウンロード後すぐに御覧になれます。
またこの攻略法はCSSを使用しています。CSSに対応したブラウザ(下記表示
確認済みブラウザで◎のもの)で見ることを推奨します。
【表示確認】
《ブラウザ名》 《言語/OS》《表示》
Netscape6 ja/Win ◎(ほぼ作者の意図した通りに表示)
Netscape Communicator4.73 ja/Win ◎(ほぼ作者の意図した通りに表示)
Netscape Navigator3.01 ja/Win ○(閲覧には支障ありません)
Internet Explorer5.5 ja/Win ◎(ほぼ作者の意図した通りに表示)
Internet Explorer3.0 ja/Win ×(御覧になれません)
このファイルは以上のブラウザにて表示確認をしています。
【免責事項】
出来るだけのことをして検証を進めたつもりですが、解析まではやっていな
いので万全というわけではありません。従って、間違い等があるかもしれませ
んが、その際は誠に勝手ながら作者は一切の責任を負わないものとさせていた
だきます。ご了承下さい。
【その他】
この攻略チャートはＫｅｎさん(QWS05104)のパティオ『攻略プロジェクト
ルーム(パスワード未設定)』で検証して貰いました。場所を提供してくれたＫ
ｅｎさん、そしていっしょに検証してくれた全ての人たちにこの場を借りて感
謝いたします。
・何かご意見ご感想があればKO-1(myu-myu-myu@nifty.com)までメールしていた
だくか、あるいは上記パティオでの発言という形でお願いします。
2000年12月某日 DZR05634 KO-1
|
＃この定型文はniftyへライブラリ登録する際に使う形式なので、ヘッダ部分など、WEB用に作る際には必要のない項目が含まれている。とはいえ、まだフリーソフトでもこういった形式でREADMEを書いている人もいることと、また一部必要のない項目が含まれているものの合理的にできている、ということから定型文としてこれを採用することにした。 インターネットでしか公開しない場合に特に必要のない項目はヘッダ部分の【登録名】と【検索キー】だろう。本文においては特別なソフトを必要としないかぎり【使用方法】は必要ない場合が多いと思われる。 もちろんこれが絶対唯一のREADMEの書き方というわけではないので、自分なりに利用者から見て読みやすいREADMEを追求してほしい。 |
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
作ったときのゲームのバージョンや、販売・制作元のサイトのURLを書いておいた方が便利でいいと思います。また修正ファイルがある場合はそれについても言及しておくといいでしょう。修正ファイルは制作元の他にPC GAMEサポート情報専門サイトである『りぺあ』にあるかもしれません。
|
りぺあ http://red.sakura.ne.jp/~nawa/ |
攻略法の作成日時や更新履歴を附しておくことでいつの情報かわかります。7.2のゲームのバージョン情報を補完することにもなるでしょう。できればページごとに入れておくのがよいと思いますが、READMEに一括して書いておいてもいいかと思います。
その攻略法独特の記号の使い方をしている場合は、ページごとに説明を書いておくのが親切でしょう。
| ★自分が行動して起こすイベント ☆強制イベント 「（カッコ内）」は選んだ選択です。一字一句同じというわけではないのでご 了承下さい V,CG…そのイベントがVは声有り、CGはＣＧ有りを示しています |
| | | | |
←この部分 |
| 表以外にも数回会うなり電話するなりする必要があるかもしれません ★4/8 原稿書き 「そうするかな」 ☆5/5 - 家に来る「もんでやる」「聞いてみるか」V,CG ↑来ない場合はアウト。日付固定 ★5/6 通路 こみパの移動で『通路』に行く ☆5/7 - 「一概にそうとは…」「安心しろって」V ↑ランダムイベント ☆6/1 - 雨宿り「一体何やってんだ？」「いくよ、バカ」V,CG ☆6/3 - こみパ行く前に電話。「でる」「わざとらしいな」「見に行くか」「からかう」 ↑たぶん電話に出て見に行けばよい。V,CG |
||
| 『こみっくパーティー攻略チャート』より抜粋 |
上の例だけではわかりませんが、青いフォント部分（矢印で「この部分」と指されているところ）はページごとにつけられています。記号なんてものは、作り手からすると自明に思えるのですが、閲覧者からするとそうではない場合が往々にしてあります。従って、説明を常にわかりやすいところにおけば、見る側がいらない混乱をすることを防げます。
ゲームのほとんどがWindowsということもあって、Windowsで見られればいいと考える方がいらっしゃるかもしれませんが、Mac上でWindowsエミュレーションソフトを使ってゲームをプレイしているという方も結構見うけます。そのため、最低限の機種依存文字については知っておく必要があります。この手のもので有名なのは丸数字とローマ数字です。これらはそれぞれフォントとしてはあるのですが、DOS/V機とMacで文字コードが違うためにうまく表示することができません。
とりあえずはこのサイトを見ておけば用は足りると思います。機種依存文字について(『スタジオ・イチ』より)
来歴などの詳しい説明はこっちのサイトを参照(『文字コードをめぐって』より)。
とりあえず以下の記号はどの機種でも見られますので、困ったときはこれだけにしておけば無難です。
、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼〜‖ ｜…‥‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＋−±×÷＝≠＜ ＞≦≧∞∴♂♀°′″℃￥＄¢£％＃＆＊＠§☆★○●◎◇◆□■△▲▽ ▼※〒→←↑↓〓 |
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
攻略法を見にくる人というのは、基本的に「攻略法そのもの」を見にくるのであって、攻略法を公開している「サイト」を見にくるわけではありません。もちろん、攻略法を見たことをきっかけにしてそれ以外のコンテンツを見てくれることも多いでしょうが、リンク集からたどってくる一見さんの場合、第一の目的は「探している攻略法にすばやくアクセスする」ことです。従って、一見さんがぱっとサイトを見て迷わないような構成にしておくことが、見る側にとって「いい攻略サイト」の条件といえます。
具体的には、攻略法の置き場をトップページから浅いところに作っておく、あるいは置き場の名前をわかりやすいものにしておくといったことです。たとえば置き場の名前を「ゲーム虎の穴」などとしてしまうと、自分あるいはよく見にくる人にはわかっても、一見さんにはわかりにくいでしょう。従って、そういう一般的には通じない名前は回避するか、もしくはつけても「ゲーム虎の穴（攻略法）」などとカッコ書きしたり、説明文を後ろにつけたりするなど、一目でそのリンク先に攻略法があることを明示するのがよいでしょう。
場合によっては攻略だけ別館にして独立させてしまうというのもいいかもしれません。
攻略法の数がさほど多くないうちはいいのですが、扱う攻略法の数が多くなってくると、無事に攻略法の一覧・目次ページにたどり着いてもらったあとで、今度は閲覧者が必要としている攻略法を簡便に見つけてもらうようなページの構成を考える必要が出てきます。
このとき、少なくとも攻略する「ゲームのタイトル」と「メーカー名」は正確に書く必要がありますが、ここで大きな問題があります。攻略法の並べ順です。タイトルで並べ替えをするか、メーカーで並べ替えをするか。五十音順、または英数＋五十音順にするかといったことです。またタイトルには、当て字が多用されていますので、その扱いについても考える必要があります。
ただ、日本語以外の言語は読み方が読者によって一定しないことや、そもそも日本語の区分に合わないことがあり得ますので、英数＋五十音順で並べることを推奨いたします。
リストを作るときに並べ方が重要であることは先に述べましたが、そのリストにどういう情報を載せるのかということについて考えてみることにします。
まず第一に「ゲームのタイトル」「メーカー名」は必須でしょう。メーカー名に関しては必要性が薄いような気がするかもしれませんが、似たタイトルやまったく同じタイトルがある以上、識別するためにいっしょに載せておいた方が親切かと思います。それから攻略法の「README」へのリンクも作っておくと、出自がはっきりしてよろしいかとおもいます。また自分の作った攻略法だけでなく、他人の攻略法も載せている場合は「攻略法の作成者」を載せておくとよろしいでしょう。
素のままの攻略法を置くだけではなく、LHAなどの圧縮ソフトを使ってまとめた形で置いておくという手法も知っておくとよいと思います。今でこそ都市部では常時接続が普通になってきましたが、都市部を離れると常時接続にできない人もいますし、ローカルファイルに保存して見たいときに見られるようにしておきたい人もいるでしょう。また1ページずつ保存するのは面倒ですし、ブラウザで別々に保存するとリンクが切れて使いにくくなります。そういうわけで、あらかじめ1つにまとめて置いておくことでその手間を省くことになります。
以下の例を参照(フレーム無し版はこちら。例はこのために編集したもの)。
リストの形式としてはJavaScriptを利用するという方法もありますが使い方が難しいです。環境に左右されやすいことと、使い方によっては目的の攻略法を探しにくくなることを意識する必要があるでしょう。「全部表示する」で全攻略法のリストを出力できるようにすることで、探し易くすることはできますが、環境については極力テストを行うか、さもなければある程度割り切ることが必要になります。パソコンショップのサイトなど、商用で使いやすいサイトを参考にするとよいかと思います。
攻略法のサイトを作るのであれば、どういうスタンスで攻略法を作るかという事を意識して作ると良いでしょう。具体的には
1.速攻型
2.確実型
3.レア物型
といった方向性があると思います。1の速攻型は現在の主流であるゲームの発売日から出来るだけ早い時期に攻略法をあげるスタンスです。この場合は正確性を求めるあまり検証を長くしていては攻略法の鮮度が落ちますので2.1.1の選択肢列記型で作ることになるでしょう。これとは反対にゲームを新作でプレイしない人向けに「スピ−ドはともかく、あそこに行けば一番しっかりした攻略法がある」といわれるような攻略法を作るスタンスが2の確実型です。これなどは鮮度は二の次として2.1.2の自由度を持たせた攻略法や2.5のおまけ情報を充実させることが肝要でしょう。3のレア物型はこれらの軸とは違った方向性で各種攻略法リンク集・サーチエンジンで攻略法のない物に特化するというスタンスです。
あまり縛ることはないと思いますが、ある程度意識していくことで他の攻略サイトとの差別化を図る軸になるのではないかと思います。
こちらは逆に常時接続環境の人にとって深刻です。攻略法の閲覧時にBGMが鳴っていると利用者にとっては迷惑です。ゲームをしながらBGMの流れる攻略法を見ると、WEBの音楽とゲームの音楽が重なってしまうことになります。従って、BGMをつけないか、つけたとしても利用者がBGMを消せるようにしましょう。
サイトを閉じるときというのは必ずやってきます。この時これまで作ってきた攻略データをそのまましまってしまうのは、もったいないとは思いませんか？ 私としてはできることならどなたか同志に託して、代理で攻略法をWEB上にアップしておいてもらうことを提案します。個人で情報を死蔵させておくよりはずっといいことだと思います。
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
基本的に本文で紹介したサイトはすべて載せてあります。
書籍はHTML▼に慣れるまでは新しい書籍で入門的なものを使った方がよいでしょう。HTMLに慣れたあとはタグ事典を用意しておけば十分です。またデザインはコンピューター関係の書籍を漁るよりは、デザイン関係の書籍や本の編集方法に関する書籍を読んで学んだ方がいいかと思います。色のことに関しては色の資格試験関係の書籍が参考になります。
| □…サイト ■…書籍 |
書籍に関しては作者が最近の物を買ってないので、各自書店で新しい書籍をチェックされたし。
□W3C
WWW▼で利用される技術の標準化団体。HTML,CSS▼に関しても標準化をしている。
□W3Cの仕様書等の文書の日本語訳集
W3C▼は国際的機関なので言語は英語で書かれている。ということで日本語化したものがここにある。
□CSSリファレンス[ZSPC]
CSSやJavaScript▼の説明書がある。
□Another HTML-lint gateway
HTML文書の文法をチェックし、採点するサイト。
□三日坊主＋＋の部屋
CSSなどについての各種ブラウザの対応状況がのっている。例文も充実しており実用的。
□新形式のHTMLファイルについて
青空文庫のHTML化に関する文書。このなかで「Windows 用ブラウザの状況」「Macintosh 用ブラウザの状況」というところがあり、PNG 表示/スタイルシート/ルビ/XHTML Webの表示について各ブラウザの動作状況が表としてある。
■新・作ろう！魅せるホームページ実践テクニックガイド 第２版
山田貞幸 インプレス 1999年2月刊 \2,980 ISBN4-8443-1234-0
■HTMLデザイン辞典
足立祐司 翔泳社(SHOEISHA) 1999年6月刊 \1,680 ISBN4-88135-761-1
第２版が出ている。2001年4月刊 \1,900+税 ISBN4-7981-0017-X
リンク先は第２版のページ。デザインにも配慮したHTML,CSSの書籍。
| □…サイト ■…書籍 |
色に対する感性は国や民族によって微妙に異なる(色彩学概説P.174〜参照)。著者が外国人の書籍を読む際はその点を頭の片隅において読んだ方が良いだろう。
■Webデザインの基礎講座
視覚デザイン研究所編 視覚デザイン研究所 2000年9月刊 \2,500+税 ISBN4-88108-157-8
■配色ノート
視覚デザイン研究所編 視覚デザイン研究所 1982年4月刊 \3,400+税 ISBN4-915009-18-1
■WebDESIGN配色サンプル for Web safe color
内田広由紀著 視覚デザイン研究所編 2001年6月刊 \2,300+税 ISBN4-88108-162-4
視覚デザイン研究所のシリーズは理論的かつ実践的な作りになっており、これらの本に限らずおすすめである。
■Web配色事典〜Webセーフカラー編
（株）シーズ 著 技術評論社 \1,880+税 2002年1月刊 ISBN4-7741-1369-7
視覚デザイン研究所のシリーズと同じPCCS表色系を採用している。本家の配色ガイドの方が正統的に基本色を24色にしているのに対し、こちらは30色の基本色で構成しているのが特徴。
■Webサイトをキレイにみせる色彩活用術
リ−・ホルツシュラグ著 オーム社 2001年12月刊 \3,300+税 ISBN4-274-07936-8
中級者以上向け。WEBセーフカラーを使用するだけで色の互換性が保てるとする安易な立場に疑問符を投げかけている。
■Webデザインのためのデジタル色見本帖
クロスライン プラス株式会社 土橋敬彦著 オーム社 2001年3月刊 \2,500+税
ISBN=4-274-06394-1
セーフカラーは考慮しないということを明言して書いている。
■WEBカラーハーモニー
ケリン・ボイル著 有限会社リンガフランカ翻訳 グラフィック社 2001年7月刊
\3,500+税 ISBN4-7661-1225-3
■ウェブ・カラー(www.colour)
ロジャー・プリング著／アレステア・キャンベル監修 有限会社リンガフランカ訳
グラフィック社 2001年4月刊 \3,500+税 ISBN4-7661-1198-2
コンピューターで色を扱うことについての体系的な書。
■新編色彩科学ハンドブック
日本色彩学会編 第2版 東京大学出版会 1998年,6月刊 \36,000 ISBN4130611127
やたら分厚い色の本。ハンドブックというよりは事典である。色のことで困ったらとりあえずこれを開けばよいのでは。
■色彩学概説
千々岩英彰 東京大学出版会 2001年4月刊 \3,200+税 ISBN4-13-082085-0
色彩に関する専門書。
■色彩論
ヨハネス・イッテン著 大智浩訳 美術出版社, 1971年9月刊 \3500+税 ISBN:
4-568-52004-5
古典的な色彩論の教科書。実際にはこれはドイツで1961年に出版されたダイジェスト版の翻訳。完全版は『色彩の芸術:色彩の主観的経験と客観的原理(ヨハネス・イッテン著
; 大智浩,手塚又四郎訳)』の名前で翻訳されたそうだが、そちらは現在では絶版だそうである。
□Color Dream Net
『スタディルーム』は色に関する有用な情報が多く、勉強になる。
□Webセーフカラー一覧(情報・通信辞典e-Words)
色ずれしない216色。
□MSDN Web Workshop『More or Hess コラム アーカイブ』
・色相環
・配色
・色覚に障害を持っていたとしたら、あなたのサイトは見えるでしょうか ?
□色彩検定
正式名称は『文部科学省認定 ファッションコーディネート色彩能力検定』。Ａ・Ｆ・Ｔ(社団法人
全国服飾教育者連合会)が主催している。
□カラー検定
正式名称は『カラーコーディネーター検定試験』。 東京商工会議所が主催している。
□色彩士検定
合格者は色彩士(Color Master)の資格を得ることができます。色彩士検定委員会が主催している。
□色彩ガイド
『色彩検定の違い』のページで上記3つの色彩関係資格試験の違いについて触れられている。勉強する際はそれぞれの方向性を見極めた上で参考書を選ぶとよい。
□VisiBone:"Web Palette Color Distinction Test(Sat, 30 Jan 1999)"
原文は英語。こっちは別の日本語訳された部分。
125色しかセーフではないかもしれないと指摘している。
□WebMonkey:『ウェブセーフカラー・パレットは死んだのか？(日本語訳)』
22色しかセーフではないかもしれないという文章。
| □…サイト ■…書籍 |
各ブラウザや本文で紹介したアプリケーションソフトなどへのリンク。
□Netscape Communicator&Netscape6,x/7.x
NN3,x,NC4x,Netscape6,x▼,Netscape7.xはそれぞれ共存させることが可能。ただしインストール時に他のバージョンのフォルダに上書きしないように注意。
□mozilla(もじら組/mozilla.org)
Netscapeのオープンソース化を受けて設立されたのがmozilla.org。もじら組は日本語版を配布している。Netscape6以降はここで作られたGeckoモジュールを使用しているが、全部が同じわけではない。Netscapeとの共存も問題なく可能。
□Opera
通称第三のブラウザ。商品版とFree版があり、Free版は広告が表示される。
□EmEditor[Emusoft](270KB)
現在では本家のサイトでは、フリー版の配布は行われていない。
しかし再配布が『X-GAME STATION ANNEX』などでされている。
□Adobe Acrobat Reader(最新版しかDLできない。version5は10,008KB)
□Midrosoft Word Viewer 97(5,078KB)
□Microsoft PowerPoint Viewer 97 (PowerPoint 2000 対応版)(2,842KB)
□Microsoft Excel Viewer 97(4,042KB)
| □…サイト ■…書籍 |
□りぺあ
PC GAMEサポート情報専門サイト。各ゲームの修正ファイルの情報を扱うばかりでなく、修正ファイルそのものを配布していることもある。
以下主な攻略法へのリンク集並びにサーチエンジン。
□ゲーム攻略への道(管理人：ＮＥＫＯｘ２氏)
□ゲーム攻略への道：家庭用ゲーム・パソコン用ゲーム攻略リンク(管理人：不明)
□ゲーム攻略エンジンMagicalGirl(管理人：ねこる〜氏)
□GamersClub ゲーム攻略サイト専門サーチエンジン(管理人：ComputerMusicCenter/窪田しのぶ氏)
□ゲーム攻略・裏ワザリンク集(管理人：seven氏)
■「超」勉強法
野口悠紀雄著
書籍版：講談社 1995年12月発行 \1,456＋税 ISBN: 4062076012
文庫版：講談社 2000年3月発行 ￥533+税 ISBN: 406264827X
野口悠紀雄自身が極めて論理的かつ平易な文章を書く学者でもあり、国語の章は「書く」という行為についての実務的なノウハウが詰まっている。『実践編』と共に一読の価値あり。
□pierre design
各ブラウザの透過PNG対応度のページ
この文章で言及・引用した攻略法です。
□AIR攻略法(TXT/HTML版)
□Alive攻略法(TXT版)
□CherryWorks攻略法
□Moe攻略法
□Phantom攻略法(Phantom of Inferno攻略法)
□POWDER SNOW攻略法
□おにいちゃんといっしょ攻略法
以上のものについてはＫｅｎさんが運営しているX-GAME STATION ANNEXで入手することができる。またnifty:FCGAMEX/LIB/04でも入手は可能。
□こみっくパーティ攻略チャート
以上のものについてはnifty:FCGAMEX/LIB/04でしか入手できない。残念ながら@niftyのIDがなければ入手できない。IDの取得に関しては@niftyのサイトを参照のこと。
| 1/2/3/4/5/6/7/8/9/10 フレーム化 / 付録 |
| 【データ名】 | 攻略法の作り方 |
|---|---|
| 【著作権者】 | KO-1(myu-myu-myu@nifty.com) |
| 【最終更新日】 | 2002/09/28 |
| 【動作環境】 | HTMLファイルの読める環境 CSS機能のあるブラウザを推奨 (IE5.5/NC4.7x以降を推奨) |
| 【転載条件】 | 作者に連絡ください |
【内容紹介】
【本文目次】
1.はじめに
2.攻略法の内容
3.HTMLで攻略法を作る
4.HTML以外のファイル形式
5.配色
6.READMEの作り方
7.その他
8.攻略サイトの運営
9.参考文献・出典
10.README
【付録目次】
i.知的財産権
ii.色覚異常者への配慮
iii.WEBセーフカラーと明度
iv.チェックリスト
v.サイトマップ/索引/略語用語集
★素材集(フリーサンプル・テンプレート集)
▼本文1〜10を連結したもの(印刷用)
▽付録を連結したもの(印刷用)▽
【使用方法】
LHA版は自己解凍ファイルになっています。まずMaking.exeという名前でダウンロードしてください。ダウンロード後、このファイルを実行すると解凍する場所を聞いてきますので、適当な場所を選択してください。無事解凍できたらindex.htmを開いてください。
HTML版はそのままごらんになれると思います。ただし、この「攻略法の作り方」はCSSを使用していますので、以下の表示確認で◎のついたブラウザで閲覧されることを推奨いたします。
【表示確認】
このファイルは以上のブラウザにて表示確認をしています。
ブラウザ名 言語/OS 表示 Internet Explorer6.0 SP1 ja/Win ◎(ほぼ作者の意図した通りに表示) Internet Explorer5.5 SP2 ja/Win ◎(ほぼ作者の意図した通りに表示) Netscape7(mozilla1.01) ja/Win ◎(ほぼ作者の意図した通りに表示) Netscape Communicator4.78 ja/Win ◎(ほぼ作者の意図した通りに表示) Netscape Navigator3.01 ja/Win △(使用は困難です) Opera6.05 ja/Win ◎(ほぼ作者の意図した通りに表示)
【この攻略法へのリンクについて】
・自由にしていただいてかまいません。各ページへの直リンも同様です。
【更新履歴】
更新履歴の詳細はhistory.htmを参照。但しこれは簡易版とし、正本は書庫ファイル版についてくる「更新履歴.txt」とします。
ver.1.01 2002年09月28日 ver.1.00 2002年05月03日
【謝辞】
・Ｋｅｎさんにはこの『攻略法の作り方』を作るきっかけから編集作業まで多大な協力をしてもらいました。
・akitoさんには貴重なご意見をいただきました。
・β版まではHTML版の確認作業を『攻略プロジェクトルーム』でしてもらいました。
その他お忙しいところ読んでいただいた方やいっしょに検証してくれたすべての人たちにこの場を借りて感謝いたします。
【その他】
・一部著作権フリーの素材を用意していますが、厳密には現行の日本国著作権法では著作権人格権を放棄することができないと考えられています。従ってここでいう著作権フリーとは、「その素材の使用にKO-1が何も言わない」ということであると理解してください。
・何かご意見ご感想があればKO-1(myu-myu-myu@nifty.com)までメールでお願いします。
| ▲TOP▲ | ■フレーム化■ | ||
| ■INDEX■ | 付録 |
KO-1（myu-myu-myu@nifty.com）
|
|
