姫路市ホームページに関する技術的基準（第11版）

Transcription

1 姫 路 市 ホームページに 関 する 技 術 的 基 準 ( 第 11 版 ) 平 成 16 年 3 月 16 日 現 在 広 報 課 INDEX 1. 文 章 表 現 2. コンテンツの 基 本 方 針 3. 特 定 のブラウザに 依 存 するテクニックを 使 わない 4. フレームを 多 用 しない 5. 文 字 の 大 きさと 色 について 6. 機 種 依 存 文 字 を 使 わない 7. ページの 横 幅 に 注 意 してください 8. レイアウトについて 9. データ 量 に 注 意 してください 10. 画 像 の 使 用 について 11.キーワード 検 索 にヒットするページづくりを 12. 背 景 について 13. プラグインについて 14. CGIについて 15. サイトの 構 成 は 利 用 しやすさを 優 先 してください 16. サイト 内 のリンクは 相 対 パスで 17. サイト 内 のリンクの 確 認 18. サイト 内 のディレクトリ 構 成 19. フォルダ 名 ファイル 名 の 付 け 方 20. 各 課 からのお 知 らせに 戻 る リンクを 設 けてください 21. 各 所 属 のトップページへ 戻 る リンクを 設 けてください 22. ページの 内 容 を 明 確 にしてください 23. 制 作 / 更 新 年 月 日 有 効 期 限 を 表 示 してください 24. 問 い 合 わせ 先 を 表 示 してください 25. ダウンロードファイルの 注 意 点 26. 他 サイト 間 にリンクを 設 定 する 場 合 27. 目 の 見 えない 人 への 配 慮 28. 弱 視 の 人 への 配 慮

2 29. 手 足 の 不 自 由 な 人 への 配 慮 30. 外 国 人 向 けの 情 報 発 信 に 英 語 ページを 作 成 してください 31. アクセス 数 の 管 理 32. デジタルカメラ スキャナーについて 33. 文 字 化 けについて 33. データのバックアップ 35. データの 電 子 化 36. 更 新 にあたっての 注 意 37. 携 帯 端 末 用 (i モード 用 )ホームページの 作 成 方 法 38. 参 考 図 書 姫 路 市 ホームページは 公 共 のページです だれもが どのような 環 境 でも 同 じよう に 姫 路 市 ホームページが 提 供 するサービスを 利 用 できることが 大 切 です そこで 姫 路 市 ホームページに 含 まれる 各 課 室 のホームページを 制 作 する 皆 さんは 次 のこ とに 注 意 して 制 作 されるようお 願 いします 1. 文 章 表 現 文 書 は です ます 調 を 基 本 とし 表 現 用 語 などは 広 報 ひめじ に 準 じるものとしま す お 役 所 言 葉 を 避 け 内 容 を 分 かりやすく 伝 えるようにしてください 2. コンテンツの 基 本 方 針 テキスト 中 心 に 画 面 を 構 成 し 写 真 やイラストは 必 要 最 小 限 にとどめてください ビジ ュアル 優 先 のホームページよりも 提 供 する 情 報 内 容 に 重 点 をおいてください テキスト 中 心 に 構 成 することで データ 量 の 軽 減 画 面 展 開 のスピードアップ キーワ ード 検 索 への 対 応 読 み 上 げソフトを 使 った 視 覚 障 害 者 への 対 応 が 図 られます 3. 特 定 のブラウザに 依 存 するテクニックを 使 わない 情 報 政 策 課 が 整 備 したパソコンには NetscapeNavigator4.5 および InternetExplorer4.0 が 搭 載 されています 制 作 者 は 少 なくともこの 2 つのブラウザで 正 常 に 表 示 されることを 確 認 してください

