SlideShare a Scribd company logo
Submit Search
Upload
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Report
Nozomi Sawada
Designer at SAWADA STANDARD DESIGN
Follow
•
9 likes
•
2,201 views
1
of
67
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
•
9 likes
•
2,201 views
Download Now
Download to read offline
Report
Internet
2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
Read more
Nozomi Sawada
Designer at SAWADA STANDARD DESIGN
Follow
Recommended
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
1.7K views
•
41 slides
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
2.4K views
•
42 slides
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
2.4K views
•
57 slides
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
8.4K views
•
43 slides
ギリギリUXD
uenoyuuki
2.7K views
•
36 slides
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
4.6K views
•
38 slides
More Related Content
What's hot
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
185 views
•
32 slides
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
188.1K views
•
44 slides
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
schoowebcampus
5.6K views
•
57 slides
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
3.4K views
•
56 slides
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
8.5K views
•
34 slides
デザイナーからみた仕事をしやすいディレクター
take-it
73.9K views
•
53 slides
What's hot
(20)
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
•
185 views
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
•
188.1K views
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
schoowebcampus
•
5.6K views
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
•
3.4K views
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
•
8.5K views
デザイナーからみた仕事をしやすいディレクター
take-it
•
73.9K views
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
Daisuke Koshimizu
•
43K views
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
•
27K views
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
•
2.2K views
あなたの価値を高めるWebアクセシビリティ
力也 伊原
•
10.9K views
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
•
20.6K views
デザイナーが複業でデザイナーしてる話
Yuya Toida
•
2.8K views
聞いて覚えるマテリアルデザイン入門
正樹 平野
•
5.3K views
Goodpatch流、ユーザー視点のuiとデザイン設計_2013/07/24_第2回メンバーズモバイルセミナー
Members_corp
•
30K views
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
•
4.3K views
アクセシビリティとこれからのWebデザイン
力也 伊原
•
24.8K views
プロトタイピングツール投入のケーススタディ
力也 伊原
•
2K views
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
•
3.9K views
ノンデザイナーのためのWebデザイン講座
光利 吉田
•
5.8K views
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
•
31.2K views
Viewers also liked
遅くはない!今から始めるアクセシビリティ
milk54
1.1K views
•
36 slides
アクセシビリティとは - What Accessibility
milk54
2K views
•
26 slides
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
2.9K views
•
94 slides
アクセシビリティとは - Whataccessibility kobe Version
milk54
983 views
•
34 slides
ワークショップ間違いさがし - Spot the Difference 2016
milk54
1.4K views
•
17 slides
ココが変わった!JIS X 8341-3:2016 徹底解説
Web Accessibility Infrastructure Committee (WAIC)
5K views
•
58 slides
Viewers also liked
(7)
遅くはない!今から始めるアクセシビリティ
milk54
•
1.1K views
アクセシビリティとは - What Accessibility
milk54
•
2K views
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
•
2.9K views
アクセシビリティとは - Whataccessibility kobe Version
milk54
•
983 views
ワークショップ間違いさがし - Spot the Difference 2016
milk54
•
1.4K views
ココが変わった!JIS X 8341-3:2016 徹底解説
Web Accessibility Infrastructure Committee (WAIC)
•
5K views
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
•
2.9K views
Similar to 第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
さあ、デザインをはじめよう。DevLOVE関西
rie05
27.2K views
•
113 slides
プリント基板をレイアウトして発注してみようの会 Vol0
Dan Imagineer
817 views
•
35 slides
Dxライブラリテンプレート作成のすすめ
Umebosi
1.6K views
•
20 slides
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
9.6K views
•
73 slides
とにかく時間が無い案件を乗り切る画像書き出し
Yoshiya OKI
723 views
•
23 slides
わたしのVisual studio環境
Keigo Ando
4.2K views
•
28 slides
Similar to 第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
(20)
さあ、デザインをはじめよう。DevLOVE関西
rie05
•
27.2K views
プリント基板をレイアウトして発注してみようの会 Vol0
Dan Imagineer
•
817 views
Dxライブラリテンプレート作成のすすめ
Umebosi
•
1.6K views
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
•
9.6K views
とにかく時間が無い案件を乗り切る画像書き出し
Yoshiya OKI
•
723 views
わたしのVisual studio環境
Keigo Ando
•
4.2K views
2015robocon slide
SouNakatsugawa
•
189 views
作品は誰かに見てもらった方が良い!
Makiko M
•
915 views
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
典子 松本
•
1.3K views
ドメイン駆動設計を実践するプログラマーの悩み
haljik Seiji
•
4.6K views
「あったらいいな」を考える Roppongi designers community
Tomoko Nishina
•
559 views
Experience Visionのはじめかた に見るDevLOVE勉強会のススメ
陽一 滝川
•
1.3K views
「ドメイン駆動設計」の複雑さに立ち向かう
増田 亨
•
32.3K views
ABC2012 Spring: Android Design for Dummies
Nobuya Sato
•
1.6K views
UXデザイン✕アジャイル✕受託開発
Takuya Kitamura
•
3.4K views
LightSwitchで遊んでみた
Yoshitaka Seo
•
1.1K views
プロダクトデザインと3DCAD 講義資料
Yoichi Yamazaki
•
3K views
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
Aimi Shinohara
•
538 views
プロ用CMSフレームワークテーマ「echo」のご紹介
Seiko Kuchida
•
3.7K views
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
•
274.5K views
More from Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
1.9K views
•
84 slides
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
564 views
•
22 slides
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
1.5K views
•
48 slides
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
1.2K views
•
95 slides
コントラスト高めでいこう
Nozomi Sawada
2.9K views
•
81 slides
代替テキストの基本から応用まで
Nozomi Sawada
5.3K views
•
62 slides
More from Nozomi Sawada
(13)
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
•
1.9K views
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
•
564 views
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
•
1.5K views
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
•
1.2K views
コントラスト高めでいこう
Nozomi Sawada
•
2.9K views
代替テキストの基本から応用まで
Nozomi Sawada
•
5.3K views
岡山をリーダブルな世界に
Nozomi Sawada
•
725 views
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
•
1K views
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
•
1.3K views
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
•
2.5K views
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
•
17.4K views
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
•
3.3K views
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
•
14.2K views
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
1.
アクセシブルなワイヤーフレーム設計 〜ビジュアルデザイン 2015年4月26日 第5回 D2Dアクセシビリティ勉強会
2.
2 自己紹介
3.
3 SAWADA STANDARD DESIGN 澤田
望 @SawadaStdDesign WAIC WG2委員(2011年〜) キヤノンサイトのデザイン監修/運用(〜2013年) 2014年、岡山で独立
4.
4 今回の目標
5.
5 ↑ ここの克服。 アクセシブルなマークアップは覚えたけど、 デザインするときに、 何に注意すればいいのか分からない . .
.
6.
6 実際に作ってみて覚えよう。(乱暴)
7.
7 ・ワイヤーフレーム設計 ・ビジュアルデザイン それぞれで、 アクセシブルにするためのポイントを覚えられる . .
. はず。
8.
8 第1部・ワイヤーフレームの設計
9.
9 20分で(笑)作ってもらいます。
10.
10 ツールは何でもいいです(今回は)。 •手書き •Illustrator •PowerPoint •Excel •Cacoo(https://cacoo.com) •Moqups(https://moqups.com) などなど
11.
11 ただし、できるだけ 最終的なデザイン制作に使わないツールを使うこと。 ビジュアルデザインの要素を排除して構造を考えるため。
12.
12 誰と共有するのか? にもよります。 • ディレクター •
デザイナー • プログラマー • クライアント
13.
13 ワイヤーフレーム作る前の準備 (本来は情報設計が完了した後にワイヤーのはず)
14.
14 •サイト(ページ)の目的 再認識(誰/ゴール/手段) •サイト構造 サイトマップ(今回は1ページだけ) ページ/コンテンツの細分化 •コンテンツの優先順位/ストーリー 何を見せたいか、よりも 何を見せなければならないか? 求められているのは何か? いったんリニアライズして考える。 → 最終的に読み上げの順序と深く関わる。
15.
15 • ウェブアクセシビリティ方針の策定 達成等級:A/AA/AAA 依存する技術:HTML/CSS/JavaScript など その技術を使用しなければ実現できないコンテンツか? JIS
X 8341-3:2010対応するなら → 準備が必要
16.
16 本題:ワイヤーフレームを使って何を設計するのか?
17.
17 •文書構造(大まかな) 見出し/段落/箇条書き/表/画像など 意味合いの変わるエリアには見出しを。 (スクリーンリーダーは<div><section>の区別をデフォルトでは読み上げない) •ナビゲーション 表示項目/ラベル/表示方式/動作
18.
18 •レイアウト 位置/面積/サイト共通エリア/個別エリア CSSで無理をしなくて済むよう、文書構造/コンテンツの優先順位に従っ た順序と面積。 位置ではなく順序。(出来る限りシングルカラムで考える)
19.
19 見た目で文書構造が分かる? <h2> <img> <p> <h2> <p> <img>
20.
20 これなら分かる <h2> <img><p> <h2> <p><img>
21.
21 こうかも知れない <h2> <img><p> <h2> <p><img>
22.
22 読み順:F字の法則 / 左→右
/ 上→下 <img> <h2> <p> <img> <p> <h3> <h3> 1 2 3
23.
23 前へ >< 次へ <
進む 戻る > 気持ち悪い?
24.
24 前へ:左 / 次へ:右
(経験則に基づく) 次へ >< 前へ < 戻る 進む >
25.
25 •コンテンツのボリューム 文字数/行数/画像サイズ/画像枚数/固定コンテンツ/可変コンテンツ •コンテンツの動作(必要に応じて) カルーセル/モーダルダイアログ/動的なサイズやレイアウト変更 •マルチデバイス対応(必要に応じて) RWD/レイアウト変更?/画像サイズ/文字サイズ
26.
26 ワイヤーフレーム設計する上でも、 アクセシビリティの基本は変わりません。
27.
27 •知覚可能 順序通り、欠落なく読めるレイアウト •操作可能 •理解可能 一貫したナビゲーション/ラベル/名前 •頑健性 (各コンテンツのアクセシビリティはデザイン〜マークアップ時に考慮)
28.
28 JIS X 8341-3:2010
達成等級Aの 達成基準を満たすために必要なこと
29.
29 •7.1.3.2 意味のある順序 G57 コンテンツを意味のある順序で並べる cssオフでも意味が通じる順序で並べる。
30.
30 JIS X 8341-3:2010
達成等級Aの達成基準には 直接影響ない範囲でのアクセシビリティ
31.
31 •7.1.4.4 テキストのサイズ変更 (AA) G146:
リキッドレイアウトを用いる リキッドじゃなくてもいいから、 文字を200%まで拡大しても破綻しないレイアウト。
32.
32 •7.3.2.3 一貫したナビゲーション (AA) G61
繰り返されるコンポーネントが表示されるたびに、 それを相対的に同じ順序で提示する
33.
33 •7.3.2.4 一貫した識別性 (AA) G197
同じ機能を有するコンテンツに対して、 一貫したラベル、識別名及び代替テキストを用いる。
34.
34 •言葉/ラベルの統一 特にナビゲーション/リンク ラベルが理解できない → たどり着けないぜ
35.
35 地図 アクセス ルート ご利用案内 交通案内 SHOP INFO マップ
36.
36 大事なのは一貫性。 表記統一チェックツールもある。 http://www.justsystems.com/jp/products/justright/
37.
37 では、実際に作るページについて
38.
38 前提:1ページに複数コンテンツをレイアウトする。 例)2014宝塚映画祭(http://2014.takarazukaeiga.com/)
39.
39 レイアウトするもの •D2Dロゴ •メインビジュアル(タイトル/キャッチコピー) •ナビゲーション(ページ内リンク) •about(D2Dについて:テキスト/写真) •活動報告(参加者の声:テキスト/写真) •ブログへのリンク(テキスト/ボタン or バナー) •コンタクト(入力フォーム) •
SNSシェアボタンは必須ではない。設置するならキーボード操作可能に/文法的に正しく。
40.
40 では、制作開始!
41.
41 第2部・ビジュアルデザインの制作
42.
42 2時間で作ってもらいます。
43.
43 ビジュアルデザインを制作する上でも、 アクセシビリティの基本は変わりません。
44.
44 •知覚可能 知覚できる色/形状/レイアウト •操作可能 操作を妨げない動き/点滅/スクロール •理解可能
一貫した識別性 •頑健性 (マークアップ時に考慮するものもある)
45.
45 中でも特に •知覚可能 affordanceの延長として考える。 【 afford
】 与える/もたらす 【 affordance 】 環境や物体が与える意味や価値 「押すドア/引くドア」 「押せる感のあるボタン」など ↓ 要素の意味を伝えるデザインが重要 (コンテキストも影響)
46.
46 JIS X 8341-3:2010
達成等級Aの 達成基準を満たすために必要なこと
47.
47 •7.1.3.1 情報及び関係性 G117 フォントの種類や形状で伝えている情報をテキストでも伝える。 例)文中で
取消線を引いた削除部分 を別途「変更履歴」に。 G138 色で情報を伝えている場合、セマンティックなマークアップ(例: em、strong)を用いる。 ※strong要素はAS情報的には微妙... 例)赤文字で強調 例)ウェブフォントの違い
48.
48 •7.1.3.3 感覚的な特徴(形、大きさ、視覚的な位置、方向、又は音) G96 感覚的な特徴だけなく、テキストでも情報を伝える。 例)右の大きな丸いボタン ↓ 右の大きな丸い「実行」ボタン 実行
49.
49 •7.1.4.1 色の使用 G14/G122 色だけでなくテキストでも伝える。 例)入力フォームの必須項目(赤字だけじゃなく「必須」) G182
テキスト色の違いだけでなく視覚的な手がかり(大きさ/太さ/斜体 など)でも伝える。 例)文中のテキストリンクは色+下線 濃淡差/反転表示(印刷注意)/形状の違いも有効 G111 色とパターンを併用する。 例)グラフ ナビゲーションならアイコンも有効
50.
50 •7.2.2.2 一時停止、停止、非表示 G4/G11/G187/G152/G186/G191 動き/点滅/スクロールし ている情報が、(1)
自動的に開始し、(2) 5秒以上続き、(3) 他コンテンツ と並行して提示される場合、利用者がそれらを一時停止、停止、非表示に できる。 ただし、動き/点滅/スクロールが必要不可欠な場合は除く。 例)カルーセル
51.
51 •7.2.3.1 3回の閃光又は閾値以下 1秒間に3回以上点滅させない。 動画/アニメーションを仕込む場合 画面の一部でも
52.
52 •7.3.3.2 ラベル又は説明文 G89 データ形式/入力例を提供する。 例)全角カナ(サワダ) G184
フォーム又はテキストフィールド一式の先頭で、必須項目に関する 説明文を提供する。 G162 入力項目とラベルの関係がよく分かるように配置する。 ※ 離れていると弱視の利用者に問題。 変化に気づかせる設計。 そもそも入力欄だと分かるデザインになっているか?
53.
53 JIS X 8341-3:2010
達成等級Aの達成基準には 直接影響ない範囲でのアクセシビリティ
54.
54 •7.1.4.3 最低限のコントラスト (AA) 小さい文字(18(日本語は22)ポイント未満、太字は14(日本語は18)ポイ ント未満)の場合: G18:
テキスト(及び文字画像)とその背景の間に、 4.5:1以上のコントラスト比が必要 大きい文字(18(日本語は22)ポイント以上、太字は14(日本語は18)ポイ ント以上)の場合: G145: テキスト(及び文字画像)とその背景の間に、 3:1以上のコントラスト比が必要 例外:アクティブではないボタンなど/装飾/誰も視覚的に確認できない/写真の 一部分のテキスト/ロゴタイプなど
55.
55 •コントラスト比を計るツール • Colour Contrast
Analyser(http://www.paciellogroup.com/resources/contrastanalyser/) • Color Contrast Checker(http://webaim.org/resources/contrastchecker/) • checkmycolours(http://www.checkmycolours.com) •シミュレーションツール • Web Accessibility Toolbar(http://www.infoaxia.com/) • Photoshop/Illustrator CS4以降(ビュー/校正設定) • 色のシミュレータ(http://asada.tukusi.ne.jp/websimulator/) • Sim Daltonism(https://itunes.apple.com/ca/app/sim-daltonism/id693112260) ※ モノクロにしてみるのも手っ取り早い。
56.
56 背景のグラデーションはコントラストに注意 見出し見出し見出し見出し 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 見出し見出し見出し見出し 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 ←ここはよくても ←ここがダメ section毎に背景色にグラデーションを引いている例
57.
57 •7.2.4.7 視覚的に認識可能なフォーカス: (AA) G149/C15/G165/G195
フォーカスインジケータを消さない。 例) → → a { outline: none; } → ×
58.
58 •7.3.2.4 一貫した識別性: (AA) G197
同じ機能を有するコンテンツに対して、一貫したラベル、識別名及 び代替テキストを用いる。 アイコンの形状や矢印の向きも同じこと (アイコンの可読性にも注意) マップ ⦿ マップ ⚑ マップ ♨
59.
59 その他、JISに関わらないアクセシビリティ
60.
60 •フォントフェイスによる可読性の違い ヒラギノ明朝 ヒラギノ角ゴ UD新ゴ WebフォントでUDフォントが使用可能なサイト モリサワ (http://typesquare.com) fonts.com (http://www.fonts.com/ja) FONTPLUS
(http://webfont.fontplus.jp) amanaimages (http://amanaimages.com/font/web/) フォントサイズによる可読性にも注意
61.
61 •見出しの大小関係 文書構造を理解できる見出しのデザイン ♨ h2見出しh2見出しh2見出しh2見出し ♥ h3見出しh3見出しh3見出しh3見出し ◉
h2見出しh2見出しh2見出しh2見出し ● h3見出しh3見出しh3見出しh3見出し h2見出しh2見出しh2見出し h3見出しh3見出しh3見出しh3見出し
62.
62 •ナビゲーションでの現在位置の表示 商品情報 > サービス
v イベント > SHOP INFO >
63.
63 脈絡もなくTipsを並べてしまいましたが . .
. 「アクセシビリティ」と「ユーザビリティ」 似てるけど違う。
64.
64 アクセシビリティがちゃんとしてない ビジュアルデザインは、 ↓ • 見えない • 聞こえない •
使えない • 理解できない
65.
65 アクセシビリティがちゃんとしてない ビジュアルデザインは、 ↓ ↓ たどり着けないぜ • 見えない • 聞こえない •
使えない • 理解できない
66.
66 では、制作開始!
67.
67 ありがとうございました。