Concept of This WebPage

216色デザインの卒業　(/_；)/~
今まで、Windowsと、Mac、両方でも見た目が変わらないようにと、256色中の WinとMac共通で使われている 216色でデザインしてきましたが、卒業　今時、256色で見ている人はほとんど居ないであろう・・・

フレームも卒業　(/_；)/~
フレームは、表示部分が狭くなり、よほど上手く使わないと見にくくなるだけなのでこれも卒業。

画面サイズへの柔軟対応
ホームページを作っている人で、慣れてくると気になるのが、画面サイズへの対応方法。640 x 480ピクセルの狭いディスプレイの人でも見られるように設計すればとりあえず誰でも見られるようになる。640 x 480ピクセルでも見られるようにしてあるのは、大きな所でいうと NHK (http://www.nhk.or.jp/)や、朝日新聞(http://www.asahi.com)、読売新聞(http://www.yomiuri.co.jp/)だ。この様にデザインすると、確かにほとんどの環境の人に見られると思う。【追記：2001年04月02日より、asahi.comは固定画面サイズでなく、フリー画面サイズとなりました。】　しかし、大きいディスプレイを使っている人には無駄が大きい。私は、EIZOの19インチディスプレイで、1280 x 1024ピクセルという少し大きめの環境で見ている為、先に述べたページを見ると半分以上が空白になってしまう。せっかく大金を払って(2インチしか違わないのに、購入当時の価格は17インチの倍以上)大型ディスプレイを買ったのに、恩恵を受けられないのは痛い。　オマケ：私の19インチディスプレイで、当サイトを見た時の画面キャプチャ(面積比1:4に縮小) 　今回大きくページを修正するにあたって、私も画面幅を決めてデザインしようと思っていた。ページを作る側としては、固定幅のページは簡単だ。スタイルシートを使ってフォントサイズも決めてしまえば、ほとんどの環境で画面が同じに表示される。しかし、そのようにするのはやはり上手い方法とは言えないと思う。　例えば先の例で言うと、読売新聞はともかく NHKのサイトはページによっては（BSの所など）フォントがとて小さい。中高年のユーザーに小さいフォントが辛いのは間違いない事実であり、視聴者に中高年層が多い NHK のサイトとしては問題があるのではないか。　おまけに、NHKのサイトはスタイルシートでフォントサイズを固定してあり、ブラウザでフォントサイズを変えようとしても基本的に無理であり視力が弱い人などを事実上排除している。これは、ユーザビリティを考えていない証拠だ。フォントサイズを、相対指定してやると、このような事にはならない。　http://www.news.com/を見てほしい。別に普通のページに見える。記事は画面全体に表示されているし、検索も上部に来ている為に使い勝手もよさそうだ。　しかし、ここで私が言いたいのはそこではない。試しにそのページを開いているウィンドウの横幅を狭くしてほしい。ある程度の幅までは、画面の大まかなデザインが保持されると思う。これはページを作る側は面倒だが、見るほうにはありがたい。大きなディスプレイを持っている人はその恩恵を受けられるし、小さな画面の人でもちゃんとページが見られるようになっている。　と、言うわけで今回はこのようなデザインに挑戦してみた。固定幅のフレーム・テーブルはごく一部を除いて使っておらず、画面の幅の相対パーセントでデザインしている為、全ての環境で画面いっぱいに表示されると思うだ。大きなディスプレイの人はその恩恵を受けることが出来、小さな画面の人でもしっかりと見られる(ハズ)(笑)　ちなみに、フォントサイズもスタイルシートで固定していないので、柔軟に変更できる。　作ってみると、固定幅でページを作るよりもなかなか大変だった。固定幅のページは、ガチガチに組んでしまえるので、ページを作る側としては楽なのだ。しかし、このように画面サイズによってテーブルなどのサイズが変わる場合は、改行位置の事などいろいろ面倒だった。しかし、作ってしまうとなかなかいい感じ。これから作るページは、画面サイズに依存しないようなページ作りを心がけよう(^^; 　ちなみに、このように画面サイズに依存しない設計をしようと思ったのは、最近読んだ本「ウェブ・ユーザビリティ」(Jakob Nielsen著・篠原稔和監修 / グエル訳) [ISBN4-8443-5562-7]を読んだ影響だ(笑) 　この本は、主にWebpageの使いやすいデザイン・操作性について書かれた本だ。ページの表示時間・各種のデータが具体的な数値で表現されている辺りが、いかにも理系人間が書いたという感じがする(笑)　その為に、内容に具体性があり納得できる所が多かった。残念なのは、理想的なページ作成のソースの書き方が実際にあまり書かれていない所だろうか(^^;　仕事や、趣味でWebpageを作っている人にはぜひとも読んでもらいたい 1冊である。

オマケ	EIZOというメーカーを知らない人もいるかも知れないので簡単な説明を。EIZOは、商標であり、会社名はNANAO(ナナオ) (←NANAOも商標だけども(笑))。　本社はページ作者が住んでいる所から車で15分くらいの、石川県松任市にある。ディスプレイ専門メーカーで、映像の品質が高い事で有名。省エネルギー対策・電磁波対策を積極的に薦めている事でも有名だ。イ○○マの様に値段で勝負はしておらず、他社製品よりも若干値段が高めである。(最近は、昔よりは安くなってきた)サポートも評判がいい。故障時には無償で代替品も貸してくれる。製品は日本だけでなく、環境に敏感なヨーロッパで人気がある。　私がずっとEIZOに惚れ込んで、色々な人に薦めているのはやはり映像の品質が高いからだ。細かい色の表現などは、やはりイ○○マのディスプレイとはかなり違う。また、機種によっては OSがWin98か、Win2000である場合、ディスプレイの設定が画面上のマウスの操作で出来るのもよい。　そんな訳で、色々な人に薦めた結果、今までに親族や友達が購入したのを数えてみると、　○T962(21 inch CRT) 1台　○E67F(19 inch CRT) 1台　○T760(19 inch CRT) 1台　○T550(17 inch CRT) 1台　○T561(17 inch CRT) 1台　○L350(15 inch TFT) 3台　○L371(15 inch TFT) 1台　○L680(18.1 inch TFT) 1台と、計 10台。合計金額は 130万円を超えている(笑)　値段は高いが、買って良かったと思える製品が多い。(ただし、コストパフォーマンスに優れた製品として出ていた　T550(17 inch CRT)はさすがに安物という感じで、スペックが弱く、あまりいい感じはしなかった)

ALTタグの絶対記入
画像の IMGタグにALT属性を入れてないページをよく目にするが、画像が表示されるまでは何の画像なのか全く分からない、また画像表示をオフにしている人にも全く分からないので、これは絶対にダメです。画像にはALT表示を必ず記入している。また、IMGタグには、画像の縦横のサイズを必ず記入し、ページの書き換えを無くしている。　今回は新たに、リンクタグにも、TITLE属性を付け、リンクの文字列にカーソルを持っていき、しばらくおくと説明が出るようにした。TITLE属性は全てのリンクに設定している訳ではありませんが、ほとんどのリンクに設定している。

　文章が読みやすい文字間隔・スペース

　あなたは、このページ（Concept of This WebPage）を見て、最初に気が付いた事がないだろうか？実は、他のサイトではあまりしていない事をしているのである。
　答えは、スタイルシートによる文字間隔と行の間隔の設定だ。インターネットや、ブラウザ、OSは元は全て英語圏で作られた物であり、あなたが今見ているブラウザも英語圏に合わせて作ってある。
　その為、英語で書かれたページでは文字間隔・行間が上手くいくが、そのまま日本語文章に使うと見難くなってしまう。
　ここで、デフォルト（初期設定）の場合と、文字間隔・行間隔を調整した例を記してみる。

これが、ブラウザデフォルトの設定です。『 Himajin's Bryan Adams Page 』などのような、アルファベットにはとても見やすくなっています。
改行すると、上の行とのスペースはこの位です。上下の行との間隔は少し狭く感じて、見難くないですか？
長文では、何も設定していない日本語は読みにくいので、私は読んでいる所をマウスで範囲選択して読むクセがついてしまいました(笑)
　しかし、英語だと行間もいい感じになります。下に例を示してみます。

clue number one was when you knocked on my door
clue number two was the look that you wore
n' that's when i knew, it was a pretty sign
that something was wrong up on cloud number nine

　このように、デフォルトの状態では日本語が読みにくくなってしまうので、長文では文字間隔などを調整しています。しかし、これだと逆にアルファベットが間延びして読みにくくなってしまいます。例を示します。

clue number one was when you knocked on my door
clue number two was the look that you wore
n' that's when i knew, it was a pretty sign
that something was wrong up on cloud number nine

　これは、管理人が手間をかけて、アルファベット部分はアルファベット用のスタイルシートで別設定しなくてはならないという事だろうか(笑)
ちなみに、人が見やすい 1行の文字数のは 40文字前後という事だ。その為に、一般に市販されている文庫本や小説などは 1行が 40文字前後になっていると思う。このページも、40文字毎に改行しても良かったが、フォントサイズが変わる事を考えて、その設定をしていない。
　ただし、文章が読みやすいように、長文では画面の両端を空けている。この時、スタイルシートを用いてピクセル数で空きを設定しても良いが、低解像度の時に空きの間隔が大きくなる恐れがあるため、パーセント指定にしてある。
　両端まで行くと文章が見難い例を示してみる。

画面幅いっぱいの例
　これが画面いっぱいまで文章を書いた場合の時の例です。画面サイズが大きい場合、改行までの文字数が長すぎる為に読みにくくなる場合があります。画面の端から端まで視点を移動させなくてはならないからです。これを回避する為には、セコい手だと　<BLOCKQUOTE>　</BLOCKQUOTE>　というタグで囲めば、両端が空きます。しかし、本来これは引用の時に使うタグなので HTML の文法からすると間違っています。一般的にはテーブルを使います。スタイルシートで設定すると、（スタイルシートでは、様々な単位が使えるため）非常に細かいマージン設定が出来ます。これからはスタイルシートが主流になっていくでしょうから、新規のページはスタイルシートで両端のみならず上下の空きを設定するといいでしょう。当ページではスタイルシートよりも一般的な、テーブルを使って両端の空きを設定しています。なんでかって？それは当サイトの運営者がテーブル好きだからからです(笑)　さて、いい加減文章を書くのが疲れてきました。両端に空きがないと、両端に空きがある場合より読みにくいと思います。なんとなく分かっていただけましたでしょうか？(^^;

　考えていないようで、いろいろと考えていると思いませんか？(笑)
　ただし、この設定はスタイルシートが使える環境でないと効果がない。アクセスログによると、当サイト訪問者の 99%の方はスタイルシート対応ブラウザであるので、全くと言っていいほど問題ないのだが(^^;

　画像は極力使わない

　画像は極力使っていない。画像を使う際は、先に示したように IMGタグで画像サイズを指定し、ALT属性も付けている。あとは、incl（ページを置いているプロバイダの名称）のサーバー＋回線容量次第！

　サイト内の場所を常に表示

　過去のこのページを知っている方で、多分気になるのが、ページの最上部と最下部にある、以下のようなバーであろう。


	TOP ⇒ Discography ⇒ Album ⇒ The best of me	Himajin's Bryan Adams Page

　これは、表示されているページの、サイト内における位置を示している。Yahooなどにも用いられている方法だが、これによって、自分がどこにいるのかすぐに分かり、戻る時も簡単であると思う。このバーは、ページ内のほとんどの所に設置しています。
　バーの右側のHimajin's Bryan Adams Pageというのは、特別意味はないが、右側が寂しかった為に入れてみただけだ(笑)

　LINKはご自由に

　当サイトのページにおいて、リンクは全て自由です。好きなページに好きなだけリンクして頂いて結構です。リンクの許可は必要ありません。Bryanのページを含む全てのページで同じです。リンクの許可のメールを頂いても、返事は書きません。また、依頼されての相互リンクは受け付けません。

　結構疲れたよ (笑)

　ページのデザインを変更しようと思って、取り組み初めて 3日が経過。結構疲れた(笑)　やる時は、なぁ～～んにもやらないけど、やる時は気合を入れて一気にやるのが私の性格(^^;　B型人間はみんなこんな感じなのかな・・・。

　ページ作成環境　オマケ

　このページの作成ツールは、「HTMLエディタのみ」(笑)　IBM HomePage Builder、Front Page、Dream Weaverなどはメインの作業では使用していない。ひたすら「エディタ」(笑)　なんて古い人間なんだろうか(笑)
　だだし、色の調整に関してはエディタよりも、専用ソフトの方が良い場合があるので、その時だけは Dreamweaverを使って色の調整をしている。
　ちなみに、OSは Windows98 or Windows2000。ディスプレイサイズは、19インチで、解像度は1280 x 1024ピクセルです。色温度はパソコンで一般的な9600k。γ値は 2.2になってます。
　メモリは256MB、CPU Pentiumlll 667MHz、HDD 33GBの自作マシンですが、これはページの作成とは直接関係ありません(^^;