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

インターネットの利用者は、子どもや高齢者、障がい者の人、小さな画面を使っている人、キーボードやマウスを利用しにくい人など、さまざまな場面が想定されます。

日高市ホームページは、多種多様な環境で利用されることを想定し、誰でも使いやすく、わかりやすいホームページを目指し以下のガイドラインに基づいたページの作成を心がけていきます。

1.タイトル<TITLE>には、わかりやすく簡潔で、内容を適切に表すタイトルをつける

日高市のホームページであることが分かるように、必ず最初「日高市」の3文字を入力し、その後ページの内容を続けて入力すること

同じ内容のページが複数にわたる場合は、文末に(1)、(2)…といったように枝番を入れるかまたは、副題を付けてページを区別できるようにする。

理由

  • タイトルは、ブラウザ(ホームページ閲覧ソフト)の左上のタイトルバーに表示されます。
  • 「お気に入り」や「ブックマーク」のに登録した際のタイトルになります。
  • 検索サイトの結果表示に使われます。
  • 音声読み上げブラウザで読まれる最初の情報で、タイトルでページの内容を把握します。

  • 「日高市 情報化の推進」
  • 「日高市 市民公聴会(1)」、「日高市 市民公聴会(2)」
  • 「日高市 市の紹介(位置・交通アクセス)」、「日高市 市の紹介(市のあゆみ)」

2.文字色と背景色のコントラストを十分に取る

背景色は「白」、文字色は「黒」を基本とする

背景と文字が濃い色同士や薄い色同士の組み合わせは避けること

理由

  • コントラストがないと、読みにくくなります。
  • 特に、弱視の人や高齢者は、情報を把握するのが困難です。

3.色の違いによって情報を伝える場合は、色が無くても理解できるように文字や記号を併用すること

理由

  • 視覚障がいのある人など、色による情報の違いを把握することが困難な場合があります。
  • 白黒印刷したとき、情報の違いを把握しづらくなります。

悪い例

は受付不可

  • 日曜日
  • 月曜日
  • 火曜日
  • 水曜日
  • 木曜日
  • 金曜日
  • 土曜日
良い例

は受付不可

  • 日曜日(受付不可)
  • 月曜日
  • 火曜日
  • 水曜日(受付不可)
  • 木曜日
  • 金曜日
  • 土曜日(受付不可)

4.早い速度で点滅する画像の使用や、文字を自動的にスクロールさせることはしない

理由

  • 光の明滅により発作を引き起こす可能性があります。
  • 目に負担がかかります。

5.見出しや段落、リストなど文書の構造を正しく記述すること(単に文字を拡大したり、強調したりすることと切り分ける)

理由

音声読み上げブラウザによっては、見出しだけを読み上げる機能があるものがあります。(文字を拡大しただけでは、見出しなのか段落なのか判断できません)

6.表(テーブル)をレイアウトとして使用するのは必要最小限とする

どうしてもレイアウトとして使用する場合は、音声読み上げソフトを使用しても内容が通じるようにする。

理由

音声読み上げブラウザは、表を左から右へ読み上げるため、内容が前後してしまったり、意味が把握できなくなる可能性があります。

7.フレーム(画面分割)は、使用しない。

理由

音声読み上げソフトでは、フレームごとに読み上げていくため、内容の把握が困難です。

8.画像には代替情報(alt属性)を付ける

理由

  • 音声読み上げブラウザは画像を読み上げることができないため、alt属性を読み上げます。
  • alt属性の指定がないと画像リンク先を読んでしまうため、そこにどのような画像が貼り付けられているのかわかりません。

9.文字装飾(太字や取り消し線)によって情報を伝える場合は、装飾がなくても理解できるように文字や記号を併用すること

理由

音声読み上げブラウザでは、文字装飾により情報を把握することが困難です。

悪い例
  • 第1回 10月10日
  • 第2回 10月11日
  • 第3回 10月12日
良い例
  • 第1回 10月10日
  • 第2回 10月11日(受付終了)
  • 第3回 10月12日

