ひたちなか市ホームページ作成のガイドライン

目的

誰もが使いやすい(アクセシビリティの高い)ホームページを作成するためのガイドラインです。
誰もが使いやすいということは，利用する人，利用する場所，利用する機器，利用する目的にかかわらず，平等に情報にアクセスできることを指します。

目次

１．概要　｜　２．基本　｜　３．表示関連　｜　４．色　｜　５．テーブル　｜　６．参考

１．概要

ホームページを見る人は，様々な状況で見ています。古いパソコンで見ている人，通信回線速度が遅い人，ノートパソコンの小さな画面で見ている人，白黒の画面で見ている人，テキストブラウザ(画像が表示されないブラウザ)で見ている人，音を鳴らさないで見ている人，視力が弱くて画面を拡大している人，目が見えなくて音声で聞いている人，マウスが使えずキーボードで操作している人，高齢者，パソコン初心者，主婦，サラリーマンなど。
誰もが見やすく，使いやすいホームページ作成のためには，ちょっとした配慮が必要です。どのような人でも快適にホームページが見られるように， ひたちなか市のホームページを作成するにあたって注意すべき事項をまとめました。
「どのような利用者」が，「どのような目的で」見るのかを考え，すべての人に優しいホームページを目指しましょう。

ページの先頭に戻る

２．基本

・タイトルは分かりやすく，簡潔にする。ページの内容が分かるようなタイトルにする。

お気に入りに入れたときに分かりやすい名前にする。
複数のページに同じ名前をつけない。内容が同じなら末尾に１，２，３と番号をつける。
ひたちなか市のホームページであることが分かるようにする。
例：「ホーム」→「ひたちなか市公式ホームページ」
「概要」→「IT推進計画の概要１/ひたちなか市」

・画面解像度６４０×４８０でも左右スクロールしないで正しく表示できるようにする。

横にスクロールするのは読みにくくスクロールする手間もかかるので，横スクロールしないようにする。
テーブルの横サイズはパーセントで指定する。または600ドット以下にする。
文章の途中で改行しない。画面の右端で自動的に改行するので，文末以外では改行しないようにする。
画面の解像度を下げるか，ウインドウを小さくして確認する。

・ 画像の横幅は600ドット以下にする。

画像が大きくなるとファイル容量が大きくなって表示されるまでの時間がかかる。
横幅が600ドットを超えると横スクロールする場合がある。

・フレーム(画面分割)は使わないようにする。

ブラウザによっては表示できない。
文字を大きくしたり小さな画面だと見にくくなる。
音声ブラウザでは理解しにくい。
リンクの設定が難しい。

・BGM(バックグランドミュージック)は流さないようにする。

パソコンによっては音が出ない。ダウンロードに時間がかかる。
音声ブラウザ使用者には邪魔になる。

・背景画像は使わずに，背景色を指定する。

背景に画像を使うと，文字が見にくく，目に負担がかかる。 ダウンロードに余計な時間がかかる。
画像ではなく，色を指定する。
濃い色の背景に薄い色の文字だと，印刷したときに背景が白になるので見にくくなる。薄い色の背景に濃い色の文字にする。

・専門用語，略語，英語を乱用しない。

高齢者や子供が見ることもある。誰でも分かるような言葉を使う。
わかりにくい言葉には説明を付加する。特にお役所言葉やカタカナ言葉に注意する。
庁議，例規，パブリック，イントラネットなど。
難しい漢字を使わないようにする。 特に子供も見るページは易しい漢字を使うように心がける。

・明瞭で簡潔な文章にする。

パソコン画面は長い文章を読むには適さない。なるべく簡潔な文章を心がける。
概要や結論を先頭にもってくる。画面をスクロールしなくても概要が分かるようにする。

・ファイル名，フォルダ名は半角小文字の英数字にする(大文字や日本語は使わない)。

日本語のファイル名・フォルダ名を使うと，ページが表示されない。
英字の大文字小文字も区別するので，小文字に統一する。
内容が分かるような名前にする。
悪い例：A001.html，写真1.jpg　よい例：topics01.html，photo200206_1.jpg

・１つの情報は１ページにまとめる。１ページにたくさん(複数)の情報をつめこまない。

情報が極端に長くなければ，１つの情報は1ページにまとめる。複数ページに分けるとクリック数が多くなり，分かりにくい。印刷したりオフラインで読むときもページが分かれてしまうと読みにくい。
ページ内に複数の情報があると、混乱してしまう。異なる内容の情報はページを分ける。

