姫路市ホームページに関する技術的基準

別 紙 5 姫 路 市 ホームページに 関 する 技 術 的 基 準 ( 第 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. 弱 視 の 人 への 配 慮 29. 手 足 の 不 自 由 な 人 への 配 慮 30. 外 国 人 向 けの 情 報 発 信 に 英 語 ページを 作 成 してください 31. アクセス 数 の 管 理 32. デジタルカメラ スキャナーについて 33. 文 字 化 けについて 33. データのバックアップ 35. データの 電 子 化 36. 更 新 にあたっての 注 意 37. 携 帯 端 末 用 (iモード 用 )ホームページの 作 成 方 法 38. 参 考 図 書 姫 路 市 ホームページは 公 共 のページです だれもが どのような 環 境 でも 同 じように 姫 路 市 ホームページが 提 供 するサービスを 利 用 できることが 大 切 です そこで 姫 路 市 ホームページに 含 まれる 各 課 室 のホームページを 制 作 する 皆 さんは 次 のこと

に 注 意 して 制 作 されるようお 願 いします 1. 文 章 表 現 文 書 は です ます 調 を 基 本 とし 表 現 用 語 などは 広 報 ひめじ に 準 じ るものとします お 役 所 言 葉 を 避 け 内 容 を 分 かりやすく 伝 えるようにし てください 2. コンテンツの 基 本 方 針 テキスト 中 心 に 画 面 を 構 成 し 写 真 やイラストは 必 要 最 小 限 にとどめてく ださい ビジュアル 優 先 のホームページよりも 提 供 する 情 報 内 容 に 重 点 をおいてください テキスト 中 心 に 構 成 することで データ 量 の 軽 減 画 面 展 開 のスピードア ップ キーワード 検 索 への 対 応 読 み 上 げソフトを 使 った 視 覚 障 害 者 への 対 応 が 図 られます 3. 特 定 のブラウザに 依 存 するテクニックを 使 わない 情 報 政 策 課 が 整 備 したパソコンには NetscapeNavigator4.5および InternetExplorer4.0が 搭 載 されています 制 作 者 は 少 なくともこの2つの ブラウザで 正 常 に 表 示 されることを 確 認 してください (フォント 指 定 DynamicHTML Java JavaScriptなどの 使 用 は 避 けてくだ さい 複 雑 なスタイルシートも 現 時 点 では 使 用 を 控 えてください ) 4. フレームを 多 用 しない フレーム 未 対 応 のブラウザで 閲 覧 している 人 のことを 考 え なるべくフレー ムの 使 用 は 避 けてください やむをえずフレームを 使 用 する 場 合 は 2つ までとしてください この 場 合 スクロールするフレームは1つにし 他 はス クロールせずに 閲 覧 できるデザインにしてください 5. 文 字 の 大 きさと 色 について 1. 文 字 サイズ 指 定 を 使 用 する 場 合 には お 年 寄 りや 弱 視 の 方 が 読 めるよう あま り 小 さすぎる 指 定 を 避 けてください 同 じ 理 由 で 文 字 色 指 定 を 使 用 する 場 合 は 背 景 の 色 にとけ 込 むような 文 字 色 は 使 用 しないでください 2. ブラウザで 一 般 にリンクを 表 す 文 字 色 である 青 緑 紫 赤 については リンク 以 外 の 場 所 で 使 うのもあまり 適 切 ではありません 6. 機 種 依 存 文 字 を 使 わない

機 種 やOSが 異 なったり フォント 指 定 が 違 うと 表 示 できない 文 字 は 使 用 し ないでください 制 作 者 は 文 字 の 表 示 について 複 数 のブラウザで 確 認 し 文 字 化 けなどをおこさないように 注 意 してください 特 にワープロ(OASYS Word)などで 使 われる かっこ 付 き 数 字 漢 字 丸 付 き 数 字 半 角 カタカナ その 他 特 殊 記 号 は 使 用 しないでください 正 しく 表 示 されない 場 合 があります 機 種 依 存 文 字 の 詳 細 ( 下 記 のホームページなどを 参 考 に 作 成 ) http://www.meiji.ac.jp/homepage/knowhow/code/code.html http://apex.wind.co.jp/tetsuro/izonmoji/ http://hp.vector.co.jp/authors/va011700/moji/code00.htm ワード 文 書 をHTMLに 一 括 変 換 したときに 見 られる フォント 指 定 タグ( 例 えば <FONT FACE="MS 明 朝 " LANG="JA">など)は ブラウザによっ て 表 示 できない 場 合 があります データ 量 もむやみに 大 きくなりますの で ワード 文 書 のHTML 一 括 変 換 は 望 ましくありません また ワード 文 書 やOASYS 文 書 を 直 接 ホームページビルダーに 読 み 込 むことができますが 特 殊 なタグや 命 令 文 が 多 数 付 加 されるので 避 け てください これらの 文 書 をホームページにするときは 一 旦 メモ 帳 に 貼 り 付 けるなどして テキストデータにしてからホームページビルダーへ 貼 り 付 けてください 7. ページの 横 幅 に 注 意 してください 姫 路 市 ホームページは SVGA(800*600ピクセル) 画 面 での 表 示 を 基 本 にしています 左 右 のスクロールは 見 にくいので 横 長 のページはなるべ く 避 けてください 8. レイアウトについて 少 なくともNetscapeNavigatorおよびInternetExplorerの2つのブラウザで 表 示 を 確 認 し ブラウザ 画 面 を 左 右 上 下 に 伸 ばしたり 縮 めたりして レイ アウトの 崩 れがないかを 確 認 してください また 文 字 の 配 置 の 崩 れにつながるので 空 白 文 字 を 使 用 して レイアウト を 整 えることは 避 けてください なお ホームページビルダー どこでも 配 置 モード で 作 成 したページは ブラウザによって レイアウトが 崩 れる 場 合 があります どこでも 配 置 モ ード は 使 わず 標 準 モード でページを 作 成 してください 9. データ 量 に 注 意 してください 利 用 者 がどのような 環 境 でもスムーズに 見 ることができるよう できるだけ テキスト 主 体 のページにし 画 像 イラストなどは 必 要 最 低 限 にしてくださ い 1ページを 表 示 するためのデータ 量 は テキストと 画 像 を 合 わせて 最 大 でも100KB 以 下 できれば60KB 以 下 を 目 安 としてください 詳 細 な 画 像

データなど 情 報 量 の 多 いものは 別 ページとし その 容 量 を 記 載 してくださ い 容 量 の 適 正 化 のため 写 真 は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ソース タブを 選 ぶ 12. 背 景 について 文 字 の 見 易 さを 第 一 番 に 考 えたシンプルな 背 景 にしてください 濃 い 色 の 背 景 複 雑 な 背 景 あまり 違 和 感 のある 色 どぎつい 配 色 文 字 が 読 み づらい 背 景 画 像 などの 使 用 を 避 けてください 一 般 的 に 黒 背 景 に 白 い 文 字 などの 反 転 表 示 も 望 ましくありません (ただし 視 覚 バリアフリーの 観 点 から 反 転 表 示 を 意 図 的 に 使 用 するこ とは 構 いません) 13. プラグインについて プラグインを 使 用 する 場 合 あまり 流 通 していないプラグインを 避 け でき

るだけ 多 くの 人 が 標 準 的 なパソコン 環 境 で 利 用 できるものにしてください また 利 用 者 がそのプラグインソフトを 入 手 できるよう 入 手 先 等 の 案 内 を 表 示 してください さらにプラグインを 利 用 できない 人 のために 代 替 表 示 を 行 うなどの 配 慮 も 必 要 です 14. CGIについて 姫 路 市 ホームページでは CGIの 使 用 を 限 定 しています 原 則 としてCGI を 使 わずにページを 制 作 してください どうしても 必 要 で 使 用 する 場 合 に は 広 報 課 と 協 議 の 上 各 課 の 責 任 で 使 用 していただくことになります 15. サイトの 構 成 は 利 用 しやすさを 優 先 してください サイトの 構 成 はできるだけ 利 用 しやすく 簡 潔 に また 階 層 はできるだけ 浅 くし 目 的 の 情 報 にすばやく 到 達 できるようにしてください できればイン デックスページを 充 実 し 情 報 を 得 るのに 必 要 な 経 路 を 明 示 してください 16. サイト 内 のリンクは 相 対 パスで サイト 内 のリンクは 相 対 パスで 記 述 してください 17. サイト 内 のリンクの 確 認 サーバへの 登 録 に 先 立 って サイト 内 のリンクに 不 備 がないかを 十 分 確 認 してください 18. サイト 内 のディレクトリ 構 成 1. 各 課 のページは 広 報 課 が 各 課 に 専 用 のフォルダを 割 り 当 てますので その 中 へ 保 存 してください 各 課 のフォルダ 内 には 必 要 に 応 じてサブフォルダを 作 成 す ることができます なお 各 課 専 用 フォルダの 名 称 は 各 課 のメールアドレスの@ から 前 を 使 用 します ( 例 えば 広 報 課 のメールアドレスは kouhou@city.himeji.hyogo.jpなので フォルダ 名 はkouhouとなります) 2. 各 課 のトップページのファイルは 各 課 の 専 用 フォルダのルートにindex.htmlの 名 称 で 作 成 してください 3. 下 記 ( 例 2)のように 情 報 を 整 理 したディレクトリ 構 成 にしてください ( 例 1)の ようにした 場 合 ホームページの 規 模 が 大 きくなり ファイル 数 が 多 くなると 更 新 や 管 理 が 困 難 になります

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

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

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

です 1. ボタンとして 使 う 絵 はなるべく 大 きく また 絵 と 絵 の 間 隔 は 近 づけす ぎないように 2. 次 のページに 進 む 戻 るといった 基 本 的 なリンク 機 能 を 設 ける 場 合 は できるだけ 一 定 の 場 所 にまとめるよう 配 置 してください 30. 外 国 人 向 けの 情 報 発 信 に 英 語 ページを 作 成 してください 必 須 条 件 ではありませんが 外 国 人 を 対 象 に 情 報 を 発 信 する 必 要 がある 場 合 日 本 語 に 加 えて 英 語 のページを 作 成 してください 31. アクセス 数 の 管 理 各 課 ホームページのアクセス 数 などの 情 報 は 下 記 のURLで 公 開 してい ます http://www.city.himeji.hyogo.jp/webalizer/ また 下 記 のURLでは ファイルごとのアクセス 数 を 月 単 位 で 計 算 し 表 示 し ます http://www.city.himeji.hyogo.jp/accesslog/ 各 課 ホームページのアクセス 数 は 各 課 で 定 期 的 に 記 録 を 残 してくださ い アクセス 数 のデータは おおむね1 年 をめどに 保 存 され 一 定 の 期 間 を 過 ぎると 消 去 されるのでご 注 意 ください なおカウンターの 設 置 については 現 在 のところ 一 部 の 博 物 館 美 術 館 施 設 以 外 は 認 めていません 今 後 のホームページの 充 実 に 応 じて どのよ うな 場 合 に 設 置 すべきか 基 準 を 定 めていきます 32. デジタルカメラ スキャナーについて 必 要 な 場 合 デジタルカメラは 広 報 課 のものを 貸 し 出 します また 広 報 課 にスキャナー 及 び 画 像 処 理 に 必 要 なアプリケーションを 設 置 していますの で ご 利 用 ください 33. 文 字 化 けについて できあがったHTMLファイルをブラウザで 表 示 させると 文 章 全 体 が 文 字 化 けを 起 こすことがあります ブラウザ 側 で 文 字 表 示 のエンコードを 行 い 文 字 化 けを 解 消 することもできますが HTML 文 書 自 体 にデフォルトで 文 字 コードをシフトJISに 指 定 することができます 指 定 する 場 合 <title>タグ の 次 の 行 に 下 の 一 文 を 入 れてください <meta http-equiv="content-type" content="text/html;charset=shift_jis">

34. データのバックアップ 不 慮 の 事 故 に 備 えて 各 課 ホームページのデータは 必 ず 各 課 で 定 期 的 にバックアップを 取 っておいてください 35. データの 電 子 化 ホームページの 充 実 のため 各 課 で 保 有 するデータの 電 子 化 を 進 めて ください また 今 後 新 たに 印 刷 物 を 作 成 する 際 は その 電 子 データ(PDF データをはじめ テキストや 画 像 データ)も 納 品 してもらい ホームページ で 活 用 することも 検 討 してください 36. 更 新 にあたっての 注 意 ホームページを 更 新 する 場 合 は 必 ずFTPでダウンロードしたものを 更 新 してください ブラウザから 名 前 を 付 けて 保 存 したファイルを 更 新 した 場 合 リンク 構 造 が 崩 れることがあるので 注 意 してください なお 必 要 のないデータや 古 くなったデータはサーバから 削 除 してくださ い リンクを 張 っていなくても キーワード 検 索 やアドレスを 打 ち 込 むと 表 示 されてしまいます 37. 携 帯 端 末 用 (iモード 用 )ホームページの 作 成 方 法 各 課 のホームページ 内 に iモードなどインターネットに 接 続 している 携 帯 端 末 向 けのホームページを 作 成 していただけます パソコン 用 のホーム ページとは 基 準 が 異 なりますので 作 成 される 場 合 は 参 照 してください 携 帯 端 末 用 (iモード 用 )ホームページの 作 成 について 38. 参 考 図 書 など ホームページの 作 成 更 新 維 持 管 理 などについて 分 かりやすく 説 明 した 図 書 を 紹 介 します ホームページビルダーについて ホームページビルダー ハンドブック ( 発 行 株 式 会 社 ディー アート) HTMLの 文 法 構 文 について カラー 版 HTMLタグ 辞 典 ( 発 行 株 式 会 社 翔 泳 社 ) ホームページの 企 画 から 制 作 管 理 運 営 まで ウェブサイト 制 作 のワークフローと 基 礎 技 術 ( 発 行 株 式 会 社 技 術 評 論 舎 社 ) より 見 やすく 利 用 しやすいホームページへの 指 針 ウェブ ユーザビリティ ルールブック 顧 客 を 増 やすサイト 設 計 ( 発 行

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