ビジネスのためのWEBサイト

企業は何のためにWEBサイトを作るのか？

広報活動、求人、知名度アップ　から　取引増・売上増・収益増　へ
「我が社は○○な技術・製品を持った会社です。○○のことなら我が社にお任せください。」

→見てもらえなければ意味がない

見てもらうために必要なこと

2003年10月 Yahoo!Japan　「第14回　ウェッブ・ユーザ・アンケート」結果
　Q.サイトを訪れるきっかけは？　A.検索エンジン　82%

→検索エンジンの上位にランクされることが最重要

検索エンジン対策として何をすればよいのか？　

キーワードを決める

ユーザはどんなキーワードで検索するのか？

キーワードを決める「長野」か「信州」か？　「Web」か「インターネット」か？

キーワードをページに記述する

さりげなくキーワードをページにちりばめる

キーワードが決まったら、ページに埋め込む→作りこみが重要、後で打てる手は少ない。

重要な文は上部に持ってくる

HTMLの上部ほどポイントが高い

一番おいしいところがJavaScriptやナビに占領されるのはもったいない！

検索エンジンは画像を無視する

画像の使い方にも工夫が必要

せっかくのキャッチコピーも画像では検索エンジンには見てもらえない！

検索エンジンからどう見られているか？

Another-lint で確認できる

検索エンジン対策の実績

松本市スキークラブhttp://www.dia.janis.or.jp/~msc/

スキー＋松本市　Google １位

スキー＋松本　　Google １５位

スキー＋クラブ　Google １５位

スキー＋教室　　Google １３位

上記実績は残念ながら、既に過去のものとなっています

検索エンジン対策ツール

■ポジション確認→http://www.seoseo.net

キーワードとURLを指定、サイト順位を表示＝結果確認、ポジション確認

■キーワード選定→http://inventory.overture.com/d/searchinventory/suggestion/?mkt=jp

キーワードを指定、前月の検索エンジンでの検索数＝キーワード選定用　長野県か信州か？

検索エンジン対策としてやるべきこと

1. 適切なキーワードを選定する
2. キーワードを含んだ自然な文章を書く
3. キーワードを入れたタイトルをつける
4. HTMLファイルの先頭部分にキーワードを含んだ重要な文を配置する
5. 画像にもさりげなくキーワードを含んだALT属性を指定しておく
6. 動画だけのページや画像だけのページなどは論外
7. フレームは百害あって一利なし

WEB原理主義者はテロリストか？

WEBの目的と理念

WEBは誰もが簡単に情報を入手するための手段として、先人たちが築き上げてきた資源であり財産です。先人たちの努力が一企業や一業界の利益のためにゆがめられることのないよう、WEBの目的をシッカリと理解し、WEBの理念にのっとって行動することが、私たち求められています。

宗教的権威W3Cと世俗権力ブラウザの抗争の歴史

歴史1 WEBの誕生とHTML

初期のインターネットでは情報の入手や検索には特殊なコマンドが必要であり、誰もが簡単に情報を利用できるような状況ではなかった。そのような中、World　Wide　Webが生まれ、WEBブラウザによって簡単に情報の検索・参照・入手ができるようになった。

当時はブラウザごとにタグが定義されていたため、情報の入手が簡単に行えるようになったとは言っても、特定のコンピュータの特定のフォーマットでなければ見ることのできないような状況であった。そこで情報の標準化が緊急の課題となり、当時政府文書の記述などに利用されていたSGML(StandardGeneralization MarkupLanguage)を誰でも使えるように簡素化し、ハイパーリンクの機能等を盛り込んでHTML(HyperText Markup Language)が作られた。(1989)

歴史2 ビジュアルの登場

このようにテキスト中心に発展してきたWEBの世界に一大変革の波が押し寄せた。1993年、イメージを取り込める画期的ブラウザ　Mosaic　が登場したのである。Mosaicは文書中心だったWEBの世界に大きなインパクトを与え、以降ビジュアル系の情報発信というWEBの新潮流を生み出した。

歴史3 ブラウザ戦争の勃発

1994年Mosaicの流れを汲むNetscapeが登場、ビジュアル系の勢いは加速された。NetscapeはHTMLの規格以外のfontタグやcenterタグなどの独自タグを拡張していった。これらのタグはコンテクストの記述ではなく、ビジュアルデザインをコントロールするものであったため、WEB本来の目的に反するという反対意見も多くあったが、いったんビジュアル系に傾いた流れはそのような反対意見を押し流してしまった。

