【バナー表示】 　プロバイダの項で、無料ホームページサービスを考慮していないのは、そりゃバナー広告を入れたくないからです。ページ内に影響しないポップアップ式もありますが、個人的にはむしろそっちの方が邪魔でイヤだし。そういう次第ですから、広告を入れませんかというDMは無視です。スパムメールの類ではなく、きちんとした広告掲載の打診もあったのですか、ページのデザインの面から極力広告を入れたくないのだという旨を説明して、丁重にお断りしました。 　ただ、むしろこの広告入れたい！というものもあります。本館BBSで利用しているOTDの無料広告。それはもうイカしたセンスの広告でぜひ置いておきたかったのですが、既に入金してしまっていたので一週間ほどで消えてしまいました…。 ●バナーは基本的に必要最低限。属性を醸し出すためには有効だが、必要性を見極めて。 　広告はもちろん、TOPにはなるべく余計なものを置きたくないというのが本音。特に、引用形式のバナーを置いてしまうと、その数だけ元サイトにバナーを読みに行ってしまうのですから、表示にかかる負荷が増します。つまり、重くなる。 　ただ、現在ではランキング参加を機に（いや、積極的に参加する気はなかったのですけど…）、登録サーチエンジンも使用頻度の点からTOPに置くことにはしました。 　ウェブリングや同盟などのバナーを置くことで、そのサイトの「属性」は判りやすくなるものの、やりすぎると見た目に雑多な印象になりますよね。

　

【使用環境】 ●最初から環境によるギャップの少ないページデザインを！ 　言うまでもないことですが、人によってネット環境は違います。見え方ひとつをとっても、使用するブラウザに始まり、マシンのＯＳの違い、マシンによってもモニタのサイズやカラー調整で違ってきますし、パソコン以外での閲覧──テレビモニターを使用するドリームキャストでは解像度は大幅に落ちますし、ｉモードとなるともはや同列には考えられませんが──も含めると、どの環境でも同じ外観で表示させるのは不可能です。 　デザイン重視のサイトの中には、「このブラウザを使用してください」と指定してくるサイトもありますが、意図したとおりに表示されないと許せない気持ちは解るのですけど、それなら作る時点でどのブラウザでも違和感なく見られるように作っておくのが筋というものでしょう。指示に従わないと見にくいようなページだったら、わざわざ手間かけてまで見やしませんて。 　ただ、最も意図した形に忠実に表示される環境と、他の環境でギャップが生じる可能性があることを提示しておく分には問題ないかと思います。 　とりあえず、私の場合はＩＥとＮＮの両方のブラウザで確認し、改行などが明かにずれることのないようには調整していますが…Winについては人に見てもらって訊くしかないのですけど。フォントのサイズは、どうやらデフォルトではMac版ＮＮ＜Win版ＮＮ＜Win版ＩＥ＜Mac版ＩＥ(5.0)となるようです。 　特に、ＩＥとＮＮの二大ブラウザに関しては、以前に掲示板で熱論になっていますが、ＩＥではタグの閉じ忘れなどHTMLのある程度の不備はフォローして表示されますが、ＮＮではその点厳密です（Netscape6も相変わらずタグに厳しいらしい）。ですから、ＩＥでしか動作確認していないという人、ＩＥで動くから大丈夫と安心せず、ＮＮで問題なく表示されるかどうかも確めてみた方がいいかもしれません。また、ＮＮでは表示がおかしいのでＮＮを使わうなという人、ブラウザの問題にする前にそれがHTMLの不備でないかを確認してみてください。 ●表示までの限界時間は８秒。TOPで無用に待たせない。 　また、通信速度も、ISDNやADSL、光ケーブルなどの高速通信が利用できる人ばかりではありません。一般的なアナログ通信でのモデムが56.6Kですが、DCでは33.6Kとなりますし、旧型機を使い続ける人だと28.8Kを使うことになるでしょう。 　INTERNET Magazine誌によると、新しいページにアクセスした際に大半の人が待っていられる時間の限界は８秒だそうです。つまり、８秒でページの全体像が見えてこないなら引き返すということ。イラスト画像のページにアクセスしたりと、見る側が読み込みに時間がかかることが判っているならまだしも、TOPページで表示に時間がかかっては致命的です。自分だったら８秒も待ちません。そりゃもうバックボタンで即、戻ります。さすがに８秒以内に表示完了…とは云いませんが、全体像、あるいはメインコンテンツへの入り口だけは表示されるようにしたいものです。 　今まで、メニューにボタンやバナー画像を使った方がきれいに見せられると思ったことは度々あります。ですが、絶対にテキスト表示よりは遅くなる。中に入るのにメニュー画像の表示を待たせることだけはしたくなかったので、メニューはテーブル＋テキストの方式を取り続けることになっているのです。 　また、テーブルも考え物で、テーブル全体を読み込むまで表示が出てこないんですよね。ＩＥは比較的表示が速いようですが、ＮＮがテーブルに弱いのだとか。それで、多重テーブルを組まない（せいぜい２重まで）のはもとより、テーブルにあまり長い文章を収めないようにはしています。まあ、日記もかなりの文章量になることがあるのでナンですが…、【Web Works】内の小説はレイアウトにテーブルを使用してますが、段落ごとにテーブルを別にしています。

　

