別 紙 5 東 京 の 観 光 公 式 サイト GO TOKYO ウェブサイト 制 作 ガイドライン 英 語 編 公 益 財 団 法 人 東 京 観 光 財 団 Copyright 2014 Tokyo Convention & Visitors Bureau. All rights reserved.
目 次 目 次... 1 1. はじめに... 2 1.1 目 的... 2 1.2 適 用 範 囲... 2 1.3 ウェブサイト 想 定 利 用 者... 2 2. 使 用 フォントについて... 3 2.1 グラフィックテキスト... 3 2.1 HTML テキスト... 3 2. 画 像 について... 5 2.1 画 像 サイズ... 5 2.2 画 像 上 に 配 置 するテキストについての 注 意 事 項... 6 2.3 その 他 の 留 意 点... 7 3. リンクについて... 8 3.1 テキストリンク... 8 3.2 外 部 リンク... 8 4. バナーについて... 9 4.1 バナーの 掲 載 位 置 について... エラー! ブックマークが 定 義 されていません 4.2 バナーのサイズとレイアウト... エラー! ブックマークが 定 義 されていません 4.3 その 他 の 留 意 点...13 5. ヘッダー フッターについて...15 5.1 ヘッダー...15 5.2 フッター...16 6. ページ 構 成 について...17 6.1 表 示 領 域...17 6.2 基 本 レイアウト...17 6.3 カラムおよび 余 白...19 6.4 カラー...20 6.4.1 ベースカラー...20 6.4.2 背 景 色...20 6.4.3 フォントカラー...20 7. ナビゲーションについて...21 7.1 グローバルナビゲーション...21 7.2 パンくずナビゲーション...22 7.3 ローカルナビゲーション...22 1
1. はじめに 1.1 目 的 GO TOKYO ウェブサイト 制 作 ガイドライン 英 語 編 ( 以 下 本 ガイドブック)は 東 京 の 観 光 公 式 サイト GO TOKYO の 品 質 とユーザビリティを 高 め サイト 全 体 の 一 貫 性 を 持 たせることにより 訪 都 意 欲 を 喚 起 する 情 報 提 供 発 信 の 促 進 を 図 ることを 目 的 とし 設 定 する 1.2 適 用 範 囲 本 ガイドラインは 東 京 の 観 光 公 式 サイト GOTOKYO 英 語 ページ:http://www.gotokyo.org/en に 適 用 される 1.3 ウェブサイト 想 定 利 用 者 東 京 観 光 初 心 者 ( 未 訪 都 で 東 京 や 日 本 の 地 理 や 情 勢 に 詳 しくなく 東 京 と 他 都 市 との 混 同 もある 程 度 の 知 識 量 だ が 東 京 への 観 光 を 検 討 している 方 ) 東 京 観 光 のリピーター( 東 京 の 観 光 の 経 験 があり より 多 面 的 に 東 京 の 観 光 を 楽 しむための 情 報 を 入 手 したい 方 ) 英 語 ページのユーザーについては 国 や 地 域 を 限 定 せず 非 ネイティブも 含 む 2
2. 使 用 フォントについて 2.1 グラフィックテキスト グラフィックテキストには 以 下 の 書 体 を 使 用 する 文 字 サイズ 行 間 は 読 みやすさを 考 慮 して 指 定 すること グラフィックテキストとはウェブサイト 上 で 画 像 として 表 示 するテキストを 指 し メインビジュアル 画 像 リンク 図 版 バナー 等 において 写 真 /イラストと 組 み 合 わせて 使 用 されるテキストも 含 む 英 語 フォント 2.1 HTML テキスト 異 なるプラットフォームやブラウザ 環 境 において 表 示 の 互 換 性 を 保 つため HTML テキストには 以 下 のフォントスタイ ルを 使 用 することとする CSS Styles H1 見 出 し H2 見 出 し H3 見 出 し H4 見 出 し H5 見 出 し font-family: Roboto Regular; font-size: 38.4px; line-height: 40px; font-family: Roboto Black; ( 大 文 字 ) font-size: 24px; line-height: 28.8px; font-family: Roboto Bold; font-size: 19.2px; line-height: 19.2px; font-family: Roboto Black; ( 大 文 字 ) font-size: 16.8px; line-height: 19.2px; font-family: Roboto Bold; ( 大 文 字 ) font-size: 14.4px; 3
line-height: 19.2px; font-family: Roboto Bold; ( 大 文 字 ) 強 調 文 font-size: 12px; line-height: 14.4px; font-family: Open Sans Regular; リード 文 font-size: 12.8px; line-height: 24px; font-family: Open Sans Regular; 本 文 1 font-size: 11.2px; line-height: 17.6px; font-family: Open Sans Regular; 本 文 2 font-size: 10.4px; line-height: 16px; font-family: Open Sans Regular; ハイパーリンク font-size: 11.2px; line-height: 17.6px; font-family: Open Sans Regular; キャプション font-size: 8.8px; line-height: 12.8px; font-family: Open Sans Regular; ( 大 文 字 ) カテゴリータグ font-size: 9.6px; line-height: 12.8px; 留 意 点 : 主 要 なブラウザの 機 能 で 文 字 サイズが 変 更 できることを 確 認 する 4
2. 画 像 について 2.1 画 像 サイズ トップページ 及 び 第 二 階 層 の 制 作 済 の 画 像 に 関 しては 下 記 表 に 記 載 したサイズを 基 本 とし レスポンシブ 表 示 時 には 同 等 の 比 率 を 維 持 する トップページ 名 称 画 像 デスクトップ モバイル 1 02 プロモーション 用 ビジュアル (Intro Banner) 640 360 px W16:H9 640 720 px 2 03 主 要 コンテンツ 用 バナー (Intro_Feature1&2) 3 04 最 新 情 報 (Recent) 320 180 px W16:H9 240 240 px W1:H1 640 360 px 320 320 px 4 05 Charms of Tokyo 320 480 px 640 720 px Magazine (Discover Mag) 5 06 広 告 (Advert) 160 160 px W1:H1 320 x 320 px 6 07 お 天 気 情 報 (Weather) 160 160 px W1:H1 640 400 px 5
7 08 アクセスランキン 144 80.8 px 280 157 px グ (Top Picks) 8 09 期 間 限 定 キャンペ 304 178 px 600 351 px ーン 用 バナー (Oshima Island) 9 11 情 報 素 材 用 バナー (Help & Guide) 144 144 px W1:H1 300 300 px メインビジュアル 以 外 に 同 等 のサイズの 画 像 を 用 いない 第 二 階 層 画 像 デスクトップ モバイル 1 トップバナー 720 320 px 640 800 px 2 メインナビゲーショ 336 196.8 px 600 355 px ンバナー 3 TOKYO 112 80 px 280 200 px ESSENTIALS 指 定 部 分 以 外 で 画 像 を 追 加 する 場 合 は 下 記 の 比 率 を 使 用 する 画 像 デスクトップ モバイル 1 タイプ1 1:1 6
2 タイプ2 16:9 2.2 画 像 上 に 配 置 するテキストについての 注 意 事 項 バナーや 写 真 に 使 用 するテキストは 背 景 とのコントラストをより 明 確 にする ローテーションするバナーや 写 真 には 文 字 を 多 く 載 せない テキストの 位 置 テキストの 形 式 フォント 色 背 景 との 対 比 効 果 にできるかぎり 一 貫 性 を 持 たせる テキストはすべて 判 読 可 能 なテキストサイズを 用 いる 2.3 その 他 の 留 意 点 画 像 は 必 ず Alt タグを 付 ける ナビゲーション 用 の 画 像 は リンク 先 へ 誘 導 ボタンとしてクリック 可 能 とし かつ 画 像 オンマウス 時 の 動 きをつ ける なお 画 像 オンマウス 時 は 画 像 およびテキストの 色 の 明 度 を 変 えることとする ナビゲーション 用 ではない 画 像 は トップページおよび 第 2 階 層 ページを 除 き クリックによって 拡 大 表 示 可 能 とする オンマウス 時 の 動 きは 拡 大 鏡 を 表 示 するなど ナビゲーション 用 の 画 像 とは 異 なる 動 きとする 小 さな 画 像 に 使 用 する 被 写 体 は 建 築 物 などの 大 きなものの 全 体 像 ではなく 人 やアイテムに 焦 点 を 合 わせたも のや 建 造 物 であれば 特 定 部 分 を 写 したものなどよりわかりやすいものにする 7
3. リンクについて 3.1 テキストリンク テキストリンクは 以 下 のように 区 別 する Default:HEX # 各 要 素 のカラー 指 定 による Hover:HEX #ed1c24 3.2 外 部 リンク 外 部 リンクは 別 タブで 開 く 設 定 とし リンククリック 後 の 動 作 が 予 測 できるよう 下 記 のように 記 載 する 外 部 リンク:リンクテキスト(Open Link in New Tab) PDF リンク:リンクテキスト(PDF) 8
3. Usability & Accessibility 4. バナーについて 4.1 バナーの掲載位置についてバナーの位置は下記に指定する デスクトップ トップページ 第二階層 モバイル 9
トップページ 第 二 階 層 04 の 広 告 バナーは 画 面 下 に 常 に 表 示 する 想 定 レイアウトについては 事 項 (4.2 位 置 04) 参 照 4.2 バナーのサイズとレイアウト バナーサイズおよびレイアウトはレスポンシブデザイン 対 応 を 考 慮 し 以 下 のように 設 定 する トップページ 位 置 デスクトップ 横 幅 960px 表 示 時 モバイル 横 幅 640px 表 示 時 01 プロモーション 用 ビジュアル W640 H360px 画 像 内 テキストクリアマージン: 左 右 上 40px 下 25px フォント: 見 出 し Roboto Black サイズ 14.4pt/ 行 間 16pt リード Roboto Light サイズ 14.4pt/ 行 間 16pt このバナーのみリンク 設 定 はしない W640 H720px 画 像 内 テキストクリアマージン: 左 右 上 下 45px フォント: 見 出 し Roboto Black サイズ 15.9pt/ 行 間 17.67pt リード Roboto Light サイズ 15.9pt/ 行 間 17.67pt このバナーのみリンク 設 定 はしない 02 主 要 コンテンツ 用 バナー 10
3. Usability & Accessibility W320 H180px 画像内テキストクリアマージン 左右上下 15px フォント カテゴリータグ Open Sans Bold サイズ 4.8pt 見出し Roboto Bold サイズ 9.6pt/行間 9.6pt 03 Discovery Magazine W320 H480px 画像内テキストクリアマージン 左右下 35px 上 45px フォント 見出し Roboto Black サイズ 24pt/行間 20pt 見出し Roboto Black サイズ 14.4pt/行間 8.4pt Volume 表 示 Roboto Black サ イ ズ 6pt/ 行 間 4.4pt 04 W640 H720px テキストクリアマージン 左右 90px 上 80px 下 60px フォント 見出し Roboto Black サイズ 19pt/行間 17.67pt 見出し Roboto Black サイズ 10.6pt/行間 9.28pt Volume 表 示 Roboto Black サ イ ズ 5.3pt/ 行 間 3.53pt 広告バナー W160 H160px 05 W640 H360px 画像内テキストクリアマージン 左右上下余白 15px フォント カテゴリータグ Open Sans Bold サイズ 5.3pt 見出し Roboto Bold サイズ 7.95pt/行間 10.6pt (W320 H320px) x 2 2 点横並びで常に画面下部に表示すること 閉じる ボタンを画像右上に設置すること お天気情報バナー 11
W160 H160px 画 像 内 テキストクリアマージン: 左 右 上 下 15px テキストセンター 合 わせ フォント: 見 出 し Roboto Black サイズ 7.2pt 気 温 表 示 Roboto Black サイ 9.6pt/ 行 間 16.8pt 時 間 表 示 Open Sans Regular サイズ 6pt/ 行 間 8.4pt W160 H160px 画 像 内 テキストクリアマージン: 左 右 上 下 40px テキストセンター 合 わせ フォント: 見 出 し Roboto Black サイズ 7.95pt 気 温 表 示 Roboto Black サイ 10.6pt/ 行 間 18.55pt 時 間 表 示 Open Sans Regular サイズ 6.63pt/ 行 間 9.28pt 06 期 間 限 定 キャンペーン 用 バナー W304 H178px 画 像 内 テキストクリアマージン: 左 右 上 下 25px テキストセンター 合 わせ フォント: カテゴリータグ Open Sans Bold サイズ 4.8pt 見 出 し Roboto Black サイズ 12pt/ 行 間 14.4pt サブコピー Open Sans Regular サイズ 5.2pt/ 行 間 9.6pt W600 H350px 画 像 内 テキストクリアマージン: 左 右 上 下 50px テキストセンター 合 わせ フォント: カテゴリータグ Open Sans Bold サイズ 5.3pt 見 出 し Roboto Black サイズ 10.6pt/ 行 間 15.9pt サブコピー Open Sans Regular サイズ 5.3pt/ 行 間 10.6pt 07 情 報 素 材 用 バナー W145 H145px W300 H300px 第 二 階 層 12
08 トップバナー W720 H320px 画 像 内 テキストクリアマージン: 左 右 上 下 30px フォント: 見 出 し Roboto Black サイズ 16.8pt/ 行 間 18pt リード Open Sans Regular サイズ 7.2pt/ 行 間 10.4pt W640 H800px 画 像 内 テキストクリアマージン: 左 右 上 下 75px フォント: 見 出 し Roboto Black サイズ 18.55pt/ 行 間 13.25pt リード Open Sans Regular サイズ 7.95pt/ 行 間 11.48pt 09 メインコンテンツナビゲーションバナー W304 H178px 画 像 内 テキストクリアマージン: 左 右 上 下 15px テキストセンター 合 わせ フォント: 見 出 し Roboto Black サイズ 12pt/ 行 間 14.4pt W600 H355px 画 像 内 テキストクリアマージン: 左 右 上 下 30px テキストセンター 合 わせ フォント: 見 出 し Roboto Black サイズ 9.28pt/ 行 間 15.9pt 4.3 その 他 の 留 意 点 バナーに 使 用 するテキストは 背 景 とのコントラストをより 明 確 にすること 例 黒 グラデーションレイヤー 不 透 明 度 80% を 文 字 の 背 景 に 重 ねる 可 読 性 を 高 めて いる 事 例 テキストの 行 を 増 やす 場 合 は 画 像 内 のテキストクリアマージンを 維 持 すること 13
例 プロモーション 用 ビジュアルの 場 合 テキストクリアマージン 左 右 上 40px 下 25px の 部 分 にはテキストを 表 示 しない 行 を 増 やす 場 合 はテキスト 開 始 位 置 を 保 持 し 下 方 向 に 改 行 していこと レスポンシブデザインを 前 提 とし 表 示 領 域 を 考 慮 した 上 でそれぞれのサイズで 判 読 可 能 なテキストサイズを 用 い ること 14
5. ヘッダー フッターについて 5.1 ヘッダー ヘッダー 構 成 は 以 下 レイアウトを 適 用 する レスポンシブデザインに 対 応 するため デスクトップ モバイルごとに 基 本 レイアウトを 定 義 する デスクトップ ( 通 常 ) (メニュー 展 開 時 ) モバイル ( 通 常 ) メニュー 展 開 時 15
5.2 フッター フッター 構 成 は 以 下 レイアウトを 適 用 します レスポンシブデザインに 対 応 するため デスクトップ モバイルごとに 基 本 レイアウトを 定 義 します デスクトップ モバイル 16
6. ページ 構 成 について 6.1 表 示 領 域 レスポンシブデザイン 対 応 を 考 慮 し 表 示 領 域 は 以 下 のように 定 義 する デスクトップ モバイル ブレークポイント 640px 最 少 表 示 幅 横 幅 :960px 横 幅 :320px ファーストビュー 縦 幅 :700px 縦 幅 :700px ファーストビューに 収 めるべき 要 素 を 配 置 すること 6.2 基 本 レイアウト 主 要 画 面 の 画 面 構 成 は 以 下 レイアウトを 適 用 する レスポンシブデザインに 対 応 するため デスクトップ モバイルごとに 基 本 レイアウトを 定 義 する デスクトップトップページ 第 二 階 層 以 下 1 グローバルエリア (ヘッダー) 2 コンテンツエリア 3 ローカルエリア 4 グローバルエリア (フッター) 17
モバイル トップページ 第 二 階 層 以 下 1 グローバルエリア (ヘッダー) 2 コンテンツエリア 3 ローカルエリア 4 グローバルエリア (フッター) 18
6.3 カラムおよび 余 白 主 要 画 面 のカラム 及 び 余 白 は 以 下 を 適 用 する レスポンシブデザインに 対 応 するため デスクトップ モバイルごとに 基 本 レイアウトを 定 義 する デスクトップ デザイングリッドは 12 カラム 1 カラム 80px コンテンツエリアは 最 大 幅 960px とし 基 本 レイアウトはこのグリ ッドルールに 従 うこと また 1 カラム 80px のうち 両 サイド 余 白 8px 余 白 を 除 いたセンター 部 分 64px をサブカラ ムとし 見 出 しの 位 置 や より 複 雑 なレイアウトが 必 要 な 場 合 はこのサブカラムを 使 用 することとする モバイル デザイングリッドは1カラム 640px コンテンツエリアは 最 大 幅 640px とし 基 本 レイアウトはこのグリッドルール に 従 い 最 少 幅 320px 表 示 時 は 比 率 を 維 持 すること また 1 カラムのうち サブカラム 600px サブカラムハーフ 320px 両 サイド 余 白 20px とし 見 出 しの 位 置 や より 複 雑 なレイアウトが 必 要 な 場 合 はこのサブカラムを 使 用 することとす る 19
6.4 カラー 6.4.1 ベースカラー ベースカラーは 以 下 を 使 用 する ベースカラーとはサイト 全 体 での 一 貫 した 印 象 を 保 つため サイト 内 で 使 用 する 色 を 指 す RGB: R237 G28 B36 HEX: #ed1c24 RGB: R51 G51 B51 HEX: #333333 RGB: R102 G102 B102 HEX: #666666 RGB: R153 G153 B153 HEX: #999999 RGB: R248 G248 B248 HEX: #f8f8f8 RGB: R255 G255 B255 HEX: #ffffff 6.4.2 背 景 色 背 景 色 は 以 下 を 使 用 します RGB: R248 G248 B248 HEX: #f8f8f8 RGB: R255 G255 B255 HEX: #ffffff 6.4.3 フォントカラー グラフィックテキストはベースカラーを 使 用 する HTML テキストカラーは 2. 使 用 フォントについて を 参 照 20
7. ナビゲーションについて 7.1 グローバルナビゲーション グローバルナビゲーションのレイアウトは 以 下 を 適 用 する レスポンシブデザインに 対 応 するため デスクトップ モバイルごとに 基 本 レイアウトを 定 義 する デスクトップ ( 通 常 ) (メニュー 展 開 時 ) モバイル ( 通 常 ) (メニュー 展 開 時 ) 21
7.2 パンくずナビゲーション パンくずナビゲーションは 第 三 階 層 以 下 のページに 挿 入 すること パンくずナビゲーションは ホームから 現 在 地 までの 階 層 を 記 載 し 現 在 地 以 外 のページにはそれぞれリンクを 設 定 す ること > の 階 層 を 表 現 すし ユーザーにいま 表 示 されているページがどの 階 層 にあたるのかを 知 らせること レスポンシブデザインに 対 応 するため デスクトップ モバイルごとに 基 本 レイアウトを 定 義 する デスクトップ モバイル 共 通 第 三 階 層 Event Calendar ページ 表 示 の 場 合 HOME[ 第 一 階 層 :リンクあり] > THINGS TO DO[ 第 二 階 層 :リンクあり] > Event Calendar[ 第 三 階 層 :リンクなし] 7.3 ローカルナビゲーション ローカルナビゲーションのレイアウトは 以 下 を 適 用 する レスポンシブデザインに 対 応 するため デスクトップ モバイルごとに 基 本 レイアウトを 定 義 する デスクトップ ( 通 常 ) (マウスオーバー 及 びページ 選 択 時 ) モバイル モバイルではローカルナビゲーションは 設 置 せず グローバルナビゲーション(7.1)およびフッターナビゲーション (5.2)で 対 応 することとする 22