3 (フォント 指 定 DynamicHTML Java JavaScript などの 使 用 は 避 けてください 複 雑 なスタイルシートも 現 時 点 では 使 用 を 控 えてください ) 4. フレームを 多 用 しない フレーム 未 対 応 のブラウザで 閲 覧 している 人 のことを 考 え なるべくフレームの 使 用 は 避 けてください やむをえずフレームを 使 用 する 場 合 は 2つまでとしてください こ の 場 合 スクロールするフレームは1つにし 他 はスクロールせずに 閲 覧 できるデザイ ンにしてください 5. 文 字 の 大 きさと 色 について 1. 文 字 サイズ 指 定 を 使 用 する 場 合 には お 年 寄 りや 弱 視 の 方 が 読 める よう あまり 小 さすぎる 指 定 を 避 けてください 同 じ 理 由 で 文 字 色 指 定 を 使 用 する 場 合 は 背 景 の 色 にとけ 込 むような 文 字 色 は 使 用 しないで ください 2. ブラウザで 一 般 にリンクを 表 す 文 字 色 である 青 緑 紫 赤 について は リンク 以 外 の 場 所 で 使 うのもあまり 適 切 ではありません 6. 機 種 依 存 文 字 を 使 わない 機 種 やOSが 異 なったり フォント 指 定 が 違 うと 表 示 できない 文 字 は 使 用 しないでくだ さい 制 作 者 は 文 字 の 表 示 について 複 数 のブラウザで 確 認 し 文 字 化 けなどをおこ さないように 注 意 してください 特 にワープロ(OASYS Word)などで 使 われる かっこ 付 き 数 字 漢 字 丸 付 き 数 字 半 角 カタカナ その 他 特 殊 記 号 は 使 用 しないでください 正 しく 表 示 されない 場 合 があ ります 機 種 依 存 文 字 の 詳 細 ( 下 記 のホームページなどを 参 考 に 作 成 )

4 ワード 文 書 をHTMLに 一 括 変 換 したときに 見 られる フォント 指 定 タグ( 例 えば <FONT FACE="MS 明 朝 " LANG="JA">など)は ブラウザによって 表 示 できない 場 合 があります データ 量 もむやみに 大 きくなりますので ワード 文 書 のHTML 一 括 変 換 は 望 ましくありません また ワード 文 書 やOASYS 文 書 を 直 接 ホームページビルダーに 読 み 込 むことがで きますが 特 殊 なタグや 命 令 文 が 多 数 付 加 されるので 避 けてください これらの 文 書 をホームページにするときは 一 旦 メモ 帳 に 貼 り 付 けるなどして テキストデータに してからホームページビルダーへ 貼 り 付 けてください 7. ページの 横 幅 に 注 意 してください 姫 路 市 ホームページは SVGA(800*600 ピクセル) 画 面 での 表 示 を 基 本 にしていま す 左 右 のスクロールは 見 にくいので 横 長 のページはなるべく 避 けてください 8. レイアウトについて 少 なくとも NetscapeNavigator および InternetExplorer の2つのブラウザで 表 示 を 確 認 し ブラウザ 画 面 を 左 右 上 下 に 伸 ばしたり 縮 めたりして レイアウトの 崩 れがないか を 確 認 してください また 文 字 の 配 置 の 崩 れにつながるので 空 白 文 字 を 使 用 して レイアウトを 整 えるこ とは 避 けてください なお ホームページビルダー どこでも 配 置 モード で 作 成 したページは ブラウザによ って レイアウトが 崩 れる 場 合 があります どこでも 配 置 モード は 使 わず 標 準 モ ード でページを 作 成 してください 9. データ 量 に 注 意 してください 利 用 者 がどのような 環 境 でもスムーズに 見 ることができるよう できるだけテキスト 主 体 のページにし 画 像 イラストなどは 必 要 最 低 限 にしてください 1 ページを 表 示 する ためのデータ 量 は テキストと 画 像 を 合 わせて 最 大 でも 100KB 以 下 できれば 60KB 以 下 を 目 安 としてください 詳 細 な 画 像 データなど 情 報 量 の 多 いものは 別 ページとし