【ページ構成】 　この辺からが本題かもしれませんね。 　まず、このＨＰを作る際に決めたのは以下の点です。 ●入り口を置かず、TOPからメニューに直結する。 ●フレームを使用しない ●各コーナーのトップページごとに簡易メニューを置く ●戻るボタンを付ける ●別ウインドウ表示をしない ●カテゴリーごとに決まったカラーを基調とする ●基本的には、いきなりイラスト画像が表れないようにする ●アニメーションを入れない ●リンクの下線は維持する 　最初の入り口ページを作らないというのは、これはサイトの性質によりでしょう。ある程度ビジターを限る趣味のサイトや、……まあ端的に「裏」サイト等だと、最初に内容を提示した上で選んで入った方がいいでしょうから。そうでないなら、メニューを選ぶ前に一段階ページがあって、それが表示されるのを持ってクリックして入って…は大きなストレスですから。 　フレームに関しては、まずはすべての環境で対応しているのではないからですが、メニューなら使わなくても作りようがあると思ったからなのですよ。それが、次項のコーナーごとの簡易メニュー設置なのですが。とはいえ、リスト上の多数の中から選んで見るものについては、フレームを導入した方が良いかもしれないとは思っておりますが、なんとかメニューの改良で対応したいところ（イラスト、ゲームレビュー、同人誌リスト等）。ただし、【同人出張所】だけ切り離して別のURLに引っ越した際には、フレームを使わずに各ページにメニューを置く措置のおかげで、修正が大変だったのですが（いや…一括で直す方法もあったのだとは思う…）。 　「戻る」ボタンは基本的なことですが、ブラウザのバックボタンを使わない人への対応。どちらかというと、そのコーナーのトップに戻る役割として置いています。 　別ウインドウ表示は、内容によっては有効かとは思うのですが…個人的には、勝手に別ウインドウに切り替わっていると遡ろうとした時に混乱するので、全て一系統化することに。 　カテゴリーごとのカラー区別、というのは、ウチの様に雑多なサイトならではで、普通はそのサイトのイメージカラーやデザイン構成で統一していくものでしょう（後述）。 　【館内地図】こと案内ページで説明しているとおり、うちの場合は個人サイトの本館の中でも一般情報・ゲーム関連・同人などの創作物・フクロウと４つのカテゴリーに分けています。しかも、どうも親和性がよろしくないと云おうか、要は、ここ以外は見ていないという具合にビジター層がはっきり分かれそう。そこで、タイプの違うカテゴリーに踏み込んだ場合はそれと判るようにした次第。 　画像については…ページの軽さも考えてとはいえ、イラスト系や写真サイトでは当てはまらないことでしょう。ゆえに、うちの場合でも【ふくろうアルバム】は例外で、メニューから画像を置いています。それ以外では、クリックしない限りいきなり絵が表れるページがないようにしているのは…私がこれまで会社からネット利用していたことから。家でネットやるにしても、マシンは家族と共用かもしれませんし、個人で閲覧できる環境でないと、いきなりイラストは…恥ずかしいでしょ。 　アニメーションは、重いとか以前に見ていて疲れます。GIFアニメは勿論、ブリンク、マーキーもチラチラしてうざったい!!　注意を引くなら色や文字の強調でやりようがあるでしょう。GIFアニメは初めのうちは楽しいかもしれませんが、何度も見るうちに邪魔になってくるものです。許せるのは最低限の動きくらい。何をもって「最低限の動き」とするかは作成者の感性でしょうが…。 　最後の、リンク部分の下線。……これは、いまだに悩むところではあります。正直、ない方がすっきりして格好良い。しかし、リンクに色をつけたにしても、やはり下線があるとないとでは、下線があればクリックするポイントで迷うことがありません。だから、見た人がどこをクリックするのか戸惑う可能性がある以上、下線は付けておきます。下線があっても違和感が少ないレイアウトにできないこともないのだし。逆に、リンク画像の周りの囲み線は…これは個人的に許せる範囲でないのと、ボタンならどう見ても判るでしょうから囲みをつけようとは思いません。

　

