中津川市役所

文字色

メニュー

知りたい情報を検索する

ホームページ作成スタイルガイドライン

(最終更新:2020年02月13日) 印刷印刷ページ

本ページは、中津川市の公式ウェブサイトを構成するホームページの記事を作成する際に参照するスタイルガイドラインです。(2020年2月14日 Rev.1.3)

 

スタイルガイド一覧
分類ガイドラインの内容JIS X8341-3基準
タイトル 記事のタイトルのつけかた 2.4.2 A
本文 見出しの付け方 1.3.1 A
リストの付け方 1.3.1 A
避けたい文章の書き方
記事のレイアウトについて 1.3.1 A
文章の改行について 1.3.1 A
文字 文字の修飾(太字・アンダーライン、文字色など) 1.3.1、1,4.1 A
文字のサイズ 1.4.4 AA
文字の色 1.4.3 AA
文字の全角・半角の使い分け 1.3.1 A
文中に記号を使う場合の注意 1.3.1、1.3.3 A
機種依存文字(環境依存文字)は使わない
単語の途中にスペースを入れない 1.3.1 A
日付、時間、電話番号の書き方
単位の書き方 1.3.1 A
表・テーブル 表は「表の挿入」で作成する 1.3.1 A
表の列数とサイズ 1.3.1 A
表に見出し、注釈をつける 1.3.1 A
表のタイトル行は「ヘッダー」を指定する 1.3.1 A
画像・音声・動画 挿入する画像のサイズ
代替テキスト・キャプション・音声ガイドを設定する 1.1.1~1.2.2 A
グラフの書き方 1.4.1 A
チラシや資料を画像だけで伝えない 1.1.1 A
リンク リンクするファイルをアップロードする際のファイル名のつけ方
リンクするテキストの書き方 2.4.4 A
リンク先ウインドウの設定
全般 担当課・連絡先の設定
募集、イベントは「定型文」を使う
期限付きお知らせ記事には公開終了日を設定する
記事の重複公開を避ける

タイトル

記事のタイトルのつけかた

ガイド
  • 記事のタイトルは、そのウェブページの主題や目的を簡潔に表す
  • 前後の文脈がなくてもタイトルだけで意味がわかるようにする
  • 時間とともに意味が変わってしまうタイトルにしない
  • できるだけ体言止めにする。「...について」、「...します」のようなタイトルは避ける。
  • タイトルの末尾に「。」はつけない

以下は、実際に存在する記事のタイトル

 

    体言止めのタイトル

  • 「税に関する各種証明書について」ではなく、「税に関する各種証明書」
  • 「中央公民館ロビーコンサートを開催します」ではなく、「中央公民館ロビーコンサート開催」

 

本文

見出しの付け方

ガイド
  • 本文は内容ごとに見出しで括って分類する。見出しのない本文だけの記事はできるだけ避ける。
  • 章や文節をつける場合は、MTのメニューバーの「書式設定」から「見出し3」以下を選んで設定する(見出し1,2は使わない)
  • 募集、イベントなどの説明に使う項目(「とき」、「ところ」など)は「見出し4」を使うか、定型文を使う
  • できるだけ簡潔な体言止めにする。「...について」、「...します」のようなタイトルは避ける。
説明

「見出し」で設定(マークアップ)すると見やすくなるだけでなく、画像読み上げ時に見出しであることが認識できる

 

<メニューバーの「書式設定」>

HPガイドライン-2

<見出しを設定した例>

HPガイドライン-1

   

リストの付け方

ガイド
  • 項目を一覧形式で羅列するリストは、MTの「番号なしリスト」または「番号付きリスト」で設定する
  • 別ページやファイルへのリンクは番号なしリストで記載する
説明

リストで設定(マークアップ)すると見やすくなるだけでなく、画像読み上げ時にリストであることを認識できる

 

HPガイドライン-3-1

避けたい文章の書き方

ガイド
  • 公開期限を設定しない記事の場合は、時間とともに意味が変わってしまう表現は避ける
  • 文中のページやファイルへのリンクはできるだけ避ける

"昨年制定された〇〇〇の条例は・・・"は、いつ制定されたかわからなくなる

 

記事のレイアウトについて

ガイド
  • 画面のサイズが変わらないことを前提としたレイアウト配置はしない
  • 横に並べる必然性がなければ、改ページを意識しないで上から下へ単純に配置する
説明

表示するデバイス(スマホなど)によっては、表示が切れてしまうことがある

また、画像読み上げ時にレイアウトの意図どおりに読まれるとは限らない

下図のような右に個別の領域(division)が定義されている場合は、表示が切れたり、

左の写真より右表が先に読み上げられる場合がある。