5 その 容 量 を 記 載 してください 容 量 の 適 正 化 のため 写 真 は JPEG に イラストは GIF にするなど 最 適 なデータ 形 式 を 使 い 分 けてください 10. 画 像 の 使 用 について <img>タグで 画 像 を 使 用 する 場 合 <width><height> 属 性 (サイズ 指 定 )を 使 用 してスム ーズな 表 示 を 行 うとともに <alt> 属 性 を 使 用 し 画 像 を 読 み 込 まない 場 合 でも 代 替 テ キストが 表 示 されるようにしてください また 進 む 戻 る などのナビゲーションは 画 像 だけでなく 文 字 でも 選 択 ( 画 像 のみ の 場 合 は 代 替 テキストを 付 加 する)できるようにしてください 11. キーワード 検 索 にヒットするページ 作 りを 各 ページには 必 ずページの タイトル キーワード ページの 説 明 データを 埋 め 込 んでください この 記 述 がないと キーワード 検 索 にヒットしないことがあります 埋 め 込 むには HTML ソースの 先 頭 近 くにある <HEAD>~</HEAD>の 間 に 次 の3つのタグを 挿 入 し ます タイトル <TITLE> </TITLE> キーワード <META name="keywords" content=",, "> 複 数 の 場 合 は コンマで 区 切 ります ページの 説 明 <META name="description" content=" "> HTML ソースを 開 くには IE の 場 合 ページ 上 で 右 クリックし ソースの 表 示 を 選 ぶ ビルダーの 場 合 HTML ソース タブを 選 ぶ

6 12. 背 景 について 文 字 の 見 易 さを 第 一 番 に 考 えたシンプルな 背 景 にしてください 濃 い 色 の 背 景 複 雑 な 背 景 あまり 違 和 感 のある 色 どぎつい 配 色 文 字 が 読 みづらい 背 景 画 像 などの 使 用 を 避 けてください 一 般 的 に 黒 背 景 に 白 い 文 字 などの 反 転 表 示 も 望 ましくあり ません (ただし 視 覚 バリアフリーの 観 点 から 反 転 表 示 を 意 図 的 に 使 用 することは 構 いませ ん) 13. プラグインについて プラグインを 使 用 する 場 合 あまり 流 通 していないプラグインを 避 け できるだけ 多 く の 人 が 標 準 的 なパソコン 環 境 で 利 用 できるものにしてください また 利 用 者 がそのプラグインソフトを 入 手 できるよう 入 手 先 等 の 案 内 を 表 示 してくだ さい さらにプラグインを 利 用 できない 人 のために 代 替 表 示 を 行 うなどの 配 慮 も 必 要 です 14. CGIについて 姫 路 市 ホームページでは CGIの 使 用 を 限 定 しています 原 則 としてCGIを 使 わずに ページを 制 作 してください どうしても 必 要 で 使 用 する 場 合 には 広 報 課 と 協 議 の 上 各 課 の 責 任 で 使 用 していただくことになります 15. サイトの 構 成 は 利 用 しやすさを 優 先 してください サイトの 構 成 はできるだけ 利 用 しやすく 簡 潔 に また 階 層 はできるだけ 浅 くし 目 的 の 情 報 にすばやく 到 達 できるようにしてください できればインデックスページを 充 実 し 情 報 を 得 るのに 必 要 な 経 路 を 明 示 してください 16. サイト 内 のリンクは 相 対 パスで サイト 内 のリンクは 相 対 パスで 記 述 してください

7 17. サイト 内 のリンクの 確 認 サーバへの 登 録 に 先 立 って サイト 内 のリンクに 不 備 がないかを 十 分 確 認 してくださ い 18. サイト 内 のディレクトリ 構 成 1. 各 課 のページは 広 報 課 が 各 課 に 専 用 のフォルダを 割 り 当 てますので その 中 へ 保 存 してください 各 課 のフォルダ 内 には 必 要 に 応 じてサブフ ォルダを 作 成 することができます なお 各 課 専 用 フォルダの 名 称 は 各 課 前 を 使 用 します ( 例 えば 広 報 課 のメー ルアドレスは kouhou@city.himeji.hyogo.jp なので フォルダ 名 は kouhou となります) 2. 各 課 のトップページのファイルは 各 課 の 専 用 フォルダのルートに index.html の 名 称 で 作 成 してください 3. 下 記 ( 例 2)のように 情 報 を 整 理 したディレクトリ 構 成 にしてください ( 例 1)のようにした 場 合 ホームページの 規 模 が 大 きくなり ファイル 数 が 多 くなると 更 新 や 管 理 が 困 難 になります

