|
|
|
|
|
| アドビゴーライブやホームページビルダーなどのソフトには、どこでも画像などを置くことができる方眼紙のようなものがありますね。 ゴーライブではレイアウトグリッドと呼んでいますが、これを使うと、グラフィックソフトのように、好きな場所に文字や画像を置いていけるので、とても重宝です。 ところが、ホームページというのは、どんなパソコンで（どんなモニタで）見ているか、何歳の人が見ているか（もしかしたら、小さい文字の見にくい人かも）パソコンの初心者か慣れている人かで、それぞれ勝手な表示をするものです。 ですから、グリッドを全面に使ってしまうと、スクロールしないと見れないとか文字がテキストフィールドからはみだしてしまって、途中で切れてしまうとか、あるいは逆に右の方ががら空きでカッコ悪いとか、いろいろ難が出てきます。 しかしグリッドを上手に使うと、簡単に変化のあるページも作れます。 例えば、画像を丸く並べるというのは、テーブルで設定していくのは大変ですがグリッドがあると、簡単に複雑な形に並べられます。大きな画像をポンと置くより小さい画像をちょこちょこ並べた方が軽くできます。 そこで、テキストカーソルを中心揃えにした状態で、小さめのグリッドを配置します。レイアウト画面の一部に画像を並べるギリギリの大きさのグリッドを配置するわけです。この中は自由に絵や画像を並べていけます。 大きさはせいぜい、幅５００ピクセルとか４００ピクセルくらいにして、小さなモニタでもスクロールせずに表示できるようにしておきます。これなら例え、１７インチモニタいっぱいにウィンドウを広げて表示しても、まん中に表示されますから、それほど不格好にはなりません。 もっとカッコ良くしよう、というなら、幅１００％とか８０％とかのテーブルを中心揃えで配置してしまい、その中をいくつかのセルに分けて、（例えば左右２つの列を作っておき）その一つにグリッドを入れて、画像を並べ、別のセルに文字を入力する、などすれば、文字はテーブル内で折り返されますし、セルの幅をパーセント指定しておけば、画像もちゃんとこちらの期待するところに表示されます。 レイアウトがくずれる原因は、たいていは文字の表示サイズが原因です。Ｗｉｎに比べてＭａｃでは同じ文字でも小さく表示されます。といっても、各自使っているモニタによっては、一律に言えるものでもありませんし、好みで大きくする人や小さくする人もいます。 テーブルは通常、幅だけをウィンドウの％指定かピクセル指定して縦は自動にしておきます。幅を制御したら、縦は自動にして文字の数によって伸び縮みする指定にしておくのです。幅も縦もピクセル指定してしまうと、表示しきれなくて尻切れトンボになってしまうからです。 そうしますと、場合によっては、制作したときに考えたよりテーブルが縦長になります。これを考えに入れておかないと、レイアウトが崩れてしまうことがあります。プリン島トップページの島のイラストも、始めの頃、Ｗｉｎで見ると島が地割れしていたりして、ああでもない、こうでもないと直しました。 最初に書いたグリッドを使った場合、文字を入力するスペースはかなりゆったり取っておかないと、表示しきれない場合もできてきます。これも困ります。特にＭａｃで作っていると、普通、文字がＷｉｎより小さめに表示されるため（これは、Ｍａｃではモニタ解像度が高いせいだそうです）十分な余白を用意しておく必要があるのです。 この辺がちょっと難しいと思いますが、Ｍａｃで作っている場合は小さめの文字で作るとだいたい調子がいいようです。ブラウザでチェックするとき、文字の大きさを１２０％位にして表示しても大丈夫な程度にしておくのです。 どうしても、動いては困るという部分はピクセル指定にします。画像だけを入れるセルはピクセル指定でいいですね。 また、Ｍａｃで作っている場合、色に注意が必要です。ＷｉｎではＭａｃより色が濃く表示されます。ですから、ちょっと薄めかな？くらいでちょうどいいようです。 逆にＷｉｎで作っている人は、ピンクの背景に白い小さな文字などというのは、正直言って、Ｍａｃでは読めません。たぶん、Ｗｉｎではきれいな配色なんだろうなと思いながら、文字の表示を大きくしたりして、しのいでいるのですが、ちょっと苦しいです。 というわけで、次回は 配色について |
| これから、ブロードバンドが普及して、画像でも動画でもほいほいと送受信ができるようになるかもしれませんが、今のところ、インターネットのデータ送信の速度は、そんなに速くありません。そうしますと、１ページに掲載できる画像には限度がありますし、HTMLでの色指定などでデザインを考えていかなければなりません。 HTMLで色を指定できる部分はたくさんありますから、あれこれ工夫して組み合わせると、かなりきれいなホームページができるはずです。 ホームページで色を決められる場所は次のようなものがあります。ページの背景色、テーブル全体の色、セルの色、行の色。文字は文字を選択して色を決められますから、文字の色も全体の雰囲気に合わせていけばデザイン的な役割を与えれることができます。 中でもページの背景色は重要です。全体の雰囲気を決めてしまうからです。ページのデザインを考えるとき、一番始めに、これから作ろうとするホームページのイメージを決めて、それから色調を考えます。つまり、楽しい感じのサイトか、落ち着いて堅実な感じのサイトか、やすらぎを与えられるサイトか、などを考えます。 ショップやギャラリーなどは、これからいろいろな画像が配置されていきます。カラフルなコンテンツを並べる予定なら、ページ全体の色調は目立ち過ぎない方がいいかもしれません。回りの色に影響されて、商品や作品の色が違ってみえる恐れもありますから、注意が必要です。 白や黒などの場合はともかく、中間の明るさの色を背景にしてしまうと、その上に文字を書いても、読み難いですよね。背景画像を使うとなおさらです。 そこで、前回まで説明したテーブルを置きます。ただ単に文字を書くだけでも幅８０％くらいのテーブルを中心に置いて、テーブルの色は文字が読み易い明るい色にします。白に黒が一番見やすいですが、文が長くなると、多少疲れるかもしれません。紙のノートに鉛筆で文字を書くようなコントラストが一番読んでいてつかれないので、薄いグレーや薄いベージュなどの地に黒い文字か、白い地に暗めのグレーっぽい色などがいいかもしれません。 背景色や全体の色調が決まったら、それに合わせてボタンなどの画像の色も考えます。意外とボタンの印象は強いものです。ページを構成する大切な部品としていろいろ考えて作りましょう。 さて、どうも配色が苦手という方もいるかもしれませんので、色についてちょっと、おさらいをしておきたいと思います。 色は色相、彩度、明度という３つの要素で決まります。色相というのは赤とか青とかの色合いのことです。彩度はその色素の量というか、鮮やかさのことです。原色にグレーを混ぜていくと彩度が落ちていきます。茶色はオレンジ色にグレーを混ぜた色です。明度というのは、明るさ暗さなんですが、彩度と違って、濁りのない白を混ぜていくことで明るくなり、黒を混ぜていくことで暗くなる、というイメージです。 ホームページの色指定は、光の３原色であるＲＧＢ（red,green,blue）の出力値なんですが、配色を考える場合は、絵の具的な考え方でもいいので、上の３つの要素で理解していれば大丈夫です。 簡単で無難な配色は、彩度、あるいは明度を揃えたり、同じ色相（色合い）で揃えたりすることです。ただ、これでは、あまり面白みがありませんので、ちょっと違う色をポイント的に配置したりします。 最終的にはいろいろ試してみて調和のとれた色を決めればいいのですが、配色は昔からいろいろ研究がされていて、本もいろいろ出版されていますから、いつも悩むという人は、そういった本に目を通してみると、コツをつかめると思います。 次回は フラッシュ について |