O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 67 Anúncio

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

Baixar para ler offline

2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。

2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (7)

Anúncio

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

Mais de Nozomi Sawada (13)

Anúncio

Mais recentes (20)

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

  1. 1. アクセシブルなワイヤーフレーム設計 〜ビジュアルデザイン 2015年4月26日 第5回 D2Dアクセシビリティ勉強会
  2. 2. 2 自己紹介
  3. 3. 3 SAWADA STANDARD DESIGN 澤田 望 @SawadaStdDesign WAIC WG2委員(2011年〜) キヤノンサイトのデザイン監修/運用(〜2013年) 2014年、岡山で独立
  4. 4. 4 今回の目標
  5. 5. 5 ↑ ここの克服。 アクセシブルなマークアップは覚えたけど、 デザインするときに、 何に注意すればいいのか分からない . . .
  6. 6. 6 実際に作ってみて覚えよう。(乱暴)
  7. 7. 7 ・ワイヤーフレーム設計 ・ビジュアルデザイン それぞれで、 アクセシブルにするためのポイントを覚えられる . . . はず。
  8. 8. 8 第1部・ワイヤーフレームの設計
  9. 9. 9 20分で(笑)作ってもらいます。
  10. 10. 10 ツールは何でもいいです(今回は)。 •手書き •Illustrator •PowerPoint •Excel •Cacoo(https://cacoo.com) •Moqups(https://moqups.com) などなど
  11. 11. 11 ただし、できるだけ 最終的なデザイン制作に使わないツールを使うこと。 ビジュアルデザインの要素を排除して構造を考えるため。
  12. 12. 12 誰と共有するのか? にもよります。 • ディレクター • デザイナー • プログラマー • クライアント
  13. 13. 13 ワイヤーフレーム作る前の準備 (本来は情報設計が完了した後にワイヤーのはず)
  14. 14. 14 •サイト(ページ)の目的 再認識(誰/ゴール/手段) •サイト構造 サイトマップ(今回は1ページだけ) ページ/コンテンツの細分化 •コンテンツの優先順位/ストーリー 何を見せたいか、よりも 何を見せなければならないか? 求められているのは何か? いったんリニアライズして考える。 → 最終的に読み上げの順序と深く関わる。
  15. 15. 15 • ウェブアクセシビリティ方針の策定 達成等級:A/AA/AAA 依存する技術:HTML/CSS/JavaScript など その技術を使用しなければ実現できないコンテンツか? JIS X 8341-3:2010対応するなら → 準備が必要
  16. 16. 16 本題:ワイヤーフレームを使って何を設計するのか?
  17. 17. 17 •文書構造(大まかな) 見出し/段落/箇条書き/表/画像など 意味合いの変わるエリアには見出しを。 (スクリーンリーダーは<div><section>の区別をデフォルトでは読み上げない) •ナビゲーション 表示項目/ラベル/表示方式/動作
  18. 18. 18 •レイアウト 位置/面積/サイト共通エリア/個別エリア CSSで無理をしなくて済むよう、文書構造/コンテンツの優先順位に従っ た順序と面積。 位置ではなく順序。(出来る限りシングルカラムで考える)
  19. 19. 19 見た目で文書構造が分かる? <h2> <img> <p> <h2> <p> <img>
  20. 20. 20 これなら分かる <h2> <img><p> <h2> <p><img>
  21. 21. 21 こうかも知れない <h2> <img><p> <h2> <p><img>
  22. 22. 22 読み順:F字の法則 / 左→右 / 上→下 <img> <h2> <p> <img> <p> <h3> <h3> 1 2 3
  23. 23. 23 前へ >< 次へ < 進む 戻る > 気持ち悪い?
  24. 24. 24 前へ:左 / 次へ:右 (経験則に基づく) 次へ >< 前へ < 戻る 進む >
  25. 25. 25 •コンテンツのボリューム 文字数/行数/画像サイズ/画像枚数/固定コンテンツ/可変コンテンツ •コンテンツの動作(必要に応じて) カルーセル/モーダルダイアログ/動的なサイズやレイアウト変更 •マルチデバイス対応(必要に応じて) RWD/レイアウト変更?/画像サイズ/文字サイズ
  26. 26. 26 ワイヤーフレーム設計する上でも、 アクセシビリティの基本は変わりません。
  27. 27. 27 •知覚可能 順序通り、欠落なく読めるレイアウト •操作可能 •理解可能 一貫したナビゲーション/ラベル/名前 •頑健性 (各コンテンツのアクセシビリティはデザイン〜マークアップ時に考慮)
  28. 28. 28 JIS X 8341-3:2010 達成等級Aの 達成基準を満たすために必要なこと
  29. 29. 29 •7.1.3.2 意味のある順序 G57 コンテンツを意味のある順序で並べる cssオフでも意味が通じる順序で並べる。
  30. 30. 30 JIS X 8341-3:2010 達成等級Aの達成基準には 直接影響ない範囲でのアクセシビリティ
  31. 31. 31 •7.1.4.4 テキストのサイズ変更 (AA) G146: リキッドレイアウトを用いる リキッドじゃなくてもいいから、 文字を200%まで拡大しても破綻しないレイアウト。
  32. 32. 32 •7.3.2.3 一貫したナビゲーション (AA) G61 繰り返されるコンポーネントが表示されるたびに、 それを相対的に同じ順序で提示する
  33. 33. 33 •7.3.2.4 一貫した識別性 (AA) G197 同じ機能を有するコンテンツに対して、 一貫したラベル、識別名及び代替テキストを用いる。
  34. 34. 34 •言葉/ラベルの統一 特にナビゲーション/リンク ラベルが理解できない → たどり着けないぜ
  35. 35. 35 地図 アクセス ルート ご利用案内 交通案内 SHOP INFO マップ
  36. 36. 36 大事なのは一貫性。 表記統一チェックツールもある。 http://www.justsystems.com/jp/products/justright/
  37. 37. 37 では、実際に作るページについて
  38. 38. 38 前提:1ページに複数コンテンツをレイアウトする。 例)2014宝塚映画祭(http://2014.takarazukaeiga.com/)
  39. 39. 39 レイアウトするもの •D2Dロゴ •メインビジュアル(タイトル/キャッチコピー) •ナビゲーション(ページ内リンク) •about(D2Dについて:テキスト/写真) •活動報告(参加者の声:テキスト/写真) •ブログへのリンク(テキスト/ボタン or バナー) •コンタクト(入力フォーム) • SNSシェアボタンは必須ではない。設置するならキーボード操作可能に/文法的に正しく。
  40. 40. 40 では、制作開始!
  41. 41. 41 第2部・ビジュアルデザインの制作
  42. 42. 42 2時間で作ってもらいます。
  43. 43. 43 ビジュアルデザインを制作する上でも、 アクセシビリティの基本は変わりません。
  44. 44. 44 •知覚可能 知覚できる色/形状/レイアウト •操作可能 操作を妨げない動き/点滅/スクロール •理解可能 一貫した識別性 •頑健性 (マークアップ時に考慮するものもある)
  45. 45. 45 中でも特に •知覚可能 affordanceの延長として考える。 【 afford 】 与える/もたらす 【 affordance 】 環境や物体が与える意味や価値 「押すドア/引くドア」 「押せる感のあるボタン」など ↓ 要素の意味を伝えるデザインが重要 (コンテキストも影響)
  46. 46. 46 JIS X 8341-3:2010 達成等級Aの 達成基準を満たすために必要なこと
  47. 47. 47 •7.1.3.1 情報及び関係性 G117 フォントの種類や形状で伝えている情報をテキストでも伝える。 例)文中で 取消線を引いた削除部分 を別途「変更履歴」に。 G138 色で情報を伝えている場合、セマンティックなマークアップ(例: em、strong)を用いる。 ※strong要素はAS情報的には微妙... 例)赤文字で強調 例)ウェブフォントの違い
  48. 48. 48 •7.1.3.3 感覚的な特徴(形、大きさ、視覚的な位置、方向、又は音) G96 感覚的な特徴だけなく、テキストでも情報を伝える。 例)右の大きな丸いボタン ↓ 右の大きな丸い「実行」ボタン 実行
  49. 49. 49 •7.1.4.1 色の使用 G14/G122 色だけでなくテキストでも伝える。 例)入力フォームの必須項目(赤字だけじゃなく「必須」) G182 テキスト色の違いだけでなく視覚的な手がかり(大きさ/太さ/斜体 など)でも伝える。 例)文中のテキストリンクは色+下線 濃淡差/反転表示(印刷注意)/形状の違いも有効 G111 色とパターンを併用する。 例)グラフ ナビゲーションならアイコンも有効
  50. 50. 50 •7.2.2.2 一時停止、停止、非表示 G4/G11/G187/G152/G186/G191 動き/点滅/スクロールし ている情報が、(1) 自動的に開始し、(2) 5秒以上続き、(3) 他コンテンツ と並行して提示される場合、利用者がそれらを一時停止、停止、非表示に できる。 ただし、動き/点滅/スクロールが必要不可欠な場合は除く。 例)カルーセル
  51. 51. 51 •7.2.3.1 3回の閃光又は閾値以下 1秒間に3回以上点滅させない。 動画/アニメーションを仕込む場合 画面の一部でも
  52. 52. 52 •7.3.3.2 ラベル又は説明文 G89 データ形式/入力例を提供する。 例)全角カナ(サワダ) G184 フォーム又はテキストフィールド一式の先頭で、必須項目に関する 説明文を提供する。 G162 入力項目とラベルの関係がよく分かるように配置する。 ※ 離れていると弱視の利用者に問題。 変化に気づかせる設計。 そもそも入力欄だと分かるデザインになっているか?
  53. 53. 53 JIS X 8341-3:2010 達成等級Aの達成基準には 直接影響ない範囲でのアクセシビリティ
  54. 54. 54 •7.1.4.3 最低限のコントラスト (AA) 小さい文字(18(日本語は22)ポイント未満、太字は14(日本語は18)ポイ ント未満)の場合: G18: テキスト(及び文字画像)とその背景の間に、 4.5:1以上のコントラスト比が必要 大きい文字(18(日本語は22)ポイント以上、太字は14(日本語は18)ポイ ント以上)の場合: G145: テキスト(及び文字画像)とその背景の間に、 3:1以上のコントラスト比が必要 例外:アクティブではないボタンなど/装飾/誰も視覚的に確認できない/写真の 一部分のテキスト/ロゴタイプなど
  55. 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. 56 背景のグラデーションはコントラストに注意 見出し見出し見出し見出し 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 見出し見出し見出し見出し 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 本文本文本文本文本本文本文本文本文本文本文本本文本文本文 ←ここはよくても ←ここがダメ section毎に背景色にグラデーションを引いている例
  57. 57. 57 •7.2.4.7 視覚的に認識可能なフォーカス: (AA) G149/C15/G165/G195 フォーカスインジケータを消さない。 例) → → a { outline: none; } → ×
  58. 58. 58 •7.3.2.4 一貫した識別性: (AA) G197 同じ機能を有するコンテンツに対して、一貫したラベル、識別名及 び代替テキストを用いる。 アイコンの形状や矢印の向きも同じこと (アイコンの可読性にも注意) マップ ⦿ マップ ⚑ マップ ♨
  59. 59. 59 その他、JISに関わらないアクセシビリティ
  60. 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. 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. 62 •ナビゲーションでの現在位置の表示 商品情報 > サービス v イベント > SHOP INFO >
  63. 63. 63 脈絡もなくTipsを並べてしまいましたが . . . 「アクセシビリティ」と「ユーザビリティ」 似てるけど違う。
  64. 64. 64 アクセシビリティがちゃんとしてない ビジュアルデザインは、 ↓ • 見えない • 聞こえない • 使えない • 理解できない
  65. 65. 65 アクセシビリティがちゃんとしてない ビジュアルデザインは、 ↓ ↓ たどり着けないぜ • 見えない • 聞こえない • 使えない • 理解できない
  66. 66. 66 では、制作開始!
  67. 67. 67 ありがとうございました。

×