Webページを作るときの注意点


目次

はじめに
Webページのデータサイズ
Webページへの誤解
リンクのエントリは生命線
クリッカブルマップはお得?
テーブルとグラフィックを使う
画像データフォーマット
画像の加工
アイコンの色の選び方
背景色/背景テクスチャ
背景色と文字色の関係

一つ前へ


はじめに

 WWWは最初、スイスのCERNという物理関係の研究所にいるコンピュータ研究者が、「研究者どうしで、柔軟に情報を発信/受信するにはどうしたらいいか」ということを考えて作ったシステムでした(最初にWWWが作られたのはNeXT上でした)
 WWWのページ(以下Webページ)の表現力は、基本的にはSGML(Standard Generalized Markup Language) にハイパーテキスト(Hyper Text) の機能を加えたもので、"文章を書く" "紙面を作る" といったことを表現するのに非常に適しています。
 SGMLは、文章の形式を印付け(マークアップ)してゆくことによって、最終的には文章をフォーマットし、出力(印刷)イメージに作り上げられる言語(およびそれを実現するシステム)です。一般にSGMLのような言語は、マークアップランゲージと呼ばれるもので、マークをつけて文章をフォーマットする形態のものとしては、ほかにLaTeXなどが上げられます。


  ハイパーテキストって?

 ハイパーテキスト(Hyper Text)とは、既存の文章の関連は連続的に存在する(リニアである)のに対し、文章の関係が非連続的に存在できるテキスト(およびそれを実現するシステム)を指します。その関係は必ずしも文章でなくてもよく、たとえばデータベースと連動していたり、グラフィック(絵)と連動していてもかまいません。その考え方は、'45年にV.Bush という人が書いた7ページの文章 "As We May Think" に出てくるのが最初だと言われます。その後、'63年の D.C.Engelbart の書いた "A conceptual Framework for the Augment of Man's Intellect" という論文にハイパーテキストの概念が出てきます。今日的ハイパーテキスト/ハイパーメディアの概念は Ted Nelson が'70年代後半から '80年代前半にかけて作りました。

 Webページを作る上で大切なことは何か、それは「読んでくれる人に読みやすい形で情報を発信する」という、非常に単純な原則です。なにごともそうですが、「読んでくれる人の立場になって考える」という点が一番大切です。自分で発信したい情報があっても、それを受けとめてくれる人がいなければどうしようもありません。どんなに内容がよくても、その表現のしかたが悪いために敬遠されては、意味がないのです。

Webページのデータサイズ

 Webページを作るとき、1つのページを作るには、どの程度のデータサイズが適当なのかを考えてみます。
 当然のことですが、データサイズはWebページをアクセスする側の条件に左右されます。そこで状況を "日本のインターネットの状況" と限定して考えます。ちなみにこれをアメリカの感覚で考えると、とんでもない間違いが起こります。
 アメリカの場合、企業や大学などの多くのサイトで、T1と呼ばれる1.5Mバイトの専用線か、それ以上の回線を使っています。
 では、日本ではどれくらいを目安にすればいいのでしょうか。現在のところ、34Kbpsで受信できるスピードが妥当かと思われます。電話回線を使ってモデム接続している場合、その速度がポピュラーだからです。もちろん最近は56Kbpsが使えるモデムや、ISDNで64Kbpsが使えますが、モデムの場合は通信状態によって必ずしも56Kbpsの速度が使えるとはかぎりませんし、ISDNも一部の人(最近の調査では、自宅でインターネットを使っている人の4割がISDNを使っているという報告もありますが)が使っているにすぎません。企業や大学ではもっと高速な専用線を使っていることでしょう。しかし私の経験から言えば、ビジネスアワーでの利用は、必ずどこかがボトルネックになって、理想的な速度は確保されません。
 人はどれくらい我慢強いのでしょうか? 画面が黙ってしまう場合、3秒が限界だと言われます。つまり、最初の3秒までになにかのアクションを画面に提示しなければいけません。次の壁は30秒です。30秒でユーザになにかを提示しなければ、ユーザは "もう、いいや" の気持ちを抱きます。そこで30秒でどれだけのサイズのデータが送れるか計算してみましょう。平均的な転送速度は毎秒3Kバイトと仮定します。30秒で転送できるデータ量は約90Kバイトですので、そのへんが目安だと思われます。
 つまり90Kバイト以内に、Webブラウザの表示部分を埋める(表示する)だけの内容を詰め込む必要があるというわけです。「日本語文字しか使わない」と、単純に考えれば、4万文字以上書くことができます。これは相当なことが書けます。しかしグラフィックを挿入する場合は、ちょっとしたサイズのグラフィックでも90Kバイトぐらいのサイズがあるので、その辺は考えなくてはいけません。
 はじめからアクセスするページに大きなグラフィックがあり、それをあらかじめ知っている場合、表示まで我慢できる限度は3分です。3分で転送できる量はだいたい500Kバイトです。500Kバイトといえばかなりのサイズですが、ブラウザ側の表示にも時間がかかるので、結局は300Kバイト程度が限度でしょう。それ以上は、そのページに特別な関心があるユーザ以外は我慢できないと考えましょう。


  Webページのサイズのまとめ

 ●ホームページなど:90Kバイト以下
 ●ページの最大:300Kバイト以下

