ホームページ作成ガイドライン

目的
文字に関する項目
画像に関する項目
レイアウトに関する項目
配色に関する項目
その他の項目

目的

インターネットは、誰もが身近に使える環境になりつつあります。子どもや高齢者、目が見えなくて音声で聞いている人、マウスが使えずキーボードで操作している人、小さな画面を使っている人、通信回線速度が遅い人など、さまざまな閲覧環境が想定されます。
伊佐市ホームページは、あらゆる利用者が使いやすく、分かりやすいページの作成を目指しています。

文字に関する項目

(1) わかりやすく簡潔で、内容を適切に表すタイトルをつけます

タイトルは、ブラウザ（ホームページ閲覧ソフト）の左上のタイトルバーに表示されます。
「お気に入り」や「ブックマーク」に登録する際の名称や、音声ブラウザで最初に読まれる情報になるため、わかりやすいタイトルを付けます。
ページごとに異なるタイトルを付けます。

(2) 見出しや段落、リストなど文書の構造を正しく記述します

単に文字を拡大したり、強調したりすることと切り分けます。
文字を強調するときは「サイズ」や「太字」を設定します。
見出しと本文との文字の大きさを変えて、見出しと本文の区別がつきやすくします。
見出しのタグを使用します。

(3) ファイル名、フォルダ名は半角小文字の英数記号を使うようにします

日本語のファイル名・フォルダ名を使うと、ページが表示されないので、半角小文字の英数記号を使うようにします。
英字の大文字小文字も区別するので、小文字に統一します。
内容が分かるような名前にします。

(4) 機種依存文字(※)は使用しないようにします

異なる環境で見た場合、文字化けをしたり、表示されない場合があるため使用しないようにします。
(半角カタカナ、ローマ数字、○数字など)

(※)機種依存文字：特定の環境でしか表示することのできない文字

(5) 単語の間にスペース（空白）を入れたり、単語の途中で改行したりしないようにします

音声ブラウザが正しく読み上げず、意味がわかりにくくなるので、単語の間にスペースを入れたり改行したりしないようにします。

(6) リンクの部分だけでリンク先のページが分かるようにします

「ここ」、「こちら」、「クリック」などの単語にリンクを指定した場合は、リンク先のページの内容が把握できないので、どのような内容のページにリンクしているかがわかる単語（文章）を使います。

(7) 点滅やスクロール文字列、アニメーションはなるべく使わないようにします

点滅やスクロール文字列、アニメーションを使うと、読みにくい場合があるのでなるべく使わないようにします。
点滅とスクロール文字列はブラウザによっては表示されず、目に負担をかけるのでなるべく使わないようにします。

(8) 単位や日付、時間は記号ではなく日本語にします

記号やローマ字を使用すると、音声読み上げブラウザで正確に読み上げられないことがあるので、日本語で表示します。

1m → 1メートル
2008/11/01(土) → 2008年11月1日（土曜日）
12:30 → 12時30分

画像に関する項目

(1) 画像は容量に注意します

通信回線やパソコンの種類によっては、画像のサイズが大きいと、表示に時間がかかったり、表示されなかったりします。ホームページに画像を載せるときは、できるだけサイズ（容量）を小さくします。

(2) 画像には代替テキスト(ALTテキスト)(※)を指定します

画像が表示されない場合に、内容や意味が分かるようにします。
音声読み上げブラウザが代替テキストを読み上げるので、画像の内容を把握することができます。

(※)代替テキスト(ALTテキスト)：画像の表示をサポートしていないブラウザや画像が上手く読み込めなかった時に代わりに表示される文章。

(3) 画像を多用せず、文章中心のページ作りを心掛けます

容量が大きな画像や不要な画像は使用しないようにし、なるべく軽いページを作成するようにします。

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

音声ブラウザを使用している方々にとっては、リンクをたどるのが困難になるため、極力使わないようにします。
使用する場合は、画像内の各リンク元の領域に代替テキスト(ALTテキスト)を設定します。

レイアウトに関する項目

(1) 1つの情報は1ページにまとめます

