ウェブの現状とあり方

川越市を中心として：

ウェブJIS遵守で「やさしい｣ページに

 

http://www.aoikuma.com/slidy/200611kawagoecc.html

桑原政則 (Masanori Kuwabara)  2006年11月

【注】ローマ字入力でのキー操作
次ページへ：→キー　　全画面表示：F11　フォントを小さく：<キー 　最終ページへ：Endキー：  印刷：Aキー

目次　第1部　ウェブについて

1. ウェブJISとは
2. ウェブとホームページ
3. ウェブ標準について
4. ウェブ標準とはインターネットのユニバーサルデザインのこと
5. バリアフリー
6. 流れはウェブ標準に
7. ウェブの評価、チェックツール
8. ウェブ標準にしたらどうなる？
9. なぜXHTML？
10. CSSとは
11. ロングテールとは

 

目次　第2部　ウェブサイトの現状

1. 埼玉県5地域の図解地図とデフォルメ地図
2. 埼玉県5地域中心都市のウェブサイトの状況
3. 川越市などの中核市のウェブサイト
4. 全国の小江戸6市町のウェブサイト
5. 川越都市圏7市町のウェブサイト
6. 川越都市圏の大学のウェブサイト
7. 川越市の公共機関のウェブサイト
8. 川越市の商店街のウェブサイト
9. 川越市のウェブの問題点は？
10. 検索ランキング

 

目次　第3部　コンピュータを使いやすくする

1. 文字を大きくする
2. 解像度を低くして文字を大きくする
3. 画面の色を暗くする
4. 拡大鏡をつかう
5. 背景を黒にする
6. マウスポインタを大きい黒にする
7. 警告音を視覚で表現する
8. 聴覚障害者が会話を楽しむ
9. 固定キー機能を使う
10. フィルターキー機能を使う

 

第1部　ウェブについて

 

 

ウェブJISとは

 

• インターネットの道交法
• ウェブJISの歴史
• 検索[ウェブJIS]108万件
• WebコンテンツJIS (JIS X 8341-3)　　（やさしいさー）

 

ウェブとホームページ

 

• ウェブ（インターネットの１ページ）
• サイト＝ウェブサイト(ウェブページ群)
• ホームページ≒トップページ（ウェブサイトの玄関）

 

ウェブ標準について

 

• ウェブ標準：XHTML＋スタイルシート→ 脱テーブル＋CSS
• 検索[Web標準]　５９1万件
• ユニバーサルデザイン
• バリアフリー
• ウェブアクセシビリティ

 

ウェブ標準とはインターネットのユニバーサルデザインのこと

 

• ユニバーサルデザイン（万人向け設計）とは、新しくつくるものを誰でも使えるようにデザインすることで、誰でもが公平に、自由に、直感的に使用でき、すぐ理解でき、危険につながらず、楽な姿勢で楽に使用できることです。
• いまや、ユニバーサルデザインは、道路や建物ばかりでなく、インターネットの分野にも必要になってきています。インターネットのユニバーサルデザインはウェブ標準です。
  ユニバーサルデザイン【画像】Google
  ユニバーサルデザインウィキペディア
  ウェブアクセシビリティのページ桑原政則

 

バリアフリー

 

• すでにあるものはバリアフリーにする必要があります。
• バリアフリーとは、いまあるものの欠陥（バリア）を取りのぞくことです。建物でいえばスロープをつけて段差をなくすことです。エレベータに鏡がついているのは、後ろ向きで降りる車いすの人に配慮してのことです。

 

流れはウェブ標準に

 

• ウェブ標準の日　2006年7月第1回開催。音声データあり
• アックゼロヨン・アワード2006 ウェブサイトのアクセシビリティまでをも評価対象としたアワード。兵庫県　島根県　浜松市　中部大学
• 都道府県サイトの実体：半分がウェブ標準に
  • 神奈川県、京都府、富山県、香川県、島根県
  • 富士通、イトーヨーカドーなどの一般企業も
• Web標準普及プロジェクト：未解決の問題一覧 問題のあるウェブサイト一覧
• CSSがデファクトスタンダード（事実上の標準）に

 