8 19. フォルダ 名 ファイル 名 の 付 け 方 フォルダ 名 ファイル 名 は 半 角 のアルファベット( 小 文 字 )および 半 角 数 字 で 付 けて ください 日 本 語 は 使 えません 姫 路 市 ホームページはUNIXサーバを 使 用 していますので アルファベットの 大 文 字 と 小 文 字 を 区 別 します リンク 切 れなどのエラーを 防 ぐためにも アルファベットは 小 文 字 で 統 一 してください なお HTML ファイルの 拡 張 子 は.html としてください ファイル 名 を 付 けるときの 注 意 点 半 角 の 数 字 半 角 のアルファベット( 小 文 字 ) ハイフン- アンダーバー_のみを 使 う \( 円 マーク) /(スラッシュ) *(アスタリスク) :(コロン)などは 日 本 語 のファイル 名 は 使 えない 空 白 文 字 スペースは 使 えない 拡 張 子 を 付 ける 拡 張 子 以 外 でピリオドを 使 わない 各 課 のトップページのファイルは 各 課 の 専 用 フォルダのルートに index.html の 名 称 で 作 成 してください. また 英 語 版 を 作 成 する 場 合 english というホルダーを 作 り その 中 にデータを 収 め てください フォルダ 名 ファイル 名 を 小 文 字 に 変 換 するソフト(ダウンロードしてお 使 いください) 20. 各 課 からのお 知 らせに 戻 る リンクを 設 けてください 各 課 のトップページには 各 課 からのお 知 らせ のメニューページへ 戻 れるよう リン クを 設 けてください 各 課 のトップページから 各 課 からのお 知 らせ のメニューページへ 戻 る 場 合 相 対 パ スで 記 述 すると <a href="../info/index.html" target="_top">となります

9 21. 各 課 のトップページへ 戻 る リンクを 設 けてください サーチエンジンなどの 普 及 で ページの 途 中 から 訪 問 する 人 もいます 各 ページに 必 要 に 応 じて 各 課 のトップページへのリンクを 設 定 するようにしてください 少 なくとも ページの 中 に1つ 上 部 へのリンクは 必 要 です 22. ページの 内 容 を 明 確 にしてください 各 課 が 発 信 する 情 報 の 概 略 を 各 課 のトップページで 明 示 してください ここを 見 ると 全 体 の 内 容 が 大 まかに 把 握 できるようにしてください 23. 制 作 / 更 新 年 月 日 有 効 期 限 を 表 示 してください できるだけ 制 作 / 更 新 の 年 月 日 および いつまでその 文 書 が 有 効 なのかを 表 示 する ようにしてください 掲 載 内 容 に 有 効 期 限 がある 場 合 は 有 効 期 限 の 明 記 が 必 要 で す 24. 問 い 合 わせ 先 を 表 示 してください 利 用 者 がその 文 書 を 制 作 した 各 課 に 問 い 合 わせることができるよう 部 署 名 電 話 番 号 FAX 番 号 電 子 メールアドレス( 必 要 な 場 合 は 郵 便 番 号 所 在 地 も)を 表 示 してく ださい 25. ダウンロードファイルの 注 意 点 ホームページ 上 で 表 計 算 ソフト(Excel 等 )やワープロソフト(Word 等 )などのデータ のダウンロードサービスを 実 施 する 場 合 は ファイル 形 式 はできるだけ 汎 用 性 の 高 い ものにしてください また このようなファイル 形 式 をサーバへ 登 録 するときは 登 録 に 先 立 ってウィルスチ ェックを 必 ず 行 ってください データにウィルスが 付 加 されているおそれがあるときは 広 報 課 へ 連 絡 し 直 ちにホ ームページ 上 から 削 除 するとともにデータの 適 正 化 を 図 ってください

