SlideShare a Scribd company logo
1 of 66
Download to read offline
すべての人に
知っておいて
ほしい
VoiceOverの
基本原則
と、コラボ特別編 Webクリエイター新年会 featuringまぼろし
Powered by 株式会社クリーク・アンド・リバー社
HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わったあと、
2014年にまぼろしに入社。
主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』(共著、アスキー・メディアワーク
ス)、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』(共著、
MdN)など。
Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。
個人ブログ「Web Design KOJIKA17」を運営。
久保 知己
株式会社まぼろし
マークアップエンジニア
マークアップのセッション
目的: 興味を持ってもらう
VoiceOver
スクリーンリーダー
(画面読み上げソフト)
http://www.apple.com/jp/accessibility/osx/voiceover/
http://www.apple.com/jp/accessibility/ios/voiceover/
http://www.apple.com/jp/accessibility/watch/
どのくらい利用されているのか?
http://webaim.org/
http://webaim.org/projects/screenreadersurvey6/
http://webaim.org/projects/screenreadersurvey6/
http://webaim.org/projects/screenreadersurvey6/
http://webaim.org/projects/screenreadersurvey6/
VoiceOverの操作・機能
OS X編
VoiceOverの入/切
⌘F5
VoiceOverの操作・機能(OS X)
• キーボード操作
• クイックナビ
• スクリーンカーテン
• トラックパッドコマンダー
トラックパッドコマンダー
システム環境設定 -> アクセシビリティ -> VoiceOverユーティリティ
トラックパッドコマンダーの基本操作: 1
• ページ全体を読み上げる

2本指で、上方向にスワイプ

• 現在位置から読み上げを開始する

2本指で、下方向にスワイプ

• 読み上げを停止する

2本指で、タップ
トラックパッドコマンダーの基本操作: 2
• Webローターを操作

2本指で、時計回り/反時計回りに回転

• Webローターの項目に移動

1本指で、上下方向にスワイプ

• クリック操作

1本指で、ダブルタップ
トラックパッドコマンダー
トラックパッドコマンダーは
操作方法を6つ覚えるだけ
スクリーンリーダーを
なぜ使うのか?
2つのHTMLを
VoiceOverに読んでもらう
HTMLを読ませてみる A
HTMLを読ませてみる B
見た目は同じなのに
読み方が違う
HTMLソース A
<h1>Heading</h1>
<p>lorem</p>
<h2>Heading 2</h2>
<ul>
<li><a href="">Lorem ipsum dolor.</a></li>
<li>Blanditiis, id, eum.</li>
<li>Velit ad, hic.</li>
</ul>
HTMLソース B
<div class="h1">Heading</div>
<div class="p">lorem</div>
<div class="h2">Heading 2</div>
<div class="ul">
<div><a href="">Lorem ipsum dolor.</a></div>
<div>Blanditiis, id, eum.</div>
<div>Velit ad, hic.</div>
</div>
HTMLの要素を
スクリーンリーダーが
読み上げている?
HTMLの要素は
ARIAと紐付いている
アクセシブルな Web アプリケーションやウィジェットの概要 - Accessibility | MDN
W3C の Web Accessibility Initiative から生まれた WAI-ARIA こと Accessible Rich
Internet Applications 仕様は、スクリーンリーダーのような支援技術が必要とする、欠
けている意味を追加する手段です。ARIA はマークアップに特別な属性を追加することで、
開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な
Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコント
ロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた
UI ウィジェットの動作を示す役割や状態を与えます。
ARIA
http://www.w3.org/TR/html-aria/
http://www.w3.org/TR/html-aria/
http://www.w3.org/TR/html-aria/
要素の性質を変えてみる
div要素にロール属性を追加する
<div>
見出し
</div>
div要素にロール属性を追加する
<div role="heading">
見出し
</div>
div要素にロール属性を追加する
<div role="heading" aria-level="1">
見出し
</div>
HTMLを読ませてみる (見出し)
HTML5の要素とARIA
<header>
<div role="banner">
<footer>
<div role="contentinfo">
<article>
<div role="article">
<main>
<div role="main">
普通にマークアップすれば
ARIAと紐付く
WAI-ARIAの例
http://getbootstrap.com/
ハンバーガーメニューのマークアップ
<button type="button">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
</button>
ハンバーガーメニューのマークアップ
<button type="button">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
<span class="hidden-text">メニュー</span>
</button>
伝わるけど
もう少しスマートに
ハンバーガーメニューのマークアップ
<button type="button">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
</button>
ハンバーガーメニューのマークアップ
<button type="button" aria-label="メニュー">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
</button>
HTMLを読ませてみる (メニュー)
テキストブラウザで見ると
テキストブラウザ
要素の性質を考えて利用する
さらにWAI-ARIAを利用すれば
• メニューが閉じているのか、開いているのか伝えられる
• タブやダイアログなどの状況を伝えられる
• 特定の要素を支援技術に「伝達しない」表現も可能
支援技術を使ってみることで
マークアップの幅が広がる
まとめ
VoiceOver
• Apple社製のスクリーンリーダー
• 2015年のWebAIMの調査では、モバイルスクリーンリーダーの
56.7%のユーザーがVoiceOverを利用
• トラックパッドコマンダーの操作方法を覚えれば、

