東京都公式ホームページ基準を理解するためのウェブページ

東京都公式ホームページ・ウェブデザインの手引きより

●ホームページとは？

  1. ブラウザを起ち上げたときに最初に現れるページ 　　　　　　　
  2. ひとつのウェブサイト（ページ全体を指す＝敷地）に対して玄関のページ。トップページとも言う。 　　　　　　　
  3. ウェブサイトを指す日本人に多い英語の誤用が一般的になった言葉。欧米では通用しない。ましてや「インターネットのホームページ」なんて言葉は論外である。　　　　　

●ページデザイン

  1. 様々な解像度への対応　※ページサイズの基準について　
  2. 最低限I.EとN.Nで表示チェックを行う　優先度A　※ブラウザの違い
  3. ファイル容量は65KB以内に収める。※ダサいホームページ作成マニュアル

●リンク設定

  1. リンクテキストやリンク画像の代替テキストの言葉は、リンク先の内容をユーザーが予想できる簡潔な表現にする。　※リンクの張り方
  2. 文章中の言葉にリンクを設定する「埋め込みリンク」の使用は避ける。

●スタイルシート

  1. スタイルシートは別ファイルにリンクさせる形式を使う。　※このページから別スタイルシートファイルへのリンクを取ると・・・
  2. 基本的に文字以外のスタイル指定は行わない。
  3. フォントサイズはユーザーが自由に変更できるように相対的なサイズ指定を行う。※文字サイズを変えることの出来ない自称「クールサイト」

●フレーム

  1. フレームは基本的に使わない。　※フレームは訪問者にとって本当に優しいの？
  2. フレーム内に、他のサイトのページを表示させない。　※白昼堂々フレームパクリ

●サイト構造

  1. 各ホームページの全体構成（サイト構造）はユーザーに分かりやすい形で情報を整理・分類化してデザインする。※ストーリーボードを作る。
  2. 各ホームページ内においてグローバルナビゲーション（それぞれのページの同じ位置に一貫して表示されるナビゲーション）を同じ位置・外観・機能で提供する。※新○○高校トップページへ
  3. 階層が深いサイト構造の場合には、パン屑式ナビゲーションを利用する。※現在位置を示す
  4. リンク先のページは別のウィンドウで表示しない。※一考・別ブラウザを開く
  5. 情報量の多いホームページの場合、検索機能はすべてのページで使えるようにする。

●ファイル名とページタイトル

  1. ファイル名は、半角英数文字（英文字については小文字のみとする）で１０文字以内とする。
  2. ファイル名にはスペースを使わない。　優先度A
  3. ページタイトルは全てのページに付ける。

●ウェブライティング

  1. 大見出し、中見出し、小見出しを付ける。
  2. 箇条書きは積極的に使う。
  3. 報告書などの長い文章については、ユーザーが印刷して読めるようにするＰＤＦ形式のページを用意する。
  4. 各ページには更新日や情報の発生日を記載するようにする。

●フォントや文字の使い方

  1. フォントの種類やサイズはブラウザの初期設定に従う。
  2. フォントサイズを指定するときは、ユーザーが自由に大きさを変更できるような相対的なサイズで指定する。
    ※文字サイズの固定はしない。
  3. ユーザーが戸惑わないよう、下線や青と赤紫の色はリンク以外で使用しない。
  4. 特定のシステム環境でのみ表示される機種依存文字は使用しない※優先度A
    ※通信では使ってはいけない文字

●色の使い方

  1. 使用する色は、WindowsとMacintoshの双方に共通の表示色である216色（ウェブセーフカラー）を使用する。 ※牛飼いカラーチャート
  2. 文字が見づらくならないように、テキストの色と背景に明確なコントラストを出す。※優先度A
    ※私の苦手なWEBの色・文字が読めない色の組み合わせ
  3. 色によって表示されている重要な情報は、その色を再現できない場合でも情報が伝わるように配慮する。※優先度A

●画像や音声の取り扱い

  1. 画像を使う際は、画像の内容を表した代替テキスト(altタグ）を付ける。※優先度A
  2. 高画質の画像や写真が必要な場合はサムネイル（サイズの小さい画像）を使用し、大きな画像にリンクを貼る。この場合、サムネイル画像の近くに、大きな画像のファイル容量とその画像の内容を的確に表現したテキストリンクを付ける。
  3. 高画質の画像を必要とする場合以外は、画像ファイルの容量を30KB以下にする。
  4. 動画や音声を使用する場合には、テキストや字幕などを併用する。※優先度A
  5. アニメーションGIFの使用は、ユーザーがウェブページの文章を読む際に集中力の妨げとなるため、最小限に抑える。

●その他　　　　

  1. レイアウト目的で、テーブルを使用する際には、音声変換ソフトの読み上げ順序が不自然にならないよう配慮する。
  2. Flashの使用は最小限に抑える。
  3. 申請書様式はPDF形式による提供を基本とする。
  4. ダウンロードファイルは、ファイルの形式及び容量を表示する。

●参考ウェブページ　　　　　　　　

  1. 富士通ウェブ・アクセスィビリティ指針
  2. 訪問者に優しいWebサイト作り 　　　　　　　　
  3. ウェブアクセシビリティ実証実験ホームページ
  4. ダサいホームページ作成マニュアル凝縮版　　　　　　　
Hisao Otsu
E-mail:henrry@d6.dion.ne.jp　oates@henrry.net
Copyright (C) Tokyo Metropolitan Norin Senior High School All Rights Reserved.