HPガイドライン-レイアウト.png

   

文章の改行について

ガイド
  • 文章の途中で改行しない、改行したい場合は「。」のあとで行う
  • 行間を一行空ける場合は、先頭に「全角スペース」を入れるか、Shift-Enterで空ける
説明
  • 改行の位置はデバイス(スマホなど)によって変わるので見づらくなる
  • 画像読み上げ時は、改行やスペースがあると読み上げを休止するので聞き取りにくくなる
  • Enterのみでも編集画面上は一行空いたように見えるが、実際は空いていないので注意(MTの設定)

 

文字

文字の修飾(太字・アンダーライン、文字色など)

ガイド
  • 文字はできるだけ修飾しない。修飾は情報を伝える補助手段とし、もし判別できなくてもその箇所が読み取れるよう配慮した記載にする。
  • 文字を修飾する場合は、MTのメニューバーの範囲で修飾(マークアップ)する(太字、斜体、下線、消し線、文字色、背景色)
      HPガイドライン_メニューバー文字.jpg
  • 文字色の青色や、アンダーラインはリンクと誤解されるので避ける
説明

視力が悪い方、弱視者でも理解できるように文字の修飾だけに頼った説明にしない

<良くない例>          

 太赤字は必須項目です。  

 名前:    

   

<良い例>  

 太赤字は必須項目です。

 名前[必須]:

 

文字のサイズ

ガイド

文字のサイズは固定(絶対値を指定)にしない、不必要に拡大文字にしない(MTのメニューバーにはサイズ指定はない)

説明
  • JIS規定では200%までサイズ変更した際に文字が重なったり、欠けたりしないこととしている
  • 固定にすると、画面をズームした際に連動しない場合がある
  • 編集時にブラウザのズーム機能で拡大して、重なったり欠けたりしないことを確認する

 

文字の色

ガイド
  • 文字と背景の色のコントラストは見やすい組み合わせにする
  • 文字の色は、青や紫はリンクを想像するので避ける
説明
  • JIS規定では、コントラスト比は4.5:1(0.222~4.5)以上にすることとしている
黒背景に白字 21.0 OK 評価AAA
灰色背景に黒字 0.10 OK 評価AAA
水色背景に白字 1.88 NG
白背景に黄色字 0.93 NG

 

文字の全角・半角の使い分け

ガイド
  • 英数字は半角
  • コロン(:)は半角
  • カッコ(( ))やカンマ(、)などは全角
説明

英数字を全角にすると、画像読み上げ時に1文字づつのアルファベットとして読まれる

 

文中に記号を使う場合の注意

ガイド

意味が伝わりにくい記号だけで表現しない、記号は読み飛ばされても意味が通じる表現にする

説明

大部分の記号は画像読み上げ時に読まれない場合が多い

  • "3月3日>>5月5日"ではなく、"3月3日から5月5日"にする
  • "2019/06/21"ではなく、"2019年6月21日"にする
  • "詳細はこちら ⇒"ではなく、"詳細はxxxをご覧ください"

 

機種依存文字(環境依存文字)は使わない

ガイド

機種や環境に依存する特殊文字は、表示されなかったり文字化けする場合があるので使わない

説明
  • 市のホームページでは、モバイル向けページで文字化けすることがある
  • ホームページだけでなく、Eメールなどでも注意が必要

よく使いそうな特殊文字:①、№、Ⅳ、㈱、㎞、㌍、℡、㎡など

 

単語の途中にスペースを入れない

ガイド

1つの単語の文字と文字の間にスペースをいれない

説明

記事の体裁をそろえるために単語の文字と文字の間にスペースを入れる場合があるが、スペースがあると画像読み取り時に単語として読まれない 

日 時 ・・・ "にちじ"と読まれない

場 所 ・・・ "ばしょ"と読まれない

参加費

 

日付、時間、電話番号の書き方

ガイド
  • 日付は月日だけでなく、できるだけ年も記載する
  • 年月日はスラッシュ(/)、時間はコロン1(:)ではなく、できるだけ漢字を使う
  • 時間は24時間表記にする
  • 電話番号市外局番も記載する
  • "提出は6月21日に締め切りました。" ではなく "提出は2019年6月21日に締め切りました。"
  • "2019/06/21" ではなく "2019年6月21日"
  • "10:30" ではなく "10時30分"
  • "TEL.66-1111" ではなく "TEL.0573-66-1111"

 

単位の書き方

ガイド

単位はカタカナ表記

説明

英略語にすると画像読み上げ時にアルファベットとして読まれる

  • "10km" ではなく "10キロメートル"
  • "10GB" ではなく "10ギガバイト"

 

表・テーブル

 