OS XやiOSでも操作できる
マークアップ
• マークアップによってスクリーンリーダーの読み方が変わる
• スクリーンリーダーの読み方が変わるのは、HTMLの要素と
ARIAが紐付いているため
• HTMLをちゃんと書こう
• WAI-ARIAを学ぶと、もっと色々できる
VoiceOverを使いこなすべきか?
Webデザイナーが
HTMLとCSSを知ってるといいよね
ぐらいのノリから
始めればいいと思う
「
」
VoiceOverが使えるのは
Apple社製品のみ
Windowsユーザーは
NVDA がおすすめ
https://www.nvda.jp/
興味をもって
いただけましたか?
ありがとうございました

More Related Content

What's hot

Yat-wbnara201602
Yat-wbnara201602Yat-wbnara201602
Yat-wbnara201602YAT blog
 
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディングウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディングHidekazu Ishikawa
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015知己 久保
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようMasayuki Abe
 
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想Hidekazu Ishikawa
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びSeiko Kuchida
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoHidekazu Ishikawa
 
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Hidekazu Ishikawa
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之schoowebcampus
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセットSatoru MURAKOSHI
 
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015Hiroki Saiki
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3Yasuji Takase
 
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向Shumpei Shiraishi
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~Horiguchi Seito
 
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインDreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインyoshikawa_t
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきことYu Morita
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
 
サーバの種別を理解しよう
サーバの種別を理解しようサーバの種別を理解しよう
サーバの種別を理解しようHiroyuki Ogawa
 
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜Saori Okayama
 

What's hot (20)

Yat-wbnara201602
Yat-wbnara201602Yat-wbnara201602
Yat-wbnara201602
 
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディングウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
 
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
 
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
 
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインDreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
サーバの種別を理解しよう
サーバの種別を理解しようサーバの種別を理解しよう
サーバの種別を理解しよう
 
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
 

Viewers also liked

今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~知己 久保
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作Yasuhisa Hasegawa
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法Futomi Hatano
 
[CEDEC2012]ネットワークゲームの不正行為と対策
[CEDEC2012]ネットワークゲームの不正行為と対策[CEDEC2012]ネットワークゲームの不正行為と対策
[CEDEC2012]ネットワークゲームの不正行為と対策gree_tech
 
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫Yuta Imai
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようNozomi Sawada
 

Viewers also liked (7)

今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
 
アクセシビリティ方針の策定と試験結果の公開におけるポイント
アクセシビリティ方針の策定と試験結果の公開におけるポイントアクセシビリティ方針の策定と試験結果の公開におけるポイント
アクセシビリティ方針の策定と試験結果の公開におけるポイント
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
[CEDEC2012]ネットワークゲームの不正行為と対策
[CEDEC2012]ネットワークゲームの不正行為と対策[CEDEC2012]ネットワークゲームの不正行為と対策
[CEDEC2012]ネットワークゲームの不正行為と対策
 
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
 

Similar to すべての人に知っておいてほしい VoiceOverの基本原則

福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるためにMiho Yamamori
 
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門loftwork
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」xyz corporation
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdfssuser6f5294
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方kenji goto
 
javascriptの基礎
javascriptの基礎javascriptの基礎
javascriptの基礎Masayuki Abe
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座光利 吉田
 
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツTomonori Watanabe
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]Daisuke Yamazaki
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組みYuya Toida
 
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱Yuya Toida
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013Keisuke Todoroki
 
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXWEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXHiromitsu Miyanishi
 
テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012Hidekazu Ishikawa
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflowmasaaki komori
 
こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大Takafumi Tsuda
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015Naoki Yamada
 

Similar to すべての人に知っておいてほしい VoiceOverの基本原則 (20)

福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 
javascriptの基礎
javascriptの基礎javascriptの基礎
javascriptの基礎
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
 
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
 
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
 
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXWEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUX
 
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
 
テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflow
 
こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大
 
Sixapart day-2012-ideamans
Sixapart day-2012-ideamansSixapart day-2012-ideamans
Sixapart day-2012-ideamans
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
 
Web
WebWeb
Web
 

Recently uploaded

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 

Recently uploaded (8)

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 

すべての人に知っておいてほしい VoiceOverの基本原則