・１ページが長くなる場合は，区切り線を入れ，「先頭に戻る」リンクをつける。

ページが長いと文章が分かりにくくなる。スクロールも多くなる。
読みやすいように，適度に改行し区切り線を入れる。
「先頭に戻る」リンクをつけてページの最初に戻れるようにしておく。

・　リンク項目は多すぎないようにする。

キーボードで操作している人はTABキーでリンク項目を1つずつたどっている。リンク項目が多すぎると目的のリンクにたどり着くまでに時間と労力がかかる。
目次ページなどリンク項目が多くなる場合は，大見出しの目次ページと詳細の目次ページを分けたり，ページの最初に大見出しの目次を作って詳細目次にジャンプできるようにする。
TABキーでリンクをたどって確認する。

・JAVAスクリプトは使わない。使う場合は，JAVAスクリプトが使えないブラウザでもページが利用できるようにする。

JAVAスクリプトとは，ホームページ上で利用するプログラムの一種。
プルダウンメニューによるリンク，フォームのエラーチェックなどはJAVAスクリプト未対応ブラウザでは使えない。
JAVAスクリプト未対応ブラウザでは，ロールオーバーイメージは画像が変わらないが，リンクは機能する。

・動画再生や音楽演奏，Flash(アニメーション)などのプラグイン(追加機能)は使わない。

なぜ動画や音楽が必要なのか，ユーザーが望んでいるか，メリット，デメリットをよく考えてから使用する。
プラグインを使うと利用者を限定することになる。
観光情報，子供向けページなど，利用者がある程度想定されるページは効果が期待できる。
必要な場合はプラグインの使用を明示(ダウンロード方法や使い方等も明示する)してからページを開くようにする。代替のテキスト情報も用意しておく。

・動画や音声ファイルなどを使う場合は，ユーザーが再生，停止できるようにする。

動画や音声は容量も大きく，パソコンによっては再生できないこともあるので，再生するかどうかはユーザーに選択させる。
ページを開いたときは停止状態とする。自動再生や繰り返し再生は指定しないようにする。

・画像の大きさと容量に注意する。

1ページ全体(テキストと画像)で最大100kB程度にする。通常は30kB程度にする。
画像(写真)は最大でも，600×400ドット程度にする。

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

使う場合は，代替テキスト(ALTテキスト)を設定する。
どうしても地図が必要な場合などに限る。

・新しい画面(ウインドウ)は開かないようにする。

複数のウインドウが開くと画面の切り替えに手間がかかる。初心者は混乱する。また，戻るボタンが使えない，メモリを必要とするといった弊害もある。
複数のウインドウを開くことを嫌う人も多い。
ひたちなか市ホームページ内では新しいウインドウを開かないようにする。
外部にリンクする場合，特別なページを開く場合など，どうしても必要な場合に限る。
新しいウインドウを開くときは，ウインドウが開くことを明記する。
例：参考ページ　クリックすると新しいウインドウが開きます。このページに戻るときはウインドウを閉じてください。

・更新日付と担当部署，連絡先を明記にする。

情報の所在と公表時期を明確にする。
検索エンジンから直接ジャンプした場合など，ひたちなか市のホームページであることが分かるようにする。
印刷したときにページの出所が分かるようにする。

・ひたちなか市のページであることが分かるようにする。

検索エンジンから直接ジャンプした場合など，ひたちなか市のホームページであることが分かるようにする。
タイトルに「ひたちなか市」を入れる。
共通のヘッダーを使用する。

・迷子にならないように，表示ページの階層をヘッダーとフッターに明示する。

検索エンジンから直接ジャンプした場合や，各ページを見ていると，前のページや目次ページに戻れないことがある。
目次ページからの階層を明示して，いつでも上の階層に戻れるようにしておく。
目次＞ 暮らしの情報＞ 施設案内＞ 図書館　など

・ ファイルの拡張子を統一する。

ファイルの拡張子は間違い防止のため「.html」(4文字)に統一する。

ページの先頭に戻る

３．表示関連

・画像には代替テキスト(ALTテキスト)を指定する。

