SlideShare a Scribd company logo
川本 圭太 / GMO PEPABO inc.
2016.09.20 Design Casual Talks #1
目が見えない状態を
想定したUI設計
デザイナー
川本 圭太 @keita_kawamoto
GMOペパボ ホスティング事業部
@keita_kawamoto
GMOペパボ
“もっとおもしろくできる”

“インターネットで可能性
をつなげる、ひろげる”
• ひとりひとりが持つ力や可能性をひろ
げる
• インターネットと表現の可能性を追求
• いろんな人たちがインターネットで可
能性を開花し、活躍できるための環境
を創造
目が見えない状態を想定したUI設計
ほかには
ラップとか社内イベントとか
Rubyとかデスメタルとか
詳しくは
“ペパボ”で検索!!!!
個人では
目が見えない状態を想定したUI設計
本題
ある疑問が生まれたのは
今から少し前…
「画像文字をやめたから、
視覚障害者にも優しい設計に
なったと言えます」
あれ?
そうなんだっけ??
答えがわからないぞ???
「知らない」問題
•「見える」インターフェイスにばかり注力
• 視覚障害者への対応に向き合ったことがない
• img要素のalt設定もルールに従っているだけ
• むしろaltは画像読み込み失敗時用という認識
• 視覚障害者について、具体的なことを何も知らない
視覚障害者とは?