1つの情報を複数のページに分けてしまうと、クリック数が多くなり、通信速度が遅い環境だと時間がかかってしまいます。情報が極端に長くなければ、1つの情報は1ページにまとめるようにします。
ページ内に複数の情報があると、混乱してしまうため、異なる内容の情報はページを分けるようにします。

(2) 画面下部に常時「ページの先頭へ戻る」ボタンを表示します。

ページが長いと文章が分かりにくくなり、スクロールも多くなります。読みやすいように、画面下部にページの先頭へ戻るリンクを配置することで、ページの最初に戻れるようにします。

「ページの先頭へ戻る」ボタン

(3) 担当部署、連絡先を明記するようにします

ページの内容等について問い合わせをしたい時に、担当の部署に直接連絡ができるように、課名・連絡先（電話・FAX・メールアドレス等）を明記します。

(4) フレームは使用しないようにします

ブラウザによっては表示できず、音声ブラウザではページの内容の把握が困難になるためフレームは使用しません。

(5) レイアウト目的でテーブル（表）を使用しないようにします

テーブルでページをレイアウトすると、音声ブラウザで読み上げたときに画面に表示されている順番どおりに読まれない場合があり、情報が正しく伝わらないためレイアウト目的でテーブルは使用しません。

配色に関する項目

(1) 文字色と背景色のコントラスを十分に取るようにします

背景と文字が同系色だと見にくいため、文字色と背景色のコントラスを十分に取り、文字を読みやすくします。

(2) 色に頼らずに情報を理解できるようにします

モノクロでも内容がわかるようにします。
強調したい項目等を表現する場合、文字の色を変えるだけでなく、太字を使ったり文字のサイズを大きくして、色が認識できなくても理解できるようにします。

その他の項目

(1) ダウンロードファイルにはサイズを明記します

通信速度が遅い利用者が容量が大きいファイルを知らずにダウンロードしてしまう等がないようにするため、ダウンロードファイルサイズを明記します。

(2) 専門用語、略語、英語を乱用しないようにします

専門用語、略語、英語は知識に個人差があるため一般的なものを使用します。
(どうしても使用する場合は読み方や注釈を付けるようにします)
誰が読んでもわかりやすいような明瞭で簡潔な文章にすることを心掛けます。

(3) 最新の情報を提供します

伊佐市のホームページを利用される人のために、常に最新の情報を提供できるように努力します。

(4) リンクを開く時に、新しい画面（ウインドウ）は開かないようにします。ただし、HTMLファイル以外（PDFファイル、ワード等）や伊佐市で管理していないホームページ(外部へのリンク)については除きます

新しいウィンドウを開く場合は事前に通知するようにします。

(5) 伊佐市のページであることが分かるようにします

タイトルに「伊佐市」を入れます。
共通のヘッダーを使用します。デザインに統一感をもたせます。

(6) 迷子にならないように、表示ページの階層を明示します

HOME(トップページ)からの階層を明示して、いつでも上の階層に戻れるようにします。
例：HOME > 伊佐市について > 概要

(7) JAVAスクリプト(※)を使用する場合は、JAVAスクリプトが使えないブラウザでもページが利用できるようにします

JAVAスクリプトが使えないブラウザでもページを利用できるように代替文字を指定します。

(※)JAVAスクリプト：ホームページ上で利用するプログラムの一種

(8) BGM(バックグランドミュージック)は流さないようにします

ページの容量が増え、通信に負担がかかります。また、音声ブラウザ使用者には邪魔になるため、BGMは流さないようにします。

(9) 動画再生や音楽演奏、Flash(※1)(アニメーション)などのプラグイン(※2)(追加機能)は使わないようにします

利用環境によってはプラグインのインストールを行う必要があり、利用者を限定することになります。また、プラグインを使用すると、ページの容量が大きくなり、通信速度が遅い回線だと開くまで時間がかかってしまうため、プラグインは使わないようにします。
プラグインを使用する場合は、プラグインの使用を明示(ダウンロード方法や使い方等も明示)してからページを開くようにします。代替のテキスト情報も用意します。

(※1)Flash：音声とのアニメーションを組み合わせてホームページを作成するソフト

(※2)プラグイン：ブラウザに追加機能を提供するための小さなプログラム