- トップメニュー|検索
トップページ組織ICT基盤管理課情報化関連規程類

横浜市インターネット情報受発信ガイドライン 細則1 WEBページ作成基準

1 趣旨

 WEB による情報提供の際に、どのようにWEBページを作成するのかの基準を定める。

本細則で記述している参照ページとは、次のURLのことをいう。
http://www.city.yokohama.lg.jp/somu/org/ict/gl/dr/dr1re.html


2 WEB ページ作成の考え方

WEB ページ作成の考え方の基本は、次のとおりとする。

(1) インターネットをはじめとする情報技術は、よりよい市民へのサービスを実現するために利用すべきものであり、いたずらにその技術を濫用しないこと。
(2) 全ての利用者へWEBによるサービスを届けることを目標としたアクセシビリティの高いページづくりを行うこと。より高い市民サービス実現のためには、提供環境や手段の充実及び多様化を図るとともに、WEB ページのアクセシビリティの向上に十分な配慮をすること。
(3) 平成16年6月に制定された日本工業規格「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第三部:ウェブコンテンツ」に準拠するよう努めること。
(4) 平成11年5月に発表された「インターネットにおけるアクセシブルなウェブコンテンツの作成方法に関する指針」(郵政省及び厚生省【「情報バリアフリー」環境の整備の在り方に関する研究会】)を参考にすること。

3 デザインの考え方

WEBページの作成において、視覚を主な手段に利用する点からも、そのデザインは重要な意味を持つため、ただ単に格好のよいデザインであるだけでなく、デザインそのものが、そのページのアクセシビリティの向上に貢献している必要がある。よって、次の(1)から(6)に掲げる基本的な考え方に沿ってデザインを行うこと。

(1) どのページを見ても市のページであることがわかること。
(2) 基本的な操作・ユーザインターフェースの統一を図り、わかりやすいデザインとすること。
(3) 基本的な配色を決め、可能な限りその配色を利用すること。
(4) 基本的なデザインの基準、スケールを決め、可能な限りその基準を用いて構成を行うこと。
(5) デザインにより多様な提供方法の可能性を阻害しないこと。
(6) 全体のデータ転送量について配慮したデザインを行うこと。

4 デザインに関する実施事項

デザインに関する実施事項の具体的項目は、次のとおりとする。

(1) どのページを見ても市のページであることがわかること。
ア 画面上部デザイン
(ア) 画面上部に共通のデザインの市のヘッダを設置すること。
(イ) ヘッダデザインについては全体構成にあわせて検討されたものを用いることとし、横浜市のマーク、名称、トップページへのリンク、検索ページへのリンクなどの機能が包含されたものとすること。
(ウ) ヘッダをデザイン上別の色にしたい場合は、ネットワーク主管課へ申し出ること。
(エ) 各区局で共通に利用される画像は /coparts というディレクトリの配下に納められているので、各区局のディレクトリの中に置くのではなく、そこの画像へリンクすること。
イ 画面下部デザイン
(ア) 基本情報

全てのページの下部に以下の項目を掲載する。可能な限り文字を利用し、大きさは標準より小さめ (90%程度)、文字種の指定は行わないこと。

a 業務を所管している又は情報を作成した区局、部、課、係名
b 問合せ先
以下の連絡先情報を掲載すること。

(a) 電話番号(職員向けのページ以外については市外局番から記載すること。他国語のページについては国番号から記載すること。)

(b) FAX番号

(c) 電子メールアドレス (mailto設定をすること。 )

問合せ先は、業務を所管する所属とする。業務を所管する所属とは異なる問合せ先を掲載する場合は、その旨を併せて記載すること。
また、各ページのフッタに直接問合せ先を記載するほか、問合せ先をまとめたページを作成しリンクを掲載する等の対応でもよいものとする。

c 情報作成日及び更新日(年から明記すること。)
(イ) 著作権表示

全てのページに「©(HTMLソースでは © と記述)作成年-更新年 City of Yokohama. All rights reserved.」を掲載する。作成年と更新年は西暦で表記する。ただし作成年と更新年が同一の場合は更新年の部分は省いてよい。
表示については、画像を使っても構わないが、alt属性による代替テキストに同じ内容を記述すること。

