効果的なWEBサイトの作り方

効果的なWEBサイトの作り方
～アクセシビリティを考慮したWEBサイト構築～
今日の献立
アクセシビリティって何？
実際どういう事に気をつけるべきか？
実例を見ながら考えてみよう
どうすればいいか？
アクセシビリティとは？
高齢者・障害者を含む誰もが、様々な製品や建物や
サービスなどを支障なく利用できるかどうか、あるいは
その度合いをいう。
(Wikipedia）
インターネットのウェブページの見やすさ、使いやすさ。
高齢者や障害者を含め、多くの人に利用できることを
意味するアクセシビリティの一。具体的には、画像や音
声にテキストによる解説の付与、色づかいの配慮、文
字の大きさの可変性など。
（大辞泉）
ウェブページにおけるアクセシビリティ
誰もが情報を取得・発信できる柔軟性
誰もが同様に情報を共有できる
公共サイトにおいては、情報取得機会の均等
性確保を担う情報保障上、重要な概念
W３Cが指針「WCAG」を提唱
W3C＝World Wide Web Consortium。WWW技術の標準化をすすめる団体。
マサチューセッツ工科大学(MIT)やCERN（欧州合同素粒子原子核研究機構）をはじめ、
関係する企業や大学・研究所などで設立。
WCAG＝Web Content Accessibility Guidelines。W3Cが提唱したウェブア
クセシビリティ指針。
サイトの目的、内容を考える
何を目的にするか？
PR、お知らせ、部内利用、etc…
誰を対象に？
受験生、受験生保護者、高校等、部内者、etc…
コンテンツ案
具体的にどういう情報を載せるか
サイト公開の基本姿勢
誰もがわかりやすい情報提示
負荷や疲労が最小限になるようなデザイン
視覚や聴覚に障害のある方への考慮
ブラウザに依存しない
悪い配色（色覚に異常がある人）
Ｃ型（一般色覚）
Ｐ型（Protanope）強度色弱
ＲＧＢ
Ｄ型（Deuteranope）色弱
ＲＧＢ
ＲＧＢ
Ｔ型（Tritanope）色弱
グレイスケール
悪い配色の改善
色の心理効果にも留意
温度
重さ
情熱的/攻撃的/自己中心的
好奇心/幼稚/神経質
清潔/純粋/敗北感
距離
高級感/厳粛/恐怖
気分
幸福/やさしさ/不安感
ﾊﾃﾞｼﾞﾐ
理知的/冷静/保守的
具体例：白内障患者の場合
具体例：低解像度モニターの場合（800ｘ600）
より多く見てもらうWEBサイトに
情報は常に新しく！
見やすいデザインで！
・見るブラウザによって左右されない
（ブラウザによって使えないタグがある）
・ユニバーサルデザイン
（見てて疲れない工夫。障害者への配慮）
・効果的な配置、使いやすい設計
（マウスアクションを少なく、人の行動特性も考慮）
悪いWEBサイトとは
訪問者の視点で考えない
自らのテクニックに酔う、見た目重視になる
目的を忘れてしまう
HPを作ることそのものが目的になってしまう
印刷物と間違える
モニターでどう見えるかの意識が薄い
独りよがりな美意識
悪趣味な色使い、毒々しい装飾
やる気がない
更新しない。忘れてしまっている。
悪いWEBサイトとは
訪問者の視点で考えない
自らのテクニックに酔う、見た目重視になる
目的を忘れてしまう
閲覧者のことを考えない運用
HPを作ることそのものが目的になってしまう
印刷物と間違える
モニターでどう見えるかの意識が薄い
独りよがりな美意識
悪趣味な色使い、毒々しい装飾
大学のイメージダウンにもつながる
やる気がない
更新しない。忘れてしまっている。
悪いWEBサイト例
訪問者の視点で考えない
自らのテクニックに酔う、見た目重視になる
目的を忘れてしまう
HPを作ることそのものが目的になってしまう
印刷物と間違える
モニターでどう見えるかの意識が薄い
独りよがりな美意識
悪趣味な色使い、毒々しい装飾
やる気がない
更新しない。忘れてしまっている。
例
アクセシビリティとユーザビリティ
アクセシビリティとは
・サイトに問題なく接続できる
各種のエラー
・画像、動画、文字、表などがきちんと読める
画像のリンク抜け、特殊な動画ファイル、
文字化け、色の選択、表が崩れる
・視覚・聴覚障害者への配慮
など
アクセシビリティとユーザビリティ
ユーザビリティとは
・使いやすさ
ユーザに”考えさせない”操作性
ページ内の利用しやすさ
サイト構成の分かりやすさ
無駄な構成（目的情報への到達性）
無駄なクリック、スクロール
クリックのしやすさ
など
閲覧者を意識したページづくりを
どんな人が見ているかわからない
小中学生、高校生、会社員、主婦、外国
人、
視覚障害のある人、聴覚障害のある人
おわり
ご清聴ありがとうございました

Download Report