仙台市ホームページ作成ガイドライン（HP作成事業者対象）

◆はじめに
◆ページの設計（デザイン）
◆アクセシビリティへの配慮
◆使いやすいページに
◆その他の留意事項

はじめに

2004年6月にウェブサイト作成の際のウェブアクセシビリティ（高齢の方や障害のある方など誰にでも無理なく、等しく情報が伝わるようにすること）規格がJIS（日本工業規格）規格化され「ウェブコンテンツJIS」として発効しました。
これにより、今後地方公共団体はウェブサイト作成の際、JIS規格を尊重して作成することが求められます。（工業標準化法第67条-別ウインドウで開きます）
※JIS原文は日本規格協会のホームページ（別ウインドウで開きます）から入手できます。

仙台市からウェブサイト作成を請け負った事業者の方は、JIS規格を尊重した上で、以下に定める仙台市ホームページ作成ガイドライン（HP作成事業者対象）に基づいて作成するようにして下さい。

▲目次へ戻る

ページの設計（デザイン）

（1）ページ幅は、固定の場合700ピクセル程度、可変の場合は80％程度にしてください。

印刷した場合、A４縦サイズに収まります。
・ブラウザの「ブックマーク」や「お気に入り」を表示させても横スクロールになりません。
・左寄せ、センタリングどちらでもかまいませんが、左右に空白があるセンタリングの方が見やすくなります。

（2）フレーム構造（ブラウザで左右や上下に、いくつかのページに分けて表示する構造）にしないでください。

・古いバージョンのブラウザ等では表示できない場合があります。
・視覚障害のある方などが使用する音声ブラウザでは、それぞれのウィンドウの行き来が難しくなります｡

（3） 1ページの長さをあまり長くしないでください｡

・ページが長いと、下のほうの情報が読みにくく（読まれなく）なります。
・長くてもA4換算で3ページ程度にし、その場合は、先頭に目次を付け、本文と目次が行き来できるようにしてください。

（4）機種依存文字（丸付き数字、ローマ数字など）や半角カタカナを使用しないでください｡

・パソコンの機種やブラウザによっては文字化けの原因となります。
・機種依存文字の例
機種依存文字の例。丸数字、ギリシャ数字、組み文字など。

（5）背景色と文字色は、区別しやすい色の組み合わせにしてください。

・色覚に障害がある方や高齢の方などは、色の識別が困難な場合があります。
・派手な色使いや、模様の入った背景画像も目が疲れますので注意が必要です｡
※カラーコントラストチェッカーで実際の見え方を確認しましょう
http://www.i-create.jp/accessibility/color-checker.shtml（別ウインドウで開きます）

（6）ページのデザイン・レイアウトはできるだけスタイルシートを用いて行うようにしてください。

▲目次へ戻る

アクセシビリティへの配慮

「ウェブ・アクセシビリティ」＝高齢の方や障害のある方など誰にでも無理なく、等しく情報が伝わるように

（1）写真やイラストなどの画像には、適切な説明文（代替テキスト）を入れてください｡

・画像を表示しないで見ている利用者や、音声読み上げブラウザの利用者にも、その画像の意味が伝わるようにしてください。
・イメージ画像やアイコンなど、意味を持たない画像には不要です｡その場合、カラの代替テキストを入れてください。（「alt=” ”」）

（2）動画や音声だけでの情報提供はしないでください｡

・視覚や聴覚に障害のある方にも内容が伝わるように、適切な説明文や同じ内容のテキストも掲載してください｡

（3）特定のアプリケーションに依存したファイルだけでの提供はしないでください。

・計画書などページが多いファイルをPDFで掲載する場合は、概要をHTMLファイルでも掲載してください。
・ワードやエクセルも、すべての人が使っているわけではありません｡PDFなどほかの提供手段も併用してください。

（4）文字や画像で色に頼った表現をしないでください｡

・「赤い文字をクリック」や「青い部分が変更点です」では、視覚に障害のある方はわかりません｡

（5）文字サイズの固定やフォント指定をしないでください。

・文字サイズを絶対単位で指定すると、利用者が文字の大きさを変えられなくなります。
・フォントを指定するとそのフォントを持っていないパソコン等では正常に表示されない場合があります。
・画像も拡大できないので、画像の文字は大きく表示してください。

（6）リンク先がわかるような表現にしてください。

・「詳しくはこちらをご覧ください」や「ここをクリック」では、リンク先に何があるかわかりません。「詳しくは事業計画（本編）をご覧ください」のようにしてください。

（7）体裁を整えるために、単語内に空白を入れたり、文章の途中で強制改行しないでください｡

・音声ブラウザで、正しく読み上げられない場合があります｡（「場　所」→「ば　ところ」）
・文字の表示サイズによっては、レイアウトが崩れます。

（8）文章や画像が点滅したり、動いたりするものは、使用しないでください｡

・認識や視覚に障害のある方が、その動きに対応できない場合があります｡

