効果的な WEB サイトの作り 方 ～アクセシビリティを考慮した WEB サイト構築 ～. 今日の献立 アクセシビリティって何？実際どういう事に気をつけるべきか？実例を見ながら考えてみようどうすればいいか？

Presentation on theme: "効果的な WEB サイトの作り 方 ～アクセシビリティを考慮した WEB サイト構築 ～. 今日の献立 アクセシビリティって何？実際どういう事に気をつけるべきか？実例を見ながら考えてみようどうすればいいか？"— Presentation transcript:

1 効果的な WEB サイトの作り 方 ～アクセシビリティを考慮した WEB サイト構築 ～

2 今日の献立 アクセシビリティって何？実際どういう事に気をつけるべきか？実例を見ながら考えてみようどうすればいいか？

3 アクセシビリティとは？ 高齢者・障害者を含む誰もが、様々な製品や建物 やサービスなどを支障なく利用できるかどうか、 あるいはその度合いをいう。 (Wikipedia ） インターネットのウェブページの見やすさ、使い やすさ。高齢者や障害者を含め、多くの人に利用 できることを意味するアクセシビリティの一。具 体的には、画像や音声にテキストによる解説の付 与、色づかいの配慮、文字の大きさの可変性など。 （大辞泉）

4 ウェブページにおけるアクセシビ リティ 誰もが情報を取得・発信できる柔軟性誰もが同様に情報を共有できる 公共サイトにおいては、情報取得機会の 均等性確保を担う情報保障上、重要な概 念 W ３ C が指針「 WCAG 」を提唱 W3C ＝ World Wide Web Consortium 。 WWW 技術の標準化をすすめる団 体。マサチューセッツ工科大学 (MIT) や CERN （欧州合同素粒子原子核研究機構） を はじめ、関係する企業や大学・研究所などで設立。 WCAG ＝ Web Content Accessibility Guidelines 。 W3C が提唱したウェブ アクセシビリティ指針。

5 サイトの目的、内容を考える 何を目的にするか？ PR 、お知らせ、部内利用、 etc… 誰を対象に？ 受験生、受験生保護者、高校等、部内者、 etc… コンテンツ案 具体的にどういう情報を載せるか

6 サイト公開の基本姿勢 誰もがわかりやすい情報提示 負荷や疲労が最小限になるようなデザイ ン 視覚や聴覚に障害のある方への考慮ブラウザに依存しない

7 悪い配色 （色覚に異常がある人） Ｃ型（一般色覚）Ｐ型（ Protanope ）強度色弱 Ｄ型（ Deuteranope ）色弱Ｔ型（ Tritanope ）色弱 グレイスケール ＲＧＢＲＧＢ ＲＧＢＲＧＢ ＲＧＢＲＧＢ

8 悪い配色の改善

9 色の心理効果にも留意 温 度 重 さ 距 離 気 分 ﾊﾃﾞ ｼﾞﾐ 情熱的 / 攻撃的 / 自己中心的 好奇心 / 幼稚 / 神経質 清潔 / 純粋 / 敗北感 高級感 / 厳粛 / 恐怖 幸福 / やさしさ / 不安感 理知的 / 冷静 / 保守的

10 具体例：白内障患者の場合

11 具体例：低解像度モニターの場合（ 800 ｘ 600 ）

12 より多く見てもらう WEB サイト に 情報は常に新しく！見やすいデザインで！ ・見るブラウザによって左右されない （ブラウザによって使えないタグがある） ・ユニバーサルデザイン （見てて疲れない工夫。障害者への配慮） ・効果的な配置、使いやすい設計 （マウスアクションを少なく、人の行動特性も 考慮）

13 悪い WEB サイトとは 訪問者の視点で考えない 自らのテクニックに酔う、見た目重視になる 目的を忘れてしまう HP を作ることそのものが目的になってしまう 印刷物と間違える モニターでどう見えるかの意識が薄い 独りよがりな美意識 悪趣味な色使い、毒々しい装飾 やる気がない 更新しない。忘れてしまっている。

14 悪い WEB サイトとは 訪問者の視点で考えない 自らのテクニックに酔う、見た目重視になる 目的を忘れてしまう HP を作ることそのものが目的になってしまう 印刷物と間違える モニターでどう見えるかの意識が薄い 独りよがりな美意識 悪趣味な色使い、毒々しい装飾 やる気がない 更新しない。忘れてしまっている。 閲覧者のことを考えない運用 大学のイメージダウンにもつなが る

15 悪い WEB サイト例 訪問者の視点で考えない 自らのテクニックに酔う、見た目重視になる 目的を忘れてしまう HP を作ることそのものが目的になってしまう 印刷物と間違える モニターでどう見えるかの意識が薄い 独りよがりな美意識 悪趣味な色使い、毒々しい装飾 やる気がない 更新しない。忘れてしまっている。 例

16 アクセシビリティ と ユーザビリ ティ アクセシビリティとは ・サイトに問題なく接続できる 各種のエラー ・画像、動画、文字、表などがきちんと読める 画像のリンク抜け、特殊な動画ファイル、 文字化け、色の選択、表が崩れる ・視覚・聴覚障害者への配慮 など など

17 アクセシビリティ と ユーザビリ ティ ユーザビリティとは ・使いやすさ ユーザに ” 考えさせない ” 操作性 ページ内の利用しやすさ サイト構成の分かりやすさ 無駄な構成（目的情報への到達性） 無駄なクリック、スクロール クリックのしやすさ ユーザビリティとは ・使いやすさ ユーザに ” 考えさせない ” 操作性 ページ内の利用しやすさ サイト構成の分かりやすさ 無駄な構成（目的情報への到達性） 無駄なクリック、スクロール クリックのしやすさ など など

18 閲覧者を意識したページづくりを どんな人が見ているかわからない 小中学生、高校生、会社員、主婦、外国 人、 視覚障害のある人、聴覚障害のある人 どんな人が見ているかわからない 小中学生、高校生、会社員、主婦、外国 人、 視覚障害のある人、聴覚障害のある人 鉄則

19 おわり ご清聴ありがとうございました