01
図にも、数値の表を
原本の図の多くには数値が書かれていません。同じ日に公表された別の資料の表から数値を取り、図を SVG で描き直して、すべての図に説明文と数値の表を添えました。図の数値は、原本の文章の数値と自動で照合しています。
公開資料のウェブページ化
総務省統計局が公表した「令和7年国勢調査 人口等基本集計 結果の要約」（PDF 6 ページ）を、JIS X 8341-3:2016 の適合レベル AA を目標に HTML のページにしました。図 9 点は数値から描き直して表を添え、自己試験の結果を付けています。
制作例 b ／ ウェブ ／ 受託した案件ではありません
見どころ
02
キーボードだけで読める
目次から章へ移り、数値の表を開くまで、すべてキーボードでできます。いまどこにいるかは、オレンジの枠で分かります。
03
スマートフォンでも、拡大しても
画面の幅に合わせて図が縮み、幅の広い表は枠の中だけで横に動きます。文字を 200% に拡大しても、ページ全体が横にはみ出しません。
概要
| 名称 | 公開資料のウェブページ化 |
|---|---|
| 想定した業務 | ウェブサイトへの資料掲載・コンテンツ作成 |
| 分類 | ウェブ（ウェブサイトのコンテンツ作成・運用・保守） |
| 参照した基準 | JIS X 8341-3:2016（適合レベル AA を目標。自己試験で 38 項目中、不適合 0） |
| データの出典 | 総務省統計局「令和７年国勢調査 人口等基本集計 結果の要約」（2026年9月29日公表）を加工して作成。図の数値の一部は、同じ公表の「結果の概要」と e-Stat 第1-1表による |
| 使用技術 | HTML・CSS（JavaScript なし。図は SVG）、Python（図と表の生成、原本の数値との照合）、Chrome による自動の試験、W3C Nu Html Checker |
用いた公開データの利用規約に従い、出典を表記しています。
想定した業務
PDF や Word で受け取った資料を、ウェブサイトに掲載するページにする業務を想定しています。文章は原本のまま数字の表記と見出しの構造を整え、図は数値から描き直して数値の表を添えました。JIS X 8341-3:2016 の試験を行い、達成基準チェックリストと実装チェックリストを添えて納品する形にしています。今回の原本はタグのない PDF で、読み上げソフトでは見出しや表の構造をたどれませんでした。掲載先のサイトの共通部分（ヘッダー・メニュー）には組み込んでいません。
成果物
実際の業務で納品する形にそろえ、本体と文書に分けて掲載しています。
本体
- 掲載ページ資料を HTML にしたページ（図 11 点・表 14 点）HTML・CSS開く：掲載ページ
- 一式（オフライン版）展開して index.html を開くと、インターネットに接続していなくても表示されますZIPダウンロード：一式（オフライン版）（31 KB）
文書
- 達成基準チェックリストJIS X 8341-3:2016 の 38 項目ごとの試験の結果と、確かめた方法PDF・HTMLダウンロード：達成基準チェックリスト（0.7 MB）HTML 版を開く：達成基準チェックリスト
- 実装チェックリスト各達成基準を満たすために実装した方法PDF・HTMLダウンロード：実装チェックリスト（0.5 MB）HTML 版を開く：実装チェックリスト
- ウェブアクセシビリティ・ガイドラインページを追加・更新するときに守る事項PDFダウンロード：ウェブアクセシビリティ・ガイドライン（0.7 MB）
- 職員向け更新マニュアルHTML の専門知識がなくても、資料のページを追加できる手順PDFダウンロード：職員向け更新マニュアル（3.4 MB）
- 作業報告書作業の日付・内容と、原本から変えたところPDFダウンロード：作業報告書（0.6 MB）
確認の方法
次の手順で、掲載した内容をお確かめいただけます。
- 原本の PDF と掲載ページを並べ、文章・表・数値が一致しているか確かめます。
- キーボードだけで、ページ内のすべてのリンクと「〇〇の数値（表）」の開閉を操作できるか確かめます。
- 達成基準チェックリストの各項目を、掲載ページで確かめます。
- ページの HTML を W3C の検証サービス（Nu Html Checker）にかけ、エラーがないことを確かめます。