ウ ページタイトル

TITLE要素の内容は、ブラウザウィンドウのタイトル表示領域に表示されるほか、 検索を行った際にその結果として表示され、また、ブックマーク(お気に入り)登録した場合の見出しとして利用されることから、次の点に留意し、記述すること。

(ア) 「横浜市」で始めること。
(イ) ページの内容を推測できる簡潔な表現(30字以内を目安)とすること。特定の区役所の業務に関するページの場合は、区名を含むことが望ましい。
(ウ) 他のページと重複しないこと。

≪4(1) ア・イ・ウについては、「参照ページ」で提供するひな型を使用すること≫

(2) 基本的な操作・ユーザインターフェースの統一を図り、わかりやすいデザインとすること。 ページデザインの基準は次の通りとする。
ア 一般的なウィンドウシステムでは、ウィンドウを拡大又は縮小した場合でも、左上部分は確実に表示されるため、重要なナビゲーション等を左上に置くように配慮したデザインとすること。
イ フォントサイズについては各種ブラウザの標準設定で閲覧されることを想定すること。
ウ 利用者が、個別にフォントサイズを拡大縮小することを考慮して、ブラウザの設定でフォントサイズをひとまわり小さくした場合でも文字が容易に判別できることを確認すること。
エ ページの本文等、そのページで主要な役割を成す部分についてフォントサイズの指定を行わないこと。
オ デザイン上フォントサイズの調整が必要な場合、利用者の自由な閲覧環境を阻害するようなCSSを用いたポイント(pt) 単位やピクセル(px)単位での絶対サイズ指定は行わず、%単位を用いた相対的なサイズ指定とすること。指定する場合は、90%以上、最低でも75%以上を確保すること。
カ フォントの種類の指定を行わないこと。
キ 文字以外のサイズの指定については、行間のみ単位無しの実数とし、それ以外のボックスの幅や余白等の指定についてはem単位か%単位のどちらかを適宜選択すること。
px,pt,mm,cm,in等の単位は原則禁止とするが、画面表示ではなく印刷のための CSS においてはこの限りではない。また、画像等との位置合わせのためにどうしても em や % ではレイアウトの実現が不可能な場合は px単位の 使用のみ認めるが、そのような構成はできる限り避けること。
ク CSSを使ってリンクの下線を消すような指定を行わないこと。
ケ リンク以外の部分で下線による装飾を行わないこと。
コ 画像を使ったボタンについては、操作しやすい大きさに設定すること。
(3) 基本的な配色を決め、その配色を利用すること。

画面中で使用する色は16進数で指定すること。

また、利用するOS、ディスプレイの環境等によっては発色が異なる場合があることに注意する。

