AWCSAWCS
ユニバーサルデザイン考察などWeb制作に関する私的コラム
〜ユーザビリティ、アクセシビリティ、SEO検索エンジン最適化〜
サイトの作成をテキストエディタ、いわゆる『手打ち』で制作されている方は、自分の書いたHTMLにタグの閉じ忘れ等ミスが無いか多かれ少なかれ気になります。
多かれ〜と書いたのは、最近主流のブラウザはタグの閉じ忘れがあったとしても大抵の場合”閉じてある”ものとして自動的に解釈し表示してくれるため、タグの記述ミスが致命的になってしまうことが少ないからです。
ただ、<TABLE>などの閉じ忘れは表示に不具合をきたす場合が多いので注意が必要ですよね。
そこで活躍するのがHTML文法チェッカーです。
Another HTML-lint gateway
↑は有名なサイトなのでご利用されてる方もいらっしゃるとは思います。まだの方は一度ご自分のサイトをチェックされてみると良いと思います。といいますか面白いです、ある意味・・・。
自分が一生懸命書いたHTML文章を『-150点』とか評価してくれます、ココ（笑）。タグの閉じ忘れもなく実際ブラウザでは何の不具合もなく表示されるのに、「あなたの書いたHTMLは間違っている」、、というんです。
このサイトでHTMLには論理構造、正しい書き方が存在するということを私は初めて知りました。
そこで当サイトはいわゆる『タグ屋』ですので、人にお教えする手前上「いい点数取らねば！」と思い
W3Cなどを通してこの論理構造を学びました。で如何にして良い点数を取るかを簡単にまとめてみました。
まず1.のDTDについてですが、HTMLには3.0とか4.01とかのバージョンがありまして、
各バージョンで使用可能なタグや属性があるわけです。
つまりHTMLのそのバージョンに正確なタグ打ちが要求されるわけです。
ただここは躓くとこではなくて、とりあえず当サイトのコンテンツHTML内
文章の基本でご紹介しているタグを冒頭に記述して、
後からAnother HTML-lint gatewayで指摘されたエラー箇所を修正していく消去法でいいです。
とにかくこのDTD（文書型定義）が宣言（記述）されてないと正確なチェックをしてくれません。
次に2.についてです。簡単に言うとインライン要素をブロック要素の中に入れることは出来ない、、ということです。
つまり<I><H1>文字</H1></I>のような使い方は出来ない、ということです。
<I><B>文字</I></B>のようなタグの入れ子関係ミスのことではありません。
当サイトのコンテンツHTML内HTMLの基礎知識でこれら要素を具体的に大別し掲載していますので参照してみてください。
次に3.についてです。先に述べた通りHTMLにはバージョンが存在します。その最新バージョンHTML4.01で最も重要な点は
「表示方法やレイアウトなど表現に関するタグを廃止し、スタイルシートを勧告する」方針を採ったことです。つまり<FONT>や<CENTER>などのタグは無効、、というわけです。
ただ個人的な見解では、マイクロソフトのサイトや大手検索ポータルなどのHTMLソースがこれら廃止タグを依然使用している現状をみると、IE等ブラウザ上でも<CENTER>などのタグが無効になってしまうのはまだまだ先の話だと思われます。
ここではあくまで、Another HTML-lint gatewayで良い点数を取る為にはなるべくスタイルシートを使ったほうが良い、とさせていただきます。
このコラムの題名である「正しいHTMLの書き方」を皆様に具体的にわかっていただける為にはどうしたらよいか？？を考えたとき、
Another HTML-lint gatewayで皆様のサイトをチェックされてからミスを修正する”消去法”をお勧めしようと考えました。
それは殆どの方が初めてホームページを作る際、ホームページビルダーやFront Page等のソフトで作り始めて、その後これらソフトでは足りない部分を補おうとタグを勉強し始める、、という現実を考えたからです。
ホームページは上記ソフトで誰でも作れます。またCoolやかわいいなどといった部分も画像素材、フォトショップを使ったりで簡単に実現できます。フラッシュなどもSWISH等色々なソフトで手軽に作れますしね。
ソフトは慣れですから。。。ただ音楽やスポーツなどを含めて、物事の上達にはある一定の”壁”が存在します。サイト作成において私はその壁を「上記ソフトでは実現できない何か」だと考えております。
しかし私にもその「何か」はわかりません（笑）。ただHTMLの論理構造を知ることは、ソフトを操る上でも大事かな・・・とは思っています。
今現在インターネットユーザーの80％は、検索エンジン経由でウェブサイトを訪れているそうです。で、SEOというのは
「Search Engine Optimization」の頭文字をとったもので、日本語では「検索エンジン最適化」などと略されています。
今このSEOが大変注目されています。
SEOをご自分のウェブサイトに施すことは、上記の80％近くのトラフィックを獲得し、非常に多くの訪問者を得ることを可能にします。
つまり、『検索エンジンに引っかかりやすくするように自分のサイトを改造する』ことがアクセスアップの第一歩というわけです。
では具体的にどのようにすればいいのでしょうか？以下に私の考えを述べさせて頂きます。
まず検索エンジンはディレクトリー型とロボット型の２種類に分けられます。ディレクトリー型には
Yahoo!とDMOZの２つが代表的で、
それぞれエディターによる審査によって選ばれたサイトのみが登録されています。ですがSEOの本来の概念は
「（某書引用）サイトの重要な要素、評価してほしい要素をロボット型エンジンに適切に伝えられるように、個々のウェブページのHTMLコーディングやウェブサイト構造を見直す一連の作業」
を指すので、ディレクトリー型エンジンへの登録対策はここでは省きます。
で、、後者のロボット型検索エンジンで如何に上位に表示され、尚且つそこに適切なコメントを表示させアクセスを得るか・・・を考えてみます。
まず1.ですが、日本のロボット型検索エンジン対策＝Google対策といっても過言ではありません。Yahoo!など日本の主要ポータルサイトのほとんどが、ページ検索としてGoogleを採用しています。 Googleはスパイダーと呼ばれるソフトウェア（ロボット）を利用して、自動的に世界中に存在するウェブページ情報を収集していきます。したがって勝手に登録されてしまうものなので本来登録という作業は必要ないのですが、 新規に開設したようなサイトであれば登録申請をしておいてもよいかと思います。
つぎに2.のHTMLの書き方ですが、以下某書籍を参考にしたものを箇条書きにしてみます。
つぎに3.の検索エンジンスパムについてですが、検索エンジンスパムとは 「検索結果の上位に表示させることだけを目的に、検索エンジンのアルゴリズムを悪用した手法を実践し、検索結果の精度を低下させる行為」を指します。 つまりJavaScriptやCSS等を悪用して、実際画面には表示されずサイト内容と関係ない検索キーワードなどを隠す行為をされては迷惑、、というわけです。ただし既にGoogleなどの検索エンジンではこれらスパム行為に対策がなされていて、 全く効果がないばかりでなく、検索結果が下位に下がるなど厳しい罰則もあるそうです。逆に普通に正しい構文でサイトを構築していれば検索結果の上位に行きますよ、とも言い換えられると考えられます。
最後にその他のSEOテクニックをまとめてみます。
これを望む管理人の思惑はさまざまですが、一般的には『画像ファイルを持っていかれたくない。
そのURLを隠したい』などや中には、『優れたサイトなのでそのHTMLソースを流用されたくない』
という方までいらっしゃると思います。果たして隠すことは可能なのでしょうか？
まず最初に述べますが、完全に隠すことは不可能です、と思います。。。でもある程度なら・・・
ということで、その方法を考察していきたいと思います。
まずは、１のブラウザの機能を制約する方法ですが、右クリ禁止は全くといってよいほど意味が有りません。
ですよね・・・？IEならブラウザ上部のパネルに『Notepadで編集する』があるんで。。。それらも
使えなくさせる方法が有るそうですが、私は知りませぬ。。。ちなみに右クリ禁止の方法は二通りありまして、
両者とも当サイトコンテンツJavaScriptとHTML
に詳しく掲載してますので、ここでは省略します。
というわけで２の方法ですが、一般的？には『フレームページ＋右クリ禁止＋ソースに改行をしない』が有ります。 目的にたどりつかせることを若干面度くさくしてはいますが、本題の『ソースを隠す』ことにはなってないですね。
では３のソースをエンコードする方法です。これにはマイクロソフトのScript Encoder というツールを使います。IEにしか対応しないページになってはしまいますが、これは一応本題の解決として当てはまるかと・・・
次に４のXORで暗号化する方法ですが、これはベクターにツールが落ちてます。 直リンしたいんですけど問題があると面倒なので・・・。そんなことよりこの方法はネスケでもいけるので最強かなと。 いずれにしても暗号化したものはJavaScriptで復元するので、これをOFFの訪問者はソースどころかサイト自体閲覧不可になってしまいます。
５の方法ですが・・・フラッシュの場合、埋め込まれたURLはテキストエディタ等で展開されるとバレてしまうのですが、 ソースを隠すというよりソースそのものがある意味”無い”といえます、、まあ本題から外れた極論ですが。
最後に６、その他として『ある言語を使ってウェブページを作る』があります。 私はまだまだ初心者から抜け出てないので、解説すら出来ません、、すみません。 自分自身理解出来るようになったらここで紹介したいとは思っています。
ホームページを作るということは、世界中の人々に作品を発表する行為とも言えます。
個人サイトレベルで、外国人を意識した外国語のサイトを制作してる方は少ないでしょうが、
『なるべくならより多くの人に見てもらいたい』とは誰でも考えているとは思います。
これら不特定多数の訪問者にボーダレスなサイトデザインのことを、
ユーザビリティ、アクセシビリティとあわせて
「ユニバーサルデザイン」と言います。
実際問題として、装飾的なデザインとユニバーサルデザインとは相反するものがあります。
つまり装飾的なデザインを行う上でJavaScriptやFlash、スタイルシート等が欠かせないにも拘らず、
携帯電話や一部ノートPCなどのプアーなWebブラウザではこれらは反映してくれません。
しかし個人サイトレベルでは想定したターゲットというものが存在するわけで、このコラムを読んでくださってる殆どの方は
『IE6.0以上で解像度1024*768』の訪問者向けにサイト制作をされていると思います。そして携帯サイトが必要な場合はCHTMLで記述し別に設ける、当然それで良いと思います。
でも装飾的かつユニバーサルなデザインというのは本当に実現不可能なのでしょうか？
結論からいいますと実現は可能です。前述したプアーなWebブラウザの進化は凄まじいです。i-mode端末ではFlashが見れるそうですね。
今まではファイルサイズや小さいピクセル寸法がデザインのネックになってましたが、今後はそれらが大きくならない程度のサイト制作で構わないと思います。
つまり機械技術の方から近づいて来ている訳です。
皆さんでも既に知ってるようなことを何故ここで私が述べたかというと、プアーなWebブラウザでは表現出来ない技術『JavaScriptやFlash、スタイルシートなど』の使用が
ユニバーサルデザインにおいて”悪”だという意見が余りにも多いからです。
確かに現時点ではテーブルタグを使用した時点でi-modeでは表現されない、JavaScriptでメニューを作ったらテキストブラウザでは・・・云々あります。
しかし日本でもっとも多く使用されているブラウザはIEではありません、携帯Webブラウザです。最も多くの人に使用されているブラウザがリッチなものに進化していくのはテクノロジー進歩の中で必然です。
私たちがサイトを制作する上で、ターゲットを想定しなくても良い日がわりと直ぐ側まで近づいているような気がしてます。
サイトのアクセシビリティを向上させることは、サイトのアクセス向上に深く関係していると言われています。
ちなみにWebにおけるアクセシビリティ（Accessibility）とは、『誰もが使えるバリアフリーであるサイト』
とW3Cのウェブコンテンツ・アクセシビリティ・ガイドライン
で定義されています。つまりサイトの「バリア（障害・壁）」となるものを「フリー（取り除く）」ことがアクセス向上に不可欠というわけです。
上記ウェブコンテンツ・アクセシビリティ・ガイドラインは別にアクセス向上を謳っているわけではなく、
サイトを作るときは障害者や高齢者でも使い易いサイトにしましょう、と提唱しているだけですが、
”誰にもわかりやすい、使いやすい”万人向けのサイトを制作することは、アクセス向上にも有益であると私は考えます。
では具体的にはどのようなサイト設計をしたらよいのでしょうか？上記ガイドラインでは”正しいHTML構造で記述する”ことが
大事であり云々、、と言っていますが、ここでは違った角度からアクセシビリティを見ていきたいと思います。
＝参考ソース＝
参考ソース1.で「バリアーとなり得る要素」が具体的に例示され、参考ソース2.でいわば「バリアーの無いサイトの作成方法」が解説されています。
読みやすい内容ですので、是非参考にしていただきたいですが、
ただ私としてはアクセシビリティにこだわるあまり、サイトの個性である”装飾的なデザイン”が失われては意味が無いと考えます。
”万人向け”と”個性的”は相反するものかもしれませんが、どちらもアクセス向上には不可欠です。折り合いといいますか、ここでの私なりの結論として
『個人サイトなら自分の色を失ってはいけない、しかしどんなユーザーに対しても最低限の情報を必ず伝えることができるサイト制作が必要である。』
以上は理想論です。が実現されているサイトも存在します。
デザインを追及し個性的でありながら且つ多くの人に認められアクセスがある・・・
私はかなりまだまだですが、いつの日か・・・と妄想しています。
Usabilityとは、『使い勝手』『使い易さ』などと訳し、ある程度ウェブデザインを勉強されてる方なら 少し気になるところです。訪問者に自分のサイトを、『使い易い』『閲覧し易い』と思って欲しいと考えるのは、 サイト製作者なら誰にでもあることかな・・・っと思います。ここではその私なりの考えを述べます。
ウェブユーザビリティに関する書籍やサイトは数多くありますが、ここでの紹介は止めます （ただのリンク集になってしまうので・・・）。で、某BBSなどで盛んに論議されていて、一般的に 皆さんがサイト製作の際気にされている部分をあげてみます。
１に対する私の極論は『個人サイトならあまり気にするな』です（笑）。前述の通り私はウェブユーザビリティに関する書籍 を数冊持ってはいますが、何をどう取り入れるかは自分のセンス次第です。本によっても考え方はマチマチですし。
で、２に移ってしまう訳ですが一般的に気を付けなければいけない技術は、『フレーム使用の際のtarget属性』、『文字サイズ（大きさや固定化）』、 『ブラウザが限定されているCSSやHTML、JavaScript言語等の使用』、『プラグイン・・・』 など多々あります。私が言いたいのはやはり『個人サイトならあまり気にするな』です。素っ気無いですしね。。。
３番目の『ページの重さ』ですが、これは測定するサイトがあります。 これ結構面白いです。私は高結果を出そうとバナーを16色に落としたりした時期もありました。 ネットサーフィンしていて表示が遅いサイトは、何より訪問者をイラつかせるそうです。まあ鯖自体が重かったら ページのファイルサイズなんて意味ないのですが・・・そんなことより、この話題はウェブユーザビリティとは関係ないかも。。。
訪問者のブラウザの種類と解像度については、、ちょっとは気にした方が良いかなと。個人サイトでも。
IEとネスケなどのブラウザの互換性については、各ブラウザのバージョンアップに伴い解消されつつありますが、
少なくとも主流であるIEの5以上には完全に対応させたほうが良いかなと。
あとこれすごい気になるんですけど、『訪問者の解像度』。640×480＋配置や文字サイズは全てCSSでピクセル指定。
これなら大体全てのブラウザに対応出来るんですけど、レイアウトが崩れる以前に内容という
もっと大切なものが失われがちかも・・・ちなみに今現在は1024×768の使用者が7割を占めているそうで、
ブラウザの”お気に入り”をだしてる人のことも考えて、ページの横幅は700以下ぐらいが適当・・・とここでは結論を出しておきます。
上記あくまで私の個人的な考えなので、『お前のサイトはどうなんだ？』っといったツッコミは止めて下さい。落ち込むので・・・
 |
当webページ（http://www.awcs.org/columns/）をpdfファイルで閲覧することが出来ます。 |  |
| http://www.awcs.org/columns/_.pdf |