ページの先頭です。 メニューを飛ばして本文へ

本文

湯沢市ホームページ作成ガイドラインの考え方

印刷用ページを表示する 更新日:2014年3月19日更新
<外部リンク>

次にあげる「ホームページ利用者」、「ホームページを利用する環境」を考慮しながら、湯沢市ホームページ作成ガイドラインを作成しました。

ホームページ利用者

  • 年齢や障がいの有無等に関わらず、幅広い利用者への配慮

ホームページを利用する環境

  • パソコンやモバイル端末、スマートフォンなど多様な情報通信機器の形式
  • ブロードバンドやナローバンドなど、接続環境の状態
  • WindowsやiOS、AndroidなどのOS(基本ソフト)の違い
  • Webブラウザの種類およびバージョンの違い

必須項目と推奨項目の設定

  • 快適に利用していただくホームページを作成するためには、配慮しなければならない項目が数多くあります。その項目の中から、必須項目と推奨項目を設定しましたので、これを目安としてホームページの作成・管理を行います。

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

※各項目をクリックすると、詳細な解説や理由のページに移動します。

1.画像に関して

  1. 画像の容量は大きすぎないようにします。 【必須】
  2. 画像には必ず代替文字(ALTテキスト)を用意します。 【必須】
  3. 画像を多用せず、文章中心のページを作ります。 【必須】
  4. イメージマップの使用はできるだけ避けます。 【推奨】
  5. 文字を画像化したものは使用しないようにします。 【推奨】

2.文字に関して

  1. 文字サイズの絶対値指定やフォント種類の指定はしないようにします。 【必須】
  2. 見出しと本文が分かりやすいようにします。 【必須】
  3. ファイル名・フォルダ名は半角(小文字)英数記号を使用します。 【必須】
  4. ファイルの拡張子を統一します。 【必須】
  5. 機種依存文字は使用しません。 【必須】
  6. 単語の途中に空白や改行を入れないようにします。 【必須】
  7. スペースを用いてレイアウトしないようにします。 【必須】
  8. リンク文字は分かりやすい単語(文章)を使用します。【必須】
  9. 点滅文字やスクロール文字は使用しないようにします。 【必須】
  10. 記号を多用しないようにします。 【推奨】
  11. 単位には日本語読みを使用、または併記します。 【推奨】
  12. 見出し等に画像テキストを使用しないようにします。 【推奨】
  13. 人名については、よみがなを併記します。 【推奨】

3.レイアウトに関して

  1. ページタイトルは内容と一致する適切な文言を使用します。 【必須】
  2. 1ページ1情報を原則とします。 【必須】
  3. 情報の担当課所・連絡先を明記します。 【必須】
  4. 画面の幅はA4での印刷を考慮し、750pix以内とします。 【必須】
  5. フレームは使用しないようにします。 【必須】
  6. 背景には画像や色をなるべく使用せず、白を基本とします。 【推奨】
  7. 1ページが長くなる場合、区切り線の活用や、「ページTOPにもどる」リンクを使用します。 【推奨】
  8. 関連する情報へのリンクを適切に配置し、利便性を高めます。 【推奨】

4.色に関して

  1. 背景色と文字のコントラストに注意します。 【必須】
  2. 色に頼った表現を避けます。 【必須】
  3. 印刷しても見やすい配色にします。 【必須】
  4. リンク文字列の色は初期設定を基本とします。 【推奨】

5.その他

  1. パンくずリストを使用し、現在の階層を適切に表現します。 【必須】
  2. ダウンロードサイズを明記します。 【必須】
  3. 簡潔な文章を心がけ、専門用語、略語、英語を乱用しないようにします。 【必須】
  4. 最新の情報を提供します。 【必須】
  5. 必要以上に別のウィンドウを開かないようにします。 【推奨】
  6. 同一サイト内であることが分かるよう、デザインに統一感を持たせます。 【推奨】
  7. 異なるOS、ブラウザでの動作を検証します。 【推奨】
  8. JAVAスクリプト等のうち、機種やブラウザに依存しやすい機能は使わないようにします。 【推奨】

適用範囲

制定日以降に作成するページに適用していきます。それ以前に関するものは順次適用していきます。

用語解説

*1. ALTテキスト:
画像の表示をサポートしていないブラウザや画像が上手く読み込めなかった時に代わりに表示される文章です。
*2. 音声ブラウザ:
読み上げソフト、音声ソフト等とも言い、ホームページの内容を読み上げる機能がついているブラウザです。
*3. イメージマップ:
画像に複数のリンクを設定することです。
*4. 機種依存文字:
コンピュータの種類によって,表示できる文字に違いがあります。
機種依存文字の一例:
機種依存文字の例