10 26. 他 サイト 間 にリンクを 設 定 する 場 合 姫 路 市 ホームページからリンクする 場 合 リンク 先 サイトは 公 的 な 機 関 団 体 に 限 っています この 場 合 必 ず<target= "_blank"> 属 性 を 使 用 し 姫 路 市 のホームページ 内 に 他 サイトのページを 表 示 すること のないよう 注 意 してください 他 サイトからリンク 依 頼 があった 場 合 リンク 元 ( 他 サイト)の 内 容 が 社 会 通 念 上 妥 当 なものであれば 公 的 な 機 関 団 体 に 限 らず 依 頼 に 応 じて 差 し 支 えありません この 場 合 原 則 として 市 トップページへのリ ンクとし フレーム 内 ではなく 独 立 したウィンドウで 表 示 されることを 条 件 に 許 諾 してく ださい リンク 依 頼 への 許 諾 文 例 (テキストファイル) 27. 目 の 見 えない 人 への 配 慮 目 の 見 えない 人 がホームページを 閲 覧 する 場 合 は テキストベースのブラウザと 音 声 読 み 上 げ 装 置 を 利 用 しています このため 絵 や 写 真 などテキスト 以 外 で 表 現 されて いる 部 分 を 文 字 で 伝 えるページ 作 りなどが 必 要 となります またそういったブラウザでは フレームやクリッカブルマップが 未 対 応 であったり 機 能 面 で 制 約 があることも 考 慮 する 必 要 があります 1. 各 ページのタイトルは 必 ず 付 けてください 2. 写 真 やイラストには 必 ず 代 替 文 字 を 3. リンクを 設 定 する 場 合 ボタンよりもテキストで 行 ってください 4. フレームは 使 用 しないか やむをえない 場 合 も 多 用 は 避 けるよ うに 5. クリッカブルマップについても 使 用 しないか また 使 用 する 場 合 においてもテキストによるリンクを 併 せて 設 けてください 6. PDF など HTML 以 外 の 物 を 使 用 する 場 合 においても 併 せて HTML によるテキストページを 用 意 してください 7. 内 容 に 関 する 問 い 合 わせを 電 話 やFAX 電 子 メールでも 受 け 付 けるようにしてください

11 28. 弱 視 の 人 への 配 慮 目 の 見 えにくい 人 色 の 識 別 が 困 難 な 人 のために 小 さな 文 字 や 絵 文 字 と 背 景 に 同 じ 様 な 色 を 使 ったり ぼかしを 入 れたコントラストのはっきりしない 文 章 やボタンなど は 使 用 しないようにしてください 1. 文 字 は 大 さく 色 はくっきり 読 みやすい 文 章 に 2. 文 字 色 と 背 景 色 はバランスを 考 え くっきり 見 やすいデザインに 3. ボタンとして 使 う 絵 はなるべく 大 きく また 絵 と 絵 の 間 隔 は 近 づ けすぎないように 4. ボタンの 中 の 文 字 は 背 景 色 と 近 い 色 は 使 用 せず くっきり 見 や すいデザインに 5. ボタンに 限 らず ぼかしを 入 れる 影 を 付 けると 言 ったテクニック は 極 力 使 用 しないようにしてください 6. 大 きく 見 やすいイメージを 心 がけてください 29. 手 足 の 不 自 由 な 人 への 配 慮 マウスの 細 かい 操 作 が 難 しい 人 もいることを 考 慮 したページ 作 りが 必 要 です 1. ボタンとして 使 う 絵 はなるべく 大 きく また 絵 と 絵 の 間 隔 は 近 づ けすぎないように 2. 次 のページに 進 む 戻 るといった 基 本 的 なリンク 機 能 を 設 ける 場 合 は できるだけ 一 定 の 場 所 にまとめるよう 配 置 してくださ い 30. 外 国 人 向 けの 情 報 発 信 に 英 語 ページを 作 成 してください 必 須 条 件 ではありませんが 外 国 人 を 対 象 に 情 報 を 発 信 する 必 要 がある 場 合 日 本 語 に 加 えて 英 語 のページを 作 成 してください 31. アクセス 数 の 管 理