ウェブの評価、チェックツール

 

• ブランド＝実体＋ウェブの内容＋ウェブの形式
• Another-HTML lint（HTML文法チェックツール）は、すぐれたツール。ややきびしすぎる。
• W3C® CSS Validation Service (CSS)

 

ウェブ標準にしたらどうなる？

 

• 検索ランキングがアップする。＝ブランドアップにつながる。
• 表示速度が速くなる。
• インターネット画面とことなる印刷ができる。
• デザイン部門をCSSが担当するので、メンテ（維持管理）が楽になる。
• ファイルサイズが軽くなり、サーバスペースが節約できる。
• データ処理が速くなる
• ブラウザの動作が安定する
• 将来の標準である。

 

CSSとは

 

• スタイルシートの代表
• Cascading Style Sheetの略
• XHTMLが文章部門を担当、CSSがデザイン部門を担当。
• 今まではすべてをHTMLが担当。

 

ロングテールとは

 

• 取るに足らない大多数が市場を左右すること
• 個人でも小企業でもしっかりしたウェブサイトがあればブランドに

【注】

• ロングテール現象とは桑原政則

 

第2部　ウェブサイトの現状

 

 

埼玉県5地域の図解地図とデフォルメ地図

埼玉県5地域の図解地図

 

埼玉県5地域のデフォルメ地図

 

埼玉県5地域中心都市のウェブサイトの状況

埼玉県5地域中心都市のウェブサイトの状況

	5地域中心都市	HTML文法	レイアウト	文書型宣言	閲覧性	cf. 財政力指数
1	熊谷市（北部）	14点	CSS	HTML 4.01 T		0.88
2	春日部市（東部）	5点	CSS	HTML 4.01 T		0.75
3	秩父市（秩父）	18点	テーブル	HTML 4.01 T		0.65
4	川越市（西部）	-54点	テーブル	HTML 4.01 T	X	0.92
5	さいたま市（中央部）	-150点	テーブル	HTML 4.01 T	X	1.0

 

川越市などの中核市のウェブサイト

• 2003年 川越市、船橋市、相模原市、岡崎市、高槻市の5市が中核市に移行しました。
• 中核都市のウェブを文法チェッカーにかけてみました。脱テーブル化をはかっているのは、相模原市だけです。改善の余地が大いにあります。
• 中核市について 総務省
• 中核市市長会　
• 【Excel】市町村の財政力指数総務省

川越市などの中核市のウェブサイト　【表】

中核市5都市のウェブサイトの状況

	5地域中心都市	HTML文法	レイアウト	文書型宣言	閲覧性	cf. 財政力指数
1	船橋市	83点	テーブル	HTML 4.01 T		0.98
2	岡崎市	68点	テーブル	HTML 4.01 T		1.06
3	相模原市	-3点	CSS	HTML 4.01 T		0.99
4	高槻市	-16点	テーブル	HTML 4.01 T	X	0.81
5	川越市	-54点	テーブル	HTML 4.01 T	X	0.92

 

全国の小江戸6市町のウェブサイト　#1

• 香取市が脱テーブル化をはかっています。

小江戸6市町のウェブサイト

		HTML文法	レイアウト	文書型宣言	閲覧性	cf. 財政力指数
1	香取市	39点	CSS	HTML 4.01 T		0.56
2	栃木市	35点	テーブル	HTML 4.01 T		0.75
3	磐田市	-34点	テーブル	HTML 4.01 T	X	0.85
4	川越市	-54点	テーブル	HTML 4.01 T	X	0.92
5	彦根市	-69点	テーブル	HTML 4.01 T	X	0.74
6	大多喜町	-71点	テーブル	HTML 4.01 T	X	0.51

 

全国の小江戸6市町のウェブサイト　#2