表は「表の挿入」で作成する

ガイド
  • 表やテーブルを作成するときは、MTメニューバーの「表の挿入」で作成する
      HPガイドライン_メニューバー表.jpg
  • 表示レイアウトを調整して、あたかも表のようにみせる書き方は避ける
  • セルの列や行を結合した複雑な表は避ける
説明
  • レイアウト調整で表にした場合、見た目には表のように見えても画面読み上げ時に意図した順に読まれなかったり、表示するデバイス(スマホ)によってレイアウトがくずれることがある
  • セルの列や行を結合すると意図した順に読まれないことがあるので、複雑な表になる場合は表を分けるなどできるだけ単純にする

<レイアウト調整して表のように見せた例>

実施日     会場

6月7日   健康福祉会館

6月23日   福岡保険センター

 

<セルを結合した例>

A BC D E
F G H I J
KP L MNO
Q R SX T
U V W Y

 

表の列数とサイズ

ガイド
  • 表のサイズは固定(絶対値で指定)にしない
  • 表の列数はできるだけ4列までに収める(多様なデバイスを考慮したレスポンシブデザインに対応する)
説明
  • サイズ固定にすると、デバイス(スマホなど)に依存した自動調整の際に表示が切れることがある
  • スマホで自動調整して見える目安が4列まで
  • 表示が切れなくても、セル内の文字数が多いと縦長になり読みにくくなる

<表のサイズ固定を設定した例>

HPガイドライン_メニューバー表サイズ.jpg

 

<下記の表(市営住宅の入居者募集)をスマホで見てください>

団地名 種 類 所在地 戸数 間取り 当初家賃(所得による) 市外可 同居 親族 同居 配偶者 単身 所得制限あり 築年度
UI 味噌野団地 若者定住 神坂294-1 1 2LDK 30,000円 H20

表に見出し、注釈をつける

  ガイド
  • 表の先頭に見出しをつける
  • 表の注釈はフッターにつける。フッター行の列を結合して属性を「表のフッター」にする。

HPガイドライン_表の見出し.jpg

HPガイドライン_表のフッター.JPG

説明
  • 見出しによって表の内容が読み取れるようにする。
  • フッターに注釈を記入して、表の注釈であることをわかりやすくする。
ここに見出しを書きます
 ※ここのフッターに注釈を書きます
口径(ミリメートル)料金(円)利用水量(立方メートル)
13 1,296 1~10
20 1,836 11~20

表のタイトル行は「ヘッダー」を指定する

ガイド

表のタイトル行は、「セルの属性-セルの種類」の「ヘッダー」を指定し、本文の「データ」と区別する

HPガイドライン_表のヘッダー図.png

説明
  • 読み上げ時に、セルがタイトルか、本文かを認識できる
  • ヘッダー指定のセルが色付きになり、見やすくなる

<セルにヘッダーを指定した例>

口径(ミリメートル)料金(円)利用水量(立方メートル)
13 1,296 1~10
20 1,836 11~20
25 5,616 21~50

  

画像・音声・動画

挿入する画像のサイズ

ガイド
  • 記事に挿入する画像は適正なサイズに調整してからアップロードする。推奨標準サイズは350px(ピクセル)とする。
  • 特に必要でない限りサムネイル表示にしない、もしサムネイル表示にする場合も適正なサイズに調整しておく
説明

PC画面への表示を想定した場合なら、横750px(ピクセル)が画面いっぱいになる目安

<横220px>

HPガイドライン_画像サイズ-1.png

<横450px>

HPガイドライン_画像サイズ-22.png

<横750px>

HPガイドライン_画像サイズ-3.png

    

代替テキスト・キャプション・音声ガイドを設定する

ガイド
  • 画像には、画面読み上げ時に画像の説明となる代替テキストを、前後の文脈にマッチするよう設定する
  • 音声(動画の音声を含む)で伝えている情報を、テキストに書き起こして画面上にキャプションとして設定する
  • 映像が視覚的に伝えている情報を、ナレーションによって説明する音声ガイドとして作成する
説明
  • 音声読み上げソフトは、画像や動画に対して設定された代替テキストや代替コンテンツを読み上げる
  • 画像のタイトルや説明が本文中にテキストで記載されているときは2重読み上げとなるので代替テキストは設定しない
  • 画像挿入時には、代替テキストにファイル名がデフォルトで設定されるので、適正なテキストに書き換える

<ウオーキングイベント開催記事の例> 

kenkou_20190605_sakamoto1.jpg

  • 良い例:つつじが咲く中津川公園を列になってウオーキングしているようす
  • 良くない例:ウオーキング

 

グラフの書き方

