ここまで注意点としてグダグダややこしいことを書き、すでにみどり同盟ブログがファンサイトリンクに載っているからといって偉そうなことばっかり書き、私が作ったものの内すでに出来上がって（方向性が決まって）いるサイトだけを例に出してきましたので、「じゃあみどり同盟ブログ（みどりメッセンジャー、みどりプレーヤー、リンクナビ、広報室＠出張所なども含む）、うさポン♪（以下略）などなど以外でファンサイトリンクに申し込むようなレベルのものを、新しく何か作ってみてよ」という突っ込みに、このあたりでこたえ始めたいと思います。

　

確かに、すでにあるみどり同盟ブログを例にあぁだこぅだ言っても、みどり同盟ブログをマネればそれでOKという間違った結論になってしまいますので、ここで新たに一つのサイトを作ってしまうというところからはじめてみます。
かといって、私がみどり同盟から離れて別のサイトを作るというのもヘンですので、とりあえずは目標を決めて、徐々に設定をしていき、最終的にはみどり同盟ブログ内の１コンテンツになるように作ってみます。

　

誰にもまねのできない私ならでは、みどり同盟ブログならではのモノを作ってみます。
「まねできない」とは言え、技術的に難しいことをしているわけではなりませんので、こんなメンドウなことにチャレンジしてみようという人はどんどんマネしてください。
これだけでホントに一つのサイトをつくってしまっても楽しいでしょう。

　

この時点では頭の中にモヤ〜ッとアイデアがあるだけです。
次回からの作業開始をご期待ください。

最初に企画を考えます。
この時点では、何をやるのか、何を目指すのか、何をやらないのかなどを明確にしておけば良いでしょう。
サイト制作のときに、いつも最初にホームページ制作ソフトを立ち上げちゃってる人は閉じてください。
私の場合はホームページ制作ソフトなどは使わず、Windows付属のメモ帳やMac付属のTextEditを使って制作していますが、この時点ではそれらも使いません。
手書きの≪リアル≫メモ帳で進めます

　

あこの連載はいわゆるハウツー記事ではありませんので、私の説明どおりに作業を進めるようなものではありません。
「説明を聞いていけば誰でも簡単にできちゃう！」ような記事ではありません。
実際の私の作業を参考にどうぞ、という企画ですから

　

まだまだモヤ〜ッとしていますが、何をやろうとしているのかを箇条書きにしてみました。
この時点でできるだけ明確にできれば良いのですが、なかなかそううまくはいきません。
ですので、別の記事でも書いたような≪アイマイさ≫も考えておく必要があります。
後戻りをするのはメンドーですからね。
たとえば、画像中心になるか文字中心になるかはまだ（わざと）決めていません。
多分画像を使うことになるとは思いますが、実際の制作にどんな画像編集ソフトを使うのかもまだ決めていません。

　

そのあたりも含め、次回にくわしく考えていきます。

今回は、前回立てた企画を元に、実際にそれらを実現するために必要な機能を考えます。
まだまだ≪リアル≫メモ帳の作業が続いています。

　

どういうプログラムを組むのか、どんなソフトを使うのか、どのくらいの時間がかかるのかなどが見えてきます。

　

今回は企画をたてるでも出てきたように、画像はほとんど既存のものを再利用しますのでグラフィックツールは（過去の画像の修正以外には）ほとんど使いません。

　

動きを作りたいので、オーサリング（最終的に一つのものにまとめる）ツールにFlashを使わなければならないことも、ここで決まりました。
元々、ほとんどWindows付属の「ペイント」と「メモ帳」だけでみどり同盟ブログを作ってきて、「ホーム」のムービー画像とゲーム、ローラー発売記念の記事だけでしかFlashを使ったことがなかったので、久しぶりです。

　

またこの時点で「画像の裏側も作ってみる」という、企画の時には出てこなかったアイデアが登場しています。
こうやってどんどん広げていくのも楽しい部分です。

まだまだ≪リアル≫メモ帳での作業です。

　

