2001年5月5日更新
基本的な言葉についてまとめてみました。
インターネットは核攻撃にも耐えられる通信網を確立することから始まり、1990年に米国でインターネットの一般利用が開始されました。2年後には日本にもプロバイダーが設立されました。そして1993年にMOSAIC(モザイク)というブラウザが登場し、ホームページの利用が一般的に利用されるようになり、現在に至っています。
通常は、Webサイトのトップページのことを指します。また、ブラウザを起動した時に見ることができる、最初のWebページもホームページと呼ばれています。
ホームページを見るための閲覧ソフトです。現在はMicrosoft社製のInternet Explorer(インターネットエクスプローラ)とNetscape社のNetscape Communicator(ネットスケープコミュニケータ)がよく使われます。
ホームページを含めたブラウザで見るページのことを指します。
ホームページ、Webページ、画像データなどをひとまとめにしています。このまとまりのことをサイトと呼びます。サイトの意味は場所と位置なのですが、本に例えると理解しやすいと思います。ホームページが本の表紙や目次、Webサイトは、ページや表紙をひとつにした本です。インターネットは全世界に置いてあるパソコンのちょっと大きいサーバーの集まりです。そのサーバーの中に、Webサイトと呼ばれる本が置いてある場所がWebサイトというイメージになります。
Webページをデザインするための一番の基本となるのがテーブルです。表計算ソフトなんかを使ったことがある人は、その「表」をイメージすればいいと思います。上手にテーブルを活用すれば段組などのレイアウトができます。
フレームはテーブルと同じようにWebページのデザインに有効です。ひとつのWebページを上下や左右に分割します。例えば、左ページに目次を表示し、右ページに本文を表示します。ただし、フレームはブラウザーによって見え方が異なる場合もあり、印刷なども正しくできない場合もあります。大手企業のWebページではフレームを使ったWebページが少ないのはそのためです。できればテーブルを用い、フレーム的に見せた方が賢明だと思います。
パソコンには大まかに分類するとMacintoshとWindowsの2種類あります。まず、一般向けには先にMacintoshが誕生し、その後にWindowsが後追いしましたが、Microsoftという企業は共通化や標準化を嫌います。(^^;)そのために256色表示のディスプレイで、MacintoshとWindowsに割り当てられている共通の色は216色のみとなりました。それ以外の色は別の色で表示されます。
JavaScriptはプログラム言語のひとつです。ボタンにマウスを位置づけると別のボタンの画像を表示させたり、時刻によって、別のメッセージを表示させたりすることWebページでできます。Webページに動きを出す場合につかいます。
Javaという名前が付いていますが、本来はLiveScriptという名前です。Javaの人気にあやかろうとしたNetscapeのライセンス上の戦略です。HTMLの中にプログラム言語が書けるためにCGIと比較して容易に各制御ができます。
Netscape4以上では、CSSを用いることによってフォントの制御が可能です。Internet Explorer4からでも、CSSの一部が利用できますが、バグや仕様によって不完全な対応になっています。2000年4月に発表されたInternet Explorer 5のMacintosh版ではかなり忠実に再現してくれます。
DTPではフォントといった文字の管理や制御は当たり前のことなのですが、まだまだブラウザ早Aが完全に対応していません。CSSを利用すればフォントの指定や行間の制御ができ書籍のように見せることもでき便利です。例えば行間を150%に指定していると読みやすいテキストになります。
残念ながらPageMill3.0ではCSSに対応していませんが、HTMLといったWebページ用の言葉で数行記述することにより可能です。ここ最近では、W3Cという標準化を勧める団体がCSSを使うことを推奨しています。フォントの大きさ、行間、背景色などを一元的に管理できることもあり、当ページでもCSSを使っています。特に専門的な知識を必要とすることもありませんから利用してみてはいかがでしょうか?
Webページをソースモードで見てみると、<>で囲まれた記号があります。例えばリンクのところを見ると<A>と</A>に挟まれています。この<>で囲まれている部分をタグと呼びWebページのレイアウトを行っています。HTMLのタグにMETAがあります。
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">あるいは、x-sjisの代わりにcharset=Shift_JISといった記述は必須で、ブラウザに文字コードが「日本語シフトJIS」であることを指定する役目を持っています。文字コードをしていしていないとテキストが文字バケをおこすことがあります。PageMillでは自動挿入されます。GoLiveでもx-sjisと自動挿入されます。もともとx-sjisはNetscape用の表記です。
ワープロなどでは、文字の大きさをPoint(ポイント)という単位で大きさを決めています。よく使う大きさは10ポイントとか11ポイントです。ところが、Webページをデザインするばあいは、このポイントという単位を使用しない方がいいと思います。例えば12ポイントという文字サイズはWindowsとMacintoshでは大きさが異なります。ピクセルという単位で統一します。
Webページでは1ページの容量に気をつけます。写真やイラストを多く使うと、そのWebページのファイルの大きさはだんだん大きくなります。ワープロなどであまりに大きな文書を作成したときにフロッピィディスクが容量不足で入りきらなかったことがありませんか?
Webページでは、1ページ50K(キロ)バイトくらいが適量です。この容量はPageMillでは「表示」メニューから「ダウンロード情報」機能を使って確認することができます。容量が大きいと「重いWebページ」と呼ばれ、Webページがブラウザーで表示されるまでの時間が長くなります。
正確なファイルのサイズはMacの「情報を見る」コマンドのかっこ内の数値で知ります。正確なファイルのサイズと言うのは、Macの場合は、そのファイルに「どのアプリケーションで作成されたか」等の情報が付加されています。それに対してWindowsやWebサーバーに使われているUnixというOSでは拡張子というファイル名の後半に.txtという「拡張子」を付記してどのアプリケーションで作成したかを管理しています。そのためにMacのファインダーで見るファイルサイズは通常より少しだけ大きなファイルサイズとなっています。command + iの「情報を見る」コマンドでみた括弧内数値が実際Webサーバーにアップロードされるファイルサイズとなるわけです。
ワープロでは、1ページの大きさはA4とかB5という紙のサイズが決まっています。でもWebページでは自由にサイズを決めることができます。携帯電話のiモードで表示される画面はWebページですが、とても小さいですよね。ページのレイアウトを考えるときは、このWebページの大きさ(広さ)を決めるところから始めます。パソコンの標準画面サイズは横640で縦が480ピクセル(480個の点)です。このサイズならほとんどのパソコンで横スクロールをせずに表示ができます。紙のA4サイズの幅が約600ピクセルで縦サイズは842ピクセルすから、幅600ピクセルだとテキスト中心で印刷をすることが予想されるコンテンツに向いています。
次に、私がWebページのデザインで参考にするのはアドビのページです。このページを見れば、1ページの大きさやデザイン等貴重な資料となります。このアドビのページでは横幅は750ピクセルになっています。750ピクセルは、多くのパソコンの解像度が800x600に移行していることからきていると思います。横幅を600にするのか750にするのかはコンテンツの内容によって判断するといいと思います。
また縦に長いページも横幅の4倍くらいが限度であると言われています。ブラウザーで見ている人にとってはスクロールよりのクリックの方を好む傾向にあります。1ページの大きさに気をつけてデザインして下さい。
画像名はできるだけ、Webページ名と同じ名称にしていくと管理しやすいと思います。私も最初は画像の意味がわかるファイル名にしていましたが、画像数が多くなるとこの画像がどのWebページの画像なのかわからなくなり、Webページの削除や更新のときに困りました。例えばWebページがpmill100.htmlというWebページ名なら、画像名はpmill100.gifのようにしていきます。1ページに複数の画像がある場合はpmill101.gifのように順序つけます。この画像名ならWebページの更新と同時に画像データについても同期がとれて便利です。
ホームページ(表紙)から、目的とされるWebページにたどりつくまで、マウスを2クリックして見えるように構成します。また全てのWebページからホームページにたどり着くことができるようリンクも忘れないようにつけておきます。これは、検索サイトの中には表紙以外のWebページを検索結果として表示しているためです。
MacとWindowsではガンマ値という値が異なっています。ガンマ値はディスプレイでの中間調の階調度合いを示す数値です。Macで作成された画像をWindowsで表示すると少し暗めに表示されます。逆にWindowsで作られた画像はMacでは明るく表示されます。
ガンマ補正はパソコンが出すデジタル信号をアナログ信号になってディスプレイに映るときの変化を修正することです。本来は明るさが入力の強さに正比例して1がベストで直線になるのですが実際は曲線になります。この曲り具合を表すのがガンマ値で、数字が大きいほど曲線の曲がり具合が大きくなります。
Windowsの場合は、ディスプレイとビデオカードの関係もありますが、無調整だとこのガンマ値は2.8で、中間調の情報が少なくなって、コントラストの強い画像になります。そこで、ディスプレイ付属のドライバを使って2.2くらまでは下げることができます。
Macの場合は、Mac OSが補正していて、1.8が基準です。Macが1.8というのは印刷物に近い値というところからきています。その他にはトトロでも有名なスタジオジブリで使われているSGIのIRIXではガンマ値1.7が一般的です。
SGIは一般の人が使うとは思えないから、こう見るとパソコンで画像を見ることに関してはMacで見る方が暗いところなど細かいところが再現できていいです。残念ながらWindowsの方が圧倒的にシェアが高いから、Photoshopなどでガンマ値を補正してみるのもひとつの方法です。例え“悪”でも数は力なのです(笑)。Photoshopでは、「ビュー」メニューより、「プレビュー」「Windows RGB」を選択するとシュミレーションできます。
機種依存文字は、パソコンの種類によって正しく表示されない文字です。WindowsとMacで、記号が置き換わって表示される文字のことを指します。また半角のカナの使用もプロバイダーのサーバーにエラーを発生させることがありますから使用できません。
HTML文書では、半角スペースを複数入力しても、実際のスペースは1個として扱われます。全角のスペースにして入力することが必要です。
これらの文字は、ATOK13の「環境設定」「入力・環境1」に「インターネット用設定」が選択することにより誤って書き込まれないようにすることができます。
Web上での広告や、リンク用のバナーの大きさには、規格があります。「IAB/CASIE Advertising Banner Sizes」のWebページに大きさが記載されていますから、参考にされるといいですね。リンク用のバナーとしてよく使われているサイズは88x31ピクセルの大きさです。
Update: Wed, Mar 31, 2004 / 9:20:11 AM