【カラーリング】 　ＨＰを作ろうと思ったら、まずそのサイトのイメージカラーを決めて、サイト全体をそのカラーリングで統一していく手法は考えるかと思います。初期設定のままでもページは作れますが、あまりに無個性では自分のＨＰを作る甲斐ってものがありませんから。また、意図的にコーナー別にカラーリングを分けるのは有効でしょうし、小説サイトなどでは作品ごとにイメージに沿った壁紙や配色を取ってもいいでしょうが、ページごとに違ったカラーリングにしてしまうと、まったく統一感が取れず散漫な印象になります。 　ふくろう館の場合なら、まず「フクロウ」のイメージから自然・素朴な印象のカラーリングでいこうと考え、まず緑・茶・ベージュを基調とすることに。そこから、ゲーム・同人ページは別系統ということが判りそう＆カラーリングを合わせやすいということで、水色と紫を使うことに。紫は使いにくいだろうって？　ええまあ…実は、最初は同人カテゴリの壁紙は、青のつもりで色相をいじったところ、GIF書き出ししてみたら紫に近かったんですよ。それはそれで判りやすい色に出来上がったのでこのまま行くかと。 　基調とするカラーを決めたところで、ここからが重要かも。 ●彩度の強い色を使用しない ●コントラストは強すぎず弱すぎず ●Webセーフカラーにこだわらない ●同系色の背景＋文字は極力使わない 　彩度の強い──要は、鮮やかすぎないということです。例えば、文中の注意を引きたい部分を赤でにするとして、この赤とこの赤では目立つのはどちらか。それは前者でしょう。ちなみにどちらもWEBセーフカラーで、前者はRGBでR 100、後者はR 80。HSVでは色相0、彩度100、数値100％と、色相0、彩度75、数値80％です。しかし、前者は目立つのはいいとして、見やすさや周囲とのバランスとしてはどうでしょうか。そこだけが目に付き、次第に落ち着かなくなってくるのではないでしょうか。薄い色の中に彩度の高い強烈な色はバランスを乱し、じゃあ、全体が彩度の高い色なら……云うまでもありません。疲れます。同系色の中で強調部分にのみ使う分には、それほどバランスを崩さずに目を引く効果に使えるとは思います。 　日記などこの文字色の場合、色変え部分は80％のオレンジを使用していますが、緑の場合、相性的にこの色に行きついたものの、目を引くかというとそうでもないので困りもの。（最近は、特に強調がこの色（彩度100で80％）、ちょっとしたポイントがこれまでのオレンジと彩度の高い緑（彩度100で60％）を使っています） 　次にコントラスト。これも見ていて疲れるということなのですが…。ＩＥでは初期設定の背景は白になります。文字は黒。白地に黒は見やすいように思えます。見やすい…が、結構見ていて疲れます。モニターは画面の光でただでさえ刺激が強いのですからなおさらです。背景色にごく薄い色を付けるだけで大分見やすくなります。同様に、黒ベタの背景の場合に一番見やすい色は。これが最も数値差のある白という訳ではないのです。黒に白を載せた場合、コントラストが強すぎて白い文字が光って見えてしまい、長時間読むのはつらくなります。 　このサイト内では唯一、濃い背景に薄い色の文字を載せていて、しかもその文章量が多いために気になっていたのが、【Web Works】のブラドの小説。改めて見直すと…背景を濃すぎる色にはせず、文字は薄い色をつけるとしているものの、彩度が高いためにやっぱり目にキツイ。が、この機に色を調整してみました。それを解決したのが、次項のセーフカラーを捨てること。ちなみに、問題が判っていて何故ここだけ濃い紫の背景を使用したのかって？　イメージもありますが……実は、文字色を白に近くしてプリントしにくくしてやろうと…(笑) 　Webのお約束に反するようですが、セーフカラーにこだわらないというのは、作成ソフトなどでパレットをご覧になれば判るかと思いますが、セーフカラーは一般に使う配色に比べて、鮮やかで強い色が多いのです。よって、セーフカラーだけを使って見やすいページを作るのは難しいからです。それで、256カラーで見ている人もいるとは思いつつも、大半のモニターがフルカラー対応になっていることを踏まえて自由に色設定しています。 　最後に同系色の色使い。例えば、群青色にそれよりやや薄めの青を載せるといったカラーリングだと、すっきりしてかなり格好良く見せることが出来ますし、コントラストも強いわけじゃない。では何が問題かというと──世の中には色を読みとる機能が弱い人もいます。視力の弱い人にも見づらいでしょう。 　それで、背景と文字が同系色の場合ははっきりと濃度の差をつけるか（なるべく文字の方を濃くする）、あるいは文字部分はテーブルで別の色を置くかです。

　

