Embed Size (px)
Citation preview
「ヨコハマ・アートナビ ウェブサイト・リニューアル（再構築）業務委託」
業務説明資料 １章 一般事項 本業務説明資料は、公益財団法人横浜市芸術文化振興財団（以下「財団」という）が発注するヨコハマ・
アートナビ ウェブサイト・リニューアル（再構築）業務（以下「本業務」という）に適用する。 １ 目的 「ヨコハマ・アートナビ」は２００５年に開設。アートイベント情報を中心としたサイトとして
月約３００件の市内文化情報を発信しており、横浜市民や横浜を訪れる方々の情報源として活用さ
れてきました。しかし、これまで小規模な改修を繰りかえしてきたものの、情報抽出がし難い検索
機能や情報収集から公開までの作業の煩雑さ、モバイル閲覧環境への対応等が課題となっています。
そのため、イベント情報コンテンツの改善と、新たに横浜市内の芸術文化情報の顔となる内容とデ
ザイン性を兼ね備えたウェブサイトとなることを目的に、ウェブサイト・リニューアル（再構築）
について業務を委託します。 ＜想定するメインターゲット＞ ■横浜市民 ・音楽や美術鑑賞などアート活動の他にもスポーツや食など、様々な事に興味をもっている人 ・余暇の楽しみや人との交流、外出するきっかけとしてアート活動をとらえている人 ・「明日どこ行こう」「今週末の予定」など、比較的短いスパンで次の行動を考えている人 ■横浜市外からの来訪者 ・オリンピック観戦や国際会議出席などの目的で来浜する予定があり、横浜での過ごし方を考えて
いる人 ＜期待する成果＞ ■アーツフェスティバル、創造都市や文化振興の取り組み、文化施設・商業施設・街なかでのイベン
トなど、横浜市内の芸術文化情報を収集・発信するポータルサイトとして機能し、横浜市の魅力ア
ップに繋げる。 ■２０２０年のオリンピック、パラリンピックに向けた文化的な取り組みを紹介する場としても活用
し、横浜市内のみならず国内・海外からの利用も促進する。 ■いつでも、どこでも手軽に情報を取得できるよう、スマートフォン等モバイル端末での閲覧を重視
したサイトとする。 ■ユーザビリティやウェブアクセシビリティを重視した構成やスムーズな検索機能により、必要な情
報に短時間で容易にたどり着くことができるといったナビとしての役割を充実させ、利便性を強化
する。 ■イベント主体者からの情報提供（フォーム入力）、財団担当者による情報確認と公開など、情報収
集から公開までの業務を、安全なセキュリティーのもとスピーディーかつ容易に行えるような仕組
みを導入する。
2
２ リニューアルウェブサイトの公開時期 ２０１９年１１月１日（金）予定 ３ 適用範囲 本資料は本業務に関して必要な事項を定めるとともに、受託者が履行しなければならない事項を定
めたものである。 ４ 適用基準等 受託者は、本業務の実施にあたり、本資料ならびに関係する法令、省令、規則、細則、通知、通達
及び条例等を遵守しなければならない。 ５ 委託期間 契約の日から２０２０年３月３１日（火）まで ※２０２０年４月以降の契約については、２０２０年２月末日までに別途協議する。 ６ 著作物の使用等 （１）受託者は、本業務の実施に当たって、第三者が権利を有する著作物を使用しようとする時は、
当該諸作物の使用に必要な費用の負担及び使用許諾契約にかかる一切の手続きを行わなけれ
ばならない。この場合において、受託者は当該契約等の内容について事前に財団の承諾を得る
ものとする。 （２）本業務の実施に関し、第三者との間に著作権にかかる権利侵害の紛争等が生じた場合は、当該
紛争の原因が専ら財団の責めに帰す場合を除き、受託者の責任、負担において一切を処理する
こと。
７ 賠償責任 受託者は、本業務の履行により生じた受託者の責めに帰する諸事故に対しての責任を負い、損害賠
償の請求があった場合には受託者が一切処理し、その損害を賠償すること。 ８ ディレクター及び担当ウェブデザイナー、担当ウェブエンジニア （１）受託者は、本業務を円滑に遂行するためにディレクター及び担当ウェブデザイナー、担当ウェ
ブエンジニアを定め、財団に届け出るものとする。 （２）ディレクターは、本業務全般にわたり技術的監理を行わなければならない。 ９ 打ち合わせ等 （１）受託者は、財団担当者と緊密な連絡をとり、十分な打ち合わせを行って本業務を遂行するもの
とする。 （２）財団担当者との主要な打ち合わせには、ディレクターが出席するものとし、受託者の責任にお
いて議事録を作成し、遅滞なく財団に提出しなければならない。 （３）受託者は、契約書・仕様書の記載事項又は契約書・仕様書に定めのない事項について疑義が生
じた場合は速やかに財団担当者と協議するものとする。
3
２章 委託内容 １ ウェブサイトの企画設計及び構築業務 横浜市内の芸術文化情報サイト「ヨコハマ・アートナビ」を企画提案、設計、構築、実装する。 （１）留意事項 ア タイトルは「ヨコハマ・アートナビ」を踏襲すること。 イ スマートフォン等のモバイル端末での閲覧を重視すること。 ウ 別紙「必ず盛り込むメニュー・機能」に掲げる項目を盛り込むこと。 エ 財団担当者が専門的な知識を必要とせず、簡単な操作により情報を更新できるよう、CMS を
導入するなどして構築すること。 オ 財団が規定する WEB サイト制作ガイドライン（別紙）を参考にすること。 カ ユーザビリティーやウェブアクセシビリティは JIS X 8341-3:2016 で示されている適合レベル
AA に準拠すること。また試験結果を財団に報告し、ウェブ上で公開すること。 キ 財団ではイベント情報や収蔵品の LOD 対応を進めているが、本業務においても扱うイベント
情報の LOD 化を行うこと。RDF スキーマなど詳細は財団と協議の上決定する。 参照：ヨコハマ・アート・LOD （http://yan.yafjp.org/lod） ク 検索エンジンの SEO 対策を行うこと。 ケ SSL に対応すること。 コ 複数の OS、ブラウザでの動作検証を行うこと。（Windows、Mac、Internet Explorer11.0 以
降、Edge、Safari、Chrome、Firefox 等） サ 財団のウェブサイト管理者及び編集者に対するマニュアルを作成し、研修を実施すること。 シ 本書で構築したウェブサイトコンテンツ一式は２０２０年度以降も継続して使用するものと
し、他社による保守・運用もしくは外部保守に頼らなくても実用できるような構築とすること。 ２ ウェブサイトのデザイン、サイト名ロゴタイプ等の作成 ア 横浜らしさを意識し、芸術文化のサイトであることを表現するようなデザイン。 イ サイトを訪れるだけで満足感を得られ、再び利用したくなるような印象を与えるデザイン。 ウ ウェブサイトおよびウェブサイトのプロモーションツール（紙媒体等）で使用できるサイト名
ロゴタイプを制作すること。またそれを使用したリンク用のバナーを制作すること。 （１）留意事項 ア 障がい者、高齢者に対するアクセシビリティ実現を含む、多様なユーザーへの配慮。 イ モバイルや各種ブラウザでの閲覧において、ストレスなく利用できるデザインとすること。 ウ 多ジャンルのイベント情報に付属する画像に影響のないデザインとすること。 エ サイト名ロゴタイプは２案以上の提案をすること。 ３ ウェブサイトの効果測定
受託者は、Google Analyticsを組み込み、ウェブ解析が可能な状態にすること。 またウェブサイト内の検索ワードトレンドや閲覧ランキング等を分析できる状態にすること。
4
４ 現行ウェブサイトからの移行時期におけるイベント情報の入力業務 現行ウェブサイトには先々の情報が掲載されているため、新ウェブサイトの公開日以降 2 か月分
（500 件程度）の情報については、受託者が新ウェブサイトに情報を移行すること。 （１）留意事項 ア 当業務は新ウェブサイト公開日までに完了すること。 イ 作業時期や情報取得方法については、財団と打合せを行い進めること。 ５ ウェブサイトの保守・運用 受託者は契約期間中を通じて保守運用を行う。 （１）留意事項 ア データ管理は財団の保有するサーバーを使用すること。 イ サーバーについては、財団のサーバー管理担当者と打ち合わせ・調整等して進めること。 ウ 適切な監視・障害対応、点検・保守、不正アクセス防止及び改ざん防止策等のセキュリティ対
策及び効果測定を行い、その結果をもとに継続的に運用管理方法の改善を行う等、ウェブサイ
トの安定稼働に努めること。またトラブルが起こった場合は、12 時間以内に財団と連絡を取り
合い、そのトラブルの原因を調査し解消すること。なお、サーバー保守 については財団が行
うものとし、受託者はサイト保守に関する業務を行う。 エ 初期のシステム運用における不具合が生じた場合を想定し、財団と受託者の連絡体制を構築し、
すみやかにトラブルを解消できるよう対応をとること。また対応時は書面をもって報告するこ
と。 オ システムについて脆弱性が発見されるなど改修の必要性が生じた場合は、迅速に対応すること。
その際、システムの更新履歴等を管理すること。 カ データのバックアップに関しては、万が一データが消失した場合であっても、速やかな復旧が
可能な体制を提供する事。 キ 情報公開、個人情報の保護について、横浜市及び財団の基準に準じた措置を講じること。
６ 成果品 受託者は本業務が終了したときは、下記の成果品を納品するものとする。 （１）成果品一覧 ア ウェブサイト要件定義書
イ ウェブサイト詳細設計書
ウ ウェブサイト公開
エ サイト名ロゴタイプやバナー等のデザインデータ（CD-RもしくはDVD）
オ ウェブサイト管理者及び編集者に対するマニュアル（PDF形式）
（２）成果品の納品について 成果品の納入にあたっては下記の事項に留意すること。 ア ウェブサイトは指定するサーバーへの実装をもって納品とする。 （３）納品場所 公益財団法人横浜市芸術文化振興財団 広報・ACY グループ
5
（４）保証
引渡し後、引渡し日より起算して3か月以内に生じた調整不良及び故障等で、受託者の責任と
みなされるものについては、受託者が速やかに修理、交換または設定変更を行うものとする。
その費用は、受託者の負担とする。ただし、受託者の責任以外とみなされた場合には、発注者
と協議の上、対応を決めること。 ７ 補足事項 （１）ドメインは新規取得します（.com 使用予定） なお、ドメインの新規取得および管理は財団が行います。 （２）ウェブサイト制作要件 使用予定サーバーの仕様
ホスト名 sv912.xserver.jp
IPアドレス 157.112.152.13
OS Linux
CPU Xeon E5-2640 v4( 2.40GHz ) x 2
メモリー 192GB
Apache バージョン 2.4.6
Perlバージョン 5.16
PHPバージョン 7.2.x
MySQLバージョン 5.7.x
ホームディレクトリ /home/yaforjp2
6
別紙 1
必ず盛り込むメニュー・機能 下記項目は最低限の条件と位置付けるが、より高い効果が望める場合は代案を提案することができる。 （１）イベント情報を紹介するメニュー（現行サイトの「アートカレンダー」部分） ア 各イベントの詳細項目 ・タイトル、ジャンル、画像 ・日付・期間、時間、料金 ・紹介文・詳細などのフリー覧（文字数指定） ・問合せ先・URL ・会場（住所・連絡先・最寄駅・URL・画像・地図表示など） （２）イベント情報の検索機能 ア 検索項目 ・フリーワード ・日付・期間指定 ・エリアやマップ ・ジャンルやキーワード（複数選択可） 音楽、演劇、舞踊、古典芸能、落語・演芸、美術、ギャラリー、 展覧会、映像、写真、募集、講座、子ども、無料、体験 など （３）イベント情報入力フォーム ア イベント情報の提供はウェブ上の情報入力フォームに入力する方法を採用。 情報入力フォームを使用するためには登録者 ID が必要で、ID とパスワード入力によりログイン
できる方式とする。 イ 会場担当者、イベント主催者を主な登録者と想定しており、登録者は情報入力、修正、削除の申
請ができる。 ウ 登録者が情報入力、内容・表示確認をしてから情報公開を申請すると、管理者に通知が入り内容・
表示確認・承認をして公開するダブルチェックの方式を希望。 エ 複数件数（10～30 件程度）の情報を入力する場合、指定のエクセル一覧からインポートするこ
とができる。 オ 過去の情報から再利用できるなど、スムーズな入力ができる。 （４）横浜市内の文化施設を紹介するメニュー 市内文化施設（100 箇所程度）を検索、閲覧できる。またイベント情報と紐づける。 各施設の基礎情報は住所・連絡先・最寄駅・URL・紹介文・画像・地図表示など。 文化施設の基礎情報は財団が取得し、受託者に提供する。
7
（５）読み物形式のメニュー レポートやインタビューなどを文字と画像で紹介。月１本程度の更新を想定。 初期コンテンツは財団が受託者に提供する。以降の更新作業は財団担当者が簡単に行える仕組み
とする。 （６）横浜市内の文化情報（サイト）を総合的に紹介できるメニュー 横浜市が実施しているフェスティバルや取り組みを紹介するページ。 単なるリンクではなくそれぞれの特徴を紹介しつつ、公式サイトへ誘導する。 初期コンテンツは財団が受託者に提供する。以降の更新作業は財団担当者が簡単に行える仕組み
とする。 例 ＜アーツフェスティバル＞ ヨコハマ・トリエンナーレ http://www.yokohamatriennale.jp/ Dance Dance Dance https://dance-yokohama.jp/ 横浜音祭り https://yokooto.jp/ ＜組織＞ アーツコミッションヨコハマ https://acy.yafjp.org/ 横浜アートサイト https://y-artsite.org/ 横浜市芸術文化教育プラットフォーム https://y-platform.org/ ＜事業・イベント＞ ダンスコレクション http://yokohama-dance-collection.jp/ 横濱JAZZ PROMENADE http://jazzpro.jp/ 他 （７）SNS（Twitter、Instagram） Twitter、Instagram を新規開設するため、ウェブサイト上にフィードを埋め込むなど、SNS と
連携する。SNS の運用は財団が行う。 （８）多言語化の対応 多言語自動切り替えメニューの導入を基本とするが、イベントタイトルや会場名などは日英両表
記にし、固定情報のページは日・英別ページを作成するなどして対応する。
8
参考資料
「ヨコハマ・アートナビ」の現状データと課題 １．現状データ （１）アクセス数
H28 年度 H29 年度 H30 年度（～2 月） 4,066,273 3,746,384 3,455,050
（２）年度別イベント情報数（括弧内は月平均）
H25 年度 H26 年度 H27 年度 H28 年度 H29 年度 H30 年度（～2 月） 4614（385） 4045（337） 4726（394） 3318（277） 3371（281） 2473（224）
（３）月別イベント情報数 ＜H29 年度＞
4 月 5 月 6 月 7 月 8 月 9 月 10 月 11 月 12 月 1 月 2 月 3 月 250 257 256 253 318 291 309 341 299 226 271 300
＜H30 年度＞
4 月 5 月 6 月 7 月 8 月 9 月 10 月 11 月 12 月 1 月 2 月 3 月 177 295 272 246 222 186 219 184 274 216 182
9
２．課題 （１）検索機能の性能 ・検索結果の表示までに時間がかかっている。 ・トップページから詳細検索ができない。 ・詳細検索の場所がわかりづらい。 ・希望期間の指定ができないなど、情報抽出がし難い状況。 （２）イベント情報収集から公開までの作業の煩雑さ 現状のフロー図 編集部 施設担当者 （３）一時的な情報のみ ・収集した情報の発信のみで、読み物形式など主体的に発信する情報がない。 ・ＳＮＳを利用していないため、新規訪問者を呼び込むルートが乏しい。
A 施設（主には財団所管施設）
ファイルメーカー
情報収集・処理 ・取得した情報・画像を
サーバーに保存 ・画像のサイズ変更 ・プリントアウト ・CSV 変換
編集部に情報送信 ・指定フォーマット
（Excel）、手書きフォー
マット等に入力 ・画像
依頼・リマインド MAIL
ワードプレス
MAIL で情報提供
CSV データインポート ・FM 上で情報の統一、調整
データエクスポート ・CSV 形式
CSV データインポート
WP の管理画面で 内容確認 ・担当者と施設担当者の
Ｗチェック後ＷＥＢ公開
プレビュー確認 ・WP にログインしてプレ
ビューを確認･修正･校了
確認依頼 MAIL
MAIL で修正・校了連絡
Ｂ・Ｃ施設
WP の管理画面で 内容確認 ・担当者と上長のＷチェ
ック後ＷＥＢ公開
情報確認 公開されたＷＥＢ画面で
確認
公開完了連絡 MAIL
修正があれば連絡
www.yaf.or.jp
横浜市芸術文化振興財団
WEB サイト制作ガイドライン
2014.7.02 第二版 0203
公益財団法人 横浜市芸術文化振興財団
2
1- WEB サイト制作ガイドライン制定にあたって ................................................................................... 4
1-1. 目的 .............................................................................................................................................. 4
1-2. ガイドラインの対象となる領域とテーマ .................................................................................... 5
1-3. 適用範囲 ....................................................................................................................................... 5
1-4. ガイドラインの運用とサイト評価 ............................................................................................... 5
2- 制作方針とサイト概念 ........................................................................................................................ 6
2-1. 基本概念 ....................................................................................................................................... 6
2-2. 活用方針 ....................................................................................................................................... 6
2-3. ターゲット ................................................................................................................................... 6
2-4. 「本質を伝える」＝財団の基本的価値観と目的の可視化 ........................................................... 7
2-5. 環境の変化と背景 〜 WEB サイトの活用におけるパラダイムシフト .................................... 7
2-6. 時代環境にマッチした訴求のためのポイント ............................................................................. 9
情報発信・掲載情報 ................................................................................................................................ 10
3- 情報発信・掲載情報 .......................................................................................................................... 11
3-1. 財団ミッション広報のための財団サイトへのリンクの設置 ...................................................... 11
3-2. 施設と財団との関係性を記述するページの設置 ........................................................................ 11
3-3. 情報のタグ付けと CMS の活用 .................................................................................................. 11
3-4. 横断検索機能.............................................................................................................................. 12
3-5. 交通アクセス及び館内施設案内・バリアフリー対応案内 ......................................................... 12
3-6. 動画コンテンツについて ........................................................................................................... 13
3-7. プライバシーポリシー ............................................................................................................... 13
3-8. 問い合わせ ................................................................................................................................. 14
3-9. 多言語対応 ................................................................................................................................. 14
デザイン規定 .......................................................................................................................................... 15
4- デザイン規定 .................................................................................................................................... 16
4-1. ターゲット環境 .......................................................................................................................... 16
4-2. プラグイン ................................................................................................................................. 17
4-3. URL ........................................................................................................................................... 17
4-4. コーディングと HTML バージョン ........................................................................................... 17
4-5. リンク設定 ................................................................................................................................. 18
4-6. ヘッダについて .......................................................................................................................... 18
4-7. フッタ仕様 ................................................................................................................................. 18
4-8. 使用フォント定義 ........................................................................................................................... 20
4-9. パンくず定義.............................................................................................................................. 21
4-10. HTML 文書に関するヘッダー情報の記述 ................................................................................. 21
3
アクセシビリティ ................................................................................................................................... 23
5- アクセシビリティ ............................................................................................................................. 24
5-1. サイト全体に関わる要件 ........................................................................................................... 24
5-2. 画像・イメージマップに関する要件 ......................................................................................... 24
5-3. テキストに関する要件 ............................................................................................................... 25
5-4. リンク／ナビゲーションに関する要件 ...................................................................................... 25
5-5. テーブルに関する要件 ............................................................................................................... 26
5-6. マルチメディアに関する要件 .................................................................................................... 26
5-7. 文字色と背景色に関する要件 .................................................................................................... 26
5-8. レスポンスに関する要件 ........................................................................................................... 26
コミュニケーション ................................................................................................................................ 27
6- コミュニケーション .......................................................................................................................... 28
6-9. ソーシャルメディア連携 ........................................................................................................... 28
6-10. ソーシャルメディア運用 ........................................................................................................... 28
別紙 ........................................................................................................................................................ 29
≪参考≫ ガイドライン適用イメージ ................................................................................................... 30
≪技術資料≫ 横断検索機能 .................................................................................................................. 31
≪技術資料≫ RSS 出力 ........................................................................................................................ 31
4
1- WEBサイト制作ガイドライン制定にあたって
1-1. 目的
横浜市芸術文化振興財団（以下「財団」）が「WEBサイト制作ガイドライン」を制定する目的は、以下の通り
です。
1. 財団及び財団運営施設サイトとして統合的ブランディングを行うこと
• 統一感あるビジュアルによるブランディング
• ユーザー体験のクオリティーの統一感
• 財団のミッションと「今」を伝える動線の強化
に留意することで、財団関連Webサイトの統一感を醸成するとともに、「なぜやっているのか？」「なにをやっ
ているのか？」をより明確に伝達し、財団及び運営施設の統合的ブランドイメージの確立を図ります。
2. 時代に適合したコミュニケーションを強化すること
• ソーシャルメディア投稿の活用・運用の強化
• リスクとコミュニケーションのバランスに配慮したガイドラインと運用
• ユーザー接点の強化＝スマートフォン対応
に留意することで、ソーシャルメディアとスマートフォンの普及が加速する時代に適合した、一方的で固定的な
情報発信に留まらないコミュニケーション機能を強化したWEBサイトを作成・運営することを目指します。
3. 情報発信の整理と強化を行うこと
• リアルタイム性のある情報提供
• 各施設のイベント情報の整理された発信
• 横断的情報提供・検索
等を実現する機能の強化により、利用者をサポートする統一性、統一感のある機能を提供します。
4. さまざまな利用環境に適応して、最大限に情報を正しくお伝えするために、アクセシビリティ/ユーザビリテ
ィに配慮したWebサイトを構築します。
5
1-2. ガイドラインの対象となる領域とテーマ
WEBサイト制作ガイドラインが対象とする範囲は、情報発信・コミュニケーション・デザインの３つの領域にわ
たり、それぞれ以下のようなテーマに沿って制定します。
1-3. 適用範囲
本ガイドラインは財団及び財団運営各施設WEBサイト、関連WEBサイトに適用するものとします。
1-4. ガイドラインの運用とサイト評価
財団及び財団運営各施設WEBサイトの制作・運営に当たっては、「WEBサイト制作ガイドライン」に沿うこと
を基本とし、今後、WEBサイトのリニューアル・新規制作の際には、必ずこのガイドラインを参照してください。
ガイドラインでは、基本的に各項目について、「必須」か「推奨」の区分を示します。この区分に沿って、「必須」
項目については必ず対応し、「推奨」項目については、極力対応するよう、また即時対応が無理でもサイト改修時
などに対応するよう、努めるものとします。
また、ガイドラインに沿った制作・運用が行われているかについて、財団では、各WEBサイトについて、ガイ
ドラインに照らした「サイト評価」を定期的に行い、「サイト評価レポート」を提示することとします。
この評価の目的は、評価の点数を競うことではなく、各サイトの運営者が改善ポイントを具体的に明確に自覚でき
るようにすることです。各運営者はこのレポートを参考に、各WEBサイトの改善を図るよう、努めることとし
ます。
6
2- 制作方針とサイト概念
2-1. 基本概念
WEBサイト制作にあたり、情報を提供する者として、さまざまな条件、さまざまな環境のユーザーが、異なる状
況のもとで利用しているということを考慮する必要があります。
（無意識のうちにサイト利用者を限定していないか、選択していないかを意識することでもあります。）
誰もが快適に利用ができ、情報を取得できるWebサイトづくりを目指します。
■アクセシビリティ＝情報の取りやすさ
さまざまな環境での利用者や、幅広い年齢層、障がい者など、異なる条件での利用者に配慮し、「表示スピードの
向上」「Webブラウザだけで可能な表示」「確実に表示する検証の実施」などにより、できる限り情報を快適に利
用できるWEBサイト制作を行います。
制作にあたっては考慮すべきさまざまな条件がある一方、それぞれのアクセシブルを図る制作手法は、複数の状況
に対して有効となる場合が多く、結果としてWeb利用者全体にも利益をもたらします。
そのコンテンツがアクセシブル(Accessible)かどうかという場合、すべての人がサイト内の情報を利用することが
できた時、その内容はアクセシブルだと言えます。
■ユーザビリティ＝使い勝手
Webブラウザの持つ表示機能を最大限に生かした表示を目指すとともに、初心者にもわかりやすい情報の提示、
情報への案内(ナビゲート)を行います。
例えば、プラグインを利用したリッチなコンテンツ表示機能等については、サポートや説明をていねいに行う必要
があります。
ユーザビリティの考えは、決して、グラフィカルなものやマルチメディア表現等の使用を制限するものではなく、
多くの利用者にとって、より使い勝手の良いサイトにするための手法です。特に各施設のサイトを形成する基本情
報に関しては最大限に考慮される必要があります。
2-2. 活用方針
Webサイトは財団及び財団運営施設のグループ全体として、基本理念、運営方針、さらに個別の企画・イベント
の実施における、具体的情報伝達手段であり、各種戦略と施策の支援のためのツール、さらにコミュニケーション
ツールとして活用していくものとします。
1 ステークホルダーの役に立つ情報発信をします。
2 ステークホルダーとインタラクティブな関係性を構築します。
3 ステークホルダーへのサービスの提供接点を構築します。
2-3. ターゲット
財団運営各施設の利用者および関心を持つ層を主ターゲットとして位置づけます。
当財団及び各運営施設のステークホルダーである、市民、芸術文化関係者、自治体関係者、また、各メディアをも
対象として配慮します。
7
以上に基づき
1 利用者の環境変化への対応
2 利用者に的確な情報が提示できるユーザビリティの向上
3 情報の更新を含めた情報発信と情報管理、コンテンツ管理のレベルアップ
を図るWEBサイト制作を推進します。
2-4. 「本質を伝える」＝財団の基本的価値観と目的の可視化
各WEBサイトのWEBサイトのコンテンツ構成・表現方法の選択においては、以下のように、財団の基本とな
る３つの価値観を「伝えることを目的」とし、「可視化することを目標」として、しっかりと認識して、以下に例
示するようなコンテンツ・機能を選択していくことが望まれます。
2-5. 環境の変化と背景 〜 WEBサイトの活用におけるパラダイムシフト
これからのWEBサイト制作にあたっては、スマートフォンの普及によるデバイス環境の変化、ソーシャルメデ
ィアの発達による情報接触のタイミングとルートの変化により、WEBサイトの活用シーン・役割に大きな変化が
起きていることを考慮することが必要となります。
8
このような、「スマホ＆ソーシャル時代」のユーザー行動モデルは下図のように捉えることができ、WEBサイト
を制作・運用する上で、スマートフォンとソーシャルメディアへの対応を考慮することは必須となっています。
9
2-6. 時代環境にマッチした訴求のためのポイント
こうした時代環境に合わせて、施設や活動の内容と魅力を訴求していくためには、以下の図の左側のような情報の
接触と伝搬の変化に対応し、右側の各ポイントに留意してWEBサイトの強化を図る必要があります。
10
情報発信・掲載情報
11
3- 情報発信・掲載情報
財団サイトを核として各運営施設サイト相互間の統合的連携を推進するために、情報発信においては、以下の点に
留意して、掲載情報を制作・運用を行うこととします。
3-1. 財団ミッション広報のための財団サイトへのリンクの設置
財団が運営する各施設はいずれも、財団のミッションに沿って運営されていることをアピールし、統合的連携を明
示的に示すため、財団WEBサイト（http://fp.yafjp.org）へのリンクを設置するものとします。
※ページ上の表示方法については、別途デザイン規程の項を参照のこと。
必 須 財団WEBサイトトップページへのリンクの設置 (http://fp.yafjp.org)
【推奨】 財団WEBサイトに設置する財団のミッションページへのリンクの設置（http://fp.yafjp.org/mission/）
3-2. 施設と財団との関係性を記述するページの設置
各運営施設サイトはその施設を説明するページを設けて、財団と施設との関係性を明確にする文章を、ページの先
頭に記載することとします。該当ページはトップページのメニューからリンクし、利用者から容易にアクセスでき
るように設置します。
必 須 「（施設名）は、公益財団法人横浜市芸術文化振興財団が運営しています。」
「（施設名）は、公益財団法人横浜市芸術文化振興財団が運営する横浜市の指定管理施設です。」
※上記テキスト「公益財団法人横浜市芸術文化振興財団」から財団WEBサイトへリンクすること。
3-3. 情報のタグ付けとCMSの活用
財団運営各施設WEBサイト相互間で、類似したテーマや領域の情報の閲覧をスムーズにするため、またサイト
間の横断検索機能を将来的に拡充するために、企画・イベントについての情報（更新情報）について、共通の基準
に沿ったタグ付けを行うことを推奨します。タグは、一つの情報に複数付加できるものとします。
また、情報のタグ付けを含む、情報の管理更新の効率化のために、CMS（コンテンツ管理システム）を導入し、
運営担当者がCMS管理画面から、情報を追加・更新、タグ付けできるようにすることを推奨します。
【推奨】更新情報への共通タグ付け
・共通タグの内容は以下の通りとします。（今後、順次追加・拡張を見込んでいます。）
＜ジャンル＞ ：音楽・ギャラリー・落語・演芸・募集・イベント・演劇
写真・展覧会・古典芸能・舞踏・映像・書
西洋美術・日本美術・現代美術・演劇・能・狂言
クラシック・ポピュラー・ジャズ・ロック
＜時代＞ ：古典・近代・現代
＜形態＞ ：常設展・企画展・公演・ワークショップ・トークショー・講座・
その他イベント
＜対象＞ ：大人向け・子ども向け・親子向け
12
＜アーティスト名＞ ：作者・出演者の具体的名称
【推奨】ＣＭＳ活用による情報管理・更新
独自のCMSの構築・導入、あるいは、ブログシステム（WordPress、Movable Type等）の導入・
カスタマイズのいずれかを問わず、CMSを活用し、情報の追加・更新・タグの付加を行うものとします。
3-4. 横断検索機能
【推奨】横断検索機能のサイトへの設置
サイト内検索機能と共に、財団サイトが提供する、横断検索機能を組み込むことを推奨します。
サイト内検索機能と横断検索機能を切り替えて、同一の検索フィールドで検索できるように機能を
設置することがのぞましい形です。
※横断検索機能の設置方法は別途技術資料参照
【推奨】RSSの出力
各サイトでは、この横断検索機能に情報を渡すために、CMSの導入とRSS（サイト更新情報）の出力を
行うこととします。RSSのフォーマットについては、別途技術資料で定めることとします。
3-5. 交通アクセス及び館内施設案内・バリアフリー対応案内
財団運営各施設WEBサイトでは、館へのアクセス及び館内案内・バリアフリー情報を掲載することとします。
① 交通アクセス情報
(ア) 掲載場所と表記
必 須 最寄り駅・バス停の案内及びそこからのアクセス情報
必 須 ヘッダあるいはフッタの判りやすい位置にリンクを設置
【推奨】 「交通アクセス」「来館アクセス」「来館案内・アクセス」等の表記
(イ) 掲載内容
【推奨】（最寄り駅からのアクセス情報の例）
■例 最寄り駅：JR桜木町駅 徒歩10分
必 須 最寄り駅・バス停からのアクセス経路マップ（独自地図画像またはGoogle Map）
【推奨】 アクセス経路マップ上に複数ルートの掲載
【推奨】 経路マップの拡大表示、印刷機能
必 須 駐車場・駐輪場（自転車・バイク）についての案内
② 館内施設案内・バリアフリー対応案内
(ア) 掲載場所と表記
必 須 ヘッダあるいはフッタ、もしくはメインメニューの判りやすい位置にリンクを設置
【推奨】 館内施設案内：「フロアマップ」「施設案内」「館内案内」等と表記
【推奨】 バリアフリー対応：「ご来場の方へのサポート（バリアフリー案内）」と表記
【推奨】 子ども連れ・乳幼児対応：「小さいお子様・乳幼児のサポート」と表記
13
(イ) 掲載内容
【推奨】 フロアマップ上には受付（案内カウンタ−）・トイレ・AED設置場所を掲載
【推奨】 ベビーベッド・授乳室・対応トイレの位置を掲載
【推奨】 バリアフリー対応トイレ、スロープ、エレベータ、段差のない入場経路の情報
3-6. 動画コンテンツについて
動画情報を提供する場合は、YouTube等の動画共有サービスを利用可能とします。
アクセスによる負荷や利用者のアクセシビリティ向上のためにも、通常の情報を掲載するWebサーバーに動画フ
ァイルの設置は行わないようにします。
【推奨】財団が運営する動画チャンネル「YAF_ch」を活用し、動画を掲載することを基本とする。
・ ニコニコチャンネル：http://ch.nicovideo.jp/yaf
・ YouTube ：http://www.youtube.com/user/yokohamaArtNavi
・ Ustream ：http://www.ustream.tv/channel/yaf_ch
・ Vimeo ：http://www.videmo.com/yaf_ch （仮）
3-7. プライバシーポリシー
財団運営各施設WEBサイトでは、サイトのプライバシーポリシーを掲載することとします。
必 須 プライバシーポリシーの掲載
必 須 フッタ等判りやすい場所へのリンクの設置
必 須 アクセス解析ソフト「Google Analytics」 導入を順次進めることとし、導入時にはそれに伴う
プライバシーポリシーの掲載を行う。
（以下文面での掲載とする。）
当サイトでは、利用状況を把握するためにGoogle Analyticsを利用してアクセス情報を収集しており、
Google Analyticsから提供されるCookieを使用しています。
Google Analyticsの利用により収集されたデータは、Google社のプライバシーポリシーに基づいて管理
されています。Google Analyticsの利用規約・プライバシーポリシーについてはGoogle Analyticsのホ
ームページでご確認ください。
Google アナリティクス サービス利用規約
http://www.google.com/intl/ja/analytics/tos.html
Google ポリシーと原則
http://www.google.com/intl/ja/policies/privacy/
14
3-8. 問い合わせ
閲覧ユーザー・利用者からの問い合わせ窓口を必ず設置することとします。
必 須 問い合わせフォームを設置、ヘッダ・フッタあるいは全体メニューから判りやすくリンクします。
【推奨】リンク時の表記は「お問い合わせ」あるいは「ご意見・お問い合わせ」とする。
【推奨】問い合わせフォームの項目は以下の項目を基準とする。
・ お名前
・ 性別
・ 年令（年代選択式でも可）
・ 本文（ご意見・お問い合わせ内容）
3-9. 多言語対応
文化庁が推進する「東アジア文化都市」プロジェクトにおいて、日本国内の対象都市として横浜市が選定されてい
ることにも鑑み、外国人ユーザー・海外からの来訪者のために、多言語対応を進めるようにします。
必 須 言語切替メニューをヘッダ等、ページ上部の目立つ部分に設置、多言語切替機能を提供する。
必 須 日本語・英語の各言語の情報掲載
【推奨】韓国語・中国語（簡体）・中国語（繁体）の各言語の情報掲載
【推奨】固定情報（及び更新頻度の低い情報）は、上記各言語での翻訳の上、情報を掲載することとします。
【推奨】更新情報（展示・催事等）については、下記の優先順位で、各言語翻訳対応を行うこととします。
① 催事主催者から各言語の翻訳済み原稿の提供を受け、掲載する
② 運営者の責任において、各言語に翻訳し、掲載する
③ 上記のいずれの運営も難しい場合は、機械翻訳のリンクを設置し、以下の対応を行う
・Google翻訳へのリンクを掲載する
・参考情報であることの注記を併記する
【推奨】検索エンジン対応の観点から、言語別に構造的なURLとする。
そのため、サイトの更新情報管理にはCMSを導入し各言語の情報を一括管理することが望ましい。
・各言語対応の構造化されたURLの参考例
日本語 ：http://www.yaf.or.jp/jp/xxx/
英語 ：http://www.yaf.or.jp/en/xxx/
韓国語 ：http://www.yaf.or.jp/kr/xxx/
中国語（簡体）：http://www.yaf.or.jp/cn/xxx/
中国語（繁体）：http://www.yaf.or.jp/tw/xxx/
【推奨】ある言語にはあるが他言語には存在しないページがある場合の対応
存在しない当該言語のURLがリクエストされた場合、
翻訳コンテンツがない旨の当該言語表示のエラーページを表示するか、当該言語表示のトップページ
に転送する。
15
デザイン規定
16
4- デザイン規定
WEBサイト制作上のHTMLについての技術要件、デザイン表現、レイアウト、カラー表現等に関する指針で
す。ユーザビリティ、アクセシビリティを考えた上でのデザイン表現を行います。
4-1. ターゲット環境
下記、指定環境の初期設定状態で、想定した画面レイアウト通りに情報（テキスト、画像、リンク先）が表示さ
れ、問題なく動作するようにします。
古いバージョンのブラウザで表示、動作することを最優先として考えるのではなく、新しいテクノロジーを利用
する場合に、代替手段を提供するなどの配慮をし、ユーザビリティの確保に努めることが必要です。
■指定環境
<デバイス>
必 須 パソコン
【推奨】 タブレット・スマートフォン (iPad、iPhone 3GS 以降、AndroidOS を備えた端末)
<OS>
必 須 Windows 7、Windows 8
必 須 Mac OS 10.6 以降
【推奨】 iOS5 以降
【推奨】 AndroidOS 2.3 以降
<動作表示確認ブラウザ>
必 須 Internet Explorer 8.0 以上 の各最新版
【推奨】 Firefox 最新版
【推奨】 Chrome 最新版
必 須 Safari 最新版
＜画面サイズ＞
必 須 PCの場合、画面解像度:1024×768 pixel を基準とする。
Web ページ幅は、950~980 pixel の範囲としセンター表示とする。
【推奨】 タブレット・スマートフォンでは、webページ幅 320pixel を基準とし、
その他の横幅でもデザインが崩れないように留意する。
＜接続環境＞
【推奨】 モバイルデータ通信 （4G、3G） のユーザにも考慮すること
17
4-2. プラグイン
【推奨】
音声・映像・アニメーションなどのコンテンツを利用する場合、極力 HTML5にて記述し、ブラグインは使用
しないようにします。
【推奨】
プラグインを使用するコンテンツの場合には、利用するプラグイン名とバージョンを明記し、「ご覧いただくに
は、「プラグイン名」が必要です。「プラグイン名」は「プラグインボタン」をクリックしてダウンロードしてく
ださい。」などの案内を表記するようにします。
その際、セキュリティの確保のためにも常に最新版のプラグインを取得していただくように案内をします。
また、プラグインがない環境、あるいはプラグインを導入していない利用者を考慮し、基本的な情報を得るため
の代替手段を提供します。
【推奨】
Flashは、スマートフォン・タブレット（特に iPhone、iPad）が非対応なため極力利用しない。
利用する場合はFlash Player 9 以降 での動作を考慮します。
※Flashが動作しない場合、対象バージョンより古い場合に対し、代替表示を用意すること。
4-3. URL
必 須
サイトのURLはそのサイトのページ掲載状況を知るために必要な最重要要素であり、特にトップページは単一
のURLで統一すること。wwwや index.htmlの有り無しなど複数のURLで同一のページが存在しないように
留意します。（複数のURLからそのまま同一のページを表示するのではなく、一つのURLに転送して表示す
ること）
これを怠ると、検索エンジンがメインとなる正式なサイトを判断しにくくなったり、ミラーページ（同様のペー
ジが複数存在する状態）と認識され、検索エンジン評価を著しく下げてしまうおそれがあります。
4-4. コーディングとHTMLバージョン
【推奨】
HTML5 に準じたマークアップを行います。
XHTML 1.0 に準じたマークアップも許容することとします。
HTML上で文章構造を明確に定義します。構造を明確にすることで様々な環境からの閲覧に耐えうる表示を可
能とします。
JavaScript、CSS は、ターゲットブラウザで問題なく動作、表示することを確認します。
jQueryに準拠したJavascriptを使用した機能・表現も使用可能とします。サイト制作時の最新版の使用を推奨
します。
18
4-5. リンク設定
【推奨】
同一ドメインサイト内リンクと外部ドメインへのリンクは明確にわかるように区別して表示します。外部ドメイ
ンを表示する場合には、新規ウインドウを起動するようにします。
明確に区別するための参考例：右のようなマークをリンクの横に添える。
4-6. ヘッダについて
ナビゲーション、アクセシビリティの共通化の観点から、各ページのヘッダには、下記の項目のリンク及び機能
を設置することとし、基本的にデザインされたビジュアルで構成します。
必 須 ・財団ポータルサイト【注1】へのリンクの設置
※【推奨】共通デザインパーツを別途規定し、これを参考に設置することとします。
【推奨】
• 施設名称・施設ロゴ
• 休館日・営業時間
• 交通アクセス
• チケット購入・予約
• お問い合わせ
• 多言語切替リンク
• 文字サイズ切替
• サイトマップへのリンク
• 検索機能
4-7. フッタ仕様
フッタには、財団と施設との関係、利用者への情報取り扱いの明示、著作権表記などでコンテンツの発信者、所
有者を明示するクレジットをテキスト主体で記載します。
必 須
• 次のどちらかの一文を掲載
「（施設名）は、公益財団法人横浜市芸術文化振興財団が運営しています。」
「（施設名）は、公益財団法人横浜市芸術文化振興財団が運営する横浜市の指定管理施設
です。」
※上記テキスト「公益財団法人横浜市芸術文化振興財団」から財団WEBサイトへリンクすること。
• 財団名と財団トップページ【注2】へのリンク
• プライバシーポリシー
• 著作権表示
【推奨】フッタには下記の項目のリンク及び機能を設置することを推奨します。
• 施設名称・住所・電話番号
19
• 休館日・営業時間
• 財団ミッションページ【注2】へのリンク（別途バナーを設置する場合はフッタに限らない）
【注1】財団ポータルサイト：http://p.yafjp.org/
【注2】財団トップページ、ミッションページ：http://fp.yafjp.org/
20
4-8. 使用フォント定義
【推奨】
① 財団関連サイトのトーン＆マナーの統一感のために、サイトで表示させるフォント、行間、文字色等を次
のように推奨します。
【フォント】
・ヒラギノ角ゴシックプロ(Mac OS X標準搭載和文ゴシック体フォント)
・MSゴシック(マイクロソフト製OS標準搭載和文ゴシック体フォント)
・メイリオ(Windows Vista以降のマイクロソフト製OS標準搭載和文ゴシック体フォント)
・サンセリフ(Mac OS X、WindowsOS搭載英文フォント)
【背景色】
バックグラウンドカラー：白 カラーナンバー #FFFFFF
【本文指定】
基本フォントサイズ 13pixel
行送り 1.5em
フォントカラー グレー カラーナンバー#666666
【見出し】
フォントサイズ 15pixel相当
フォントカラー 適宜設定可能
【本文タイトル】
フォントサイズ 13pixel
フォントスタイル ボールド
フォントカラー 適宜設定可能
【テキストリンク】
フォントサイズ 13pixel
ボールド
フォントカラー グレー カラーナンバー#666666
マウスオーバー時カラー変更を行う。
フォントカラー は見出し色・タイトル色と統一感のあるカラーとする
クリック時、クリック後の変化はなし
【画像等のキャプション】
フォントサイズ 12pixel相当
本文行送り 1.2em
フォントカラー グレー カラーナンバー#666666
21
② 文字サイズをユーザーが変更できる機能を cssの切替により提供することを推奨します。
標準：100% 拡大：120% 最大：150%
参考例：
4-9. パンくず定義
【推奨】
コンテンツの各ページに設置するパンくずは、ヘッダ及びナビゲーションメニュー領域と本文（コンテンツ）領
域との間に左寄せで配置します。
また、順序付きリストスタイル id＝breadcrumbで記述します。
■例：
<ol id="breadcrumb">
<li><a href="./index.html">ホーム</a></li>
<li>> <a href="./access/index.html">交通アクセス</a></li>
</ol>
4-10. HTML文書に関するヘッダー情報の記述
Yahoo! や Google などの検索エンジンに対するSEO対策、またサイト内検索のヒット率を上げるためにもコ
ンテンツの各ページには、ヘッダー情報として該当ページの文書を表現する適確な情報の記述を行います。head
要素内に記述します。
必 須 title要素（document title）を使って文書の表題（タイトル）を記述します。
財団運営施設であることをタイトルタグに財団名を含めることで明記します。
■例 <title>横浜みなとみらいホール ｜ 横浜市芸術文化振興財団</title>
必 須 name属性を使って文書内容の説明（概要）を記述します。
content属性の値にその文書の内容を簡潔に表した説明文（要約文）を記述します。
Google などの検索エンジンでは、この要約文が検索結果に表示されるウェブページの
説明部分（スニペット）にもなります。
■例
<meta name="description" content="横浜みなとみらいホール 海の見えるコンサートホール：クイーンズスク
エア横浜にある 1998年に開館したコンサートホール。友の会、コンサートメイト。横浜市西区。">
必 須 name属性を使って文書のキーワードを記述します。
文書のキーワードとなる語句を選定し、content属性の値にカンマ（,）区切りでキーワード
となる単語を複数記述します。
22
■例
<meta name="keywords"content="みなとみらいホール,コンサート,ホール,劇場,公演,横浜,みなとみらい,クイ
ーンズスクエア,友の会,クラシック,オペラ,劇,音楽,合唱,オーケストラ,横浜みなとみらいホール 海の見えるコ
ンサートホール,横浜市芸術文化振興財団">
23
アクセシビリティ
24
5- アクセシビリティ
WEBサイトのアクセシビリティー確保の観点から、以下の項目はすべて【推奨】とします。
5-1. サイト全体に関わる要件
1 利用者が現在閲覧しているページを（利用者に予告することなく）自動的に更新、或は自動的に他のページ
に移動、或は新規のウインドウを開くようなことはしません。
利用者によっては、閲覧しているページの自動的な変化や移動に気付かなかったり、戸惑ったりする場合が
あります。
特に、音声ブラウザを利用されている場合には、新しいウインドウが開いたことを理解できず、操作不能と
なる場合があります。
2 文書の基本となる自然言語を明示し、指定できる場合には対応する言語コードを記述します。
lang 属性を用いて言語を指定しておいた場合、音声ブラウザが自動的に指定した言語で表示（読み上げ）を
してくれます。
3 各ページに、そのページの内容が容易に識別できるよう、適切なページタイトルを付記します。
<title>のテキストとページ全文が一致していないことは、そのページの理解を妨げます。
また、<title>が不適切だと検索エンジンで検索されたり、ブックマークに登録された際に何のページなのか
わからない、といったことが起こります。<title>は必ず適切に記述するようにします。
4 利用者の意に反して、ページ内の情報を自動スクロールなどで移動させないようにします。
自動的にスクロールするページや、自動的にテキスト情報が変化していくと、読む速度に個人差があるため、
読み終わる前に次々と変化してしまうため、ページ全体を理解することが難しくなります。
5 Web サイトのページ画面全体、或は大部分が明滅するような表現はしません。また、やむをえず、一部分を
明滅させる場合にも(明滅が)継続しないようにします。
光過敏症性てんかんのある方は、明滅などの光のような急激な変化に対して、発作を引き起こす場合があり
ます。視覚に障害などがある場合や、加齢などの様々な原因で認知力等が低下してくるような場合には、明
滅や自動スクロールなどの変化する情報の表現手法では、内容を把握してもらうことが困難になる傾向があ
ります。
5-2. 画像・イメージマップに関する要件
1 画像、音声などのイメージ情報には、必ず同等の役割を果たすテキスト情報を記載します。
テキストブラウザの利用者や音声ブラウザを使用している方にとって、内容を把握するのが困難な情報があ
ります。このような場合でも正確な情報提供ができるようにalt 属性で記述します。
2 画像化した文字はフォントの大きさやコントラストなどに注意して読みやすくする。主体となる文字列を12
pixel以上で表示させます。
25
通常のテキストでは文字のサイズなどを変更することが可能ですが、画像化した場合、画面を拡大するツー
ルなどを利用する以外に拡大する方法がありません。あらかじめ大きめの文字サイズで画像化し、読み易い
ようコントラストを調整しておくことにより、きちんと読むことが可能となります。
5-3. テキストに関する要件
1 曜日、日付、時刻などを表記する時には略字や記号は使用しません。
音声ブラウザなどの読み上げの際、略字や記号などを使用していると曜日、日付、時刻のいずれを指してい
るのか不明な場合があります。日付であれば、4/1 や4 月1日と表記してください。英語の日付については、
Apr 1としてもかまいません。
2 文書の見出しを表す要素は、文書構造を表す場合に利用するもので、文字サイズの変更を目的に使用しませ
ん。音声ブラウザでは見出しだけを読む機能があります。もし仮に見出しとはなり得ない通常の文章に見出
しのタグを用いてしまうと、読み上げのときにページ全体を読んでいるものと勘違いする可能性があります。
3 見出し・段落・リストなどは文書構造を正しく表すためのタグ記述をします。
見出しや段落、リストがHTMLとしての正規表現がされていると非常に読みやすく、理解度も深まります。
4 レイアウトや表現のために単語の途中にスペースや改行を入れません。
音声ブラウザでは単語の途中に改行を入れると、1 つであるはずの単語が複数の単語と誤って認識してしま
う可能性があります。
5-4. リンク／ナビゲーションに関する要件
1 ナビゲーションやメニューなどの中にリンクが複数並んでいる部分は、利用者が当該箇所を読み飛ばすこと
ができるようにします。
多くのWeb サイトでは左や上にメニューがあることが多いため、音声ブラウザの利用者は、そのメニュー
から読まれていく形となり、本文にたどり着くまで非常に時間がかかります。
メニューの手前から本文直前へのページ内リンク、また本文の終わりからはメニュー直前へのページ内リン
クを設けるようにします。
2 イメージマップを使用する場合には、反応する各領域と同じリンク先のテキストによるリンクも提供します。
イメージマップだけの場合、音声ブラウザではリンク先の情報を読み上げられません。クライアント・サイ
ド・イメージマップの場合は、<area>内にalt 属性をきちんと入れるようにしましょう。よく使われるリン
クの場合は、キーボードによりアクセスできるように対応することも必要でしょう。
3 リンク画像などのリンクには、リンク先が明確にわかるようなテキスト情報などを代替情報として各リンク
部分に付けます。
「リンクします」や「こちら」だけでは何にリンクしているのか把握できません。「■■■■情報については
こちら」といったある一定の意味を持ったテキストをリンクにしましょう。また、alt 属性などの指定も行
いましょう。
26
5-5. テーブルに関する要件
データを表すための表は、出来る限り単純な構造にして、適切なマーク付けをすることによりその内容を端的に
表現できるヘッダなどで明示します。
音声ブラウザを使用する視覚障害者の方には、ヘッダがないと読み上げ中のテキストが表であると認識するのが
困難な場合があります。
5-6. マルチメディアに関する要件
1 Flash ムービーや動画などの動的な内容のページは、その機能の中にアクセシブルなものを追加するか代替
情報を用意します。
flashの場合は flashコンテンツの閲覧ができない環境があるので、同等の内容を持つページを用意するよう
にしましょう。動画の場合は、音声による解説を用意したり、字幕をつけるなどしましょう。
2 音声情報には、テキストなどの代替手段を用意します。
Webコンテンツにおける音声情報を視覚的に把握してもらえるように代替のテキストを提供することで理
解してもらいやすくなります。
3 自動的に音を再生しないようにします。自動的に再生させる場合には、再生することを事前に明示し、音声
出力を利用者側で制御できるようにします。
Flash などを利用した情報の提供の場合などでは音声を自動的に再生させてしまう設定にすると、音声ブラ
ウザを利用している利用者にとっては音声情報が二重になり聞き取れない場合が発生します。
5-7. 文字色と背景色に関する要件
1 全てのページの背景色と前景色及び文字色とには十分なコントラスト（対照、対比）をはかり利用者がWeb
サイトを閲覧する時に識別できるようにします。
文字色と背景色の明度のコントラストが大きいほど文字などが読みやすくなるため、弱視の方や高齢者の場
合、特にそのコントラストを充分に確保する必要があります。また、色覚障害の方は黄と青、赤と緑、高齢
者の場合は青と黒、白と黄、青紫と黒といった配色を識別するのが困難です。
2 利用者がプリントアウトをすることが想定されるコンテンツの場合は、プリントアウト用のスタイルシート
やPDFファイルを準備するなどの配慮をします。その場合、対応ブラウザで正常に印刷ができるかどうか、
必ず検証してください。
5-8. レスポンスに関する要件
サイト閲覧の快適性を維持するために、WEBブラウザでアクセスした場合のレスポンスについての基準を定め
ます。
・トップページの表示時間：0.5秒以内
※ 1秒以上かかる場合は、財団から注意を行う場合があります。
※ 3秒以上の場合は、財団から改善を申し入れる場合があります。
27
コミュニケーション
28
6- コミュニケーション
6-9. ソーシャルメディア連携
WEBサイトをコミュニケーションの場として活用するために、ソーシャルメディアの連携と活用が不可欠とな
っています。ソーシャルメディアを積極的に取り込んで、WEBサイトの活性化を図ることを推奨します。
【推奨】
① トップページ及び情報を掲載する各ページに、ソーシャルメディアへの伝搬のためのリンクボタンを設置
し、ソーシャルメディアへの伝搬を促進します。
• Twitterへつぶやくボタン
• Facebook 「いいね！」ボタン
② ソーシャルメディア上に来館者・ユーザーの体験が投稿されている声を、WEBサイト上でもまとめて可視
化し、コンテンツとして活用することを推奨します。
※必要なツール導入について、別途財団からの指示を行います。
6-10. ソーシャルメディア運用
各サイトの運営と共に、ソーシャルメディアでの情報伝搬を積極的に行うこととします。
【推奨】ソーシャルメディアアカウントへのリンクをトップページに目立つ形で設置する
【推奨】Twitterアカウントの運用
【推奨】Facebookページの運用
※運用負荷軽減のために、両者を連携させて、一方の更新のみで運用する方法でも良いこととします。
必 須 ソーシャルメディアアカウントの運用に際しては、別途定める「ソーシャルメディア
ガイドライン」を遵守することとします。
以上
29
別紙
30
≪参考≫ ガイドライン適用イメージ
ガイドラインで提示される、必須・推奨の対応項目を適用したWEBページのレイアウトイメージを以下に示
す。
文字サイズ（S M L） 多言語切替 （日 英 中 韓）
検索フィールド 検索
（公財）横浜市芸術文化振興財団について
お問合せ
コンテンツ領域
施設名称 営業時間・休館日 （公財）横浜市芸術文化振興財団
住所 プライバシーポリシー
©著作権表示
※下線はリンクを示す
フッタ
領域
交通
アクセス
サイト
マップ
（施設名称）は、公益財団法人横浜市芸術文化振興財団が運営しています。
チケット
ヘッダ
領域
施設ロゴ 施設名称
営業時間
休館日
31
≪技術資料≫ 横断検索機能
横断検索機能は、以下の javascriptを各サイトWEBページHTMLのヘッダに記載することで実装することと
する。
<script src="https:// http://fp.yafjp.org/common/serach.js"></script>
≪技術資料≫ RSS出力
各サイトのRSS出力は以下のフォーマットのいずれかに準拠することとする。
・ Atom （Atom配信フォーマット（Atom Syndication Format））
仕様資料：http://www.ietf.org/rfc/rfc4287.txt
・ RSS2.0 （really simple syndication）
仕様資料：http://www.rssboard.org/rss-specification
