できれば連載第一回目の記事から読んでください！
この連載は全体を通して一つの文章になっていますので、一部だけを取り出して解釈してしまうと間違った方向へのアドバイスになってしまうこともあります！
この連載は全体を通して一つの文章になっていますので、一部だけを取り出して解釈してしまうと間違った方向へのアドバイスになってしまうこともあります！
楽しいファンサイトの作り方？実践編〜デザイン・ルールを設定する〜
まだまだ≪リアル≫メモ帳
での作業です。
ここまででもうほとんど完成していますね。
このように、何を作るのかを明確にしておくことが最も重要で、これができればあとは簡単です。
画像の配置やトップページに凝って、とりあえずサイトを作ったけど中身は何にもなしというサイトをよく見かけます。
作る順番を間違えているようです。
webサイトは制作ソフト（私の場合はメモ帳）を起動する前にほとんどの部分が決まるので、ソフトを使うことに時間をかけてしまうと更新作業が面倒になり、結局はあっという間に消えていくサイトになってしまうでしょう。
今回は企画自体がシンプルなものなのでデザイン・ルールも簡単になっています。
皆さんが作るときにはもっと細かいルール作りが必要となると思いますので、例を挙げておきます。
での作業です。
■デザイン・ルール
・全体は白地。
・一つの画像（ページ）を700×500ピクセルに収める
・別ウィンドウを開くボタンは≫GOというアイコンに統一する
・別の場所に移動する場合はテレポをクリックする
・画像の裏を見るときは「めくる」感じのアイコンをクリック
・≫GOや「めくる」アイコンはマウスを乗せると少し動く
・≫GOや「めくる」アイコンはわかりやすくオレンジ系の色に統一
・全体は白地。
・一つの画像（ページ）を700×500ピクセルに収める
・別ウィンドウを開くボタンは≫GOというアイコンに統一する
・別の場所に移動する場合はテレポをクリックする
・画像の裏を見るときは「めくる」感じのアイコンをクリック
・≫GOや「めくる」アイコンはマウスを乗せると少し動く
・≫GOや「めくる」アイコンはわかりやすくオレンジ系の色に統一
ここまででもうほとんど完成していますね。
このように、何を作るのかを明確にしておくことが最も重要で、これができればあとは簡単です。
画像の配置やトップページに凝って、とりあえずサイトを作ったけど中身は何にもなしというサイトをよく見かけます。
作る順番を間違えているようです。
webサイトは制作ソフト（私の場合はメモ帳）を起動する前にほとんどの部分が決まるので、ソフトを使うことに時間をかけてしまうと更新作業が面倒になり、結局はあっという間に消えていくサイトになってしまうでしょう。
今回は企画自体がシンプルなものなのでデザイン・ルールも簡単になっています。
皆さんが作るときにはもっと細かいルール作りが必要となると思いますので、例を挙げておきます。
デザイン・ルール：よくある例
■文字
形（フォント）、サイズ、色、改行したときの並び方、画像に回り込むときの配置、リンク（色、アンダーラインの有無、一度訪問したリンクの色など）、※背景色によって変化するパターンも決めておく（つまり背景色のバリエーションも決めておく）
■画像
最大/最小サイズ、周りの枠の設定、解像度、ファイル形式（JPEG/GIF/PNG、BMP形式は重いだけでなくMacでは見れないので
）、画像と文字との間隔、画像と画像の間隔
■背景
色、コントラスト
■ボタン
形、サイズ、位置、ボタンの中に書かれる文字の色・サイズ
■メニュー
位置、並び方、色、クリックしたときの反応
■その他
ページ全体のウィンドウに対するマージン（間隔）、サイトタイトル（どのページからでもクリックするとホームに戻る）、迷いにくい構造、ページの上に戻るボタン、ヘッダー（上部のメニューなどの固定ブロック）、フッター（固定して表示される著作権や最終更新日などの記録）
■文字
形（フォント）、サイズ、色、改行したときの並び方、画像に回り込むときの配置、リンク（色、アンダーラインの有無、一度訪問したリンクの色など）、※背景色によって変化するパターンも決めておく（つまり背景色のバリエーションも決めておく）
■画像
最大/最小サイズ、周りの枠の設定、解像度、ファイル形式（JPEG/GIF/PNG、BMP形式は重いだけでなくMacでは見れないので
）、画像と文字との間隔、画像と画像の間隔■背景
色、コントラスト
■ボタン
形、サイズ、位置、ボタンの中に書かれる文字の色・サイズ
■メニュー
位置、並び方、色、クリックしたときの反応
■その他
ページ全体のウィンドウに対するマージン（間隔）、サイトタイトル（どのページからでもクリックするとホームに戻る）、迷いにくい構造、ページの上に戻るボタン、ヘッダー（上部のメニューなどの固定ブロック）、フッター（固定して表示される著作権や最終更新日などの記録）
