重視したウェブサイト作りを目指しています。正しいウェブデザインの基本中の基本は、正しいHTML文法で記述されていることです。このサイトは以前は文法はめちゃめちゃで気にさえしていませんでした。1.0に準拠したHTMLを書き始めました。いうのは、ずっと「=正しいHTML文法で書く」と思っていましたが、実はそれだけではなく、正しい文章構造の記述、アクセシビリティ、ナビゲーション、アカウンタビリティ、シンプリシティなどなど多くの要素がありました。内の数百のウェブページを一度をすべての要素を考慮して手直しすることは不可能に近いので、重要なものから段階的に正しいウェブデザインを実現することにしました。そこで、以下のようなレベルを決めました。AKABANE・台中卒業新聞・のんちゃんワールド・ミヤハンのお部屋はほとんど手をつけていないのでLv.0〜Lv.1です。自己饅頭はLv.2〜Lv.3、マイ豊島はLv.2〜Lv.4となっています。HTMLを正しい文法で書くメリットはたくさんあります。ほかにも、テキストブラウザ、音声ブラウザなどの特殊な環境でもかなりの互換性が保たれます。このサイトでは関係ありませんが、共同でウェブサイトを運営していく際に、共同作業がしやすいなどのたくさんのメリットがあります。昔は自分も気にしていなかったのであまり言える立場ではありませんが、どうしてかなりの人が正しい文法でHTMLを書かないのでしょうか。そもそも正しくないHTMLという表現も厳密には正しくない気もします。正しくないHTMLってつまり「HTMLじゃない」という意味ですよね。DivXが「オレはMPEG4の仲間だ」とホラ吹いているのと同じ感じなんですかね...。アクセシビリティ(回覧可能性)の考慮アクセシビリティとはどんなユーザーにも問題なくウェブページを閲覧できるユーザビリティの土台となっています。アクセシビリティに関するポイントはかなりのジャンルがあり、視覚・聴覚障害ビジターへの配慮、ブラウザ・OSなどのマルチプラットホームへの配慮、ポインティングデバイスを使えないビジターへの配慮などなど多義に渡っています。基本的なところでは、すべての画像にはalt属性を入れて画像が読み込まれなくてもコンテンツを理解できるように工夫するテーブル(表)ではsummary属性や、th内のabbr属性などで内容をわかりやすくする機種依存文字を使わないCSSで定義されているフォントファミリーを使用するなどがあげられます。これから何度も出てきますが、ウェブページの外観をCSSによってデザインすること、たとえばテーブルを使ってのレイアウトを廃止することでアクセシビリティは一気に向上します。ナビゲーション(情報誘導性)の考慮ウェブサイトは各ページをリンクで結ぶことによってページ同士を関連づけていますが、ページをめくるだけの本とは違い、なかなか関連性がわかりづらいと言えます。ビジターを適切にナビゲーションするための配慮が必要になります。ナビゲーションには、意識レベルのでナビゲーションと操作レベルでのナビゲーションがあります。「豊島高校の場所を知りたい」と思ったときに、マイ豊島のトップページから迷わずに目的の情報にたどり着けるかという問題をとりあげてみましょう。意識レベルでのナビゲーション意識レベルでのナビゲーションは、サイトのコンセプト、ページのタイトルや見出し、説明文などで自分が得たい情報を発見できるか、どういう情報があるのかを把握できるかどうかの問題です。マイ豊島のトップページが「豊島高校について1」「豊島高校について2」「豊島高校について3」・・・となっていたら、どこを見て良いか、そもそも自分のほしい情報は存在するのかわかりません。豊島高校へのアクセス」「豊島高校Q&A」などにページが分かれているし、ページについての簡単な説明も記載されているので、探している情報をすぐ見つけることが出来ます。操作レベルでのナビゲーション次にもしその情報を見つけても、どこをクリックしていいかわからず結局見られなかったでは意味がありません。画像にリンクを張るならクリックできそうなデザインをするとか、リンク色を文字色ときちんと区別できるように設定するなど、誰でも操作しやすいインターフェースが必要です。一部ページでは、ナビゲーションリンクがHTMLに記載されています。Operaなどのブラウザやテキストブラウザを使えば、トップページに戻ったり、次のページに飛んだり、ヘルプページに飛んだりと、各ページの関係が一発でわかるように配慮されています。下部に設置されています。ここから掲示板や、他のサイト、更新情報などへのジャンプが簡単にできるように配慮されています。アカウンタビリティ(説明責任)の考慮ウェブサイトは比較的一方的な情報発信手段です。発信サイドはビジターが不安、困惑しないように考慮しないといけません。代表的なアカウンタビリティのひとつです。更新情報やユーザーに連絡すべき内容を記載しています。サイト内でエラーが起こったときにユーザーに説明と解決方法を提示するために、オリジナルのエラー画面を用意しています。エラーではこのような画面が表示されます。管理人への連絡先や、推奨ブラウザの紹介、補助情報へのリンク、などが記載されておりアカウンタビリティの要素を持ち合わせています。これがシンプリシティの意味であり神髄です。技術面でのシンプリシティ技術面ではウェブページの構造はHTML、見栄えはCSSで記述するデザインの事を指します。しつこいですが、このデザインはユーザビリティの真骨頂とも言える重要な要素です。このデザイン方法は、SEOと呼ばれる検索エンジン最適化に大きく貢献します。見栄えを設定する文章とは関係ない記述がなくなることによりHTMLは限りなくシンプルになります。そのため、検索エンジンのロボットは確実にウェブページの内容を解析することが出来るため、アクセスアップや、ビジターの適切な誘導が出来ます。表現面でのシンプリシティこのページを見渡してみてください。題字や見出しは太字で大きいフォントで表示されていますし、所々単語が太字で表示されているのに気づくでしょう。以前はこれらは<b>タグ、<font>タグ、<u>タグなどの物理要素タグ、つまり見た目をいじるためのタグで表現されていました。それは「見栄え」だけで、コンピューター側から見れば全部ただの文字です。現代のHTMLでは、いま言ったタグは非推奨とされ、見出しは<h1>、<h2>、<h3>...タグで、重要な箇所は<em>タグ、<strong>タグ、リストは<ul>・<ol>タグ、引用文は<blockquote>タグ、<q>タグなどさまざまなタグにより、文章構造を記述することを推奨しています。このような論理タグを用いることにより、文章が構造化され、検索ロボットやビシターが見やすい合理的な文章になります。文字の大きさ文字の大きさは、ウェブデザインにおいて基本的な要素ですが、もっとも難しく重要な要素でもあります。12pt〜14ptと言われています。ビジター本人や回覧環境によって理想のサイズなどは変わってきます。ユーザビリティを考慮していないサイトでは、フォントサイズを12ptに絶対指定(固定)したりしますが、当サイトではCSSを用いて相対指定しています。基本サイズを10ptにしているビジターなら、通常の文字は10pt、小見出しは12pt、大見出しは14pt、タイトルは18pt、基本サイズを14ptにしているビジターなら、通常の文字は14pt、小見出しは18pt、大見出しは21pt、タイトルは24pt前後のような可変的な表示になるようにデザインしています。スペースを大事にしたデザイン僕はウェブデザインにおいて"間":スペースをとても大事に考えています。このページもそうですが一般的なほかのサイトと比べて左右・上の余白が大きい事にお気づきになるでしょう。トピックとトピックの間のスペースもけっこう空いています。これによって、あまり圧迫感のない読みやすいページになると考えています。実際にこのスペースを大事にしたデザインは、とても好評らしく、たくさんのビジターから反響をいただいています。一部のサイトではレイアウトが崩れる可能性があるために、ページの表示幅を800ピクセルとか、1024ピクセルに固定しているところがあります。これらのサイトは「もう640*480で見ているビジターなんていないだろう」などと考えて作っているのだろうと思います。僕もこの考えには同意しますが、ビジター全員がブラウザのウィンドウを全画面表示にして見ているという保証はどこにもありません。逆に、1920*1200ピクセルのような高解像度でみているユーザーを全く考慮していないことにも気づくべきだと思います。高価な高いディスプレイを買ったのに、文章が表示されているのは画面の半分以下!では悲しいですよね。そこで当サイトでは、ウィンドウをいっぱいに使うデザインを進めています。文字のサイズもそうですがユーザーの環境に合わせて見栄えが変化するデザインはとても難しく、レイアウトが崩れてしまう可能性もありますが、がんばって作っています。JavaScript、Flash、アニメーションGIF、巨大な画像を使ったこっているサイトをよく見かけます。キレイなのは良いのですが、特にJavaScriptやFlashはもともと見栄えをハデにするために用いる技術ではないと思います。これらは通常より多くのCPUパワーやトラフィックを消費します。Plug-inを入れないとメニューも見られいなどということは、情報伝達デバイスの趣旨からはずれていると考え、当サイトではそのようなものは使っていません。