ここまででもうほとんど完成していますね。
このように、何を作るのかを明確にしておくことが最も重要で、これができればあとは簡単です。
画像の配置やトップページに凝って、とりあえずサイトを作ったけど中身は何にもなしというサイトをよく見かけます。
作る順番を間違えているようです。
webサイトは制作ソフト（私の場合はメモ帳）を起動する前にほとんどの部分が決まるので、ソフトを使うことに時間をかけてしまうと更新作業が面倒になり、結局はあっという間に消えていくサイトになってしまうでしょう。

　

今回は企画自体がシンプルなものなのでデザイン・ルールも簡単になっています。
皆さんが作るときにはもっと細かいルール作りが必要となると思いますので、例を挙げておきます。

　

ようやく≪リアル≫メモ帳とはおさらばです。
≪リアル≫メモ帳はいわば計画書・設計図ですから、目に入る位置の壁に貼り付けるか机の透明マットの下に敷くか、どちらもなければ机の上、キーボードの下敷きにでもとにかく手の届くところに置いておいてください。
ここから実際に画像を作ったり文章を考えたりという内容＝コンテンツを作る作業に入ります。

　

今回の場合はこれまでみどり同盟ブログに投稿してきた画像をそのまま使い、少し修正するだけにとどめますので、この部分の作業は簡単になるはずです。
（しかし数が多い）

　

それでは実際にいくつか作ってみましょう。
別の記事で何度も紹介しているみどり同盟☆広報室の画像をモヤ〜ッとした、古くなった紙に印刷した感じに加工してみました。
画像はそれぞれクリックすると拡大します。

　

ＭＩＮＴさんのお部屋もわざと荒れた画像に加工してみました。
この２枚は別の画像に移動するためのテレポがある画像です。
文字も画像で入れてしまいました。
このように、今回はいつものみどり同盟ブログの画像とは違って、悪く言えば「わざと汚く」、良く言えば「リアルな感じ」に仕上げていきます。

　

３枚目は、せっかくなので外に出かけて写真を撮ってきたものです。
最初から「キレイに仕上げない」計画ですので、ケータイのカメラで

　

もちろん、制作した画像が必ずしも大成功というわけではありません。
たまには出来上がった後でボツにすることもあります。
これは発想はよかったのですが、あとになってよく見てみたらゴチャゴチャしすぎててボツにしたものです。
凝っていれば良いというわけではない好例ですね

　

そして、ここからが腕の見せ所（クリックしても拡大しません）。

　

ヒャー！タイヘン。。。
もう何が起ころうとしているのかわかった人もいると思いますが、結構タイヘンです。
これまでの≪企画≫≪機能≫≪デザイン・ルール≫で出てきたように画像には何種類かの機能があり、それぞれが数十枚、裏側も合わせると100枚近く、しかも「めくれる」画像を各20パターン…。

　

とりあえずこの作業中の新たな画像は紹介せず次回に進みますが、ここでかなり時間がかかると思われます。
これも≪企画≫≪機能≫≪デザイン・ルール≫をしっかりと作ってきたからこそ（時間はかかっても後戻りなく）スムーズに進めることができるのです。
「おや？こういう場合はどうしようかな？」なんてギモンや行き詰まりががこの段階で出てこないように≪リアル≫メモ帳でしっかり作業をしてきたわけですから。

今回は前述しましたようにオーサリングにFlashを使いますので、そのプログラムを書かねばなりません。
今日はWindowsPCで作業していますので、付属のメモ帳を開きます。
リアルメモ帳じゃなくてWindowsに最初から入っているソフトです。

　

プログラム・コードをここに書いても（ここで動くわけではありませんし）何のことかわからないと思いますので、一例だけ紹介して、後は日本語で（どんなプログラムを書いているのかを）紹介するにとどめます。

コンテンツ内での配置を考えます。

　

