SlideShare a Scribd company logo
1 of 22
Download to read offline
on 2019/09/02
「誰」が「何」をする? みんなで考えてみよう!
自己紹介
澤田 望
パーマ
メガネ
老眼
ガリガリ
中年講師
岡山で独立 2014~ Webアクセシビリティ検証
イラスト制作
岡山情報ビジネス学院 非常勤講師
などなど
キヤノン ~2013 サイトデザイン監修
Webアクセシビリティ対応
WAIC 2011~ ウェブアクセシビリティ基盤委員会
コラムを担当
本日の目標
アクセシビリティを向上させたいと思っても
・具体的な進め方が分からない
・誰を巻き込めばいいのか分からない
整理しながら、みんなで考えよう。
取り組みたいことをブレイクダウンしてみよう
ワークショップ
席替えタイム!
チームメンバーの職種が
エンジニア / デザイナー / その他
になるように、いい感じに分かれよう。
とある実装担当者(アクセシビリティ覚えたて)の悩み
img要素にalt属性を
入れればいいね。
画像に代替テキストを
どんどん入れよう!
before
入れてみたけど...
これで適切なのかな?
実装担当者が考えるのには
限界がある?
入れようとしたけど...
原稿ないのかな?
after
これを放っておくと、
せっかく芽生えたやる気を枯らせてしまう。
\ みんなで考えよう /
「アクセシビリティ向上させるぞ!」という
「ポジティブな人」になりきってください。
色のコントラスト比を確保する
画像に代替テキストを設定する
色だけに頼らない表現にする
Webサイトのアクセシビリティを検証する
アクセシビリティへの取り組みを広める
動画をアクセシブルにする
文書構造をちゃんとする
キーボードで操作できるようにする
アクセシブルなテキストを書く
アクセシブルなサイトの運用を続ける
入力フォームをアクセシブルにする
「取り組みたいこと」の例
(アクセシビリティ向上のために)
取り組みたいこと
1
必要となる
作業/順序
実現のために
必要な作業を
洗い出す
2
:
必要となる
材料/コスト
各作業に必要な
コストを洗い出す
3
:
適任者
誰が適任なのか
考える
4
:
問題点/
考慮点
環境/ツール/
ガイドライン/
スキルなどなど
5
:
6. 最後に発表!ブレイクダウンして検討
作業内容
オーナーの
モチベーション
公共性/対象範囲
対象範囲/
技術レベル
本番/テストデータ
検証環境
制作ガイドライン
への反映
対象範囲/
技術レベル
修正方法の理解
妥当性の
判断スキル?
プロジェクト
要件定義書
JIS/WCAG等
の一般的スキル
スケジュール
見積り
費用見積り
見積書/請求書
JIS/WCAG等
の専門的スキル
検証レポート
サイトオーナー
ニーズ把握
方針検討
スケジュール確保
予算確保
発注
検証作業
修正作業
修正結果確認
ディレクター
プロジェクト
マネージャー
ディレクター
営業/
外部業社など
発注/決済
担当者
外部業社など
実装担当者
デザイナー
外部業社など
ディレクター?
検証レポート
例:担当サイトのアクセシビリティを検証したい
1. 全体概要の説明
2. 難しかった点
3. 工夫した?点
4. 気付きのあった点
5. 今後に向けて考えたこと
各チーム持ち時間:3分
発表のポイント
健全な運用体制がアクセシビリティを支える。
次回のお知らせ
次回は
「リーダブルな昼下がり on 2019/11/02 」
を「ハッシュタグ」にて開催予定です!
https://oka-kitanagase.hashtags.biz/ より
ご相談お待ちしてますっ!
@SawadaStdDesign

More Related Content

What's hot

What's hot (20)

MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 
20140903 sa business_seminar
20140903 sa business_seminar20140903 sa business_seminar
20140903 sa business_seminar
 
Cssnite in sapporovol14
Cssnite in sapporovol14Cssnite in sapporovol14
Cssnite in sapporovol14
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
 
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
 
サービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツサービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツ
 
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
 
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
 
働き方のプロトタイピング
働き方のプロトタイピング働き方のプロトタイピング
働き方のプロトタイピング
 
Webディレクション講座 - 初級編 -
Webディレクション講座  - 初級編 -Webディレクション講座  - 初級編 -
Webディレクション講座 - 初級編 -
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
 
Froidaleweb
FroidalewebFroidaleweb
Froidaleweb
 
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
 
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
 
あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティあなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 

Similar to 「誰」が「何」をする?みんなで考えてみよう!

デザインに騙されないデザイン
デザインに騙されないデザインデザインに騙されないデザイン
デザインに騙されないデザイン
Gyoda Nawoshi
 
Google CardbordとLeapMotion 〜お手軽VR〜
Google CardbordとLeapMotion〜お手軽VR〜Google CardbordとLeapMotion〜お手軽VR〜
Google CardbordとLeapMotion 〜お手軽VR〜
Yutaka Fujisaki
 

Similar to 「誰」が「何」をする?みんなで考えてみよう! (20)

グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
 
岡山をリーダブルな世界に
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界に
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
 
ただのエンジニアチームの改善を謀ったら。。。
ただのエンジニアチームの改善を謀ったら。。。ただのエンジニアチームの改善を謀ったら。。。
ただのエンジニアチームの改善を謀ったら。。。
 
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
 
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
 
Roo
RooRoo
Roo
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
 
デザインに騙されないデザイン
デザインに騙されないデザインデザインに騙されないデザイン
デザインに騙されないデザイン
 
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおAngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
 
「勝手に育つ」を育てる
「勝手に育つ」を育てる「勝手に育つ」を育てる
「勝手に育つ」を育てる
 
Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜
Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜
Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜
 
Google CardbordとLeapMotion 〜お手軽VR〜
Google CardbordとLeapMotion〜お手軽VR〜Google CardbordとLeapMotion〜お手軽VR〜
Google CardbordとLeapMotion 〜お手軽VR〜
 
アジャイルの本質 - Agile Japan 2019サテライト名古屋
アジャイルの本質 - Agile Japan 2019サテライト名古屋アジャイルの本質 - Agile Japan 2019サテライト名古屋
アジャイルの本質 - Agile Japan 2019サテライト名古屋
 
JSの会プレゼン資料.pptx
JSの会プレゼン資料.pptxJSの会プレゼン資料.pptx
JSの会プレゼン資料.pptx
 
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークスフリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
 
XP祭り2019 A-3-1 突然アジャイル人材の育成を任されたエンジニアの奮闘記
XP祭り2019 A-3-1 突然アジャイル人材の育成を任されたエンジニアの奮闘記XP祭り2019 A-3-1 突然アジャイル人材の育成を任されたエンジニアの奮闘記
XP祭り2019 A-3-1 突然アジャイル人材の育成を任されたエンジニアの奮闘記
 
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
 
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
 

More from Nozomi Sawada

More from Nozomi Sawada (16)

UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
 
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
 
コントラスト高めでいこう
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこう
 
代替テキストの基本から応用まで
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用まで
 
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さこんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
 
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
 
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
 
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
 
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
 

Recently uploaded

物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
Michael Rada
 

Recently uploaded (6)

事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)
 
Broadmedia Corporation. 240510fy2023_4q
Broadmedia Corporation.  240510fy2023_4qBroadmedia Corporation.  240510fy2023_4q
Broadmedia Corporation. 240510fy2023_4q
 
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
 
共有用_aio基本保守プラン_WordPressサイト_20240509.pdf
共有用_aio基本保守プラン_WordPressサイト_20240509.pdf共有用_aio基本保守プラン_WordPressサイト_20240509.pdf
共有用_aio基本保守プラン_WordPressサイト_20240509.pdf
 
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
 
company profile.pdf
company profile.pdfcompany profile.pdf
company profile.pdf
 

「誰」が「何」をする?みんなで考えてみよう!