01
トップページは 2 案
同じ掲載内容で、用事のある人が最短で目的のページに着く A 案と、機関の姿を一目で伝える B 案をつくりました。下層ページのテンプレートと部品は 2 案で共通です。
公式ウェブサイトのデザイン
架空の公的機関を想定し、公式ウェブサイトのトップページ 2 案と下層ページのテンプレートをデザインして、HTML で実装しました。全 26 ページを試験し、サイトマップ・ガイドライン・試験の結果を添えています。
制作例 d（架空の案件です） ／ デザイン ／ 受託した案件ではありません
見どころ
02
2 回のクリックで目的のページへ
お知らせ、組織案内、調達情報、資料、English の下層ページをテンプレートにしました。トップページからリンクを自動でたどり、全 26 ページに最大 2 回のクリックで着くことを確かめています。
03
スマートフォンでも同じ情報
パソコンとスマートフォンで同じ内容を表示し、文字を 200% に拡大しても読めるようにしています。iOS の Safari でも表示と操作を確かめました。
概要
| 名称 | 公式ウェブサイトのデザイン |
|---|---|
| 想定した業務 | 公式ウェブサイトのリニューアル（サイト構成・デザイン・テンプレートの作成） |
| 分類 | デザイン（広報物・ウェブページのデザイン） |
| 参照した基準 | JIS X 8341-3:2016（適合レベル AA を目標。全 26 ページの自己試験で 38 項目中、不適合 0）。確認したブラウザ：Chrome（macOS、幅 1280・768・375px）、Safari（iOS シミュレーター） |
| データの出典 | 架空の機関です。実在の機関・案件とは関係ありません。機関名・住所・掲載内容・数値はすべて当社で作成した架空のもので、写真は使っていません。 |
| 使用技術 | HTML・CSS・JavaScript（ライブラリなし）、Node.js（共通部分を組み立ててページを書き出す生成プログラム、全ページの自動試験） |
用いた公開データの利用規約に従い、出典を表記しています。
想定した業務
公的機関の公式ウェブサイトをリニューアルする業務のうち、サイト構成の設計、トップページと下層ページのデザイン、テンプレートの HTML 実装までを想定しています。CMS の導入と既存ページの移行は含みません。交付物は、トップページのデザイン案 2 案、サイトマップ・ディレクトリマップ、デザインガイドライン、テスト結果報告書（ブラウザ・端末）、更新マニュアルとし、自動で切り替わる画像（カルーセル）は使わない方針にしました。
成果物
実際の業務で納品する形にそろえ、本体と文書に分けて掲載しています。
本体
- トップページ デザイン案（A 案・B 案）同じ掲載内容で方向の違う 2 案（パソコン・スマートフォンの画面と考え方）PDFダウンロード：トップページ デザイン案（A 案・B 案）（1.5 MB）
- テンプレート一式トップページ A 案と、お知らせ・組織案内・調達情報・資料・English ほか 26 ページHTML・CSS・JavaScript開く：テンプレート一式
- トップページ B 案B 案を実装したページHTML・CSS開く：トップページ B 案
- デザインの部品一覧色・文字・部品の見本（デザインの元データ）HTML・CSS開く：デザインの部品一覧
- 一式（オフライン版）展開して index.html を開くと、インターネットに接続していなくても表示されますZIPダウンロード：一式（オフライン版）（77 KB）
文書
- サイトマップ・ディレクトリマップページの階層、ファイルの置き場所、トップページからのクリック数PDFダウンロード：サイトマップ・ディレクトリマップ（0.7 MB）
- デザインガイドライン配色（コントラスト比つき）・文字・余白と、部品の使い方PDFダウンロード：デザインガイドライン（0.7 MB）
- 達成基準チェックリストJIS X 8341-3:2016 の 38 項目ごとの、全ページの試験の結果PDF・HTMLダウンロード：達成基準チェックリスト（0.7 MB）HTML 版を開く：達成基準チェックリスト
- テスト結果報告書確認したブラウザ・端末での表示と操作の結果（確認していない環境も明記）PDFダウンロード：テスト結果報告書（1.2 MB）
- 更新マニュアルテンプレートを使ってお知らせなどのページを追加する手順PDFダウンロード：更新マニュアル（4.6 MB）
- 作業報告書作業の日付と内容の記録PDFダウンロード：作業報告書（0.5 MB）
確認の方法
次の手順で、掲載した内容をお確かめいただけます。
- トップページの A 案と B 案を開き、同じ掲載内容がそれぞれどう配置されているかを見比べます。
- サイトマップ・ディレクトリマップを見ながら、トップページから各ページまで 3 回以内のクリックでたどれるか確かめます。
- テスト結果報告書に記したブラウザ・端末で開き、表示と操作を確かめます。
- 達成基準チェックリストの各項目を、テンプレートのページで確かめます。