ビジュアル系の圧倒的な支持を得たNetscapeがWEBブラウザの標準となることは誰の目にも明らかだと思われた1995年、WindowsによってOS戦線で勝利を収めた　Microsoft社が、その勝利をさらに強固なものにするためにブラウザに乗り出してきた。Microsoft社のInternetExplorerはWindowsにバンドルされることによって、Netscapeの牙城に迫っていった。これが世に言うブラウザ戦争である。

歴史4 ブラウザ戦争の終結とWEB世界の混乱

ブラウザ戦争はMSの圧倒的勝利に終わり、後には大衆の支持を得るために採用された独自拡張タグが残った。特定環境の特定のブラウザでしか見ることができないページが増え、各ブラウザでの動作確認は困難となり、「このページはXXXXXXXのバージョンXX以上でご覧ください」などというWEBの存在そのものを揺るがすようなメッセージを平然と記載しているページが増えていった。ブラウザ戦争が生み出したのは、ブラウザの間の不統一とWEB世界の混乱という不毛の現実であった。

歴史5 WEBルネッサンス　理念への回帰

ブラウザ戦争たけなわであった1997年1月に発表されたHTML3.2は当時のタグ拡張路線を追認するものでしかなかった。さすがにW3Cもこの点をすぐに反省し、その年の12月にHTML4.0を発表して、「HTMLはコンテクストを記述するものである」というWEBの理念への復帰を宣言した。さらに1999年に規格化されたHTML4.01でもWEB理念の回帰は強まっている。

宗教的権威W3C　WEBを語る上で欠かせない存在

WWW（World WideWeb）に関連する各種標準プロトコルを策定し、相互互換性を維持しながら、WWWを発展させるために1994年10月に設立されたコンソーシアム。サービスとしては、ユーザーおよび開発者に対するWWW関連情報の提供などがある。WWWサーバとWWWブラウザの通信プロトコルであるHTTP、Webページの記述仕様であるHTMLなどはW3Cによって標準化されたものだ。
@ITの用語集から抜粋

WEBの理念に立ち返る

WEBの歴史で見てきたように、WEBは誰もが間単に情報を受信したり、発信したりするために作りあげられたものであり、特定の環境に依存するものであってはなりません。このWEBの理念に立ち返り、誰もが読めるHTMLを記述することがWEB原理主義です。それは過激なテロリズムではなく、WEB本来の目的を踏まえた極めて基本的な考え方です。

WEBの理念とは？

• 誰もが簡単に情報を受信(利用)できること
• 誰もが簡単に情報を発信(提供)できること
• それらの情報が相互に簡単に参照可能であること
• 環境に依存せずに情報の受発信が可能であること

WEB原理主義の教義

• 構造はHTML
• 表現はスタイルシート
• 誰でもわかる、使いやすいページ設計＝ユーザビリティ
• どのような環境からも利用できること＝アクセシビリティ

デザインVS原理主義

デザイナは原理主義者の敵か？

ライターはデザイナの敵か？、原理主義者はライターの敵か？

ユニバーサルデザインとは