• 全国の小江戸6市町の名所旧跡、観光スポットは下のとおりです。（『小京都・小江戸探訪 』より）
  • 1 香取市 【旧佐原市】＜千葉県：　
    商家、蔵造りの建物、小野川沿いの町並、伊能忠敬旧宅及び記念館、水郷佐原山車会館
  • 2 栃木市：　
    城下町、武家屋敷、蔵造りの建物、洋西建物、巴波川沿いの蔵屋敷
  • 3 磐田市（旧竜洋町)＜静岡県：　
    商家、豪華絢爛な京風祭り、竜洋町昆虫自然観察公園、竜洋海洋公園

 

全国の小江戸6市町のウェブサイト　#3

• 4 川越市：　
  城下町、蔵造りの町並、時の鐘、喜多院、サツマイモ資料館、蔵造り資料館、菓子屋横丁
• 5 彦根市＜滋賀県：　
  城下町、格子戸や白壁、いぶし瓦の町並、寺社、井伊直弼が愛した町、玄宮園、埋木舎
• 6 大多喜町＜千葉県：　
  城下町、古い商家や蔵造りの民家、クランク状の道路、大多喜城、商い資料館、房総中央鉄道館、ハープアイランド、養老渓谷
• 　小江戸ウィキペディア

 

川越都市圏7市町のウェブサイト　＃1

• 日高市が健闘しています。

川越都市圏7市町のウェブサイトの状況

		HTML文法	レイアウト	文書型宣言	閲覧性	cf. 財政力指数
1	日高市	33点	CSS	HTML 4.01 T		0.79
2	坂戸市	2点	テーブル	HTML 4.01 T		0.78
3	越生町	-4点	テーブル	HTML 4.01 T	X	0.50
4	鶴ケ島市	-10点	テーブル	HTML 4.01 T	X	0.83
5	毛呂山町	-23点	テーブル	HTML 4.01 T	X	0.64
6	川越市	-54点	テーブル	HTML 4.01 T	X	0.92
7	川島町	-536点	CSS	XHTML　１　T	X	0.58

 

川越都市圏7市町のウェブサイト　＃2

 

 

 

 

• 赤線は池袋からの東上線。坂戸からは越生線。
• 都心から30キロ圏にある川越都市圏は4市3町からなります。
• 関越自動車道、首都圏中央連絡自動車道の結節地域で、商工業、研究、文化が集積する産業文化都市圏をめざしています。

川越都市圏の大学のウェブサイト

川越都市圏の大学のウェブサイトの状況

	大学名	HTML文法	レイアウト	文書型宣言	閲覧性
1	東邦音楽大学	100点	CSS	XHTML　T
2	尚美学園大学	44点	CSS	XHTML　T
3	東洋大学川越キャンパス	40点	テーブル	HTML 4.01 T
4	女子栄養大学	-35点	(CSS)	HTML 4.01 T	X
5	埼玉医科大学	-75点	テーブル	HTML 4.01 T	X
6	城西大学	-83点	テーブル	HTML 4.01 T	X
7	東京国際大学	-210点	テーブル	HTML 4.01 T	X

 

川越市の公共機関のウェブサイト

川越市の主要機関･企業のウェブサイトの状況

		HTML文法	レイアウト	文書型宣言	閲覧性
1	川越青年会議所	34点	テーブル	HTML 4.01 T
2	川越西郵便局	-21点	テーブル	HTML 4.01 T	X
3	川越商工会議所	-83点	テーブル	HTML 4.01 T	X
4	川越市	-54点	テーブル	HTML 4.01 T	X
5	川越税務署	-135点	テーブル	HTML 4.01 T	X
6	川越市立図書館	-202点	テーブル	HTML 4.01 T	X
7	川越市立博物館	-379	テーブル	HTML 4.01 T	X
8	川越市立美術館	（なし）

 

川越市の商店街のウェブサイト

川越市の商店街のウェブサイトの状況

			レイアウト	閲覧性
1	インターネットによる小江戸川越街づくりの会	21点	CSS
2	大正浪漫夢通り	0点	CSS
3	クレアモール新富町商店街	-19点	テーブル	X
4	川越インターネットモール	-31点	テーブル	X
5	小江戸ネット	-50点	テーブル	X
6	角栄商店街	-75点	テーブル	X
7	川越一番街商店街	-144点	テーブル	X
8	クレアモール 川越サンロード商店街	-161点	テーブル	X

