第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」

Transcript

• 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 第２部・ビジュアルデザインの制作
• 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 ありがとうございました。