パソコンでは初となる高等身の本格派3Dオンライン格闘ゲーム
デザイン・レイアウトを決めよう
「レイアウト」を決めよう
何を作るかを考えたら次はサイトデザインです。 まず最初はレイアウトのことを考えましょう。 いきなりHTMLファイルを作るのではなく、紙にラフスケッチのような感じでざっと描いていきましょう。
レイアウトとは、メニューはここ、メインコンテンツはここといった「配置」に関することを決めることです。
以下に代表的なレイアウトの例を示していきます。
他のも色々なレイアウトがありますが、主要所は以下の様な感じです。
決め方としては、色んなサイトをまわって見て「このサイトのレイアウトいいなぁ」と思うところをいくつかメモっておいて、それを元に自分なりに改良するといいですよ。
| レイアウト例 | 説明 |
|---|---|
 |
縦に２分割したレイアウトです。 (1)にメニュー、(2)にメインコンテンツを配置します。メニューも縦に追加していける為、メニュー数の増加にも対応できる拡張性の高いレイアウトです。 |
 |
横に２分割したレイアウトです。 (1)にメニュー、(2)にメインコンテンツを配置します。javascript等を使いたくない場合あまり多くのメニュー項目を表示できない為、メニュー数が多い場合にはお勧めできません。 ただ、メニュー数が決まっていて横幅を多く取りたい場合にはお勧めのレイアウトです。 |
 |
上の２つのレイアウトを合わせたようなレイアウトです。 (1)にタイトルロゴやナビゲーション、(2)にメニューやトピックス、(3)にメインコンテンツを配置します。(2)と(3)が逆転しているタイプ(右にメニュー、左にメインコンテンツ)もあります。 ブログやWikiを使用したサイト、ポータルサイト(Yahoo!JAPAN、インフォシーク)、GAME Watch、BB GAMESなんかはこのタイプですね。 |
 |
最近増えてきたレイアウトです。 (1)にタイトルロゴやナビゲーション、(2)にメニュー、(3)にメインコンテンツ、(4)にサブメニューや広告・キャンペーン情報等を配置します。 当サイトもこのタイプです。他にもブログや4Gamer.netもこのレイアウトですね。あと、ゲームの公式サイトもこのタイプが多いです。 |
「色」を決めよう
レイアウトが決まったら次は「色」ですね。サイト全体を通して使われる色を決めましょう。
例として当サイト「ネトゲブックマーク」について説明してみましょう。
- メインカラー
- 「青」です。メニューやロゴ等あらゆるところで「青」を使っています。
- サブカラー
- 「灰色」です。見出しやテーブルの枠線、ページ下部メニュー色等に使用しています。
- 背景色
- 「白」です。情報量が多く背景部分は少ないので、イメージが重くならないよう白を使用しています。
- 文字色
- 「黒」です。背景色が白なので、見易さを考えて黒にしています。
この中で重要なのが「背景色」と「メインカラー」です。場合によってはこの2つが同じこともあります。
特に背景色はサイト全体の第1印象を決める上で重要です。背景が真っ白なサイトと真っ黒なサイトでは印象が全然違います。
実感する為に、試しに作ってみました(→背景黒)。背景白はこのサイトがそうなのでサンプルは無しです。
実際は最後に微調整を行うので、「黒っぽい」とか「白っぽい」とかをある程度イメージしておくだけでOKです。
実際作ってみなくちゃ印象は分からないですからね＾＾;
背景色が決まったら、上で決めたレイアウトの各パーツ毎の色を決めていきます。 さっき紙に書いたレイアウトに色鉛筆やマジックでささっと色を書いておくといいでしょう。 ここもあくまでイメージだけで、細かい色指定は作りながら微調整するので大雑把な指定でOKです。
ちなみに、サイト全体を通して色をある程度統一しておくと、サイト全体に統一感が出るので見ている人が安心します。 ページごとにコロコロと色が変わったりすると見ていて疲れるし、もしかして違うサイトに来ちゃった？と思う人がいるかもしれませんしね。
実際にWebページを作ろう！
頭の中にあるサイトイメージを紙に書き出したところで、実際にWebページを作り始めましょう。
まずは次ページのホームページの作り方とお勧めフリーソフトへ。