画像が表示されない場合に，内容や意味が分かるようにする。
冗長にならないようにする。
悪い例：「ひたちなか祭り」「ボタン」「ホームに戻るボタンです。ここをクリックするといつでもホームページに戻れます。」
よい例：「ひたちなか祭りのパレード風景」「目次へ戻る」
ただし単なる飾り線や箇条書きの先頭の画像などは全角空白や*(アスタリスク)などを指定する。
重要なグラフや図表の場合は，代替テキストだけでなく，解説を書いたページへのリンクをつける。
ブラウザの画像表示をOFFにして，内容が伝わるか確認する。

・非テキスト情報には，同等のテキスト情報を用意する。

動画には説明文を用意しておく(可能なら字幕を用意する)。音声には同じ内容のテキスト文を用意しておく。
PDFファイルやOfficeファイル(Word，Excel)は使わない。または同じ内容のテキストページを作成する。
(WordやExcelを持っていない人もいる。バージョンが違うと開けない。マクロウイルスの危険もある。)
ただし，印刷する申請書様式などはPDFがベター。

・点滅やスクロール文字列，過度なアニメーションは使わないようにする。

点滅とスクロール文字列はブラウザによっては表示されない。目に負担をかける。
過度なアニメーションは目に負担をかける。

・機種依存文字に注意する。

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

・使える記号
○◇□△▽☆●◆■▲▼★◎〇♂♀〒（）〔〕［］｛｝〈〉《》「」『』【】''"" →←↑↓…‥、。，．・：；？！゛゜´｀¨＾ヽヾゝゞ〃°′″￥＄¢£％℃＋−±×÷＝≠≦≧＜＞∞∴仝々〆＊＠§※〓仝々〆ー〜￣＿―‐‖｜／＼

・使えない文字一覧

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

見る人が自由にフォントや文字の大きさを変えられるようにするため。
フォントはパソコンによって種類が違うため，指定したフォントで表示できないこともある。
文字のサイズは７段階の大きさまたは相対サイズ(+1や-2など)で指定する。

・小さな文字は使わない。サイズ３以上にする(コピーライト表示などは除く)。

WindowsよりもMacの方が文字が小さい。InternetExplorerよりもNetscapeNavigatorの方が文字が小さい。
Windows＋InternetExplorerで確認する場合は，文字サイズを最小にして確認する。
(InternetExplorerの[表示]メニュー → [文字サイズ]で変更する。)

・見出しと単なるフォントの大きさ指定を使い分ける。(HTMLの文書構造を正しく記述する。)

ブラウザによっては見出しだけを表示して概略が分かるようにする場合がある。
見出しは「見出し」として設定する。
文字を強調するときは「サイズ」や「太字」を設定する。できれば，「文字の強調」を指定する。

・単語の間にスペース(空白)を入れない。単語の途中で改行しない。

見出しやタイトルなどで，体裁を整えるためにスペースを挿入しない。 単語の途中で強制的に改行しない。
単語を途中で区切ると，音声ブラウザで正しく読み上げてくれない。
スペース(空白)を挿入すると，画面や文字の大きさを変えたときに，体裁が崩れる。
悪い例：「目　　次」　よい例：「目次」
悪い例を音声ブラウザで読むと「め　つぎ」となる。文字を大きくすると，目と次の間で改行されることもある。

・スペース(空白)でレイアウトしない。中央揃え，右揃えを指定する。

右揃えや中央揃えするときに，スペースで文字を寄せない。画面や文字の大きさが異なると位置がずれる。
悪い例：□□□□□目□次　　　よい例：　　目次(←中央揃えの設定をする)

・記号は無意味に使わない。

区切りのための--------や飾りの○▼☆などは使わないようにする。
文章の区切りには区切り線を使用する。
意味がある記号にはテキストの説明をつける。
悪い例：○　大きさ，性能　
×　価格，デザイン
よい例：○(良い)　大きさ，性能
×(悪い)　価格，デザイン

・単位や日時は記号ではなく日本語にする。

同じ文字が違う単位をあらわすこともある。g→グラム(重さ)，ジー(重力)。
音声で聞くと意味が通じない場合がある。
\3,000→３０００円，100g→１００グラム
2002/5/30(木) → ２００２年５月３０日(木曜日)
（音声ブラウザで読むと「にせんに　さんじゅうぶんのご　き」などと読む）

・見出しや重要な項目は，画像ではなくテキストで表示する。

画像だと文字の大きさやフォントを変更できない。検索エンジンに登録されない。
重要な項目ほどシンプルなテキストにしたほうが使う人に優しいページになる。
ただし，見出しや強調などの設定をして，重要な項目であることを指定する。

