Upload
nozomi-sawada
View
705
Download
6
Embed Size (px)
Citation preview
3
SAWADA STANDARD DESIGN
澤田 望
@SawadaStdDesign
WAIC WG2委員(2011年〜)
キヤノンサイトのデザイン監修/運用(〜2013年)
2014年、岡山で独立
10
ツールは何でもいいです(今回は)。
•手書き
•Illustrator
•PowerPoint
•Excel
•Cacoo(https://cacoo.com)
•Moqups(https://moqups.com)
などなど
14
•サイト(ページ)の目的
再認識(誰/ゴール/手段)
•サイト構造
サイトマップ(今回は1ページだけ)
ページ/コンテンツの細分化
•コンテンツの優先順位/ストーリー
何を見せたいか、よりも
何を見せなければならないか?
求められているのは何か?
いったんリニアライズして考える。
→ 最終的に読み上げの順序と深く関わる。
15
• ウェブアクセシビリティ方針の策定
達成等級:A/AA/AAA
依存する技術:HTML/CSS/JavaScript など
その技術を使用しなければ実現できないコンテンツか?
JIS X 8341-3:2010対応するなら → 準備が必要
17
•文書構造(大まかな)
見出し/段落/箇条書き/表/画像など
意味合いの変わるエリアには見出しを。
(スクリーンリーダーは<div><section>の区別をデフォルトでは読み上げない)
•ナビゲーション
表示項目/ラベル/表示方式/動作
18
•レイアウト
位置/面積/サイト共通エリア/個別エリア
CSSで無理をしなくて済むよう、文書構造/コンテンツの優先順位に従った順序と面積。
位置ではなく順序。(出来る限りシングルカラムで考える)
25
•コンテンツのボリューム
文字数/行数/画像サイズ/画像枚数/固定コンテンツ/可変コンテンツ
•コンテンツの動作(必要に応じて)
カルーセル/モーダルダイアログ/動的なサイズやレイアウト変更
•マルチデバイス対応(必要に応じて)
RWD/レイアウト変更?/画像サイズ/文字サイズ
36
大事なのは一貫性。
表記統一チェックツールもある。
http://www.justsystems.com/jp/products/justright/
38
前提:1ページに複数コンテンツをレイアウトする。
例)2014宝塚映画祭(http://2014.takarazukaeiga.com/)
39
レイアウトするもの
•D2Dロゴ
•メインビジュアル(タイトル/キャッチコピー)
•ナビゲーション(ページ内リンク)
•about(D2Dについて:テキスト/写真)
•活動報告(参加者の声:テキスト/写真)
•ブログへのリンク(テキスト/ボタン or バナー)
•コンタクト(入力フォーム)
• SNSシェアボタンは必須ではない。設置するならキーボード操作可能に/文法的に正しく。
45
中でも特に
•知覚可能 affordanceの延長として考える。
【 afford 】 与える/もたらす
【 affordance 】 環境や物体が与える意味や価値
「押すドア/引くドア」
「押せる感のあるボタン」など
↓
要素の意味を伝えるデザインが重要
(コンテキストも影響)
47
•7.1.3.1 情報及び関係性
G117 フォントの種類や形状で伝えている情報をテキストでも伝える。
例)文中で 取消線を引いた削除部分 を別途「変更履歴」に。
G138 色で情報を伝えている場合、セマンティックなマークアップ(例:
em、strong)を用いる。
※strong要素はAS情報的には微妙...
例)赤文字で強調
例)ウェブフォントの違い
48
•7.1.3.3 感覚的な特徴(形、大きさ、視覚的な位置、方向、又は音)
G96 感覚的な特徴だけなく、テキストでも情報を伝える。
例)右の大きな丸いボタン
↓
右の大きな丸い「実行」ボタン
実行
49
•7.1.4.1 色の使用
G14/G122 色だけでなくテキストでも伝える。
例)入力フォームの必須項目(赤字だけじゃなく「必須」)
G182 テキスト色の違いだけでなく視覚的な手がかり(大きさ/太さ/斜体
など)でも伝える。
例)文中のテキストリンクは色+下線
濃淡差/反転表示(印刷注意)/形状の違いも有効
G111 色とパターンを併用する。
例)グラフ
ナビゲーションならアイコンも有効
50
•7.2.2.2 一時停止、停止、非表示
G4/G11/G187/G152/G186/G191 動き/点滅/スクロールしている情報が、(1) 自動的に開始し、(2) 5秒以上続き、(3) 他コンテンツと並行して提示される場合、利用者がそれらを一時停止、停止、非表示にできる。
ただし、動き/点滅/スクロールが必要不可欠な場合は除く。
例)カルーセル
52
•7.3.3.2 ラベル又は説明文
G89 データ形式/入力例を提供する。
例)全角カナ(サワダ)
G184 フォーム又はテキストフィールド一式の先頭で、必須項目に関する説明文を提供する。
G162 入力項目とラベルの関係がよく分かるように配置する。
※ 離れていると弱視の利用者に問題。
変化に気づかせる設計。
そもそも入力欄だと分かるデザインになっているか?
54
•7.1.4.3 最低限のコントラスト (AA)
小さい文字(18(日本語は22)ポイント未満、太字は14(日本語は18)ポイ
ント未満)の場合:
G18: テキスト(及び文字画像)とその背景の間に、
4.5:1以上のコントラスト比が必要
大きい文字(18(日本語は22)ポイント以上、太字は14(日本語は18)ポイ
ント以上)の場合:
G145: テキスト(及び文字画像)とその背景の間に、
3:1以上のコントラスト比が必要
例外:アクティブではないボタンなど/装飾/誰も視覚的に確認できない/写真の一部分のテキスト/ロゴタイプなど
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
背景のグラデーションはコントラストに注意
見出し見出し見出し見出し
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
見出し見出し見出し見出し
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
←ここはよくても
←ここがダメ
section毎に背景色にグラデーションを引いている例
57
•7.2.4.7 視覚的に認識可能なフォーカス: (AA)
G149/C15/G165/G195 フォーカスインジケータを消さない。
例) →
→
a { outline: none; } → ×
58
•7.3.2.4 一貫した識別性: (AA)
G197 同じ機能を有するコンテンツに対して、一貫したラベル、識別名及び代替テキストを用いる。
アイコンの形状や矢印の向きも同じこと
(アイコンの可読性にも注意)
マップ ⦿ マップ ⚑ マップ ♨
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
•見出しの大小関係
文書構造を理解できる見出しのデザイン
♨ h2見出しh2見出しh2見出しh2見出し
♥ h3見出しh3見出しh3見出しh3見出し
◉ h2見出しh2見出しh2見出しh2見出し
● h3見出しh3見出しh3見出しh3見出し
h2見出しh2見出しh2見出し
h3見出しh3見出しh3見出しh3見出し