東京都公式ホームページデザインに係るガイドライン

東京都公式ホームページ（以下「公式ホームページ」という。）は、都の施策などの都政情報の提供や都民との情報共有を行うための重要な手段となっている。
東京 2020 オリンピック・パラリンピック競技大会の開催に向け、国内外に東京の魅力を発信する媒体として、公式ホームページの重要性は今後ますます高まっていく。
ウェブアクセシビリティの向上に関しては、「東京都公式ホームページ作成に関する統一基準」（以下「統一基準」という。）が定められているが、このたび、更に、公式ホームページとしての統一感を持たせ、都民への発信力の一層の向上を図るため、「東京都公式ホームページデザインに係るガイドライン」（以下「デザインガイドライン」という。）を策定する。

第1 デザインガイドラインの対象範囲

1 原則として、都が次に掲げるウェブコンテンツにより提供する情報及びサービス全てとする。

1. 公式ホームページ（多言語対応しているものを含む。）
2. 公式ホームページのスマートフォン向けサイト（多言語対応しているものを含む。）

2 1にかかわらず、次のいずれかの理由によりデザインを統一することによるメリットが少ないと認められるものは、対象外とすることができる。

1. ヘッダー等のデザインを統一することで、ホームページ全体のイメージが壊れ、訴求力が低下するおそれがある。
2. 特定の対象者をターゲットとしたホームページで、閲覧者の属性等に合わせたデザインを採用している。
3. 特定分野の情報の提供のみにとどまる、公開期間が限定的である等、ホームページの機能が限定されている（降雨情報、各種データベース、一時的に掲載する告知ページ等）。

第2 ホームページ全体のデザインの方向性

公式ホームページは、発信したい情報を明確にするとともに、閲覧者が必要な情報に容易にアクセスできるようにするため、次の(1)から(5)までに留意して作成・改修を行う。

1. 各局事業の特性に応じて、情報を効果的に発信する。
2. スライド機能、画像サイズの使い分け等により、情報の優先度を明確にする。
3. トップページは随時更新し、古い情報は別ページに移すなどして、最新情報を簡潔に提供する。
4. 文字の羅列を避け、画像の活用等による視覚的な情報発信を工夫する。
5. 必要に応じて、フローチャート等の閲覧者が必要な情報を探しやすい手法を併用する。

第3 デザインの詳細

1 全体

1. パソコン表示におけるサイトの横幅は、1,000 ピクセル程度とする。ただし、トップページのメインビジュアル画像の部分は、1,000 ピクセルを超えることができるものとするが、この場合においては、サイトの横幅を超えた当該画像の両端には、コンテンツ及びテキストを配置しない。
2. レスポンシブウェブデザイン等の活用により、スマートフォン、タブレット等に対応する。
3. 背景色は白色とする。サイトデザインに使用する色数は、5色程度の基本色及びその類似色とし、シンプルな色使いとする（画像、グラフ等を除く。）。
4. 見出し及びリンク表示（青色又は紫色のテキスト表示に下線を引いたもの）を除き、テキストの部分的なカラー表示は避ける。
5. CSS におけるテキストのフォントファミリーは、ヒラギノ角ゴ、メイリオ、MS-P ゴシック又は sans-serif を基本とする。

2 ヘッダー

1. 別紙設定表（以下「設定表」という。）に基づいたデザインを基本とする。設定表に記載のないリンク等を設定する場合は、設定表に記載されている素材に準じたデザインとする。
2. ヘッダー左側に配置する局名等のロゴタイプの表示は、原則として、次のアからウまでによるものとする。
   ア　フォント
   「東京都基本デザインマニュアル（平成元年策定）」の規定にかかわらず、ゴナD又はメイリオを用いる。
   イ　大きさ
   パソコン表示において、原則として、和文は 24 ポイント、英文は 14 ポイントとする。ただし、英文フォントと和文フォントとの横幅を合わせる場合は、この限りではない。
   ウ　形式
   画像として作成し、alt に局名等を指定する。