• 【注】
  • 商店街には、インターネット上の商店街を含みます。

 

川越市のウェブの問題点は？

 

• 《問題》川越市のウェブの問題点を列挙してみてください。
  • ホームページアドレス（URL）は？
  • 印刷は？
  • 代替テキストは？
  • …は？

 

検索ランキング

 

• 《問題》 次のキーワードで上位表示されるのはどこでしょう？
  • 「県」
  • 「市」
  • 「新聞社」
  • 「大学」

 

その他

 

• 「部外秘」
• 「川越の画像」
• 「川越市のワード文書」
• 「川越市のエクセル文書」
• 「川越市を検索エンジンで一度で開く」
• 「川越市で閉店したところ」

 

第3部　コンピュータを使いやすくする 編

 

 

文字を大きくする

［表示メニュー］―［文字のサイズ］―［大、または、最大］

 

解像度を低くして文字を大きくする

 

1. コンピュータを、買ったときの設定のまま使っていると不便なことがあります。高性能なコンピュータほど、高齢者などには文字が小さすぎるようです。
2. デフォルト（初期設定）では、1024×768 ピクセル以上です。これを800×600ピクセルにするには、次のようにします。下はWindowsXPの場合です。
   
   ［スタートボタン］―［設定］―［コントロールパネル］―［画面］
   
   ［画面のプロパティ］―［設定タブ］―［画面の解像度：800×600］―［OK］
3. これだけの設定でおじいちゃんに大感謝された若者がいます。
   

 

解像度を低くして文字を大きくする 【操作画像　#1】

［スタートボタン］―［設定］―［コントロールパネル］―［画面］

 

 

解像度を低くして文字を大きくする 【操作画像　#2】

［画面のプロパティ］―［設定タブ］―［画面の解像度：800×600］―［OK］

 

画面の色を暗くする

 

• コンピュータの性能がよくなったこともあって、ワード、エクセルやインターネットの画面は、デフォルト（初期設定）では白すぎて、目を悪くします。すこし、暗くした方がよろしいです。
• 画面を暗くするには、デスクトップから入ります。
• [デスクトップの空白部]―[右クリック]―[プロパティ]
  
• 次に、「画面のプロパティ」に移ります。 ［画面のプロパティ］―[デザインタブ]―[（XPの場合：詳細設定ボタン）]―[｢ウインドウの文字｣のあたりの空白部：クリック]
  これで、下欄の「指定する部分」の名称が「ウインドウ」に変わります。
  
  

 

画面の色を暗くする　【操作画像　#1】

• [デスクトップの空白部]―[右クリック]―[プロパティ]
• ［画面のプロパティ］―[デザインタブ]―[（XPの場合：詳細設定ボタン）]―[｢ウインドウの文字｣のあたりの空白部：クリック]

 

画面の色を暗くする　【操作画像　#2】

• [指定する部分：ウインドウ]―[色：▼をクリック]―[その他ボタン]

 

画面の色を暗くする　【操作画像　#3】

• 下欄の「指定する部分」に移ります。
• [指定する部分：ウインドウ]―[色：▼をクリック]―[その他ボタン：数値を入力、または右の▼ボタンで明るさを変える]
  色の設定は、222、222、222にしました。お好みにより数値を変えます。
  

 

 

拡大鏡をつかう

 

• 拡大鏡は、画面の一部を上部のウィンドウに拡大して表示するツールです
• 例では、8倍に設定しました。
• 「終了」をクリックすると、上段のウインドウが閉じ元に戻ります。
• 下の「犬・猫」をポイントすると、上段のウインドウズに8倍の「犬・猫」が表示されます。

 

拡大鏡をつかう　【操作画像】

• ［スタートボタン］―［プログラム］―［アクセサリ］―［ユーザー補助］―［拡大鏡］―［拡大鏡の設定］―［拡大率：読みやすい倍率に調整］

 

背景を黒にする

 