調べてみた
視覚障害者の概要
• 視覚が 弱い もしくは 全く無い 人たちのこと
• 残存視覚がある人を弱視者(ロービジョン)と呼ぶ
• 視覚をもたない人を盲/全盲(ブラインドネス)と呼ぶ
• 正常な視覚をもつ人を晴眼者と呼ぶ
• 行動の傾向:近代のアクセシビリティ向上によって健常者
と変わらない活動が可能になりつつある
[出典] 2016年9月時点 https://ja.wikipedia.org/wiki/視覚障害者
視覚障害者の概要
• 視覚以外に聴覚・触覚等の重複障害も多い
• 全盲よりも弱視の割合のほうが多い(7割)
• 弱視者の見え方は一通りではない
• 時間帯や光の加減などの条件変化に視覚も左右される
• WHOの弱視の定義は、「両眼に眼鏡をかけた矯正視力が
0.05以上0.3未満」
[出典] 2016年9月時点 視覚障害とは - 公益財団法人 関西盲導犬協会(http://www.kansai-guidedog.jp/knowledge/disease/)
弱視者の見え方の例(イメージ・個人差あり)
晴眼者 視野狭窄 白濁または霧視
低い視力 暗順応障害 羞明
[参考文献] 2016年9月時点 視覚障害とは - 高知県立盲学校(http://www.kochinet.ed.jp/mo-s/mt/post-28.html)

[参考文献] 2016年9月時点 2-1 視覚障害とは - 秋田県立視覚支援学校(http://kagayaki.akita-pref.ed.jp/shikaku-s/detail.html?id=361&category_id=61)
割合はどれくらい?
視覚障害者の割合・補足
•視覚障害者は日本全国1億2000万人中約30万人
•点字使用率は1割(!)しかない
•正確な統計はわからない?
• 上記の数字は障害者手帳の統計から出した推定値
• 厚生労働省が行ったのは実数調査ではない
• 障害者手帳を持っていない弱視者は100万人とする説あり
[出典] 厚生労働省 統計情報・白書 平成18年身体障害児・者実態調査結果 (http://www.mhlw.go.jp/toukei/list/108-1b.html)

[出典] 2016年9月時点 視覚障害者 全盲者と弱視者の割合 統計みたいなものが欲しい... - Yahoo!知恵袋 ( http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1049785990 )
ネットの利用方法
目が見えない状態を想定したUI設計
見え方も違えば、ニーズも違う
• 視野狭窄、白濁などケースの多さに対しニーズも多い
• グレースケール・カラー反転させることでまぶしさを軽減
• コントラストをはっきりさせ視認性向上
• 拡大鏡で任意の場所を拡大
• 設定の組み合わせで様々なケースに対応
• 画面を最適化してブラウジング
[出典] 2016年9月時点 視覚障害とは - 高知県立盲学校(http://www.kochinet.ed.jp/mo-s/mt/post-28.html)より参考箇所あり
目が見えない状態を想定したUI設計
今回はApple製
Mac用スクリーンリーダー
VoiceOverに注目
スクリーンリーダー?
• コンピュータの画面読み上げソフトウェア
• Windowsでは以下のソフトがメジャー
• NVDA
• JAWS
• PC-Talker
• MacではVoiceOver
まずは用意したものを
スクリーンリーダーで見てみる
視覚なしで
得られる情報
「リンク keita's Favorite Movie お気に入り リンク 鑑賞済み映画 リンク 未鑑賞映画 お気に入り
シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ アイアンマン3 - シェー
ン・ブラック バック・トゥ・ザ・フューチャー - ロバート・ゼメキス インディペンデンス・デイ - ロー
ランド・エメリッヒ スター・ウォーズ エピソード2/クローンの攻撃 - ジョージ・ルーカス」
音声読み上げ
「リンク keita's Favorite Movie お気に入り リンク 鑑賞済み映画 リンク 未鑑賞映画 お気に入り
シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ アイアンマン3 - シェー
ン・ブラック バック・トゥ・ザ・フューチャー - ロバート・ゼメキス インディペンデンス・デイ - ロー
ランド・エメリッヒ スター・ウォーズ エピソード2/クローンの攻撃 - ジョージ・ルーカス」
音声読み上げ
イミフ
今見たのはこのサイト
目が見えない状態を想定したUI設計
CSSで見た目が整えられ
晴眼者には構造が理解できる
コンピュータには理解できない
<div class="h1"><a href="index.html">keita's Favorite Movie</a></div>
<div class="nav">
<span class="here">お気に入り</span>
<a href=“done.html”>鑑賞済み映画</a>
<a href=“schedule.html">未鑑賞映画</a>
</div>
<div class="contents">
<div class="title">お気に入り</div>
<div class="list">シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ</div>
<div class="list">アイアンマン3 - シェーン・ブラック</div>
<div class="list">バック・トゥ・ザ・フューチャー - ロバート・ゼメキス</div>
<div class="list">インディペンデンス・デイ - ローランド・エメリッヒ</div>
<div class="list-last">スター・ウォーズ エピソード2/クローンの攻撃 - ジョージ・ルーカス</div>
</div>
リンク:keita's Favorite Movie お気に入り リンク:鑑賞済み映画 リンク:未鑑賞映画 お気に
入りシビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソアイアンマン3 -
シェーン・ブラックバック・トゥ・ザ・フューチャー - ロバート・ゼメキスインディペンデンス・デイ
- ローランド・エメリッヒスター・ウォーズ エピソード2/クローンの攻撃 - ジョージ・ルーカス
コンピュータにはこう見える
表だけ整えられたハリボテ
文字列を構造化する
•さっきのサイトはただ文字列が並んでいるだけ
•音声で読み上げるためには、裏側も構造化されHTML
文書として成り立っていなければならない
•サイトが持つ意味をコンピュータが理解できるように
なる、これをセマンティックWebと呼ぶ
構造化後のコード
<h1><a href="index.html">Keita's Favorite Movie</a></h1>
<nav>
<ul class="nav">
<li><span class="here">お気に入り</span></li>
<li><a href="done.html">鑑賞済み映画</a></li>
<li><a href="schedule.html">未鑑賞映画</a></li>
</ul>
</nav>
<section>
<div class="contents">
<h2>お気に入り</h2>
<ul>
<li>シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ</li>
<li>アイアンマン3 - シェーン・ブラック</li>
    ~省略~
</ul>
</div>
</section>
[題名/リンク:keita’s Favorite Movie]
• ナビゲーション
• お気に入り
• リンク:鑑賞済み映画
• リンク:未鑑賞映画
[お気に入りの章]
• シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ
• アイアンマン3 - シェーン・ブラック
• 以下省略
コンピュータにはこう見える
「見出しレベル1、アクセスされました、リンク、Keita's Favorite Movie」

「リスト3項目」
「お気に入り、グループ」
「お気に入り」
「鑑賞済み映画、リンク、グループ」
「リンク、鑑賞済み映画」
「未鑑賞映画、リンク、グループ」
「リンク、未鑑賞映画」
「見出しレベル2、お気に入り」
「リスト3項目」
「シビル・ウォー/キャプテン・アメリカ - アンソニー(以下省略)」
音声読み上げ
構造化されると
構造が伝わるように読み上げられる
しかし
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
jsで実装されている
サブメニューのことを
読み上げてくれない
見た目と読み上げが一致しない
リッチなコンテンツを含むと、
HTMLを正しく記述するだけでは
対応しきれない
そこで
WAI-ARIA
WAI-ARIA(ウェイ・アリア)
• 各要素の「Roles (役割)」「States (状態)」
「Properties (特性)」を伝達できる
• 動的なサイトなどリッチコンテンツの場合も見た目だけで
なく構造的に意味を持てるようになる
• コンピュータがページをより正確に認識できる
•aria-haspopup属性など、HTMLに属性を追加し利用する
[出典] 2014年4月15日 (2014年10月13日 更新) WAI-ARIA の基礎知識 ̶ Website Usability Info ( http://website-usability.info/2014/04/entry_140415.html )
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
<div class="dropdown">
<a href="#" class="btn -default js-dropdown">Button</a>
<div class="dropdown-content">
<ul class="menu">
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
</li>
</ul>
</div>
</div>
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
<div class="dropdown">
<a href="#" class="btn -default js-dropdown”
aria-haspopup="true" aria-expanded="false">Button</a>
<div class="dropdown-content">
<ul class="menu">
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
</li>
</ul>
</div>
</div>
この二つの属性はなに?
• aria-haspopup属性
• ポップアップメニューが存在するかどうかを示す
• true指定でポップアップが存在することを示す
• aria-expanded属性
• 要素の開閉の状態を示す
• true(開いている状態)、false(閉じている状態)を示す
[出典] 2016年9月時点 WAI-ARIA | HTMLリファレンス(http://www.webcreativepark.net/html/wai-aria/)
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
WAI-ARIAの属性を指定し
サブメニューの存在を
教えてもらえるようになった
所感
知らなすぎる
• 日常的にスクリーンリーダーを使う人たちの傾向を
知らない
• Win含むメジャーどころの確認環境を整える必要
• リーダーとブラウザによる差が掌握できていない
• 今後情報を集めていきたい
まとめ
「画像文字をやめたから、
視覚障害者にも優しい設計に
なったと言えます」
画像文字をやめただけでは
対応できたとは言えない
目が見えない状態を想定したUI設計
• サイトのHTMLの文法を正しく。意味とタグの一致
• Webの標準規格(Web標準)に従う
• WAI-ARIAの導入
• スクリーンリーダーによる読み上げテスト
君もペパボで働かないか?
福岡支社勤務のデザイナーを急募中!
https://pepabo.com/recruit/career/#jobs

More Related Content

What's hot

エンジニアの立場で考えるUXデザイン
エンジニアの立場で考えるUXデザインエンジニアの立場で考えるUXデザイン
エンジニアの立場で考えるUXデザイン
Masaya Ando
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Yoshiki Hayama
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
 
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
 
”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」
Masaya Ando
 
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよUXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
Masaya Ando
 
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
Mikihiro Fujii
 
サービスデザインとUXDそしてデザインプロセス
サービスデザインとUXDそしてデザインプロセスサービスデザインとUXDそしてデザインプロセス
サービスデザインとUXDそしてデザインプロセス
Masaya Ando
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
Yoshiki Hayama
 
UXデザイン概論 2019
UXデザイン概論 2019UXデザイン概論 2019
UXデザイン概論 2019
Masaya Ando
 
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。 チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
Yoshiki Hayama
 
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
Yoshiki Hayama
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
 
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERメンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
Yoshiki Hayama
 
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビューユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
Masaya Ando
 
ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?
ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?
ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?
Yoshiki Hayama
 
顧客体験のデザイン〜そのサービスに“願い”はあるか?
顧客体験のデザイン〜そのサービスに“願い”はあるか?顧客体験のデザイン〜そのサービスに“願い”はあるか?
顧客体験のデザイン〜そのサービスに“願い”はあるか?
Masaya Ando
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
Yoshiki Hayama
 
パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21
パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21
パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21
Takashi Iba
 

What's hot (20)

エンジニアの立場で考えるUXデザイン
エンジニアの立場で考えるUXデザインエンジニアの立場で考えるUXデザイン
エンジニアの立場で考えるUXデザイン
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
 
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
 
”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」
 
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよUXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
 
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
 
サービスデザインとUXDそしてデザインプロセス
サービスデザインとUXDそしてデザインプロセスサービスデザインとUXDそしてデザインプロセス
サービスデザインとUXDそしてデザインプロセス
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
 
UXデザイン概論 2019
UXデザイン概論 2019UXデザイン概論 2019
UXデザイン概論 2019
 
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。 チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
 
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
 
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERメンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
 
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビューユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
 
ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?
ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?
ウェブ/アプリのUX改善 データ分析と定性分析の絶妙なバランスは?
 
顧客体験のデザイン〜そのサービスに“願い”はあるか?
顧客体験のデザイン〜そのサービスに“願い”はあるか?顧客体験のデザイン〜そのサービスに“願い”はあるか?
顧客体験のデザイン〜そのサービスに“願い”はあるか?
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
 
パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21
パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21
パターン・ランゲージとは何か(井庭崇レクチャー)2021/03/21
 

Viewers also liked

HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Naoki Matsuda
 
ワークショップ間違いさがし - Spot the Difference 2016
ワークショップ間違いさがし - Spot the Difference 2016ワークショップ間違いさがし - Spot the Difference 2016
ワークショップ間違いさがし - Spot the Difference 2016
milk54
 
アクセシビリティはじめました
アクセシビリティはじめましたアクセシビリティはじめました
アクセシビリティはじめました
Yuichi Sugiyama
 
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アクセシビリティチェックのポイント
Nozomi Sawada
 
JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介
JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介
JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介
Web Accessibility Infrastructure Committee (WAIC)
 
ココが変わった!JIS X 8341-3:2016 徹底解説
ココが変わった!JIS X 8341-3:2016 徹底解説ココが変わった!JIS X 8341-3:2016 徹底解説
ココが変わった!JIS X 8341-3:2016 徹底解説
Web Accessibility Infrastructure Committee (WAIC)
 
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudyなんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
POStudy
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
 
Nishimoto110126 v15-light2
Nishimoto110126 v15-light2Nishimoto110126 v15-light2
Nishimoto110126 v15-light2
Takuya Nishimoto
 
UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17
Keiichi Takayama
 
特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】
特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】
特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】
Asuka Kadowaki
 
2.5 Dimensional Lateral Force Display
2.5 Dimensional Lateral Force Display2.5 Dimensional Lateral Force Display
2.5 Dimensional Lateral Force Display
Saga Satoshi
 
研究室訪問2010
研究室訪問2010研究室訪問2010
研究室訪問2010
cs15
 
Web prof onpar
Web prof onparWeb prof onpar
Web prof onpar
kw412608
 
特許取得した3D柔軟触覚センサの開発理由と手法
特許取得した3D柔軟触覚センサの開発理由と手法特許取得した3D柔軟触覚センサの開発理由と手法
特許取得した3D柔軟触覚センサの開発理由と手法
Asuka Kadowaki
 
タッチエンス会社説明
タッチエンス会社説明タッチエンス会社説明
タッチエンス会社説明
Touchence
 
UIST2016の舞台裏 (UIST勉強会講演1/2)
UIST2016の舞台裏 (UIST勉強会講演1/2)UIST2016の舞台裏 (UIST勉強会講演1/2)
UIST2016の舞台裏 (UIST勉強会講演1/2)
Masa Ogata
 
クロスモーダル設計調査分科会設立の狙い
クロスモーダル設計調査分科会設立の狙いクロスモーダル設計調査分科会設立の狙い
クロスモーダル設計調査分科会設立の狙い
Takuji Narumi
 
Smith waterman algorithm parallelization
Smith waterman algorithm parallelizationSmith waterman algorithm parallelization
Smith waterman algorithm parallelization
Mário Almeida
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
Naoyuki Matsumoto
 

Viewers also liked (20)

HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
 
ワークショップ間違いさがし - Spot the Difference 2016
ワークショップ間違いさがし - Spot the Difference 2016ワークショップ間違いさがし - Spot the Difference 2016
ワークショップ間違いさがし - Spot the Difference 2016
 
アクセシビリティはじめました
アクセシビリティはじめましたアクセシビリティはじめました
アクセシビリティはじめました
 
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アクセシビリティチェックのポイント
 
JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介
JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介
JIS X 8341-3:2016 への対応を進めるためのガイドラインの紹介
 
ココが変わった!JIS X 8341-3:2016 徹底解説
ココが変わった!JIS X 8341-3:2016 徹底解説ココが変わった!JIS X 8341-3:2016 徹底解説
ココが変わった!JIS X 8341-3:2016 徹底解説
 
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudyなんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
 
Nishimoto110126 v15-light2
Nishimoto110126 v15-light2Nishimoto110126 v15-light2
Nishimoto110126 v15-light2
 
UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17
 
特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】
特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】
特許取得した3D柔軟触覚センサの応用例【インタラクティブな製作物】
 
2.5 Dimensional Lateral Force Display
2.5 Dimensional Lateral Force Display2.5 Dimensional Lateral Force Display
2.5 Dimensional Lateral Force Display
 
研究室訪問2010
研究室訪問2010研究室訪問2010
研究室訪問2010
 
Web prof onpar
Web prof onparWeb prof onpar
Web prof onpar
 
特許取得した3D柔軟触覚センサの開発理由と手法
特許取得した3D柔軟触覚センサの開発理由と手法特許取得した3D柔軟触覚センサの開発理由と手法
特許取得した3D柔軟触覚センサの開発理由と手法
 
タッチエンス会社説明
タッチエンス会社説明タッチエンス会社説明
タッチエンス会社説明
 
UIST2016の舞台裏 (UIST勉強会講演1/2)
UIST2016の舞台裏 (UIST勉強会講演1/2)UIST2016の舞台裏 (UIST勉強会講演1/2)
UIST2016の舞台裏 (UIST勉強会講演1/2)
 
クロスモーダル設計調査分科会設立の狙い
クロスモーダル設計調査分科会設立の狙いクロスモーダル設計調査分科会設立の狙い
クロスモーダル設計調査分科会設立の狙い
 
Smith waterman algorithm parallelization
Smith waterman algorithm parallelizationSmith waterman algorithm parallelization
Smith waterman algorithm parallelization
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
 

Similar to 目が見えない状態を想定したUI設計

我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのか我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのか
wizstargaer
 
リアルタイムにデータ分析してWebサービスの面白さを伝えたい
リアルタイムにデータ分析してWebサービスの面白さを伝えたいリアルタイムにデータ分析してWebサービスの面白さを伝えたい
リアルタイムにデータ分析してWebサービスの面白さを伝えたい
x1 ichi
 
デブサミでLiveコーディングしてきた - きよくらならみ
デブサミでLiveコーディングしてきた - きよくらならみデブサミでLiveコーディングしてきた - きよくらならみ
デブサミでLiveコーディングしてきた - きよくらならみ
WPArch
 
GUI何処行ったんDocker
GUI何処行ったんDockerGUI何処行ったんDocker
GUI何処行ったんDocker
Kazuhito Miura
 
The way to the timeless way of programming
The way to the timeless way of programmingThe way to the timeless way of programming
The way to the timeless way of programming
Shintaro Kakutani
 
DevLOVE2009 開発以外に大事な4つのこと
DevLOVE2009 開発以外に大事な4つのことDevLOVE2009 開発以外に大事な4つのこと
DevLOVE2009 開発以外に大事な4つのこと
Yusuke Suzuki
 
20120920中間発表2
20120920中間発表220120920中間発表2
20120920中間発表2
Hisashi Imai
 
20140419【qpstudy】OSとNW設計の勘所
20140419【qpstudy】OSとNW設計の勘所20140419【qpstudy】OSとNW設計の勘所
20140419【qpstudy】OSとNW設計の勘所
Yukitaka Ohmura
 
ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」
ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」
ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」
koress project
 

Similar to 目が見えない状態を想定したUI設計 (9)

我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのか我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのか
 
リアルタイムにデータ分析してWebサービスの面白さを伝えたい
リアルタイムにデータ分析してWebサービスの面白さを伝えたいリアルタイムにデータ分析してWebサービスの面白さを伝えたい
リアルタイムにデータ分析してWebサービスの面白さを伝えたい
 
デブサミでLiveコーディングしてきた - きよくらならみ
デブサミでLiveコーディングしてきた - きよくらならみデブサミでLiveコーディングしてきた - きよくらならみ
デブサミでLiveコーディングしてきた - きよくらならみ
 
GUI何処行ったんDocker
GUI何処行ったんDockerGUI何処行ったんDocker
GUI何処行ったんDocker
 
The way to the timeless way of programming
The way to the timeless way of programmingThe way to the timeless way of programming
The way to the timeless way of programming
 
DevLOVE2009 開発以外に大事な4つのこと
DevLOVE2009 開発以外に大事な4つのことDevLOVE2009 開発以外に大事な4つのこと
DevLOVE2009 開発以外に大事な4つのこと
 
20120920中間発表2
20120920中間発表220120920中間発表2
20120920中間発表2
 
20140419【qpstudy】OSとNW設計の勘所
20140419【qpstudy】OSとNW設計の勘所20140419【qpstudy】OSとNW設計の勘所
20140419【qpstudy】OSとNW設計の勘所
 
ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」
ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」
ハードに強いWebエンジニアになる 「koress式ネットデバイス企画制作」
 

目が見えない状態を想定したUI設計