【文章】 ●一行字数は多すぎない 　これに関しては、問題なんだけど〜と思いつつもやっている部分があります。 　一行の字数として人間が頭に入る字数は40文字ちょっとなのだそうです。理想は38文字。印刷物をはじめ、大手サイトも38文字を基本にしているはずです。この辺が、目だけで文を追っていける限界。それ以上になると首も動かさないと文の頭から終わりまでを追えませんね。そうなると、疲れるわ内容は頭に入らないわ、見た目からはっきり言って読む気がなくなります。 　このページは、文章量と内容的なことから（まあ読む人は最期まで目を通すだろう）、ＮＮで45文字に合わせていますが、【日記雑記】などは膨大な文章量なのに横幅を取りすぎなのです。何故そうなったかというと…40文字程度で改行すると、今度は行数がとんでもない量になる…。ただでさえ文章量が多いのですから、行数がある＝文がいっぱいある、とますます退かれるだろうと。そこで、最初はこのページよりもちょっとある程度だった横幅が、じわりじわりと拡張されてブラウザのウインドウ幅の８割程度まで広がっていったのです。さすがに自分でもこれは読みづらかろうと思っているのですが、ここまで来たら、いつも日記を見てくれている人なら読んでくれるのだろうし、初めての人だと行数以前に読む気失せる量だろうと。──じゃあ一緒だったら読みやすい工夫をすればいいじゃん。よし、日記は４月分からもうすこし一行字数を減らしましょう。 ●行間・・・は仕方ないか 　行間に関しては、元々、ブラウザが英文の改行ピッチを基準としているのですから、日本語の文章では詰まりすぎになるのは仕方ないのです。唯一、それを解決できるのがスタイルシート…ですが、スタイルシートもＮＮは完全対応していない（Mac版Netscape Communicator 4.7では、文字の大きさや行間などは指定通りに見られるようです。内容によっては表示できない模様）。ネットの標準環境が決まった改行ピッチなのですから…それはそれでいきましょう。 　でも、今ひとつ納得しきれていないというか、出来ればなんとかしたいので、そのうちスタイルシートで行間指定するかもしれません。あれ、その場合文字サイズも指定することに？　それは…なるべく避けたいんですよね。文字サイズは見る人が必要に応じて調整できた方がいいですから。

　

と、ここまでお読みくださった方、お疲れさまでした。 　他にも、気を付けていることというと、ページタイトルは直球でとか（ヒネったタイトルも私は大好きなのですが、履歴やブックマークで見たときに何のページだか判らなくなるし）、ページの中身は横幅に余裕を持たせるとか。 　それと、TOPメニューの構成は、どこに何があるかパッと見で頭に入る限界として３×３。現メニューでは中心コンテンツのみを収めて、初めての人に必要な情報──プロフィールやガイドは独立して看板下に持ってきてしまいましたが、メニューに目がいって意外と分かりにくい気もしてきました(汗)。 　また、これからの課題が画像に代替ラベルを貼ること。ずっと必要性は感じていたのですが、実はつい最近までやりかたを知らなかったんですぅっ！　ALTタグの入れ方を知って、地道にALTを入れていこうとしたら、PageMillの機能にちゃんとあったことに気が付きました…。 　軽くしようと思えば、各ページの壁紙も取っ払った方がいいのかとは思います。ボタンもテキスト表示にしちゃえばいいし。しかし、それらがないと一気に無機質な印象になるんですよね…。そうなるとここはイメージを優先して、画像ファイルの容量を極力絞る方向で調整することにしています。最近は、アイコンなどのGIF画像の色数は16〜72色。木目などであまり落とすと質感を損なうものでも180色が限度。Photoshop6.0だとGIFファイルの容量を大幅に減らせるそうなのですが…。 　快適さとデザイン性の両立、本当に難しいと思います。難しいものですから、私の場合は軽さ・分かりやすさをとデザイン性との兼ね合いでは、最低限のデザイン性だけを残してデザインを切り捨てることにしているのです。 　うーん、でも格好いいページを作りたいんだけどなあ。 2001.4.1　有田みら

---

【HOME】【日記雑記】【ＣＧ】【GAMER'S VIEW】【同人出張所】【Web Works】【ふくろうアルバム】【BBS】【リンク】