ア 可能な限り背景色は白(#FFFFFF)、文字色は黒(#000000)を使用すること。他のページにリンクしている部分の文字色は青(#0000CC)、訪問済みリンクの文字色は紫(#800080)又はそれぞれの値に近い色を使用すること。
イ 背景画像は、文字と重ならない範囲での利用に止めること。文字と重なる範囲に背景画像を使う場合は、文字が読みにくくならないよう十分注意を払うとともに、背景画像と同系色の背景色を指定し、画像が表示されていない状態でも文字が読めるようにすること。
ウ 一般的なブラウザでリンクを表す場合に使われる青や紫に近い色は、文字の強調色として使用しないこと。
エ モノクロレーザプリンタで出力した際に、内容がはっきり印刷されるよう、色のコントラストに配慮するとともに、色覚に障害のある人でも明確に認識できる配色にすること。

≪基本的な色指定の例は、「参照ページ」で提供するひな型を使用すること。≫

(4) 基本的なデザインの基準、スケールを決め、可能な限りその基準を用いて構成を行うこと。

画面のレイアウト手法は、小さい画面でも横にはみ出さず、大きい画面ではより一覧性が高まる、いわゆるリキッド・レイアウトを基本とし、ピクセル数でページの幅やセルの幅を固定してはならない。

ブラウザの内容表示領域として、作成時点において、8割以上の市民が利用する端末環境において横スクロールが必要になることのないよう、画像や幅の固定された表など、ピクセルサイズがあらかじめ決まっているものは (複数の物を強制的に横に並ばせる場合は合計で)、余白を含めて上限を一定以下に抑えること。

また、A4用紙を縦に利用して印刷する場合に右端が切れることのないよう、印刷用スタイルシートを用意する、印刷用ページを設けて不要なナビゲーション要素を印刷対象外とする等の配慮を行うこと。

さらに、ユーザビリティに配慮し、同じ機能を持ったボタンは形状や位置を統一するなどの作成ルールを決めたうえで、全体のデザインを行うこと。

(5) デザインにより多様な提供方法の可能性を阻害しないこと。

WEB ページの利用者は身体的な障害による制約や、接続環境の制約などにより様々な利用環境が想定されるため、デザインが情報提供の障害とならないように配慮する。

ア 基準とする HTML のバージョンを明記し、それに準じた適切なマークアップを行うこと。
イ テキスト読み上げやテキストブラウザの表示の妨げにならないよう配慮すること。
ウ 画像ファイルに直接リンクを張ったり、画像だけでページを構成したりしないこと。
エ 外字や機種・環境依存文字、半角カタカナを使用しないこと。
オ 一部の拡張機能や外部プログラム、plug-in アプリケーションを利用しなくても情報伝達が可能なように作成すること。
カ フレームを使用しないこと。
キ リンクが新しいウィンドウで開かれるような設定は行わないこと。
WEBアプリケーション内で詳細説明を開くためのリンク等、リンク先を同じウィンドウで開いてしまうと著しく不便であると思われる場合はこの限りではないが、その場合も、新しいウィンドウが開かれることを明示したうえで、サイズを指定しツールバー等が表示されない子ウィンドウとして開く設定とすること。
ク ブラウザの「戻る」機能が使用できなくなるような構成にしないこと。特にMETAタグの指定等により、0秒で別のページに自動ジャンプするような設定は行ってはならない。
(6) 全体のデータ転送量について配慮したデザインを行うこと。

利用者の全てが高速な常時接続網を利用しているとは限らないため、ページ全体のデータ量に配慮し、低速な接続環境でも快適に利用できる構成とする。

ア画像サイズ、色数等に配慮したものとすること。不要に大きなサイズの画像や、単なる飾りとしての画像の利用をしないこと。また、地図などのようにある程度の大きさが必要なものについては、最初にサムネイル(小さな画像)と画像のデータサイズを表示するなど、利用者の利便性に配慮する。色についても、表現に必要な数に抑えること。
イ 装飾のための音声・音楽などは利用しないこと。
ウ 高速な接続環境に特化したコンテンツを提供する場合は、その旨を明示すること。

5 デザイン実現のために使用するソフトウェア

WEBページは、ネットワーク主管課が提供するWEBコンテンツ管理システム (以下「インターネットCMS」という。) を利用して作成・管理することとする。

インターネットCMSを利用できないWEBコンテンツのHTMLを直接編集する場合や、インターネットCMSで利用するためのテンプレート等を編集する場合は、Windowsに標準付属しているメモ帳や、各種テキストエディタで直接編集することとする。ホームページ・ビルダーや Dreamweaver等のWEBページ作成専用ソフトウェアを利用する場合においても、適切なHTMLを作成する知識を習得したうえで、アクセシビリティの高いページを作成すること。WEBページ作成専用ソフトウェアは、6(1)に掲げるHTMLやCSSの仕様に正しく準拠したものを利用すること。

WordやExcel等のHTML作成機能については、本ガイドラインに反したHTML記述を行う等、アクセシビリティの低いページが作成されるため、使用を避けること。


6 デザイン実現に関する実施項目

デザイン実現に関する実施項目は、次のとおりとする。

(1) 基準とする HTML 及びCSSのバージョンについて

新規に作成するページについては、W3C勧告によるHTML 4.01 Strict を使用すること。

既設のページでHTML 4.01 Transitionalを使用しているものについては、更新等の機会にHTML 4.01 Strictに移行するよう努めること。

また、レイアウトの定義はCSS 2.1に準拠すること。

(2) HTMLタグの適切な使用について

HTMLタグは、それぞれの目的に応じて適切に使い分けること。

ア 見出しタグや強調タグ等、検索や音声読み上げソフトでの利用の際に重要な意味を持つタグを適切に活用すること。
イ ページのレイアウトはCSSによって行うこととし、レイアウトを目的としたTABLEタグの使用は行わないこと。やむを得ずTABLEによるレイアウトを行う場合は、THやCAPTION等の要素を使用せず、視覚障害者用の読み上げソフトを使用した際に正しく読み上げられるよう十分注意すること。
(3) 基準とするブラウザについて

ページ作成にあたっては、特定ブラウザでの閲覧を前提とせず、(1)に準じたものを作成すること。そのうえでInternet Explorerのうちマイクロソフト社が正式サポート中の各バージョン、Mozilla Firefox、Google Chromeそれぞれの最新リリース版で具体的な表示等の確認を行うこと。

また、LYNX、w3m等のテキストブラウザ及びホームページ・リーダー等の音声ブラウザでも、必要な文字情報には問題なくアクセスできるよう配慮すること。アップロード後には、市が導入しているWEBページ読み上げ・拡大サービスにより読み上げや表示が正常に行われることを必ず確認すること。

さらに、WindowsPC だけでなく Macintosh や スマートフォン等、様々な環境で確認を行うよう努めること。外部委託の場合は、Mac OS X版Safariの最新リリース版での確認を必須とする。携帯端末向けのページについては、対象とする端末やシミュレータを用いて確認すること。

上記にあげたブラウザ以外についても、公開後に利用者から不具合の指摘があった場合は、可能な限り修正すること。

(4) DOCTYPE 宣言 (DTD) について

使用するHTMLのバージョンに合わせ、DOCTYPE 宣言を適切に記述すること。

≪記述例については、「参照ページ」参照≫

(5) 使用する言語の宣言について

ページで使用する言語をHTML要素のLANG属性で宣言すること。日本語の場合はLANG="ja"、英語の場合はLANG="en"、その他の言語についても適宜設定すること。

(6) 文字符号化方式について

新規に作成するページやテンプレートで使用する文字コードは、UTF-8を用いること。ただし、日本語のページについて、利用環境としてUTF-8に対応していないブラウザでの利用も想定される場合や、従前からShift_JISを用いていた場合等は、適宜Shift_JISも利用してよいものとする。

文字コードについては、META要素等を用いて適切にCharsetの宣言を行うこと。なお、横浜市では TITLE 要素の表記に日本語を用いるので、TITLE 要素の前にこれを記述しなければならない。

また、英語のページで使用する文字コードは、META 要素での Charset 指定でISO-8859-1と記述する。

≪記述例については、「参照ページ」参照≫

(7) WEB ページ作成ソフトウェアが自動的に挿入するタグ等について

WEBページ作成ソフトウェアによっては、独自のタグを自動的に挿入するものがあるため、タグが多重に設定されることのないよう、使用するソフトウェアを統一すること。

また、WEBページ作成ソフトウェアにより本ガイドラインに合致しないフォントの種類や文字サイズの設定がなされた場合は、その部分を削除すること。

≪ソフトウェアが自動的に挿入するタグや属性の例は、「参照ページ」参照≫

(8) 文法・アクセシビリティチェックについて
ア 作成したWEBページについて、公開前に以下のチェックを行うこと。
(ア) Fujitsu WebInspectorで必ず修正しなければならない問題が検出されないこと。
(イ) Another HTML-lintで重要度2以上の警告が出ないこと。
(ウ) W3C CSS Validatorでエラーが検出されないこと。
イ ページ作成の基礎となるテンプレートは、以下のチェックを行うこと。
(ア) Fujitsu WebInspectorで必ず修正しなければならない問題が検出されないこと。
(イ) Another HTML-lintで重要度1以上の警告が出ないこと。
(ウ) W3C CSS Validatorでエラーが検出されないこと。また、その他「参照ページ」に掲載するアクセシビリティチェックツールを適宜活用し、問題点が検出されないこと。

≪具体的な文法チェックツールについては、「参照ページ」参照≫

(9) CGI等について

CGIプログラム等WEBアプリケーションの利用については、次のとおりとする。

ア 利用の可否、動作環境について発注前にネットワーク主管課へ個別に相談すること。
イ 装飾、カウンタなど、情報提供に直接関係のない利用はしないこと。
ウ 別に定める「Webアプリケーションの作成基準」に従うこと。
(10) アクセス数等の統計情報について

アクセス数統計情報は、ネットワーク主管課で毎月集計したものを参照すること。CGI等を利用したアクセスカウンタについては、統計情報と異なる場合があるため、利用しないものとする。

(11) ファイルとファイルの種類について
ア HTML、GIF、JPEG、PNGを使うこと。
イ ページデザインを正確に保持した形で情報を掲載する必要がある場合や、大量の情報を迅速に提供する必要がある場合は、PDFも使うことができるが、以下の点に注意し、アクセシビリティ上の理由から、できる限り避けることとする。
PDFを使用する場合は、検索結果の見出しに表示されることを踏まえ、ファイルのプロパティに設定されるタイトルをHTMLページ同様に適切に設定すること。
(ア) 検索エンジンで解析できない場合があること。
(イ) PC 以外の端末では見ることができない場合が多いこと。
(ウ) データサイズが大きく、低速回線では閲覧に難があること。
(エ) 音声での読み上げができない、または内容を理解しづらい場合があること。
ウ WordやExcel等は、有料の製品であり、全ての利用者が使用しているものではないため、それらの形式のファイルを安易に掲載せず、HTMLの使用を原則とすること。
また、掲載する場合は、事前にウイルス検知ソフトウェアで十分検査すること。
エ これまでに利用されていない形式のファイルについては、ネットワーク主管課に相談のうえ、取扱いを決定すること。
オ アプリケーションソフトウェアに依存したファイルを提供する場合には、ある程度古いバージョンでも読み込める形式で保存するなどの工夫を行うこと。
また、無料の閲覧ソフトがメーカーから提供されている場合は、そのダウンロードページへのリンクを行うこと。

≪Word や Excel 等で基準とするバージョンは、「参照ページ」参照≫

カ PDF、Office文書、動画等、ブラウザが標準対応していない形式のファイルにリンクする場合は、利用者がクリックする前にそれがわかるような表示を必ず行うこと。表現の方法は、リンクの冒頭にネットワーク主管課が指定するアイコンを表示することを原則とする。
併せて、リンク先のファイルの大きさ(ストリーミングサーバによる動画配信の場合はビットレートと長さ)を明記すること。
JPEG形式の画像等、ブラウザが標準対応している形式のファイルであっても、100KBを越えるような大きさの場合は同様に取り扱うこと。
(12) ファイル名、ディレクトリ名について

ファイル名やディレクトリ名に使える文字は、半角英数小文字、 「.」(ピリオド) 及び「-」(マイナス) の38種類とする。

HTML ファイルの拡張子は「.html」とすること。

編集作業をしているパソコンのみで確認をしていると、ファイル名に大文字を使用しているなどの間違いに気付きにくいため、十分注意すること。

(13) 収納ディレクトリについて

実際にコンテンツを収納するURLは「http://www.city.yokohama.lg.jp/区局名ディレクトリ/〜」となる。区局名ディレクトリ配下のディレクトリ名については、半角英数小文字を使用し、極力短い名称とすること。

(14) 各ディレクトリで最初に表示されるファイル名について

必ず index.html とする。ただし、image ディレクトリ等、HTML 以外のファイルを置くためのディレクトリは除く。

(15) ディレクトリの構成について

画像のファイルは HTML ファイルと同じ階層に混在させるのではなく image という名称のフォルダを作って納める等工夫すること。

≪ディレクトリ構成例については、「参照ページ」参照≫

(16) Flash を利用したコンテンツについて

Flashを利用する場合は、次の点に注意すること。

ア アニメーションを使用することで内容が理解しやすくなる場合にのみ利用し、ページの基本的なナビゲーションや、単なる装飾目的には使用しないこと。
イ Flashを再生できない環境への代替措置を講じること。
ウ Flashを使用しているページにはその旨を明記し、再生ソフトウェアのダウンロードページへのリンクを行うこと。
エ できる限り古いバージョンのソフトウェアでも再生できるようにすること。
オ 特殊な利用の場合は、ネットワーク主管課と協議して利用を決定すること。
(17) Java、 JavaScript及びその他プラグインについて

別に定める「Webアプリケーションの作成基準」に従うこと。

(18) FORM を利用したデータ送信について

FORM を利用して利用者から情報を受け取るには、6(9)のとおりネットワーク主管課と相談の上、情報を処理するための CGI スクリプトをサーバ上に設置し、SSLを用いた暗号化通信を行うこと。

電子メールを使って利用者から直接受け取る場合、ネットワーク主管課との調整は不要だが、利用者のブラウザや電子メールソフトの設定によっては正しく送信されない場合があるため、FORM を使わずに電子メールを送ることができるよう、宛先を掲載するなど配慮すること。

(19) クリッカブルマップ (イメージマップ) について

クリッカブルマップを使用する場合は、クライアントサイドのクリッカブルマップとすること。

また、クリッカブルマップに対応しない閲覧環境のために、クリッカブルマップの直後に同様のテキストリンクも設置するなど、必ず代替手段を用意すること。

(20) ALT 属性について

画像には必ず ALT 属性を設定すること。

ALT属性は、画像表示機能が無いブラウザや無効化されたブラウザ、視覚障害者用の音声読み上げソフト等で使用されることを意識して設定すること。

設定した結果については、画像表示機能を無効化したブラウザや市が導入しているWEBページ読み上げサービス等を利用し、内容の理解に支障がないことを確認すること。

≪ALT属性の設定例は、「参照ページ」参照≫

(21) 文章の表記について

文章の表記については、利用者が容易に理解できるよう配慮するとともに、原則横浜市発行の「文書事務の手引 (文例集)」によること。また、漢字は常用漢字を用い、難解な漢字を使用する場合は読み仮名を付ける等、工夫すること。

なお、読み仮名をつける際は、「横浜 (よこはま)」というような記述とすること。

また、キッズページについては、想定される利用者の年齢までに習得した漢字を使用するよう配慮すること。


7 携帯端末用の画面作成の考え方

携帯電話をはじめとした小型携帯端末には、全体を縮小して表示するものや、画面をスクロールして表示させるもの、テキストのみ表示するもの等のバリエーションがある。このうち縮小表示型は通常の作成方法で対処することとし、その他のものについては次の点に注意して作成すること。

(1) 携帯端末に適した構成とすること。
ア ディレクトリ名及びファイル名を短くすること。
イ 表示できるファイルの種類に制限があることに注意すること。
ウ 1行の文字数は全角8文字を基準とし、それにあわせた画面作りを心がけること。
エ 画像は横幅85ピクセル程度におさえること。
オ 背景色は白 (#FFFFFF) を基本とすること。
カ 色の使用にあたっては、カラー画面においてもモノクロ画面においても表示に支障がないよう、色のコントラストに配慮するとともに、色覚に障害のある人でも明確に識別できる配色とすること。
キ JavaやFlash、JavaScript 等の拡張機能は、全ての方式に対応したページを作成する場合には、使用しないこと。ただし、各端末に対応したページを個別に作成する場合は、この限りではない。
(2) 多くの携帯電話はデータ量に応じて課金されるため、文字、タグ等、データを必要最小限にするよう特に心がけること。
(3) 機種により表示機能・表示色数・表示領域等に差があることに配慮すること。

例として、HR 要素の太さは機種により異なるので注意すること。また、各携帯キャリアが独自に定義している絵文字は、使用しないこと。

(4) 実際に携帯電話やテキストブラウザで表示を確認すること。

≪携帯端末用の画面作成で利用できる要素等は、「参照ページ」参照≫


8 ページの移動について

サイトの構成を変更する場合には、従来の URL で引き続きアクセス可能とすること。 やむを得ずページを移動する際には、元のページから個別にリンクを張り、新しいページに案内するか、ディレクトリ単位で移動を行う場合は、ネットワーク主管課が提供する転送機能を使用し、まとめて転送設定を行うこと。

ファイル構成が大幅に変わり、まとめての転送が困難な場合でも、WEBサーバが備えるエラーメッセージカスタマイズ機能(ErrorDocument)を使用し、最低限区局のトップページに戻れるように設定すること。


9 WEB ページの作成を外部委託する場合の注意

WEB ページの作成を業者に委託する際は、委託仕様書にガイドライン本文及び本作成基準を添付し、遵守させること。