Webページへの誤解

 あちこちのWebページを見ていると、ひと目でプロのデザインとわかるページがたくさんあります。そしてどんなデザイナーが行なったか、だいたい見当がつきます。なぜなら、プロのグラフィックデザイナーがデザインするものはグラフィックデザインのルール(文法)に基づき、編集デザイナーがデザインするものは、写植印刷のルールに基づいているからです。納得するデザインではありますが、しかし、何か足りないと感じるときがあります。なぜ既存のデザインルールだけでは満足いかないのでしょうか? それは、WWWというシステムが与えるのは、見るための "紙面" ではなく、アクセスするための "情報空間" であるからです。情報空間に存在する情報を取り出すメカニズムこそがWWWの本質なのです。WWWというものを、単なるグラフィックやテキストをプレビューするツールであるような記述や紹介も数多く見かけますが、それはWWWの能力の一部であって本質ではないのです。情報にアクセスする、それが本質なのです。

リンクのエントリは生命線

 アイコンを用意してリンクのエントリに使う場合、必ずALTの指定をつけましょう。


<IMG SRC="nextpageicon.gif" ALT="[NEXT PAGE]">

 アイコンとして指定したグラフィックが表示されない場合、代替としてALTで指定した文字列が表示されます。アイコンはリンクのエントリを示すために用いられる便宜です。アイコンを示すグラフィックが表示されないからといって、リンクのエントリもわからなくなってしまっては、本来のリンクのエントリの意味がありません。リンクのエントリは情報にアクセスするために必要なものです。必ずしもアイコンのグラフィックをロードする必要はないのです。

クリッカブルマップはお得?

 クリッカブルマップは、グラフィックで表示されている領域上に、任意の領域をクリックのアクション領域として定義する方法です。簡単に言ってしまえば、グラフィックの上でクリックすれば、別のページが表示するという、よく使われているものです。グラフィックをそのままGUIとして見せることができるので、かなり凝った表現が可能です。
 クリッカブルマップは優れたGUIの解決法に見えますが、いくつかの欠点があります

●複数のクリック(リンク)が1枚のグラフィックに割当てられているので、そのグラフィックを表示させない限り利用できない。
●リンクのエントリを増やしたいとき、グラフィック自体のデザインを変更しなければ、項目を任意に増やすことができないので柔軟性に欠ける(またはその分のコストがかかる)。

 グラフィックをロードすることがクリティカル(必須条件)になるので、グラフィックをロードしない/できない場合は、用意されたリンクの先へ移動することがまったく出来ないという、使えないWebページになってしまいます。
次にリンクのエントリを増やしたい場合です。クリッカブルマップで用意している場合、1つ項目が変更/追加になる毎に、グラフィック自体を書きなおさなければいけません。これは非常に手間のかかることです。すなわち、クリッカブルマップのエントリの項目は頻繁に変更しづらいということにつながります。

テーブルとグラフィックを使う

 クリッカブルマップを使わずにグラフィカルな表現を行う方法として、複数のグラフィックをテーブルを使って整列させてみましょう。凝ったグラフィックの中に埋もれるボタン、といった真似はできませんが、シンプルであっても表現豊かなページが作れます。

●コツ
 いくつかに分割したグラフックを、クリッカブルマップのように1つのグラフィックに見せるためにテーブルを使います。そのままグラフィックをテーブルの各セルにはめ込んでいくと、お互いのセルの間に空白が自動的に取られてしまうのでテーブルのボーダー、セルスペーシング、セルパッディングのサイズをすべて0にします。


<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

 もう一つのコツは、セルを


<TD> <IMG SRC="abc.gif"> </TD>

 のように1行で書くことです。改行を含むと空白と解釈されるようで、セル間に調整が入ってしまい、うまく図柄が接続してくれません。