ガイド
  • 識別のために色をつけたグラフ画像は、モノクロでも理解できる配置や補足情報(パターン、引き込みなど)をつける
  • グラフ画像内の説明や数字に対しては、代替テキストや本文中の表などで補足する
説明
  • 色の違いがわからない方、わかりにくい方でも理解できるような補足情報を設定する
  • 画像読み上げ時に、グラフの内容がわかるような補足情報を設定する

HPガイドライン-グラフ2.jpg

良くない例では、色が識別できないと読み取れない

HPガイドライン-グラフ3.jpg

図を補足するための表を本文中に追加した例

 

チラシや資料を画像だけで伝えない

ガイド
  • 文字が記載されているチラシや資料などを画像にした情報だけで伝えようとしないで、原稿のデータ(WordやExcelなど)やPDFなどをリンクする
  • リンクがPDFファイルのときは、原稿のチラシや資料をスキャンした画像から作成したPDFにしない
説明
  • 画像にすると画面読み上げ時に内容が読み取れない(PDFは読み取りソフトが対応している場合がある)
  • 情報量が多くなければ代替テキストで補足することもできる

 

リンク

リンクするファイルをアップロードする際のファイル名のつけ方

ガイド
  • ページ内でリンクするファイル(画像や、PDF/Word/Excelなどのデータ)をアップロードする際は、ファイルの内容を表す名称に加えて、担当部門や日付などをつける。
説明
  • アップロードするファイルが格納されるサーバーフォルダーはブログ毎に共通であるため、安易な名前の場合、重なって置き換わる可能性がある。ファイル名は重ならないようユニークにする。
  • 申請書など、利用者のダウンロードを想定したファイルの場合は、ダウンロード後に不都合のない名前になるよう、日本語ファイル名の自動変換をしない、担当課名をつけない、版数をつけない、など考慮する。

 

リンクするテキストの書き方

ガイド
  • リンクテキストを読んだだけで、リンク先に何があるかがわかるテキストにする
  • 1~2文字だけの短いテキストにしない。「こちら」でリンクしない。
  • URLのままリンクしない
  • できるだけ文章の途中でリンクしない。文章のあとにまとめてリスト(・)を付けてリンクする。
  • ファイル(PDF、Word、Excelなど)へのリンクは、ファイルの属性、サイズを末尾につける
  • 外部サイトへのリンクは末尾に(外部リンク)とつける
説明
  • リンクテキストの文字が短いと、画面が小さいデバイスの場合や、目の悪い方がクリックしにくい
  • 文章の途中のリンクは読み分けにくいので、リンクはできるだけまとめてリスト表記する

    

リンク先ウインドウの設定

ガイド

リンクは、できるだけ「同じウインドウで開く」設定にする(デフォルトの設定)

説明

市ウェブサイトの統一ルールは同一ウインドウで開くこととする

HPガイドライン_リンク.jpg

 

全般

担当課・連絡先の設定

ガイド
  • 「担当課・連絡先」をリストから選択し、文末に定型署名文(シグネチャ)を表示する
  • 本文中には必要のない限り、担当課名や連絡先、メールフォームを記載しない(所属名変更の場合に追従できないため)
  • 本文中に担当課名を記載する場合も担当課ページへのリンクはつけない

HPガイドライン_担当課.png

  

募集、イベントは「定型文」を使う

ガイド

記載する項目がほぼ変わらない募集やイベント記事には「定型文」を使ってスタイルを統一することで読みやすくする

説明
  • 「定型文」は、「お知らせ」「基本情報系」「モバイルサイト」に用意されている
  • 「見出し4」の見出しを使った定型文を用意している

  新規 Microsoft PowerPoint プレゼンテーション (2).jpg

 

期限付きお知らせ記事には公開終了日を設定する

ガイド
  • イベントや募集など日程が明確な記事は公開終了日を設定して、期日を過ぎた後に「公開終了」状態にする。
  • イベント開催したことを伝えるお知らせ記事などは、公開期間1年間を目安に公開終了日を設定する。
説明

期日後も公開されたままにしておくと、開催前や最新の記事と誤解されやすいので、必要のない限り公開終了日を設定する。 

 

重複公開

ガイド

市の「くらし・市政」ページの「ほっとニュース」に同じ記事を重複して掲載しない

説明

下記のサイトで作成した記事は、「ほっとニュース」に掲載されるので、別に「お知らせ」で記事を作成しなくてもよい

  • 消防本部
  • 地域総合事務所、地域事務所
  • 博物館・美術館
  • 報道発表資料
  • 市長の部屋
  • 中津川市地域総合医療センター

 

担当課・連絡先
広報広聴課
電話番号:0573-66-1111(内線312~316)