流通経済大学付属柏高等学校ラグビー部の紋章 Webガイドライン
本文にジャンプするZoom | 思い出 | 観戦記 | リンク | グランド|掲示板 | 試合予定 | 対戦結果 | home
1.概要  2.基本  3.表示関連  4.色  5.テーブル

1.概要

ホームページを見る人は、古いパソコンで見ている人,通信回線速度が遅い人,ノートパソコンの小さな画面で見ている人,テキストブラウザ(画像が表示されないブラウザ)で見ている人,音を鳴らさないで見ている人,視力が弱くて画面を拡大している人,目が見えなくて音声で聞いている人,マウスが使えずキーボードで操作している人,高齢者,パソコン初心者など、様々な状況が考えられます。誰もが見やすく,使いやすいホームページ作成のために注意した事項をまとめました。

▲先頭へ


2.基本 ・ タイトルは分かりやすく,簡潔にする。ページの内容が分かるようなタイトルにする。
お気に入りに入れたときに分かりやすい名前にする。
流経大柏高校ラグビー部のサイトであることが分かるようにする。


・ 画面解像度800×600でも左右スクロールしないで正しく表示できるようにする。
  横にスクロールするのは、スクロールする手間もかかるので,横スクロールしないようにする。
  また、文章の途中で改行しない(文末以外では改行しない。)。

・ 画像の横幅は800ドット以下にする。
  画像が大きくなるとファイル容量が大きくなり、表示されるまでの時間がかかる。

・ 画像の大きさと容量に注意する。
  1ページ全体(テキストと画像)で最大200kB程度にする。通常は30kB程度にする。
  画像(写真)は最大でも,800×600ドット程度にする。

・ 背景画像は使わずに,背景色を指定する。
  画像ではなく,色を指定する。

・ フレーム(画面分割)は使わない。
  ブラウザによっては表示できないし、音声ブラウザでは理解しにくい。リンクできない。

・ JAVAスクリプトは使わない。(カウンタのみ使用)[2006/3/8訂]

・ 動画再生や音楽演奏,Flash(アニメーション)などは使わない。
  視力の弱い人に対応できない

・ イメージマップ(画像に複数のリンクを設定すること)は使わない。

・ BGM(バックグランドミュージック)は流さない。
  BGM(バックグランドミュージック)はサイトにジャンプした時点で、使用者の意識を配慮しないで流れる事になる

・ 新しい画面(ウインドウ)は開かない。
  複数のウインドウが開くと画面の切り替えに手間がかかると共に混乱しやすい。

▲先頭へ


3.表示関連
・ 画像には代替テキスト(ALTテキスト)を指定する。
  画像が表示されない場合に,内容や意味が分かるようにする。ただし、写真ページは指定しない。


・ 機種依存文字に注意する。
  コンピュータの種類によって,表示できる文字に違いがある。機種依存文字は使わない。
  特に半角カタカナ,ローマ数字,○数字は使用しない。

・使う記号
  ○◇□△▽☆●◆■▲▼★◎〇♂♀〒()〔〕[]{}〈〉《》「」『』【】''"" →←↑↓…‥、。,.・:;?!゛゜´`¨^ヽヾゝゞ〃°′″¥$¢£%℃+−±×÷=≠≦≧<>∞∴仝々〆*@§※〓仝々〆ー〜 ̄_―‐‖|/\

・ フォント種類や文字のサイズの絶対値(ピクセル,ポイントなど)は指定しない。

・ 小さな文字は使わない。
  サイズ3以上にする

・ 見出しと単なるフォントの大きさ指定を使い分ける。
  ブラウザによっては見出しだけを表示して概略が分かるようにする場合がある。

・ 単語の間にスペース(空白)を入れない。
  見出しやタイトルなどで,体裁を整えるためにスペースを挿入しない。

・ スペース(空白)でレイアウトしない。中央揃え,右揃えを指定する。
  右揃えや中央揃えするときに,スペースで文字を寄せない。
  画面や文字の大きさが異なると位置がずれる。

・ 単位や日時は記号ではなく日本語にする。
  同じ文字が違う単位をあらわすこともある。例:[m→メータ(m)]
  音声で聞くと意味が通じない場合がある。

・ 見出しや重要な項目は,画像ではなくテキストで表示する。
   画像だと文字の大きさやフォントを変更できない。

・ リンク文字列は分かりやすい単語(文章)にする。
  リンク文字列だけを読んでも,どこにジャンプするのか分かる(alt属性、title属性を付加)ようにする。

▲先頭へ


4.色
・ 文字と背景のコントラストは強めにする。
  背景色は薄いグレー,文字は黒か濃紺か赤を使用する。

・ 赤と緑の組み合わせは避ける(色弱対応)。

・ 色に頼らずに情報を理解できるようにする。
  強調したいところは,色だけでなく太字にする。

・ リンク文字列の色は初期設定のままにする。
  リンク文字列の色を変えないようにする。

▲先頭へ


5.テーブル関連

・ レイアウトに使う場合。
  複雑なテーブルにしない。横幅はパーセント指定か800ドット以下にする。
  読み上げ順序に配慮する。
 

▲先頭へ

サイト運営 | Webガイドライン | アクセシビリティ | 掲示板 | 個人情報 | 著作権
  2003,2008 rkukhs-rugby Some right reserved topこのページの先頭にジャンプするhome