日本ではWWWのページをホームページと呼ぶことが多いが、インターネット上でホームページとはWWWの最初のページ、トップページ、インデックスページといわれるページを指す。日本のいわゆるホームページはWebサイト、Web pageというので、「日本の常識は世界の非常識」にならぬよう注意しよう。
集めたデジタル画像やイラストはPhotoShopなどレタッチソフトでまとめ上げて最終的な絵にする。PhotoShopは最高だが値段も張る。Mac用のGraphicConverter、indows用のHyper Paintなどのシェアウェアやフリーウェアでも一応のことはできる。
ダウンロードのスピードを考え、各ページは50KB程度の大きさになるようにする。10KBのHTML文書と13KBと27KBの絵で50KBだ。思い切って大きなサイズのページにするときは、画像をプログレッシブjpegやインターレスgifなど訪問者に待ってもらえる工夫をする。もちろん、コンテンツ自体の魅力を忘れてはならない。
部品が揃ったら次ぎはレイアウトだ。レイアウトはHTMLで行なう。
骨組みと言うべきHTMLは、PageMillなどのHTMLビルダー(HTML作成ソフト)やWORDや一太郎v7などのワープロソフトのHTML作成機能を使うと簡単だ。文字や絵の配置を整えればHTMLに変換してくれるし違うページや画像などへのリンクもファイルを選択するだけいい。 だがワープロ系のHTMLビルダーはフォントや改行などの不要な指定をうんざりするほど吐き出すのでファイルのサイズが大きくなる。みっともないソースファイルを覗かれると恥ずかしいので不要なコードは削除したい。HTML作成ソフトで表現できないところも多いので、ブラウザで確認しながらエディタやワープロでHTMLを直す。ワープロソフトを使ってHTMLを修正するときはセーブは「テキスト形式」か「html形式」で行なう。
もちろん、はじめからHTMLをエディタで書いても構わない。 初めは取っつきにくくて多少時間がかかっても、修正と確認を繰り返すうちにどこを どう変えればどういう結果になるかがわかってくる。カット&トライがHTMLを覚える 近道だ。
HTMLを駆使してWWW Pageを作るとき使うソフトはエディタとブラウザだ。MacならSympletext、Jedit、Yooeditなど、WindowsならNotePadやWordPad、Mifesなどのエディタがある。ワープロソフトで書いてテキストでSaveしても構わないが操作性が良くないのでエディタに比べると生産性がとても悪い。
エディタでHTMLを書いたらHTMLファイルを一度セーブしブラウザで表示する。ファイルをブラウザにドラッグ & ドロップすればいい。ブラウザに表示されたページが期待どおりのものであればいいが、期待したレイアウトになっていなければ、HTMLを書き直す。直したらSaveしてブラウザの「再表示」をクリックする。再表示されたものが期待のレイアウトでなければ、またエディタに戻って書き直してセーブし、ブラウザの「再表示」を再びクリックとこれを繰り返して煮詰めていく。もちろんエディタとブラウザは両方とも立ち上げた(表示した)状態で使う。スクリーン一杯に表示せず、ブラウザを見ているときに重なったエディタの画面の一部が見えるようにしておき、そこをクリックすればブラウザからエディタに移ることができる。エディタからブラウザに移るときも同様だ。これを繰り返しているうちに、どのようにHTMLを書けば、どのように表示されるかが掴めてHTMLの勘所が分かってくる。
HTMLの構造が理解できたら、GoLive CyberStudioなどのHTMLビルダーでレイアウトを行いできあがったHTMLをエディタで調整し最後にもう一度HTMLビルダーで文法チェックを行うというのが生産性が一番高い。
光るwebpageを作るには日頃の精進が書かせない。よそのサイトで"これは"と思った表現があったらソースコードを調べ自分用の Tipsを作っておこう。
HTMLを作るに注意しておくことがある。
Macやパソコンではファイル名に漢字やカナが使えるし、ファイル名の英大文字小文字の 区別はない。だがほとんどのサーバーはUNIXマシンで、ファイル名の漢字カナは認めら れず、英大文字小文字は異る文字として区別される。これはURLも同じだ。
あとでチェックするのは面倒なのでURLやフォルダ名、ファイル名は最初に命名のルール を決めて書き方を統一しておく。また、Macやunixには拡張子の制限はないのでxxxx.html と書けるが、Windowsでは拡張子は3文字までと決まっているので xxxx.htmというファイ ル名を使う。Windowsマシンで xxxx.htmとして作ったファイル名やリンク先をunixサー バー用に xxxx.htmlと書き直すのは大変なので、そのまま xxxx.htmでアップロードして も構わない。トップページ(ホームページ)は index.htmlでなければいけないサーバーも あるが、それ以外のページは xxxx.htmでも大丈夫だ。この情報はプロバイダに聞くのが 一番だ。Macやunixで開発するならファイル名の心配はいらない。
ディレクトリパスの表記法には絶対パスと相対パスがある。ディレクトリパスを絶対パ スで書くと、ディレクトリの構造を変更したとき、関連するすべてのパス名を変更する 必要が出る。これは変更と確認というなかなか大変な作業になる。相対アドレスで表し ておけばフォルダをどこに移してもURLを書き換えずにすむし、テストも容易だ。
例えば、次ぎのようにフォルダ、ファイルがあるとき
HomePage ---- folder1 ---- abc.html
|
|-- image1 ---- abc1.gif
| |-- abc2.gif
|
|-- folder2 ---- xyz.html
abc.htmlでabc1.gifを表示するには 絶対アドレス(パス)だと <IMG SRC="HomePage/image1/abc.gif"> となるが表示のテストは、15インチディスプレイだけでなく、13インチや17インチの画面も想定 して行なう。13インチのディスプレイでは、はがき大の画像(410x280pixel)で画面が 一杯になる感じを受けるし、15インチの画面では整っていたページでも、17インチの ディスプレイで表示したら間が抜けた構成に見えるということがよくある。
ブラウザの表示幅を変えても期待した構成が保たれるかのテストも必要だ。
Windowsではブラウザの表示の初期設定はフルスクリーンだが、すべての人がフル スクリーンで表示をしているわけではないし、Macではブラウザをフルスクリーンで 動かすことはまずない。ブラウザの表示幅を画面の2/3程度にして、同時に別のアプリ ケーションを使っている人は多い。表示幅を変えたとき構成が崩れてしまうと減点だ。
WWWはNetscape Navigator(NS)だけでなくMicrosoft Internet Exploler(MSIE) でも確認する必要がある。空行挿入や<P>タグの解釈など、両者のHTMLの解釈は 微妙に異なるところがあり、まったく同じ表示になるわけではないのだ。 NSの方がMSIEよりHTMLの構文チェックが厳しいので、まずNSで表示を確認しながら制作し、 最終チェックをIEで行なうと確認しやすい。
一応、形になったなと思ってもこれで終りにしてはいけない。
カーニハンとプローガーの名言に、「第1版ができたところでやめてしまってはいけない」 という言葉がある。日本には古来から推敲という言葉がある。いや中国だった。
最後にもう一度、できれば一晩過ぎてからコーヒーでも飲みながらブラウザで確認する。 余裕を持って接すると、また違った視点から見ることができ、完成度が上がる。 WWWを出してリンクを張ってもらうということは、出版することと同じだ。 イージーミスで訪問者の失笑を誘うことがないよう、最後にもう一度チェックする。
自分のパソコンの上でローカルのテストをしたらファイル転送ソフトウェアのFTPで、 サーバーの自分のフォルダーに作成したHTMLや画像ファイルを転送する。フォルダごと 転送すれば簡単だ。ファイルを転送したらブラウザで呼びだし表示して確認しよう。 ローカルで正常に動いていたらサーバーのマシンに依存する部分だけテストすればいい だろう。Windowsではファイル名の大文字、小文字を気にすることはないが、サーバー の多くはUNIXマシンだ。UNIXマシンではフォルダ名、ファイル名の大文字と小文字は 厳密に解釈される。URLなどサーバーが管理する名称も同様で、family/teddy.jpgと Family/teddy.jpgは別物として判断される。漢字や半角カナをファイル名などに使う こともできない。ファイル名やURLなどを中心に、期待どおりにリンクするか、画像は ちゃんと表示されるかをチェックする。
サーバーによってはFTPで仮の場所にファイルを転送し、そのファイルをtelenetで指定の フォルダーにコピーする方法を取るものもある。
72ppiでも144ppiでも480 x 360 pixelの画像は 480 x 360 pixelの画像の大きさでWWW の画面に表示される。だが、印刷するときは144ppiの480 x 260 pixelの画像は72ppiの 同じピクセル数の画像より縦横が半分の大きさ(面積は1/4倍)で印刷される。
プリンタで印刷する場合の画像解像度は、プリンタの解像度の1/3(1/4の場合もある) が目安になる。720dpi(dot per inch)のプリンタで印刷する場合は最終画像は 240dpiにする。
オーサリングは最終解像度の整数倍の解像度で行ない、最後に最終解像度を変換するのは 画面表示用、印刷用とも同じだ。
ディスプレイで表示するときは、解像度に関係なくピクセル数で表示の大きさが 決まり、144ppiでも72ppiの解像度でも640x480pixelあれば画面一杯に表示されるが、 プリンタで印刷する場合は、
640x480pixelの画像ファイルの場合
72dpi の解像度では --> 約22.5cm x 17cm
144dpi の解像度では --> 約12cm x 8.5cm
の大きさで印刷される。せっかくWWWを作っても、誰も見てくれなければ意味がない。 どうすれば皆んなが読んでくれるWWWになるのだろうか。
逆にどんなWWWが嫌われるのか考えてみよう。
読まれないWWWの条件
「表示が遅い」
1996年の終りにはインターネットへのアクセスの半数近くが、家庭からのダイアル アップIP接続で行なわれるようになった。ダイアルアップIP接続では、市内にアクセス ポイントがあっても3分10円の通話料金とブロバイダの接続料金がかかる。いまや接続 時間は財布に直結し、表示スピードへの関心は急激に高まっている。
遅々として変わらない画面を眺め続け、やっと現れた絵は大きなタイトルの文字だった というのでは、誰も寄りつかなくなって当然だ 。
一番敬遠されるのは重たいWWWで、重くなる原因は大きな画像、動画や音などだ。 文字は500行書いても20KB位のものだが、画像ファイルでは1枚が100KBを超えることは 珍しくない。100KBのダウンロードには28.8kbpsのモデムで30秒から1分以上かかるが、 その間じっと待っている我慢の人は少ない。遅いと感じればブラウザのツールバーの 「戻る」をクリックしデータを破棄して立ち去ってしまう。コンテンツに魅力あれば 数カ月先にもう一度くらいは訪れることもあるが、たいがいは「二度とここに迷い 込まないようにしよう」と自分に言い聞かせて終りとなる。
バナー広告を掲載するWWWも多いが、沢山の小さな画像のためにダウンロード が遅々として進まず、やっと表示されたら広告ばっかりだったというのも笑えない。
WWWを見るとき最初は警戒心が強くて、ちょっと待たされたり気に入らなかったりする とるとすぐ逃げ出すが、そのWebにだんだん深く入り込むにつれ抜けにくくなる。 自分の行為を徒労でなく意味のあることにしたいのは誰でも同じだ。平たくいえば元を 取りたいというケースで、ギャンブルで深みにはまって抜け出せないのと変わりないが、 これを利用しない手はない。
たまたま飛び込んだという気持ちが強いときは30秒でも待たされると遅いと感じるが、 「私が表示させる」という、はっきりとした意志を持ったときは1分でも待つものだ。 小さな画像をインデックス用としてはめ込み、大きな画像へのリンクを張れば、最初の ページの表示時間は少なくて済む。一枚目のページはできるだけ軽く作り、読み手が 意志を持ってリンクを押したら多少データ量が増えても期待に応えられる品位を持つ コンテンツを見せるような工夫をしたい。
IMG タグには WIDTH="xxx" HEIGHT="yyy"を必ず入れる。これがあると画像を表示 する場所が確保され、ダウンロードされるとすぐにALTで指定した文字が表示される。 ユーザーは反応を早く得ることができ表示スピードが速いように感じる。
WWWについてのアンケートの結果で、「ダウンロードに時間がかかりすぎる」、 「グラフィックスに凝るよりコンテンツを充実しろ」という厳しい意見が、 ともに50%を超えていることを覚えておこう。
「反応が遅い、動きが鈍い、重い」
スクロールしようとスクロールバーを動かしても、のろのろとしか表示が変わらない WWWがある。フレームを使ったページに多い。 フレームで大きな画面の一部を表示し、スクロールバーで画面を動かすのは、まるで 虫眼鏡で絵を見ているようで全体像が掴みづらくいらいらする。これで動きが 遅ければ途中で逃げられても当然だ。フレームを使ってもきびきび動かしている WWWもあるが、これらのほとんどはスクロールを一方向に限定しているし、13インチの CRTで表示されることも考慮している。
フレームのページにでくわすとすいすい操ってきたブラウザの動きが急に ぎごちないものになる。それまでブラウザの操作ボタンだけで動いていた画面が、 フレームの作者の意図した動きに合わせないとうまく表示されなくなるのだ。 直感的にブラウザを動かせば先に進むのと、考えないと表示したい画面に進めないのでは 操作性に大きな差がでる。
フレームを使ったWWWで、ブラウザのツールバーの「戻る」をクリックすると トップページまで戻るものがある。また、フレームから次ぎのページに進むとき、 新しくブラウザを開きながら進み、戻ろうとするとブラウザが何枚も表示されている こともある。<A HREF="xxxxx/xxx/" TARGET="XXXXX">の使い方に注意しよう。 充分に動きを確認し訪問者にストレスを与えないスムースなページ替えを考えたい。
gifアニメーションにも気をつけたい。gifアニメーションには2コマ以上の絵が必要だ。 1コマが9KBでも2コマで18KB、3コマで27KBと、動きを良くしようとすると思いのほか 大きなファイルになる。
Microsoft Internet Exploler v3.0(MSIE)やNetscape Navigator v3.0(NS)はメモリ上で gifアニメーションの処理をするが、Netscape Navigator2.0では一回一回ハード ディスクのキャッシュから画像データを読み込むため、gifアニメーションの表示 をするとハードディスクの音がうるさい。いろいろなブラウザがあることも考えておこう。
「内容が面白くない」
これはもちろん好みの問題だが、個人のWWWはその人のカラーが出ていて納得 できるものが多い。
面白くないのは企業のWWWだ。 会社名と会社の写真、ついで社長の写真と社長の言葉、経営方針の次ぎに経営陣の 紹介、最後に取引先リストとくれば、即「戻る」をクリックだ。 おまけに、この構成では更新も期待できないから再び訪れる必要もないが、 この手のWWWが鋳型で作ったようにあちこちにある。
インターネットユーザーのアンケートでは企業WWWへの不満として、 「一方的な情報提供」、「提供情報が宣伝にすぎない」という意見が毎回半数近くになる。
「ブラウザが限定される、特別なプラグインが必要」
インターネットには、Mac、Windows、UNIXなどを使うさまざまなユーザーがいる。 特定のブラウザでしか表示できないWWWは、自ら門戸を閉めているようなものだ。 最新の技術を使うのも同様だ。ほとんどの場合、最新の技術を利用できるのは最新の バージョンのブラウザだけだ。JAVAやクライアント側でのイメージマップの利用、 HTML3.0仕様の利用は一昔前のブラウザでは表示できない。
イメージマップはビジュアルなインターフェースとして使いやすいものだが、 対応できないブラウザのために、別のルートも用意するのが親切だ。
ムービーなどを表示するとき指定のプラグインが必要になり、ブラウザがプラグインを ダウンロードしに行くことがある。たいがい米国のWWWにリンクし、突然読み 込みが始まる。訳の分からない言葉が画面に表示されるのを見て一瞬唖然とし、気を 取り直し、「なんだこりゃ。ただWWWを見たいだけなんだ。どうしてこんな ことが起きるんだ」とあわてて戻ってくることになる。これでもう、そのWWW には近づかない。手間を喰うことや面倒が嫌われるのはどこでも同じだ。
Macやパソコンならともかく、インターネットTVなど、インターネット上でプラグイン を追加できない機器は、このケースはお手上げになる。最新の技術を誇示するのは インターネットの技術向上にも役立つが、結果として訪問は減る。先駆者の悩みはここ にもある。
Wordの文書など、特定のアプリケーションでないと開けないファイルをWWW に置くのも論外だ。もっとも他人を寄せつけないWWWを作るためなら、一種の プロテクトとなり、大いに意味がある。
ニーズに応えなきゃね
インターネットに関する様々なアンケートの結果をみると、人気のあるWWWの 条件は次ぎの3つだ。
検索サーバーへの登録は結構時間がかかる。10個のサーバーに登録するのに1時間以上 かかったりするので登録を始める前に準備をしておくと効率がいい。
検索サーバーへの登録は大きく分けると2種類あり、ひとつはURLのみを登録するもの、 もう一つはURL、メールアドレス、地域、キーワード、カテゴリー、コメントなどを 登録するものだ。登録のたびにいちいち文章を入力するのは面倒だし、URLを間違えた ら元も子もない。前もってURL、タイトル、E-Mailアドレス、キーワード(10個、30個など)、 地域名、紹介文(30字、40字、100字など数種類)などを登録用の文書として用意しておき、 そこからコピーする。
もう一つ身近なところで効果的な登録ができる場所がある。
自分のプロバイダのWWWを見てみよう。WWWを紹介をするコーナーが あるはずだ。ここの新着情報欄、ユーザーコーナーなどに紹介の掲載を依頼しよう。 掲載依頼の手順を見て電子メールで依頼をするのが一般的だ。
インターネット上で登録するだけでなく、既存のメディアにURLを宣伝するもの効果が ある。WWWをはがきに印刷し好きな雑誌に投稿しておこう。うまくいけば特集記事など で紹介してもらえる。
WWW採点えんま帳
いいねえ ちょっといい 並 いまいちだな だめ
洗練さ 5 4 3 2 1
美しさ 5 4 3 2 1
色づかい 5 4 3 2 1
レイアウト 5 4 3 2 1
情報のジャンル 5 4 3 2 1
情報の有用性 5 4 3 2 1
情報の量 5 4 3 2 1
情報の速さ 5 4 3 2 1
情報の希少価値 5 4 3 2 1
ダウンロード速度 5 4 3 2 1
操作性 5 4 3 2 1
教養を高める 5 4 3 2 1
ほっとする 5 4 3 2 1
くだらなくて良い 5 4 3 2 1
ヒット数 5 4 3 2 1
他人のWWWの点数をつけてみたら、自分のWWWも採点してみよう。 自分のWWWを他人の眼で見ることが肝心だ。
--- 自分のWWWを採点したら、ちょっと情けなかった。^^; ----
素晴らしいWWWにめぐり逢えたら、どうしていいと思えるのか、どうやって 表現しているのかを突き詰めたい。
まずはデータ収集からだ。Netscape Navigatorなら背景も含めて印刷できる。 イメージが得られればいいので、A4でなくても構わない。縮小してB5の用紙で残して おけば、インク代と印刷時間がだいぶ節約できる。 クールなWWWはクールな表現をしている。ソースをダウンロードしておいて HTMLの説明の本には書いてないうまい表示方法をあとでゆっくり確認しよう。
ブラウザのキャシュからHTML文書を再構成し、オフラインで表示できるようにするのも いい方法だ。
--- 第3章の箱庭つくろを参照 ---
カウンターを設置したら数字の動きを見てみよう。 WWWを設置してすぐどっと見てきてくれていたら、始めの宣伝は成功したということだ。 3カ月たってもぽつぽつとしか訪問者がいなかったら、運が悪いのか、呪いがかけられ ているか、サーバーがダウンしているか、さもなければ宣伝不足だ。
こんなに役にたつ情報を、こんなにきれいに作っているのに...と思うのは制作者だけ かも知れない。自分が他人になったつもりで客観的に見直してみよう。
「ゴーストサイトは作らない」や感性工学全開だ のWWW採点えんま帳でもういちどチェックしてみよう。
できがいいのに訪問者が少ないのはマーケットにも原因がある。 インターネットアンケートによるとインターネットにアクセスしている人間の ステレオタイプは次ぎのようになる。
ヒットが欲しいあなたに>