Miyahan WEB WORLDでは、2004年4月よりDreamweaver MX 2004を導入し、XHTMLとCSSによる物理・論理要素を分離し、正しいウェブデザイン : 標準Web を重視したウェブサイト作りを目指しています。（現在は、Dreamweaver CS 3 を使用しています。）
正しいウェブデザインの基本中の基本は、正しいHTML文法で記述されていることです。このサイトは以前は文法はめちゃめちゃで気にさえしていませんでした。しかし、2004年４月に情報系大学に入学し、「その道に進んでいく者が『ホームページ作れるよ〜！』とかかろうじて表示できている正しくないウェブページなんか作っていてはだめだ」と思い、プロのウェブデザイナーの多くが使っている Macromedia の Dreamweaver MX 2004（定価50,400円）を導入し、ウェブデザインに関する本を読みあさり、W3Cの規定する HTML 4.01・XHTML 1.0に準拠したHTMLを書き始めました。
さきほどから言っている "正しいウェブデザイン" というのは、ずっと「＝正しいHTML文法で書く」と思っていましたが、実はそれだけではなく、正しい文章構造の記述、アクセシビリティ、ナビゲーション、アカウンタビリティ、シンプリシティなどなど多くの要素がありました。Miyahan WEB WORLD 内の数百のウェブページを一度をすべての要素を考慮して手直しすることは不可能に近いので、重要なものから段階的に正しいウェブデザインを実現することにしました。そこで、以下のようなレベルを決めました。
現在、My City AKABANE・台中卒業新聞・のんちゃんワールド・ミヤハンのお部屋はほとんど手をつけていないのでLv.0〜Lv.1です。自己饅頭はLv.2〜Lv.3、マイ豊島はLv.2〜Lv.4となっています。
HTMLを正しい文法で書くメリットはたくさんあります。一番重要なことは、規格に準拠しているためどのような環境でも同じように表示・利用できる点です（Internet Exolorerをのぞく） ほかにも、テキストブラウザ、音声ブラウザなどの特殊な環境でもかなりの互換性が保たれます。また、このサイトでは関係ありませんが、共同でウェブサイトを運営していく際に、共同作業がしやすいなどのたくさんのメリットがあります。
昔は自分も気にしていなかったのであまり言える立場ではありませんが、どうしてかなりの人が正しい文法でHTMLを書かないのでしょうか。そもそも正しくないHTMLという表現も厳密には正しくない気もします。だって、正しくないHTMLってつまり「HTMLじゃない」という意味ですよね。DivXが「オレはMPEG4の仲間だ」とホラ吹いているのと同じ感じなんですかね…。
アクセシビリティとはどんなユーザーにも問題なくウェブページを閲覧できるユーザビリティの土台となっています。アクセシビリティに関するポイントはかなりのジャンルがあり、視覚・聴覚障害ビジターへの配慮、ブラウザ・OSなどのマルチプラットホームへの配慮、ポインティングデバイスを使えないビジターへの配慮などなど多義に渡っています。
基本的なところでは、
などがあげられます。
またこれから何度も出てきますが、ウェブページの外観をCSSによってデザインすること、たとえばテーブルを使ってのレイアウトを廃止することでアクセシビリティは一気に向上します。
ウェブサイトは各ページをリンクで結ぶことによってページ同士を関連づけていますが、ページをめくるだけの本とは違い、なかなか関連性がわかりづらいと言えます。ですからビジターを適切にナビゲーションするための配慮が必要になります。ナビゲーションには、意識レベルのでナビゲーションと操作レベルでのナビゲーションがあります。
たとえば「豊島高校の場所を知りたい」と思ったときに、マイ豊島のトップページから迷わずに目的の情報にたどり着けるかという問題をとりあげてみましょう。
意識レベルでのナビゲーションは、サイトのコンセプト、ページのタイトルや見出し、説明文などで自分が得たい情報を発見できるか、どういう情報があるのかを把握できるかどうかの問題です。もしマイ豊島のトップページが「豊島高校について１」「豊島高校について２」「豊島高校について３」・・・となっていたら、どこを見て良いか、そもそも自分のほしい情報は存在するのかわかりません。実際には「豊島高校ってどんな学校？ 」「 豊島高校へのアクセス」「豊島高校Q&A」などにページが分かれているし、ページについての簡単な説明も記載されているので、探している情報をすぐ見つけることが出来ます。
次にもしその情報を見つけても、どこをクリックしていいかわからず結局見られなかったでは意味がありません。画像にリンクを張るならクリックできそうなデザインをするとか、リンク色を文字色ときちんと区別できるように設定するなど、誰でも操作しやすいインターフェースが必要です。
また、Miyahan WEB WORLD の一部ページでは、ナビゲーションリンクがHTMLに記載されています。 ですのでOperaなどのブラウザやテキストブラウザを使えば、トップページに戻ったり、次のページに飛んだり、ヘルプページに飛んだりと、各ページの関係が一発でわかるように配慮されています。
そして各サイトのトップページには、"Miyahan WEB WORLD NAVI" が下部に設置されています。ここから掲示板や、他のサイト、更新情報などへのジャンプが簡単にできるように配慮されています。
ウェブサイトは比較的一方的な情報発信手段です。ですから、発信サイドはビジターが不安、困惑しないように考慮しないといけません。たとえば、膨大なウェブサイトの中で、どこがいつ更新されたか記す更新情報、新着情報が代表的なアカウンタビリティのひとつです。当サイトでは、Miyahan WEB WORLD Information に更新情報やユーザーに連絡すべき内容を記載しています。
また、もしサイト内でエラーが起こったときにユーザーに説明と解決方法を提示するために、オリジナルのエラー画面を用意しています。たとえば代表的なエラーである 404 File Not Found エラーではこのような画面が表示されます。
またさきほどできてきた、"Miyahan WEB WORLD NAVI" では、管理人への連絡先や、推奨ブラウザの紹介、補助情報へのリンク、などが記載されておりアカウンタビリティの要素を持ち合わせています。
Simple is Best. これがシンプリシティの意味であり神髄です。
技術面ではウェブページの構造は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パワーやトラフィックを消費します。Flash Player Plug-inを入れないとメニューも見られいなどということは、情報伝達デバイスの趣旨からはずれていると考え、当サイトではそのようなものは使っていません。
This page is valid XHTML 1.0 Transitional.
This page is valid CSS 2.0.