（9）テキストリンクが続く場合は、垂直棒等（「｜」、「＞」）で区切りを入れてください｡

・リンクが近すぎると、手足が不自由な方などは、リンクをうまくクリックできません｡

▲目次へ戻る

使いやすいページに

「ユーザビリティ」と「ユニバーサルデザイン」＝誰もが使いやすく、ホームページ内で迷子にならないように

（1）サイトのトップページには、仙台市の「ヘッダー」と「フッター」をつけてください｡

▲ヘッダー

▲フッター

・サイト内の深いページからも、2クリックで仙台市のトップページに戻れるようにしてください。
※「深いページ」→「サイトのトップページ」→「市のトップページ」
※仙台市WEBサーバ（http://www.city.sendai.jp/）の外のサーバにアップするデータを作成する際は上記仙台市統一のヘッダー・フッターをつける必要はありませんが、そのサイト内で統一したヘッダー・フッターを必要に応じてつけてください。

（2）情報の発信者（ホームページの管理者）を明確にしましょう。

・サイトのトップページに、問い合わせ先として「部署名」「電話・FAX」「eメールアドレス」を記載してください。

（3）ページごとに適切なタイトルと「仙台市」を入れてください。

タイトルバー。適切なページタイトルの例。

・ページの内容がタイトルから判断しやすくなります｡
・サイトの途中から見た方にも、仙台市のページとわかります。

（4）ページが複数になる場合は、最初のページに「目次」を載せ､それぞれのページで行き来できるようにしてください｡

・「次へ」「戻る」「目次へ」など、サイト内で共通のナビゲーションを付けてください。

（5） 1ページあたりのデータ容量は原則として100KB以内（画像含む）で作成してください。また、PDFなど、HTMLファイル以外へのリンクには、その旨とファイル容量を記載してください｡

・これから見ようとするファイルの種類と容量を知らせることにより、利用者がアクセスしやすくなります｡
※300KBのファイルを一般回線（56kbps）の方が見ようとした場合、約1分かかります。

▲目次へ戻る

その他の留意事項

（１）複数のブラウザ（Internet Explorer、Netscape Navigator、Operaなど）で表示できることを確認してください。

（２）各課のディレクトリ（フォルダー）名は「局名／課名／コンテンツ名／ファイル名」で構成されます｡コンテンツ名やファイル名は「英数半角小文字」で８文字程度にしてください。

・例：総務局広報課にある市長記者会見のインデックスページ
/soumu/kouhou/press/index.html
・ファイル名はローマ字の場合、ヘボン式を使用してください｡

（３） HTMLファイルの拡張子は「html」にしてください。

・その他のファイルの拡張子も英数小文字にしてください｡（「pdf」「doc」など）

（４）文法的に間違いのないHTMLファイルを作成してください｡重大な間違いがあると、正しく表示できない場合があります｡

・ Another HTML-lint gatewayのサイトなどで確認してください｡
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html（別ウインドウで開きます）

（５）特定のソフトウェア（プラグイン）に依存したファイルは、なるべく避けてください｡

・ FlashやQuick Timeなどを使用する場合は、広報課へご相談ください。

（６）ダイナミックHTML、アプレット（Java、Java Script等）は利用者がJava等の環境設定を無効にしても、操作に支障がないように作成してください｡

（７）アクセスカウンターやメールフォームを使用したい場合は、広報課へご相談ください｡

（８）同一サーバー内のリンクは、相対パスで指定して、同じウィンドウに表示させてください｡

・外部サーバーへのリンクは、新しいウィンドウで表示させてください｡その際は（別ウインドウで開きます）等明記してください。

（９）その他、具体的な内容については「ウェブアクセシビリティ確保に向けての目標」をご覧ください

http://www.city.sendai.jp/soumu/kouhou/web-access/sendai-shishin.html

▲目次へ戻る

ホームページの作成ガイドラインについての問い合わせは
政策調整局広報課
電話：022-214-1143
FAX：022-211-1921
Eメール：som001020＠city.sendai.jp

各種契約事務についての問い合わせは
財政局契約課
電話：022-214-8124
FAX：022-214-8110
Eメール：zai003030@city.sendai.jp

仙台市ホームページ作成ガイドライン（HP作成事業者対象）

ページの設計（デザイン）

（1） ページ幅は、固定の場合700ピクセル程度、可変の場合は80％程度にしてください。

（2） フレーム構造（ブラウザで左右や上下に、いくつかのページに分けて表示する構造）にしないでください。

（3） 1ページの長さをあまり長くしないでください｡

（4） 機種依存文字（丸付き数字、ローマ数字など）や半角カタカナを使用しないでください｡

（5） 背景色と文字色は、区別しやすい色の組み合わせにしてください。

（6）ページのデザイン・レイアウトはできるだけスタイルシートを用いて行うようにしてください。

アクセシビリティへの配慮

「ウェブ・アクセシビリティ」＝高齢の方や障害のある方など誰にでも無理なく、等しく情報が伝わるように

