中津川市役所

文字色

メニュー

知りたい情報を検索する

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

(最終更新:2019年10月08日) 印刷印刷ページ

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

 

分類ガイドラインの内容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.1.1~1.2.2 A
グラフの書き方 1.4.1 A
チラシや資料を画像だけで伝えない 1.1.1 A
リンク リンクするファイルをアップロードする際のファイル名のつけ方
リンクするテキストの書き方 2.4.4 A
リンク先ウインドウの設定
全般 担当課・連絡先の設定
募集、イベントは「定型文」を使う
期限付きお知らせ記事には公開終了日を設定する
記事の重複公開を避ける

タイトル

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

ガイド

・記事のタイトルは、そのウェブページの主題や目的を簡潔に表す

・前後の文脈がなくてもタイトルだけで意味がわかるようにする

・時間とともに意味が変わってしまうタイトルにしない

・タイトルの末尾に「。」はつけない

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

・「介護保険制度が改正されました」・・・ H30.4の記事だがいつの改正かわかりにくい

・「口座振替」・・・ 水道料金の記事だが何が対象かわからない

・「三市ふれあい交流事業」・・・ 三市を名古屋市・豊田市・中津川市とすると記事を開かなくてもわかりやすい

 

本文

見出しの付け方

ガイド

 章や文節をつける場合は、MTのメニューバーの「書式設定」から「見出し2」以下を選んで設定する

説明

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

 

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

   HPガイドライン-2.png

   <見出しを設定した例>

    HPガイドライン-1.png

 

リストの付け方

ガイド

 項目を一覧形式で羅列するリストは、MTの「番号なしリスト」または「番号付きリスト」で設定する

説明

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

 

HPガイドライン-3.jpg

避けたい文章の書き方

ガイド

 公開期限を設定しない記事の場合は、時間とともに意味が変わってしまう表現は避ける

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

 

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

ガイド

 ・画面のサイズが変わらないことを前提としたレイアウト配置はしない

 ・横に並べる必然性がなければ、改ページを意識しないで上から下へ単純に配置する

説明

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

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

   下図のような右に個別の領域(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 

   コントラスト比を計算したい場合は、https://calculator.jp/science/contrast 参照

 

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

ガイド

 ・英数字は半角

 ・コロン(:)は半角

 ・カッコ(( ))やカンマ(、)は全角

説明

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

 

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

ガイド

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

説明

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

 ・"3月3日>>5月5日"ではなく、"3月3日から5月5日"にする

 ・"2019/06/21"ではなく、"2019年6月21日"にする

 

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

ガイド

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

説明

 ・市のホームページでは、モバイル向けページで文字化けすることがある

 ・ホームページだけでなく、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ガイドライン_表のヘッダー図.png

説明

 ・読み上げ時に、セルがタイトルか、本文かを認識できる

 ・ヘッダー指定のセルが色付きになり、見やすくなる

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

口径(mm)料金(円)利用水量(㎥)
13 1,296 1~10
20 1,836 11~20
25 5,616 21~50

  

画像・音声・動画

挿入する画像のサイズ

ガイド

 ・記事に挿入する画像は適正なサイズに調整してからアップロードする

 ・特に必要でない限りサムネイル表示にしない、もしサムネイル表示にする場合も適正なサイズに調整しておく

説明

 ・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など)へのリンクは、ファイルの属性、サイズを末尾につける

 ・外部サイトへのリンクは末尾に(外部リンク)とつける

説明

 ・リンクテキストの文字が短いと、画面が小さいデバイスの場合や、目の悪い方がクリックしにくい

   ・「こちら」だけでリンクしない

     <誤>詳しくはこちらをご覧ください。 <正>詳しくはイベントのページをご覧ください。  

   ・URLだけをリンク先にしない

     <誤>http://www.city.nakatsugawa.lg.jp/page/012345.html

     <正>イベントのページはhttp://www.city.nakatsugawa.lg.jp/page/012345.html

   ・リンク先のファイルが何かわかるようにする

     <誤>PDFファイル添付ファイルイベント募集チラシ 

     <正>イベント募集チラシ(PDF)

    

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

ガイド

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

説明

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

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

 

全般

担当課・連絡先の設定

ガイド

 ・「担当課・連絡先」をリストから選択し、文末に定型署名文(シグネチャ)を表示する

 ・本文中には必要のない限り、担当課名や連絡先を記載しない(所属名変更の場合に追従できないため)

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

  

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

ガイド

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

説明

   「定型文」は、「お知らせ」「基本情報系」「モバイルサイト」に用意されている

      HPガイドライン_定型文.jpg

 

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

ガイド

 ・イベントや募集などの記事は公開終了日を設定して、期日を過ぎた後に「公開終了」状態にする。

説明

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

 

重複公開

ガイド

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

説明

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

    ・消防本部

    ・地域総合事務所、地域事務所

    ・博物館・美術館

    ・報道発表資料

    ・市長の部屋

    ・中津川市地域総合医療センター

 

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