ページのトップへ
|
ホームページ作成のためのガイドライン
− 目次 −
流山市のホームページ基本コンセプト
第１章 ファイル構成及び取扱い事項について
１ ファイル構成について
２ 他サイトとのリンクの設定
３ 市ホームページ内の文章、図画等の引用
第２章 厳守事項
１ 誰でも、分かりやすいホームページにする。
２ インターネット環境への配慮
３ 障害者への対応
４ ファイル名の付け方
５ ページ内でのファイルの指定方法
第３章 推奨事項
１ 見やすいホームページ
２ さまざまなインターネット環境への配慮
３ 視覚障害者への対応
流山市では、平成１４年１１月８日にIT推進本部を設置し、この中で、ホームページの活用を検討するために、ホームページ活用検討部会を立ち上げ、流山市のホームページのあり方として、次のとおり基本コンセプト（流山市のホームページ基本コンセプト）を定めました。
この基本コンセプトを念頭に置き、流山市がホームページを作成ために、一定の基準を定めるホームページ作成のための基本ルール（ホームページ作成のためガイドライン）を策定しました。
但し、このガイドラインは、情報技術の進歩や、運用等により不具合が生じた場合は、内容を変更する場合もあります。
流山市のホームページの基本コンセプトは、「誰もが」「いつでも」「どこでも」「分かりやすく・使いやすく」「迅速に」、住民生活等を支援する充実した行政情報を提供するとともに、「魅力のある地域情報」を発信しながら、行政と住民等が「語り合う」ホームページづくりに努めます。
誰もが
男女を問わず子供から高齢者までの「誰もが」利用・参加できるものを目指します。
いつでも
時間や曜日の制限がなく、「いつでも」利用・参加できることを目指します。
どこでも
自宅や職場のパソコンや携帯電話などの通信機器により、場所を問わず「どこでも」利用・参加できることを目指します。
分かりやすく・使いやすく
利用者・参加者の意見を取り入れながら、画面表示や操作方法などのシステム改善に努め、「分かりやすく・使いやすく」機能の充実を目指します。
迅速に
常に最新情報の掲載に努めるとともに、手続きも出来る限り「迅速に」処理することを目指します。
魅力のある地域情報の発信
流山市の「特色、魅力を満載した地域情報」を発信し、ふるさと流山のPRに努めます。
語り合う
情報発信だけでなく、行政と住民等が双方向となるような意見や相談、また、住民間での情報交換などの場となることを目指します。
１ ファイル構成について
流山市のホームページを作成するにあたっては、下記のファイル構成とする。
− 省略 −
２ 他サイトとのリンクの設定
市ホームページでの他サイトとのリンクの取り扱いは以下のようにする。
（１） 市ホームページから他サイトへのリンク
国、国の外郭団体、各自治体、各自治体の外郭団体、大学、試験研究機関、公益法人等が作成したサイト及び民間企業のサイトについても、公共性の高い内容の場合は、各部局の判断によりリンクすることができる。ただし、流山市ホームページ広告掲載取扱要領に基づく企業等のサイトは、掲載することができる。
（２） 他サイトから市ホームページへのリンク
市ホームページを広く知ってもらうためにも、他サイトからのリンクについては、原則として自由とする。リンクを張る際のURLアドレスについては、基本的には流山市のトップページ (http://www.city.nagareyama.chiba.jp/)を指定する。
トップページ以外へのリンクの依頼があった場合には、なるべく削除や移動が行われないページ（各所属のトップページなど）を指定する、当該ページを削除・移動する場合には相手にその旨連絡するなど、相手のサイトがリンク切れを起こさない配慮をすること。
３ 市ホームページ内の文章、図画等の引用
市ホームページで使われている文書、図画等(以下「コンテンツ」という）の使用に係る申請については、次のとおりとする。
（１） コンテンツの使用申込み
コンテンツの使用を希望する者（以下「利用希望者」という）は、「流山市ホームページコンテンツ使用許可申請書」（PDF：93KB）にて秘書広報課に申込みする。
（２） コンテンツの使用許可の決定
秘書広報課は、申込みがあった場合、当該文章や図面の使用可否について掲載部署と協議を行い、使用の可否を決定し、利用希望者へ「流山市ホームページコンテンツ使用申請（許可・却下）通知書」（PDF：89KB）により通知する。
（３） コンテンツの使用許可の制限
次の内容のいずれかに該当するときは、コンテンツの使用を許可できない。
ア 政治、宗教若しくは営利を目的とするものと認めるとき又はそのおそれがあると認めるとき。
イ 公の秩序又は善良な風俗を害するおそれがあると認めるとき。
ウ 個人の特定できる写真等のデータ等、肖像権を侵害するおそれがあると認めるとき。
エ 上記ア〜ウのほか、市長が不適当であると認めるとき。
（４）コンテンツの使用許可の条件
次の内容に定める事項を遵守しなければならない。
ア コンテンツの使用許可は1回限りとし、再度の申請を要すものとする。
イ 使用するコンテンツが写真や画像データの場合は改変しない状態で使用する。
ウ 必要に応じて出典を明記する。
（５）免責事項
いかなる場合であっても、コンテンツの使用に際して発生した損害について市は一切の責任を負わない。
１ 誰でも、分かりやすいホームページにする。
（１） 背景、文字の色・文字の大きさなどについて
ア 画面のサイズは800×600を想定して作成する。
モバイル系ノートパソコンを想定して、800×600で収まる小さいサイズとし、左右にスクロールする必要がない程度とする。
イ フォントの指定（サイズ・種類）は原則として行わない
文字フォントの大きさを固定すると閲覧者はそのサイズでしかページを見ることができなくなります。フォントの大きさは相対値(0，+1など)で指定する。
また、特殊なフォント(「MS明朝」や「MSゴシック」など特定のＯＳに依存した文字)は、そのフォントがインストールされていないパソコンでページを閲覧する場合に、作成者の想定通りの表示がされないことがあるので、使用しないこと。
（２） シンプルで目に優しいレイアウト
ア シンプルな画面を心がける
写真やイラストなどを使用して見栄えを良くする工夫が出来ますが、多用すると、かえって見にくいページになってしまうため、行政情報を的確に伝達することが主目的なので、閲覧者が必要な情報を探しやすいように、なるべくシンプルなデザインを心がける。
イ 背景は白またはそれに近い色を推奨とし、見にくい配色は使用しない。
弱視の人でも快適に閲覧できるように、背景と内容のコントラスト（対比）はなるべく目に優しく、かつはっきりとした見やすいものとしてください。特に、赤と緑の組み合わせは色覚に障害のある人にとって見にくいので避けること。
（３） 閲覧しやすいページ構成
ア 各ページには文頭及び行末の部分に
例[流山市TOP>各課所属一覧>行政改革推進課>情報化推進>セキュリティについて]
とそのページのタイトルをつけ、現在、どの場所にいるか明確にするナビゲーションをつける。
ナビゲーションの背景は黄色とし、ページの最上部と最下部に置く。
イ 各ページにタイトルをつける
<TITLE>タグを使用し、各ページに適切なタイトルを必ずつける。（ホームページを「お気に入り」や「ブックマーク」に追加した時に、見出しとして<TITLE>タグで挟まれた部分の文言が使用される。）
ウ 各ページの長さは適切に
読む人のことを考えて、1ページ辺の長さは適切なもの（およそ２〜３画面分）にする。もし長いページを作る必要がある場合には、以下の方法で見やすいページにする。
（ア） ページの最初に目次一覧を作る
（イ） 目次の各項目に<NAME>タグでリンクを張り、そこをクリックするだけで該当する本文に移動出来るようにする。
エ ページ作成後も随時内容の更新・修正を
ホームページ作成後も、内容の更新・修正を行い、常に最新の情報を提供するように心がけてください。特にイベント・募集関連で期間が終了したものについては、ページの内容を削除する、「終了しました」等のコメントを入れる、事後報告ページを作成するなどの更新作業を速やかに行う必要がある。
また、古いページをそのまま放置しておくと、それが検索サービスで見付けられ、混乱の元となる恐れがあるため、不必要なページは削除する。
（４） 回線速度の遅い環境への配慮
ファイルのサイズはなるべく小さくする。なるべくファイルサイズの軽いページを作成するように心がけること。特に、画像ファイルについてはなるべく軽いサイズになるよう加工すること。
２ インターネット環境への配慮
（１）大きなファイルへのサイズ数値の記載
PDF形式やWORD形式などサイズが大きくなるファイルについては、そのファイルへのリンクの部分にサイズを記載するなど、閲覧者が前もって判断できる情報を提供すること。（例）情報化推進計画の概要（PDF：200Kbyte）
（２） いろんな機種で表示できるようにする。
使用文字の指定
・ 使用する文字は全角の【漢字・ひらがな・カタカナ・英数字】と半角の【英数字】。
・ 半角の【カタカナ】および機種に依存する文字（別紙一覧表参照）は絶対に使用しない。
（ＯＳの種類によっては、半角ｶﾀｶﾅや機種依存文字は正確に表示されないことがある）
※詳細は、参考資料２「ホームページで使用してはいけない文字について」
（３）画像には必ず<ALT>属性で説明を付ける
ブラウザの中には、文字のみで画像を表示しない「文字ブラウザ」と呼ばれるものがあり、このようなブラウザでもページの内容が読み取れるようにするため、画像ファイルにはすべて<ALT>属性で説明を付けること。
（４）フレーム機能は基本的に使用しない
ブラウザによってはフレーム機能に対応していないものが存在するため、フレーム機能は基本的に使わない。
（５）様々な環境で閲覧出来る形式のファイルを掲載する
Excel形式やWord形式、一太郎形式などのファイルは、特定のOSでそのソフトがインストールされた環境でしか閲覧することができません。特定のアプリケーションに依存している添付ファイル等を掲載する場合は、PDF形式のファイルも併せて掲載する。
３ 障害者への対応
視覚に障害のある人がホームページで情報を得る場合は、ホームページの文章を声に出して読み上げる「ホームページ読み上げソフト」を使用するケースが多く、これらのホームページ読み上げソフトに対応したホームページの作成上の注意点について挙げる。
（１）フレーム機能は基本的に使用しない
フレーム機能に対応しているホームページ読み上げソフトは少ないので、フレーム機能は基本的に使わないこと。
（２）画像には必ず<ALT>属性で説明を付ける
ホームページ読み上げソフトで読むことができるのは文章の部分に限られるが、画像に<ALT>属性で説明を付ければ、その部分をホームページ読み上げソフトで読むことが可能となる。ホームページで使用する画像については、すべてのものに<ALT>属性でタイトルを付ける。また、子ども向けホームページを作成する際などは、<ALT>属性の説明もまたわかりやすいものにするよう心がける。
４ ファイル名の付け方
（１）ファイル名の制限
漢字、ひらがな、カタカナ、半角カタカナ、空白などを使った場合、そのページを閲覧できないユーザが出てきたり、アクセス数をカウントする時にエラーが発生して正確な数値が集計出来ないなどの不具合が発生するため、ホームページで使用するファイル名については、必ず「半角英数字」を用いる。
＜ファイル名の付け方の例＞
○ index.htm
× ｉｎｄｅｘ．ｈｔｍ（全角）
× 流山市のページ.htm(漢字・ひらがな・カタカナ)
× 
.htm（半角カタカナ・空白）
× INDEX.htm
（混乱を起こさないようにするため、英数字は小文字で統一すること。）
（２）拡張子の統一
HTMLファイルの拡張子は"htm"に統一してください。
５ ページ内でのファイルの指定方法
他ページへのリンクや画像の表示などの場合、ページの中でファイル名を指定する。この時の指定方法は基本的には絶対パスではなく、相対パスを使用する。
＜ファイル指定方法の例＞
・相対パス
○<SRC IMG="image/title.gif">
→このページのあるフォルダの下の“image”フォルダ内の “title.gif”を指定
○<A HREF="../index.htm">
→このページのあるフォルダの一つ上にある“index.htm”を指定
・絶対パス
×<SRC IMG="file:///C:/windows/ディスクトップ/page/img/title.gif">
→ 作成者本人のＰＣでしか正常に動作しない。
△<A HREF="http://www.city.nagareyama.chiba.jp/~kikaku/test/index.htm">
→ このファイル自体の移動を行った時にリンクを全て修正しなくてはならない。
○<A HREF="http://www.city.nagareyama.chiba.jp/">（例外）
→ 別構成のサイトにリンクを張る時などには、絶対パスが有効な場合もある。
１ 見やすいホームページ
（１）背景、文字の色・文字の大きさなどの配慮
色彩の情報のみに依存したページは作らない
色分けすることでページの内容をわかりやすく表現する手法は効果的であるが、その反面、色覚に障害のある人に伝わらないというデメリットがある。色彩のみに依存した表現手法は使用しない。
（２）シンプルで目に優しいレイアウト
ア レイアウトにおける空白の活用
構成に空白を上手く活かすことによって、見やすくわかりやすいページを作成する。
イ アニメーションを多用しない
アニメーションや動く文字などを多用すると、読みにくくなることがあるので、あまり多用しない。
（３）閲覧しやすいページ構成
ア 理解しやすい文章
なるべく難しい言葉を使わず、平易で多くの人が理解しやすい文章になるように心がける。
イ 具体的な事例の列挙
難しい事柄については、具体的な事例を挙げることでわかりやすく説明することができる。
ウ わかりやすい構成のホームページ
ホームページの構成はわかりやすいように心がける。特に、あまり階層が深くなると閲覧者が迷う恐れがある。
２ さまざまなインターネット環境への配慮
（１）回線速度の遅い環境への配慮
ページサイズの上限
1ページ当たりのファイルサイズは最大で100KB以内となるようにすること。
（２）異なるブラウザでの動作の検証
Java、ActiveX関連機能の使用について
Java、ActiveXなどの機能を使用することで、ホームページ上でさまざまな動作を行うことが出来るが、これらの機能に対応していないブラウザもあり、また、最近では、セキュリティ上の問題から意図的にこれらの機能をＯＦＦにしてホームページを閲覧している人も少なくない。不必要なJava、ActiveX関連の機能はなるべく使用しない。また使用する時には、これらの機能が無くても閲覧に差し支え無いページ構成を心がける。
３ 視覚障害者への対応
（１）説明文を左、画像を右に
ホームページ読み上げソフトは基本的に左から右の順番で文章を読み上げる。説明文を左、画像を右に配置することで説明文が先に読まれるため、閲覧者が理解しやすいという効果がある。
（２）英単語は小文字で表記する
英単語を大文字だけで表記すると、ホームページ読み上げソフトではそれを頭文字の列記だと認識して一文字ずつ読んでしまうことがある。英単語は小文字で表記した方が望ましい。
× “NAGAREYAMA”･･･「ｴﾇ､ｴｰ､ｼﾞｰ､ｴｰ､ｱｰﾙ､ｲｰ､ﾜｲ､ｴｰ､ｴﾑ､ｴｰ」
○ “Nagareyama”･･･「流山」
（３）取り消し線の使い方
ホームページでは文章に取り消し線を付けるタグ<S>があるが、ホームページ読み上げソフトによっては取り消し線の有無を認識することが出来ないため、取り消し線で消した部分については、それとは別に明示的に取り消した旨の文言を付け加えること。
× 花火大会開催[1月24日]
○ 花火大会開催[1月24日] 終了しました
（４）誤読されないための工夫
ホームページ読み上げソフトは必ずしも文章を正しく読んでくれるとは限らないため、ホームページを作成する際には、なるべくホームページ読み上げソフトが正しく読むことができるような記述を心がけること。
具体的には以下のようなことが挙げられる。
（ア）日付の表記
○ 1月2日 →「いちがつふつか」
× １／２ →「にぶんのいち」（分数と解釈される恐れあり）
（イ）固有名詞などの使用
人名や地名といった固有名詞、専門用語など、読みが難しい語句については、誤読の可能性が高くなるので、語句の後にかっこ書きで読み仮名をつけるといった処置をすること。
ブラウザ
インターネットページ閲覧のために使われるソフト。主なブラウザには、Microsoft社のInternet ExplorerやNetscape社のNetscape Communicatorなどがある。
検索サービス
知りたい話題について、キーワードなどを用いてそれが扱われているページを探すことが出来るサービス。
ＡＤＳＬ(Asymmetric Digital Subscriber Line)
既存の電話回線を用いて高速のデータ通信を行う技術。インターネット通信の手段として用いられている。
ＣＡＴＶ
有線テレビのサービス。この回線を用いて高速のインターネット通信サービスが行われている。
ＰＤＦ形式
AdobeSystems社が開発した文書データ形式。データの作成には有償のソフトが必要だが閲覧だけであれば無償のソフトを使用すれば可能であることと、さまざまなＯＳに対応していることから、インターネット上で広く普及している。
ＷＯＲＤ
Microsoft社の文書作成ソフト。Windows上で多く使われている。
Internet Explorer
Microsoft社のインターネットホームページ閲覧ソフト。Windowsで標準装備されているため、広く利用されている。
Netscape
Netscape社のインターネットホームページ閲覧ソフト。
フレーム
ホームページの画面を分割して表示する機能。
Excel
Microsoft社の表計算ソフト。Windows上で主に利用されている。
一太郎
ジャストシステム社の文書作成ソフト。
ホームページ読み上げソフト
ホームページ内のテキストの部分を音声にして読み上げるソフト。IBM社のHomepageReaderなどが挙げられる。
クリッカブルマップ
任意の位置をクリックすると、それに関連したリンク先に移動することが出来る画像。
Java
SunMicrosystemsが開発したプログラミング言語で、インターネットブラウザ上で動作することが出来る。この他にも、NetscapeComunication社が開発したJavaScriptという言語もある。
ActiveX
Microsoft社が96年に発表したインターネット関連技術の総称。このうちの「ActiveXコントロール」と呼ばれる技術は、ホームページ上で音声や動画を利用したり、Webサーバと情報のやり取りをしたりすることが出来る。
テーブル構造
ホームページ上に表を作り、その区分けされた場所にそれぞれのデータを配置して表示する構造。
拡張子
ファイルの末尾に付いている「.」（ドット記号）以下の文字列。これによってファイルの種類を表している。
QuickTime
Apple社が開発した、様々な形式の画像や動画を表示するためのソフト。
RealPlayer
RealNetworks社の音声・動画再生ソフト。データを転送しながら部分的にリアルタイムで再生するストリーミングを行うことが可能。
WindowsMediaPlayer
Microsoft社のマルチメディア対応ソフト。Windowsに標準添付されている。
アニメーションGIF形式
GIF形式とは画像ファイルの形式のこと。この形式では、画像をアニメーションとして動かして表示することが出来る。
ＦＬＡＳＨ形式
Macromedia社が開発した、音声やアニメーションなどをWeb上で提供することが出来る形式。
Wave、MIDI形式
共に音声ファイルの形式。WaveはWindowsで標準的に使用されている音声形式で、MIDIはシンセサイザーなどの演奏データを取り扱う音声形式。
CGIプログラム
ユーザがサーバに対してプログラムの実行を依頼し、その結果をブラウザで表示するプログラム。
ページのトップへ
１ 半角カタカナ
Windows以外のコンピュータでは正常に表示されない恐れがあります。カタカナを使用する場合には全角のものを用いてください。
２ 機種依存文字
ある特定のコンピュータシステムでしか使われていない文字は使用しないでください。
|