これはかなり重要です。
それぞれのパーツがキチンと作られていても、配置がダメなために全体がダメになっているサイトをよく見かけます。
たとえばボタンが4つ並んでいるとして、それぞれの間の間隔が１ピクセルでもずれると気持ち悪くなるものです。
1番目と2番目の間隔が10ピクセルなら2番目と3番目、3番目と4番目の間隔も10ピクセルにするなど。
また、外側のボタン（1番目と4番目）とページの端との間隔も左右（上下）で同じにするべきでしょう。
文字などの位置も、上だけ詰まっていたり、右が多く開いていたりすると気持ち悪いです。

　

　

上の画像はみどり同盟ブログのメニュータブを拡大したものですが、タブ部分全体の左右の間隔、各タブごとの間隔、中の文字までの間隔がそれぞれ同じになっているのはもちろん、文字のと文字の間隔も2ピクセルにと、厳密に調整しています。
注：Habboホテル公式サイトにはここまで厳密なデザインルールは定められていません。
このようにあらかじめ決めておいたデザインルールに則（のっと）って、正しく配置を決めていけば、ひとつ決まれば次もという具合にどんどん作業がはかどっていきます。

　

ですが、今回の企画の場合は、なんとなくみどり同盟ブログの『サイトマップ』のようなものになることが見えてきていますので、≪企画≫のところで出てきたように「机の上にばらばらに散らばる感じ」に画像をちりばめていきます。
「わざと崩した感じ」にするという、これはこれでかえって難しい配置方法です。
≪素材を作る≫で作った画像素材を≪プログラムを書く≫で書いたプログラムでコントロールし、それを一画面の中に配置していくというのが今回の作業になります。

　

　

こんな感じで画像をバラバラに配置していっていますが、このコンテンツは拡大・縮小機能を持っていますので、ただバラバラに配置していいわけではなく、縮小したときにどう見えるか、なんてことも考えて進めています。
実際にどうなったかは完成品でお確かめください。

　

配置も重要ということがわかっていただけたでしょうか？

完成したらいきなり正式公開するのではなくテスト中であることを表示しておいて訪問者の反応を見ることが大切です。
よく開発中β（ベータ）版公開などと呼ばれている段階です。

　

β版ではできるだけ不具合（バグ/エラー）を出すことに専念します。
もちろん、最初からバグやエラーが出なければ良いのですが、世の中にはたくさんのPC環境があり、閲覧者がどんなOS、ブラウザーを使っているか、Flash/Shockwaveのバージョンはどうかといった情報はそう簡単にはつかめません。

　

通常、業務用サイトのβ版ではエラーページを作っておいて、エラーが出たら処理をストップしてエラー画面にジャンプさせます。
こうすることによって、サーバーにはどんなエラーが出たときに処理がストップし、エラー画面にやってきたかが記録されていますので、いちいち「エラーが起きたらどこでどんなふうに起こったのか連絡してください」なんてことにしなくても良いわけです。
また、アクセスログをとり、閲覧者のFlash/Shockwaveのバージョン情報も自動取得できていれば、どんなOS、ブラウザーで、どんなFlash/Shockwaveバージョンでエラーが起こるのかを簡単に調べることができます。
…というのは業務用サイトのは・な・し。

　

みどり同盟ブログではそこまでのことはしていませんので、閲覧者の方々のコメントでご報告・ご感想を求めるしかありません。
意外とローテクですが、コンピューター任せにせず、対話でコミュニケーションをはかるというバランスも大切にしています！ってことで、メンドーでも、ご報告お待ちしています。

　

とは言え、今回の企画は画像枚数は多いもののプログラムもすっきり簡単になっていて、実際に動かす前から（メモ帳画面を見つめながら）バグは全部取り除くことができてしまいましたので、あとは各種環境のエラー報告があるか、ないか、それだけです。
たとえば、通信速度の影響で、「画像を読み込み中に止まっちゃって動かなくなりました」なんてのが出てくるかもしれません。

　

テストとしてはうさりん♪さん、francaise66さん、いちごロックオンちゃん、ヨデさんに参加していただきました。
4人の通信環境、PC、OSなどはまったく違うものであり、francaise66さんはフランス在住（もちろんフランス人）ですので、日本人とはまた違った観点からのご指摘をいただきました。

　

