|
必要な要素がすべてそろったら、次はいよいよホームページ作成ソフトやテキストエディタで本番制作に取りかかりましょう。この章ではHTMLの書き方、ホームページ作成ソフトの使い方についてはほとんど言及しません。基本的にこういう便利な作業方法がある、こんなお約束ごとがあるといったことを書いてみました。
 |
レイアウトあれこれ |
|
さて、先ほど作成したラフ（一枚絵）を元に実際にHTMLに組み上げていくわけですが、ここで典型的なWebのレイアウトについていくつか見てみましょう。
 左メニュー型（二段コラム型）
一般的に、左側にメニューボタンが並び、右ウィンドウに本文が表示されるというレイアウトです。多くは左と右にフレームが分かれています。フレームでなくても、テーブルレイアウトを利用して、どのページに行っても左にメニューが表示されます。どのページからもどこへでもいけるのが便利です。メニューの数が多く、またメインメニューの下にサブメニューがあるなど、訪れる人のクリック数を軽減するためにこの手法が取られます。なお、メニューが少ない場合は左側の下が余ってしまうため、本文とのバランスが難しいです。
上部メニュー型
ページの上部にメニューが並び、その下に本文がくるレイアウトです。メニューが少ない場合に有効なレイアウトです。各ページに必ずコーナートップに戻るボタンを付けることによって入り口をひとつにまとめてあるので、自分がいまどこのコーナーを見ているのか訪れる人が理解しやすいのが特徴。ただし、戻るリンクを付けなかった場合は迷子にさせてしまう、サイアクのレイアウトになってしまうので注意が必要です。
三段コラム型
企業やニュースサイトに多いレイアウトです。左側がメインメニュー、真ん中が本文、右側にバナーや常連のためのクイックリンク、特設メニュー（プレゼントや緊急告知など）といったように、縦に三分割したものです。メニューやコーナーが多く、テキストも膨大な量で、頻繁に更新されるといった場合にはとても有効なレイアウトです。反面、テーブルを多用しているために更新がしにくく、ほとんどの企業ではXMLで管理していることが多いようです。また、本文が多いのに反して右側がスカスカになることもあり、バランスが難しいです。本文幅が狭くなるのもデメリットのひとつでしょう。
三段コラム発展型
三段コラムに上部メニューをつけた発展型。パソコンメーカーやソフトメーカーの公式サイトがこれを採用していることが多いようです。上部メニューは常連向けのクイックリンク（製品情報、ニュースリリース、ダウンロード、企業情報などのおおまかなメニュー）にし、左コラムは製品名などの詳細リンク、真ん中が本文、右コラムに特設リンク、関連リンク、バナーなどを入れます。情報量がとても多い場合に有効です。しかし、三段コラム同様、バランスが難しいのが難点です。
このように、Webのレイアウトの典型的なものを見てきましたが、小説やイラストといった「自分の作品」を発表する場のサイトを作るには、こうした既成概念に囚われないで自由なレイアウトを考えたほうが楽しいと思います。
しかし、紙と違ってHTMLはまだまだ制約が多すぎます。せっかくすてきなレイアウトができたのに、HTMLではそれを再現できないなんてこともままあります。私もこれまで一枚絵のラフを作った後、実際にHTMLに落とし込んでいく作業になって初めて、「これ、実現できないじゃん！(ToT)」などと叫んで急遽路線を変更してきたことが数え切れないほどあります。例えばテキストや画像を斜めに配置するなんてことも、スタイルシートを使わなければ実現できなかったりして（スタイルシートにどうしても踏み切れない人にとっては）気落ちすることもあるでしょう。とりあえずは上で紹介した既成概念を元に、自分なりにアレンジして作っていくことからはじめてみましょう。そのうちに、すごい斬新なデザイン案が浮かぶこともあるはずです。
ちなみに、Studio Mercuryは上部メニュー型、左メニュー型（二段コラム型）を多く採用しています。個人的にフレームはあまり好きではないので、左メニューにした場合はテーブルでいくつも区切ってレイアウトをするのですが、表示体感速度が遅くなるような気がして、最近はもっぱら上部メニュー型を重視しています。(^ ^;;
実現できそうにないレイアウトをHTMLだけで可能にするのが私の生き甲斐のひとつだったりするのですが、HTMLを覚えておいて損はないと数多くの人が豪語している理由はここにあります。つまり、あのタグでこれができるからこうすれば実現できるじゃないか！ という発見は、まさしくHTMLを知っていれば見えてくることだったりします。エンジンの仕組みをしらなくても車を運転できますが、HTMLの仕組みを知っているからこそデザインで遊んだり、CGIを書き換えたりといった楽しみかたができるようになるんですね。
Back<< | トップページへ |
>>Next
|