太字は必須項目です。

悪い例

住所
名前
電話番号

良い例

住所(必須)
名前(必須)
電話番号

10.単位、日時等は記号やローマ字を使わず日本語で表記する

理由

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

  • 30KB→30キロバイト
  • 2015年10月1日(月曜日)→2005年10月1日(木曜日)
    「/」は、分数として読み上げるときがあります。
  • 12:30→12時30分
    (音声読み上げブラウザでは「じゅうに さんじゅう」と読み上げてしまう)

11.スペース(空白)や改行でのレイアウトはしない

見出しやタイトルで見栄えを良くするためのスペースは使用しないこと

文章の途中で改行しないこと(画面の右端で自動的に改行させる)

理由

  • 画面の大きさを変えると、文字が離れ意味が通じなくなります。
  • 音声ブラウザで間違った読み上げをしてしまいます。

「時 間」→「時間」

(音声読み上げブラウザでは「とき あいだ」と読み上げられてしまう)

12.機種依存や半角カタカナ文字は使用しない。

OS(基本ソフト)やブラウザによって表示される文字が異なり、誤解を招く可能性があります。

別の文字で代用するか、画像で表示する

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

13.担当課、掲載(更新)日時、問い合わせ先を明記する

閲覧者が問い合わせをする際の情報となります。

14.ページの容量は、少なくする

1ページの容量は画像も含め通常30キロバイト程度、多くても100キロバイト以内にする

理由

ページ容量が大きいと通信に時間がかかり、画面表示されるまでに長時間かかってしまいます。

15.画面解像度800×600ドットでも横スクロールしないで表示できるようにすること

画像のサイズは、幅750ドット以下にする

表(テーブル)の横サイズは指定しないか、パーセントで指定する

理由

  • 横スクロールは操作がしにくく、特に肢体不自由者や高齢者には大変負担がかかります。
  • 画面が途中でとぎれるため読みにくく、全体の把握ができません。

16.リンクする文字や画像が近くに連続するときは、クリックしやすいように十分な間隔を空けること

理由

リンクの間隔が狭すぎると、肢体不自由者の人や高齢者は選択しずらくなります。

17.リンクの部分だけでリンク先のページが分かるようにすること

理由

音声読み上げブラウザには、リンクだけを読み上げる機能があります。「ここ」、「こちら」、「クリック」などの単語にリンクを指定した場合は、リンク先のページの内容が把握できません。

日高市の観光についてはここをクリックしてください。→ 日高市の観光へ

18.自動的に音声(BGM)を再生しない

理由

  • 聴覚障がいがある人は、音が鳴っていることが分からない可能性があります。
  • ページの容量が増え、通信に負担がかかります。

19.専門用語、略語、外国語の乱用は避ける。(どうしても使用する場合は読み方や注釈を付ける。)

市の平成15年の合計特殊出生率(注釈1)は1.09となり、国の1.29や県の1.21を大きく下回りました。

(注釈1)合計特殊出生率…15歳から49歳まで(再生産年齢)の女性の年齢別出生率を合計したもので、1人の女性が再生産年齢を経過する間に、その年の年齢別特殊出生率に基づいて子どもを生んだと仮定した場合の平均出生児数に相当する。

巾着田には、全国でも珍しい曼珠沙華(まんじゅしゃげ)の群生地あり、毎年多くの人がその美しさに惹かれて訪れています。

20.むやみに新しいウィンドウを開くことはしない。もし、新しいウィンドウを開く場合は事前に通知する。

理由

  • 視覚障がいのある人や高齢者は、新しいウインドウが開いたことに気づかない場合があります。
  • 多くのデータが一度に使用されるため、パソコンの動作が遅くなったり、不安定になることがあります。
この記事に関するお問い合わせ先

市政情報課 市政情報担当 (本庁舎 2階)

郵便番号:350-1292 日高市大字南平沢1020番地
電話:042-989-2111(代表)
ファックス:042-989-2316

更新日:2017年03月01日