画像データフォーマット

 Webページで使われる画像のデータフォーマットで最も多いのがGIFとJPEGと呼ばれるフォーマットです。状況に応じてGIFとJPEGを使い分ける、ということをつねに頭にいれておきましょう。
 JPEGはフルカラーである画像(写真やレイトレース)に向いており、GIFは利用している色数が限られている(256色)画像(イラストや線画)に向いています。
 どちらを選択すべきかは画像の種類によって決める必要があります。写真のような画像ではJPEGの圧縮率の方がGIFよりも圧倒的に有利です。ですから、GIFで90Kバイト以上のファイルサイズになってしまうような画像ファイルは、一度JPEGに変換してサイズを小さくしてから使いましょう。


  JPEG、GIFの画像圧縮

 JPEG、GIF のどちらも画像を圧縮しています。画像圧縮の特性から GIF はロスレス(LossLess)のタイプに分類され、JPEG はロッシー(Lossy) のタイプに分類されます。ロスレスとロッシーの違いは、圧縮された画像データがオリジナルの画像データと比較した場合、情報量的に失ったデータがあるかどうかの違いです。ロスレス(ロスのない)という言葉は「無駄のない」という意味ではありませんので注意してください。GIF の使っている圧縮アルゴリズムは LZW(Lempel-Ziv-Welch) という圧縮アルゴリズムです。JPEG の場合、JPEG という名称は規格を指し、同時に圧縮アルゴリズムのことも意味しています。そもそも JPEG 自体は Joint Photographic Experts Group という委員会の名称に由来しています。ちなみに GIF は Graphical Interchange Format の略です。
 GIF の使っている LZW はデータ圧縮する技法のひとつで、単にデータを圧縮しているだけです。一方、JPEG は人間の視覚は感度よく認識できないという特性を利用し、画像のもつ情報を減少させる(簡単にいえば捨てる)ことによって圧縮を行っています。情報を減少させるといっても、風景写真のような画像をJPEGで標準的な圧縮率を用いて圧縮を行った場合、オリジナルの画像とJPEGの画像との違いを探すのは難しいといえるでしょう。JPEGでは、その特性により(グレー階調ではなく)白黒二値の画像を圧縮できませんし、また、小さな画像や使っている色が少ない画像は有効に圧縮できません(なぜなら減少させるべき情報量が小さいから)。より圧縮率を高めたいときは、画像のもつ情報をより減少させることによって可能ですが、その分画質は低下します。

画像の加工
 写真をWebページに載せるようなケースを考えてみましょう。デジタル写真、写真をスキャナで取るといった方法によって作った画像データを、そのままJPEGやGIFに変換して載せてもかまいませんが、それらの画像をもっとWebページ向きの画像にしましょう。Webページ向きの画像とは、簡単に言えば写真の印象をあざやかでメリハリのあるものにすることです。Webページの画像は紙焼きされている写真とは違い、基本的にディスプレイを通して見る画像です。そのような画像の色は、色再現を中庸で忠実にするよりも強調した方が一般には見栄えよく見えるのです。
 その方法ですが、Adobe Photoshop であれば、メニューの "イメージ → 色補正 → レベル補正" を選択し、ウィンドウをオープンします。自動補正のボタンを押して画像のレベルが自動的に正規化します。写真でいえば、明るすぎたり暗かったりした写真を自動的に補正してくれると考えればいいでしょう。これで画像の色がメリハリのついた感じになるはずです。
 

アイコンの色の選び方

 アイコンなどに使うカラーのトーンは統一して使いましょう。中間色系、パステル系、原色系の色づかいのアイコンやグラフィックを同じWebページに混在するようなことは避けるようにします。また、原色系の色(RGB 値が 255.0.0 のように極端な値を持ったもの) もなるべく避けるようにしてください。普通のディスプレイ上だと、原色系は刺激は強いが深みのない感じに見えます。たとえば同じ赤でもRGB値が 255.0.0 と 230.10.10 では後者の方が落ちついた赤のように感じますし、青でも 0.0.255 よりも 10.10.230 の方が落ちついた青に見えます。


背景色/背景テクスチャ
 背景色も背景テクスチャも、基本的に文字や用意されているグラフィックスとの関係で決めなければいけませんが、一番確実で問題を起こさないのはやはり白でしょう。たとえば、グラフィックの効果としてシャドウをつけたいような場合は、背景が白の方が見た目が最も自然です。また、背景が白だとソフトフォーカスの効果なども不自然にならず、なにかと便利です。
 背景テクスチャでは、紙の質感を持ったものや、ザラッとした質感を持ったもの、またロゴなどをテクスチャに用いたものなどが多く使われているようです。逆に背景テクスチャ自体が表現デザインだと割り切って、複雑なデザインや派手なデザインを用いる切り口もあります。背景テクスチャだけの違いで、内容が同じWebページであっても印象がずいぶん違ってきます。ただし、背景テクスチャが派手な場合は文字が読みづらいという副作用があるので、そのことを割り切って使う必要があるでしょう。
 背景テクスチャを使った場合、グラフィックの空白領域との重なりとの問題が出てきます。その場合、グラフィックを透過GIF形式(Transparent GIF) に変換し、塗りつぶされない領域に背景を透過させる作業を行います。ただしこれも問題があって、たとえばぼんやりしたシャドウのように、周辺部にグラデーションを持ったグラフィックなどは、背景テクスチャの色がグラデーションとマッチしていない場合、不自然なグラデーションになったうえ、周辺部がジャギになったりします。

背景色と文字色の関係
 背景の色(BGCOLOR) 、テキストの色 (TEXT)、リンクの色 (LINK) 、すでにジャンプしているリンクの色 (VLINK) をBODY命令のオプションで指定することができます。与える値はRGBで先頭に#の付いた16進数です
 以下に各々与える印象が異なる組み合わせを示します

BGCOLORLINKVLINK与える印象
c0d0d0800040505090落ち着いてクールな感じ
d0e0f0c060a05070b0クールでポップな感じ
e0d0c0b02015604010落ち着いて温かい感じ
f0e0d0a03090401060明るく温かい感じ

一つ前へ