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

Slides:



Advertisements
Similar presentations
案内図を作ろう 19 高校総体19 高校総体に向けて. 案内図を作ろう 学習の目的 – 問題解決の道筋をたてる – コンピュータで図形を描く 課題 – 学校への案内図を作る 分かりやすい地図とはどういう地図なのか、よく考え、 形にしてみよう。
Advertisements

1 第 3 章 第 2 節 ネットワークを活用した 情報の収集・発信 5 さまざまな表現方法の工夫 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開 情報 C プレゼン用資料(座学 34 ) 担当 早苗雅史.
第7章 Web サイトの公開 7.1 ファイルのアップロード 7.2 検索されやすい Web サイト 7.3 Web サイトの運営 7.4 アクセスビリティ.
ある学校の ピクトグラム 何の教室だろう? どんな学校だろう? 横浜清陵総合高等学校 情報科. 何の教室だろう ①.
IT 講習会 -PowerPoint- テックサポーター 板垣翔大. 目次  PowerPoint とは?  PowerPoint を起動しよう  基本操作を知ろう  SmartArt で情報の「見える化」  伝わるスライドのために  スライドショー  得する小技 IT 講習会 -PowerPoint-
卒業論文審査会 Web の読みやすさ実験ツールの開発 岩手県立大学 ソフトウェア情報学部 ソフトウェア情報学部 4 年 柴田 大樹 指導教員:鈴木克明 藤原康宏 市川尚.
プレゼンテーションからホームページ作成まで 情報システム入門 A 総合情報センター 非常勤講師 :中山 進.
見る人に優しいホームページ作 り NTCommittee2 関東勉強会 ブルーミング 花井貴久子 2002 年 11 月 30 日.
企画書作成ソフトウェアの開発 佐々木研究室 05k1134 吉村祥平.
企業としての経済活動や 社会貢献活動の情報を インターネットを通して 社外に広くアピール.
「Webアクセシビリティ」研究と Webページの試作 -視認性,操作性向上のための提案と試行錯誤的実践-
インターネットの利用 教科書 P22~27,36~41 埼玉県立大宮武蔵野高等学校・情報科.
プレゼンテーションからホームページ作成まで
WebショップにおけるWebデザイン 甲斐 広大.
情報処理 第8回.
情報処理 第7回.
Flashプレイヤーを使った動画配信 情報工学科 宮本 崇也.
join NASS ~つながりあうネットワーク監視システム~
使いやすいサイト・見やすいサイトってなんぞや 話す人: Fine Lagusaz
CEC公開授業 Webサイト制作にチャレンジ! 2007年11月20日 於:東京都立板橋有徳高校 学校インターネット教育推進協会.
ホームページづくりに挑戦しよう 常信伊佐夫 スペースバーを押して進めてください.
情報処理 第13回の教材 プレゼンテーションソフト PowerPoint 高知大学 共通教育 理学部 対象 担当:塩田 ここはメモを書く欄。
情報処理 第12回の教材 プレゼンテーションソフト PowerPoint 高知大学 共通教育 理学部 対象 担当教員 : 塩田
NTTクラルティの概要 ★会社名 ★所在地 ★営業開始日 ★社員数 ★業務内容 NTTクラルティ株式会社
CG作品展示サイト”Fragments” ~ 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン~
第1回 HTML5入門.
EpWWWサーバ 北海道大学 理学院 宇宙理学専攻 M1 古田裕規.
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
企業としての経済活動や 社会貢献活動の情報を インターネットを通して 社外に広くアピール.
Webページを制作しよう! 応用編 高校1年⑩「社会と情報」.
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
第3章 第2節 ネットワークを活用した 情報の収集・発信 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開
Webサイト運営 09fi118 橋倉伶奈 09fi131 本間昂 09fi137 三上早紀.
情報工学科 05A2301 樽美 澄香 (Tarumi Sumika)
WebCluster スライドショーで見る操作ガイド
WebCluster スライドショーで見る操作ガイド
インターネット活用法 ~ブラウザ編~ 09016 上野喬.
カラーユニバーサルデザイン支援ツール 色弱模擬フィルタ「バリアントール」
一般常識・時事問題 ソフトウェア開発 佐々木研究室 05k1104 内田あさこ.
自動車レビューにおける検索と分析 H208032 松岡 智也 H208060 中西 潤 H208082 松井泰介.
卒業研究成果発表会 Webの読みやすさ実験ツールの開発
Kintone 新デザインコンセプト サイボウズ株式会社 2016/10/28 更新.
ウェブアクセシビリティを必要とする 障がい者・高齢者のニーズ
Microsoft Office クイックガイド ~OneNote 2013~
基礎プログラミング演習 第1回.
2016年度秋期 成果発表会 2016年11月25日 大阪開発センター 技術一部 畑中 龍樹.
HTTPとHTML 技術領域専攻 3回 中川 晃.
ホームページ 作成ガイド 経営学部経営学科2年 松本 隼人.
3 HTMLとcss ・ユーザビリティの観点からHPがどうあるべきか、はだいたいお分かりいただけたと思います
情報工学部 情報工学科 石原研究室 11A1021 重永 実沙希
情報処理 第8回.
売れるためのWEBサイト構築.
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
売れるためのWEBサイト構築.
[アクセシビリティはユニバーサルデザインと支援技術の共同作業である] 石川准
2004年11月22日卒業論文中間発表 「Webの読みやすさ 実験ツールの開発」
インターネット利用法実習 経営工学基礎演習a(第3週).
Web - 01 IIS を インストールしよう.
情報工学科 05A2301 樽美 澄香 (Tarumi Sumika)
HTML の成り立ち 惑星物理学研究室 4年 安達 俊貴.
一人暮らしの男性のための料理検索システムの設計
社会の情報化と人間 京都教育大学 理科領域専攻 3回生   林 絵莉香.
Garoon 新デザインのご紹介 2018年10月22日 サイボウズ株式会社 Copyright © 2018 Cybozu.
統計学の授業でのセカンド モニタとしてのiPhoneの使用
早稲田大学大学院 基幹理工学研究科 情報理工学専攻 後藤研究室 修士1年 魏 元
コンピュータ リテラシー 担当教官  河中.
情報処理 第13回の教材 プレゼンテーションソフト PowerPoint 高知大学 共通教育 理学部 対象 担当教員 : 塩田
基礎技術ー3 : Webページの標準規格について
売れるためのWEBサイト構築.
情報ネットワークと コミュニケーション 数学領域3回 山本・野地.
Presentation transcript:

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

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

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

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

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

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

悪い配色 (色覚に異常がある人) C型(一般色覚)P型( Protanope )強度色弱 D型( Deuteranope )色弱T型( Tritanope )色弱 グレイスケール RGBRGB RGBRGB RGBRGB

悪い配色の改善

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

具体例:白内障患者の場合

具体例:低解像度モニターの場合( 800 x 600 )

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

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

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

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

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

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

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

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