このように、テスト公開をするときはできるだけたくさんの人の環境で見てもらうことが大切です。
今回の企画の場合は正式に公開してからがテスト本番となりますので、まずは自分（会社＆自宅）と上記4人の合計6環境でエラーなし、と判断しました。
いよいよ次は正式公開です。

　

そうそう。
間違ってもテスト公開中のアドレスで他のサイトと相互リンクしちゃったりしないでください。
テストはあくまでもテストですからディレクトリの設定などを一時的なものとしておき、正式公開時にはアドレスが変わるようにしてください。
テスト中にいろんなところからリンクされてしまい、大きなバグが潜んでいたために、正式版の制作を進めるどころか苦情への対処に追われる…なんてことになりかねませんので。

今回の企画は、この連載記事「ファンサイト制作の道しるべ」を書くに当たって、ついでにサイトマップもどきも作っちゃえという一石二鳥企画だったわけですが、これまでみどり同盟ブログでは本体プログラムの完成以降、小さなパーツを付け足していくようなことしかしていなかったので、仕事以外で本格的なwebサイト制作作業をするのはホント久しぶりのことでした。

　

そして、こうやって最初から作りながら記事を書いたからこそ見えてきたものがあります。
結局のところ、webサイト制作は、ソフトの性能や技術ではなく、何を伝えるのかを明確にした上で人を楽しませたい欲求、人を驚かせる欲求、そして自分にできることとできないことをはっきりと考えた上で限界ギリギリを攻めるスリルｗこれらがモチベーション（やる気）となって、一歩また一歩を踏み出すことができるという積み重ね作業なのだなぁ、と。
だから簡単なソフトを買って形だけすばやく作っても中身がなければすぐに飽きちゃうし、一瞬だけほめられるためにがんばっても長続きしないということ、他人にほめられるために作ってしまうと最終的には苦痛になるということが、よ〜くわかりました。
っていうか、みんなもわかってください

　

私の場合は本職でもありますので、自分の能力の限界を見極めるスリルはありませんが他人に楽しんでもらった上で驚かせることが最重要項目になっています。
とにかく何でもつめこんじゃえ！的なファンサイトが多く、結局中身がないまま放置されるか消滅しているところが多いのを残念に思っているのです。
もちろん（みどり同盟ブログが良い例ですが）何でもつめこんじゃうのは、それはそれで良いのですが、長続きしてないところが多すぎ！
とりあえず作ることに意義があるのではなく、（まだ作ってなくても）何を作りたいのか考えることに意義があるのです。
そして一番重要なのは続けることです。
無理してでも続けるのではなく、簡単に続けられるようなサイトを作ること。

　

たとえば、掲示板を設置したら誰かがメッセージを残してくれるでしょ？
他の人が書いてくれたメッセージって、それがたとえ一行であっても、とっても大切なものなんですよ。
どんなに簡単なメッセージでも、掲示板を開いた瞬間に何を書こうか考えて、そのときのその人にしか書けないメッセージを残して行ってくれてるんですからね。
それを簡単に削除するなんてとても悲しいことです。

　

顔が見えないからいいとか、コンピューターを介したものだから軽く見ていいとか、インターネットなんてどんどん更新されていくんだから…とかいう考えは間違いです。
掲示板にカキコしたメッセージも、あなたが作ったwebサイト自体も（もしもたった一文字しかないサイトでも）、インターネット上にある情報の一つ、たかがサーバーに記録されたデータの何キロか何メガかのデータなのかも知れませんが、それは一人がこっそり書いている日記とは違って全世界に向けて公開された瞬間から、一人でも訪問者が訪れた瞬間から、人間が人間と交流した記録になるのです！

　

　

さて、ずいぶんと引き伸ばしてきましたが、いよいよ完成作品の公開です。
連載最後の記事では完成した「みどり同盟ブログ・サイトマップもどき」を紹介し、その記事そのものが技術情報（記事グループ）になっています。