• ウインドウズでは、弱視者用の設定もいろいろ用意されています。
•  ［コントロールパネル］―［ユーザー補助のオプション］―［画面タブ］―［ハイコントラストを使う：チェック］―［設定ボタン］―［現在のハイコントラスト設定：ハイコントラスト黒（大きいフォント）］―［OK］
• 「現在のハイコントラスト設定」には多くの選択肢があります。 通常画面との切り替えは、［Alt＋Shift＋PrintScreen］です。
• ハイコントラストを使わないときは、下のチェックをはずしておいてください。でないとフォントが大きいままになったりします。
   ［コントロールパネル］―［ユーザー補助のオプション］―［画面タブ］―［ハイコントラストを使う：チェック］
  

 

背景を黒にする　【操作画像】

•  ［コントロールパネル］―［ユーザー補助のオプション］―［画面タブ］―［ハイコントラストを使う：チェック］―［設定ボタン］―［現在のハイコントラスト設定：ハイコントラスト黒（大きいフォント）］―［OK］

 

マウスポインタを大きい黒にする

 

• マウスポインタとは、操作画面に表示される矢印記号のことです。（点滅している縦棒はカーソルです）。
• 大きい黒に変更すると、見やすく、目にやさしいです。コントロールパネルのマウスで変更します。コントロールパネルは学校の事務局のようなものです。
• [スタートボタン]―[設定]―[コントロールパネル]―[マウス] [マウスのプロパティ]―[ポインタタブ]―[カスタマイズ：通常の選択]―[ダブルクリック]―[ARROW_RL.CURをダブルクリック]―[OK]

 

マウスポインタを大きい黒にする　【画像】

• その他、カスタマイズ画面の中からお好みのアイテムをダブルクリックすると、好きなポインタを選ぶことができます。
  
  【図解】マウスの使い方

 

警告音を視覚で表現する

 

• 聴覚障害者のみなさんは、パソコンの警告音を聞くことが出来ません。そこで、警告音を視覚で確認するようには次のように設定します。
• ［コントロールパネル］―［ユーザー補助のオプション］―［サウンドタブ］―［サウンド表示を使う：チェック］―［サウンド解説を使う：チェック

 

警告音を視覚で表現する　【操作画像】

 

聴覚障害者が会話を楽しむ　（画像なし）

 

• 聴覚障害者は、MSNメッセンジャーを使えば電話のように会話を楽しむことができます。
• MSNメッセンジャーのダウンロード]―[ファイルのダウンロード]―[開く]
  [サインイン：クリック]
  *マイクロソフトの「ホットメール」をもっている人は、ホットメールのアドレスとパスワードを、もっていない人は「サインアップ」から無料メールを取得して、「サインイン」を実行します。
• プライバシーの設定をおこなってください。[メッセンジャー]―[ツール]―[オプション]―[プライバシータブ]―[…]―[全般]―[…]

 

固定キー機能を使う

 

• キーの操作が難しい人や、2つ以上のキーを同時に押すことが難しい人は、固定キー機能を使えば操作が楽になります。
• 設定ボタンをクリックすれば、どのような操作が可能になるか確認できます。

 

固定キー機能を使う　【操作画像】

• [コントロールパネル]―[ユーザー補助のオプション]―[キーボードタブ]―[固定キー機能を使う：チェック]―[設定ボタン]

フィルターキー機能を使う　（画像なし）

 

• フィルターキー機能は、手や体がふるえて、同じキーを繰り返し押してしまった場合や、一度押したキーから指を離せない場合に、使います。
• [コントロールパネル]―[ユーザー補助のオプション]―[キーボードタブ]―[フィルターキー機能を使う：チェック]―[設定ボタン]

 

参考文献

 

• 【PDF、600キロ】ウェブアクセシビリティについて：ウェブに関するJIS規格を発展的に考える その1  
• 【PDF、300キロ】その2 桑原政則 （2005年9月）

 

• ホームページの使いやすさ（ウェブ アクセシビリティ） チェック100項目桑原政則（2006年6月）

 

 

 

C.U .  Enjoy!

 

Homeキーで、最初のスライドへ