（1） 写真やイラストなどの画像には、適切な説明文（代替テキスト）を入れてください｡

（2） 動画や音声だけでの情報提供はしないでください｡

（3） 特定のアプリケーションに依存したファイルだけでの提供はしないでください。

（4） 文字や画像で色に頼った表現をしないでください｡

（5） 文字サイズの固定やフォント指定をしないでください。

（6） リンク先がわかるような表現にしてください。

（7） 体裁を整えるために、単語内に空白を入れたり、文章の途中で強制改行しないでください｡

（8） 文章や画像が点滅したり、動いたりするものは、使用しないでください｡

（9） テキストリンクが続く場合は、垂直棒等（「｜」、「＞」）で区切りを入れてください｡

使いやすいページに

「ユーザビリティ」と「ユニバーサルデザイン」＝誰もが使いやすく、ホームページ内で迷子にならないように

（1） サイトのトップページには、仙台市の「ヘッダー」と「フッター」をつけてください｡

（2） 情報の発信者（ホームページの管理者）を明確にしましょう。

（3） ページごとに適切なタイトルと「仙台市」を入れてください。

（4） ページが複数になる場合は、最初のページに「目次」を載せ､それぞれのページで行き来できるようにしてください｡

（5） 1ページあたりのデータ容量は原則として100KB以内（画像含む）で作成してください。また、PDFなど、HTMLファイル以外へのリンクには、その旨とファイル容量を記載してください｡

その他の留意事項

（１） 複数のブラウザ（Internet Explorer、Netscape Navigator、Operaなど）で表示できることを確認してください。

（２） 各課のディレクトリ（フォルダー）名は「局名／課名／コンテンツ名／ファイル名」で構成されます｡コンテンツ名やファイル名は「英数半角小文字」で８文字程度にしてください。

（３） HTMLファイルの拡張子は「html」にしてください。

（４） 文法的に間違いのないHTMLファイルを作成してください｡重大な間違いがあると、正しく表示できない場合があります｡

（５） 特定のソフトウェア（プラグイン）に依存したファイルは、なるべく避けてください｡

（６） ダイナミックHTML、アプレット（Java、Java Script等）は利用者がJava等の環境設定を無効にしても、操作に支障がないように作成してください｡

（７） アクセスカウンターやメールフォームを使用したい場合は、広報課へご相談ください｡

（８） 同一サーバー内のリンクは、相対パスで指定して、同じウィンドウに表示させてください｡

（９） その他、具体的な内容については「ウェブアクセシビリティ確保に向けての目標」をご覧ください

（1）ページ幅は、固定の場合700ピクセル程度、可変の場合は80％程度にしてください。

（2）フレーム構造（ブラウザで左右や上下に、いくつかのページに分けて表示する構造）にしないでください。

（4）機種依存文字（丸付き数字、ローマ数字など）や半角カタカナを使用しないでください｡

（5）背景色と文字色は、区別しやすい色の組み合わせにしてください。

（1）写真やイラストなどの画像には、適切な説明文（代替テキスト）を入れてください｡

（2）動画や音声だけでの情報提供はしないでください｡

（3）特定のアプリケーションに依存したファイルだけでの提供はしないでください。

（4）文字や画像で色に頼った表現をしないでください｡

（5）文字サイズの固定やフォント指定をしないでください。

（6）リンク先がわかるような表現にしてください。

（7）体裁を整えるために、単語内に空白を入れたり、文章の途中で強制改行しないでください｡

（8）文章や画像が点滅したり、動いたりするものは、使用しないでください｡

（9）テキストリンクが続く場合は、垂直棒等（「｜」、「＞」）で区切りを入れてください｡

（1）サイトのトップページには、仙台市の「ヘッダー」と「フッター」をつけてください｡

（2）情報の発信者（ホームページの管理者）を明確にしましょう。

（3）ページごとに適切なタイトルと「仙台市」を入れてください。

（4）ページが複数になる場合は、最初のページに「目次」を載せ､それぞれのページで行き来できるようにしてください｡

（１）複数のブラウザ（Internet Explorer、Netscape Navigator、Operaなど）で表示できることを確認してください。

（２）各課のディレクトリ（フォルダー）名は「局名／課名／コンテンツ名／ファイル名」で構成されます｡コンテンツ名やファイル名は「英数半角小文字」で８文字程度にしてください。

（４）文法的に間違いのないHTMLファイルを作成してください｡重大な間違いがあると、正しく表示できない場合があります｡

（５）特定のソフトウェア（プラグイン）に依存したファイルは、なるべく避けてください｡

（６）ダイナミックHTML、アプレット（Java、Java Script等）は利用者がJava等の環境設定を無効にしても、操作に支障がないように作成してください｡

（７）アクセスカウンターやメールフォームを使用したい場合は、広報課へご相談ください｡

（８）同一サーバー内のリンクは、相対パスで指定して、同じウィンドウに表示させてください｡

（９）その他、具体的な内容については「ウェブアクセシビリティ確保に向けての目標」をご覧ください