・リンク文字列は分かりやすい単語(文章)にする。

リンク文字列だけを読んでも，どこにジャンプするのか分かるようにする。
音声ブラウザは，リンク文字列だけを読む機能がある。「ここ」だけではどこにジャンプするか分からない。
悪い例：次のページはここをクリックしてください。　よい例：市総合計画のページへジャンプします。

・ リンク項目や画像は小さすぎないようにする。

リンク項目をクリックするときに，マウスが苦手な人(高齢者，初心者，障害者など)は小さな領域をクリックするのが難しい。リンク項目が近いと，間違ってクリックしやすい。
リンク項目を並べるときは，間に区切り記号や空白を入れてマウスで簡単にクリックできるようにする。
画像にリンクを張る場合，小さい画像だとクリックしにくいので，ある程度大きな画像を使用する。
悪い例：123(1,2,3に別のリンクが設定してある)　よい例：([目次] ｜ [先頭])

ページの先頭に戻る

４．色

・文字と背景のコントラストは強めにする。

背景と文字が同系色だと見にくい。
背景と文字が薄い色同士，濃い色同士だと，見にくい。
背景色は薄いグレーや薄いベージュ，文字は黒か濃紺が読みやすい。
白黒印刷をして確認する。

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

・色に頼らずに情報を理解できるようにする。

カラー表示できない機器で見ている人もいる。モノクロでも分かるようにする。
強調したいところは，色だけでなく太字にしたり文字を大きくしたりする。
悪い例：「青い色の文字をクリックしてください」「赤いところが重要です」。

・リンク文字列の色は初期設定のままにする。

リンク文字列の色を変えないようにする。
リンク項目と間違えやすいので，リンク以外の文字にリンクの色(青，紫)や下線を使わない。

・Webセーフカラー216色を使うようにする。

Webセーフカラーは，WindowsとMacで共通の色。

・ 印刷しても見やすい色にする。

白黒で印刷しても見やすいように，色の使い方に注意する。
InternetExplorerは，標準では背景の画像も色も印刷しない。文字の色が薄いと見にくいので，注意する。

ページの先頭に戻る

５．テーブル関連

・レイアウトに使う場合。

複雑なテーブルにしない。横幅はパーセント指定か600ドット以下にする。
読み上げ順序に配慮する。音声ブラウザは左上から横に読んでいくので，読み上げたときに意味がわかるように配置する。
リンクをTABキーでたどるときも，左上から横に進んでいくので，分かりやすいように配置する。

・表として使う場合。

テーブルの表題をつける。
見出しセルは「ヘッダーセル」を指定する。
セルを背景色で区別しないで罫線をひく(ボーダーを０にしない）。印刷したときに文字しか印刷されなくなる。
セルの結合はしない。

ページの先頭に戻る

６．参考

「『情報バリアフリー』環境の整備の在り方に関する研究会」（平成10 年度郵政省・厚生省で開催）
（http://www.kantei.go.jp/jp/it/goudoukaigi/dai5/5siryou7-4.html）

インターネットにおけるアクセシブルなウェブコンテンツの作成方法に関する指針

目的
ウェブのコンテンツ制作者（ページの作成者，ページデザイナー）及び作成ツールの開発者向けに，バリアフリーなウェブコンテンツを作成する方法を提示し，障害のある人がインターネットのウェブへ容易にアクセスできるようにすること
指針
【様々な形式に適切に変換できるコンテンツを作成するための指針】
１　音声や画像で表示されるコンテンツには代替手段を提供すること
２　色の情報だけに依存しないこと
３　マークアップ及びスタイルシートは適切に使用すること
４　自然言語の使用について明確にすること
５　適切に変換できるような表を作成すること
６　新しい技術を様々な形式に適切に変換できるページを保証すること
７　時間の経過に伴って変化するコンテンツに対してユーザの制御を保証すること
８　ユーザインタフェースのアクセシビリティを保証すること
９　特定の装置（デバイス）に依存しない設計であること
10　臨時の対応策を利用すること
11　インターネットの技術標準及び指針を使用すること
【理解が可能でナビゲーションが可能なコンテンツを作成するための指針】
12　文脈やページの構成等の情報を提供すること
13　ナビゲーションの仕組みを明確に提供すること
14　ドキュメントは明確かつ簡潔であること

ページの先頭に戻る