米国のノースカロライナ州立大学教授で建築家・工業デザイナーであるロナルド・メイ氏が70年代に提唱した概念で「可能な限り最大限、すべての人が利用できるように、製品や環境を設計・デザインすること」と定義付けられています。(すまいを建てる・ユニバーサルデザインより　http://www12.ocn.ne.jp/~hagi.d/universa.htm)

国立国語研究所の言い換え「すべての人のためのデザイン」

原理主義はWEBサイトのユニバーサルデザインである

原理主義を言い換えると「すべての人のためのWEBサイトの実現」である

WEB原理主義実践ツール

■HTML文法チェッカ→Another HTML-lint

非常に役に立つサイト。HTMLの各バージョンての適合性が100点満点で採点される。テキストブラウザでの見え方も確認できるためSEOにも有効

原理主義実践のためにやるべきこと

1. 文法的に正しいHTMLを書く
2. DocTypeやLang属性を正しく指定する
3. コンテンツを構造化する
4. デザインはスタイルシートで設定する
5. ブロックエレメントとインラインエレメントをきちんと使い分ける
6. すべての文はブロックエレメントの中に入れる
7. Hタグは１から順番に使う
8. 文字サイズは固定しない
9. レイアウトのためのテーブルの使用はやむを得ない場合のみとする
10. テーブルの入れ子はできるだけシンプルなものにする
11. 画像を多用しない
12. フレームは使わない
13. 可能な限り利用者が自分の画面サイズに合わせて閲覧できるようにする
14. 画面スクロールはできるだけ避ける
15. 勝手に新しいウィンドウを開かない

JIS規格の登場

規格番号 JISX8341-3

名称：「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ」
平成１６年６月２０日制定

この規格は，ホームページ上などで提供される電子的な情報（コンテンツ）が満たすべき具体的な要件を規定しています。これにより、パソコンなどのハードウェアの規格だけでは実現できなかった、非テキスト情報などへのアクセシビリティの向上が期待されます。(2004年6月21日付　JIS規格報道向け資料より)

アクセシビリティとは？

情報やサービス、ソフトウェアなどが、どの程度広汎な人に利用可能であるかをあらわす語。特に、高齢者や障害者などハンディを持つ人にとって、どの程度利用しやすいかという意味で使われることが多い。accecibilityとは「受け入れられやすさ」という意味の英単語である。　例えば、手や腕の障害のためにマウスを使えない場合、ソフトウェアはキーボードだけで利用可能である必要がある。弱視や老眼の人にとってはフォントサイズや配色は容易にカスタマイズ可能でなくては見にくい。視覚障害の人は読み上げソフトを使うので、それに適したレイアウトや記述方法が求められる。

特に、Webページについての「利用のしやすさ」を「Webアクセシビリティ」という。これについては「WCAG」(WebContent AccessibilityGuidelines)という指針がW3Cによって提唱されている。画像や音声などには代替テキストによる注釈をつける、すべての要素をキーボードで指定できるようにする、情報内容と構造、および表現を分離できるようにするなどの方針が定められている。
IT用語辞典　e-Wordより

JIS規格の例

• ウェブコンテンツは、関連する技術の規格及び仕様に則り、かつそれらの文法の従って作成しなければならない。
• ウェブコンテンツは、見出し、段落、リストなどの要素を用いて文書の構造を規定しなければならない。
• ウェッブコンテンツの表示スタイルは、文書の構造と分離して、書体、サイズ、色、行間、背景色などをスタイルシートを用いて記述することが望ましい。
• 文字のサイズ及びフォントは、必要に応じ利用者が変更できるようにしなくてはならない。

JIS規格の影響

公的な規格の制定→官公庁・大企業は規格に準拠したサイトの構築に迫られる→JIS規格とWEB原理主義は極めて近い！→原理主義者にとってのビジネスチャンス！

JIS規格に対応するためにやるべきこと

1. ◎5.1.a 文法的に正しいHTMLを書く
2. ◎5.1.aブロックエレメントとインラインエレメントをきちんと使い分ける
3. ◎5.1.aすべての文はブロックエレメントの中に入れる
4. ◎5.1.a Hタグは１から順番に使う
5. ◎5.2.a コンテンツを構造化する
6. ◎5.2.b デザインはスタイルシートで設定する
7. ●5.2.b 利用者によるスタイルシートに切り替え
8. ◎5.2.dレイアウトのためのテーブルの使用はやむを得ない場合のみとする
9. ◎5.2.e キーワードを入れたタイトルをつける
10. ◎5.2.f フレームは使わない
11. ●5.3.a キーボードのみの操作　アクセスキー
12. ◎5.3.e 勝手に新しいウィンドウを開かない
13. ●5.3.h ナビのスキップ
14. ◎5.4.a画像にもキーワードを含んだALT属性を指定しておく
15. ◎5.6.a 文字サイズは固定しない(フォントも！)
16. ◎5.9.a DocTypeやLang属性を正しく指定する
17. ○画像を多用しない
18. ○テーブルの入れ子はできるだけシンプルなものにする
19. ○画面サイズは利用者の環境に合わせられるようにする
20. ○画面スクロールはできるだけ避ける

◎:検索エンジン対策・原理主義と共通、●:JIS独自、○:JISには含まれない

更新履歴
2004. 7. 1　講習会資料として作成
2005. 6.9　松本ソフト開発センターでの資料としてアレンジ