3. パソコン表示において、ヘッダー右側に、統一基準第3 2（4)ア(イ)により掲載するもののうち、「サイト内検索機能」及び「都庁総合ホームページへのリンク」を配置する。その他のリンクは、各局の状況に合わせ、可能な限り設定表に準じたデザイン及び配置で掲載する。
4. パソコン表示において、ヘッダーのリンクにおけるドロップダウンメニュー表示は、原則として行わない。
5. 多言語へのリンクを掲載する場合は、ドロップダウンメニュー表示は行わず、リンク先のページに言語選択のリンクを配置する。ただし、1言語のみを提供する場合は、この限りでない。
6. 色合い変更へのリンクを掲載する場合は、ドロップダウンメニュー表示は行わず、リンク先のページに色合い選択のリンクを配置する。ただし、1種類の色合いのみを提供する場合は、この限りでない。

3 グローバルナビゲーション

1. 設定表に基づいたデザインを基本とし、ナビゲーションの数は、5ないし9程度とする。
2. パソコン表示において、ドロップダウンメニュー表示及び画面スクロール時の固定表示は、原則として行わない。
3. ナビゲーションの表示はテキストのみとし、トップページ以外のピクトグラムは、原則として使用しない。

4 フッター

1. 設定表に基づいたデザインを基本とする。設定表に記載のないリンク等を設定する場合は、設定表に記載されている素材に準じたデザインとする。
2. フッター1
   ア　下部（設定表の「フッター1」の欄の「1）濃紺」とする部分）の中央に、統一基準第3 4により掲載する事項を配置する。
   イ　中央部（設定表の「フッター1」の欄の「2）紺色」とする部分）の中央に、統一基準第3 5(1)により掲載する事項へのテキストリンクを配置する。
   ウ　上部（設定表の「フッター1」の欄の「3）グレー」とする部分）の中央に、Twitter及び東京動画のバナーを配置する。Facebook 又は Instagram のバナーを掲載する場合は、設定表に準じた配置とする。
3. フッター2
   ア　コンテンツへのリンク及びスライドバナーは、各局の状況に応じて掲載する。コンテンツへのリンク若しくはスライドバナーのいずれかを掲載し、又はそれらのいずれも掲載しないこともできるものとする。また、コンテンツへのリンクの数は最大8とし、スライドバナーの同時表示数は最大4とする。
   イ　ナビゲーションごとに、掲載するコンテンツへのリンク又はスライドバナーを変更することもできる。
   ウ　フッター2を掲載しない場合は、「ページの先頭へ戻る」のリンクは、フッター1の上部に配置する。

5 スマートフォン表示

次の(1)から(3)までに定める事項を除き、原則として、パソコン表示のレスポンシブ対応とする。

1. ヘッダー
   ア　ヘッダー右側に「メニューアイコン」を、その下部に「サイト内検索機能」を配置する。
   イ　「メニューアイコン」には、(2)に定める事項を格納する。また、ナビゲーションは、トップページに表示することもできるものとする。
2. スマートフォン版メニュー
   ア　グローバルナビゲーションは、第3 3の規定に準じて掲載する。
   イ　メニュー展開時にグローバルナビゲーション上部に置くリンクは、多言語、色合い変更、音声読み上げ等、当該スマートフォン表示に係る公式ホームページと同等の内容を表すリンクとする。
   ウ　「都庁総合ホームページへのリンク」はグローバルナビゲーション下部左側に、「サイトマップ」を掲載する場合はグローバルナビゲーション下部右側に配置する。また、外部関連ホームページ等へのリンク等を掲載する場合は、「都庁総合ホームページへのリンク」等より下部に配置する。
3. フッター
   フッターは、第3 4の規定に準じて掲載する。ただし、フッター1の下部にパソコン表示へのリンクを配置し、また、フッター2のスライドバナーの同時表示数は、最大2とする。

別紙 デザインガイドライン_設定表（PDF：131KB）