12 各 課 ホームページのアクセス 数 などの 情 報 は 下 記 の URL で 公 開 しています また 下 記 の URL では ファイルごとのアクセス 数 を 月 単 位 で 計 算 し 表 示 します 各 課 ホームページのアクセス 数 は 各 課 で 定 期 的 に 記 録 を 残 してください アクセス 数 のデータは おおむね1 年 をめどに 保 存 され 一 定 の 期 間 を 過 ぎると 消 去 されるの でご 注 意 ください なおカウンターの 設 置 については 現 在 のところ 一 部 の 博 物 館 美 術 館 施 設 以 外 は 認 めていません 今 後 のホームページの 充 実 に 応 じて どのような 場 合 に 設 置 すべき か 基 準 を 定 めていきます 32. デジタルカメラ スキャナーについて 必 要 な 場 合 デジタルカメラは 広 報 課 のものを 貸 し 出 します また 広 報 課 にスキャナ ー 及 び 画 像 処 理 に 必 要 なアプリケーションを 設 置 していますので ご 利 用 ください 33. 文 字 化 けについて できあがった HTML ファイルをブラウザで 表 示 させると 文 章 全 体 が 文 字 化 けを 起 こ すことがあります ブラウザ 側 で 文 字 表 示 のエンコードを 行 い 文 字 化 けを 解 消 するこ ともできますが HTML 文 書 自 体 にデフォルトで 文 字 コードをシフト JIS に 指 定 するこ とができます 指 定 する 場 合 <title>タグの 次 の 行 に 下 の 一 文 を 入 れてください <meta http-equiv="content-type" content="text/html;charset=shift_jis"> 34. データのバックアップ 不 慮 の 事 故 に 備 えて 各 課 ホームページのデータは 必 ず 各 課 で 定 期 的 にバックアッ プを 取 っておいてください 35. データの 電 子 化 ホームページの 充 実 のため 各 課 で 保 有 するデータの 電 子 化 を 進 めてください ま た 今 後 新 たに 印 刷 物 を 作 成 する 際 は その 電 子 データ(PDF データをはじめ テキ

13 ストや 画 像 データ)も 納 品 してもらい ホームページで 活 用 することも 検 討 してくださ い 36. 更 新 にあたっての 注 意 ホームページを 更 新 する 場 合 は 必 ずFTPでダウンロードしたものを 更 新 してください ブラウザから 名 前 を 付 けて 保 存 したファイルを 更 新 した 場 合 リンク 構 造 が 崩 れる ことがあるので 注 意 してください なお 必 要 のないデータや 古 くなったデータはサーバから 削 除 してください リンクを 張 っていなくても キーワード 検 索 やアドレスを 打 ち 込 むと 表 示 されてしまいます 37. 携 帯 端 末 用 (i モード 用 )ホームページの 作 成 方 法 各 課 のホームページ 内 に i モードなどインターネットに 接 続 している 携 帯 端 末 向 けの ホームページを 作 成 していただけます パソコン 用 のホームページとは 基 準 が 異 な りますので 作 成 される 場 合 は 参 照 してください 携 帯 端 末 用 (i モード 用 )ホームページの 作 成 について 38. 参 考 図 書 など ホームページの 作 成 更 新 維 持 管 理 などについて 分 かりやすく 説 明 した 図 書 を 紹 介 します ホームページビルダーについて ホームページビルダー ハンドブック ( 発 行 株 式 会 社 ディー アート) HTMLの 文 法 構 文 について カラー 版 HTMLタグ 辞 典 ( 発 行 株 式 会 社 翔 泳 社 ) ホームページの 企 画 から 制 作 管 理 運 営 まで ウェブサイト 制 作 のワークフローと 基 礎 技 術 ( 発 行 株 式 会 社 技 術 評 論 舎 社 )

14 より 見 やすく 利 用 しやすいホームページへの 指 針 ウェブ ユーザビリティ ルールブック 顧 客 を 増 やすサイト 設 計 ( 発 行 株 式 会 社 インプレス) サイトの 管 理 について ウェブデザイン ハンドブック ( 発 行 エーアイ 出 版 株 式 会 社 ) 高 齢 者 障 害 者 などが 利 用 しやすいホームページについて 総 務 省 制 作 ~ 高 齢 者 障 害 者 等 が 利 用 しやすいホームページの 普 及 に 向 けて~ (850KB パワーポイントデータ パワーポイントが 入 っているパソコンでご 覧 ください) 総 務 省 アクセシビリティ 実 証 実 験 ホームページ ページのトップへ 戻 る この 文 書 で 上 記 のとおり 示 した 基 準 は 必 要 に 応 じて 見 直 しを 行 います この 文 書 は 現 時 点 での 基 準 を 示 すものです 戻 る