和歌山大学 システム工学研究科 システム工学部 メディアデザイン

Webチェックツールの紹介:
松延拓生(和歌山大学システム工学部)

開発したツールの紹介

アイトラッキングを利用したウェブユーザビリティ評価ツール

詳細は別ページ(アイトラッキングを利用したWebユーザビリティに関する研究)にて紹介するが,視線位置のコンテンツを特定して,ユーザビリティ評価を支援するツール.ヒートマップによる分析ではなく,コンテンツ単位で注視状況を定量解析できるのが特徴.インタビューを支援する機能もある.

アイトラッキングを利用した意思決定過程解析ツール

眼球運動を分析することでウェブ利用中のユーザの興味の推移を分析することができるツール.UX(ユーザエクスペリエンス)を踏まえたデザインを行う.ウェブコンテンツ単位で注視状況や興味の変化を解析できるため,ウェブアプリケーション,ウェブサービスの情報構造,UIを検討可能.

既存のツールの紹介

 Webサイトを作成する上で有効な様々なツールが公開されている.ここではWeb上で入手・実行可能かつ無償の物を紹介しておく.ただし注意してほしいのは文法のチェックなどは自動化できるが,最終的なユーザビリティは人間がチェックする必要があることである.画像などに代替テキストが用意されているかどうかはチェック出来てもその内容が適切かどうかは自動的にはチェックできない.以上を踏まえて利用すれば制作の補助になるかと思われる.

文法チェック

The W3C Markup Validation Service

URL:http://validator.w3.org/

HTMLチェッカー.URLを指定しHTML,XHTMLの仕様に合致しているかをチェック.有効な場合W3Cの仕様を満たしていることを示すバナーをページに表示できる.最低限このチェックが必要である.

Another HTML-lint gateway

URL:http://www.htmllint.net/

URLもしくはローカルのHTMLファイルを指定するか,HTMLのテキストを入力すると,そのチェック結果と解説をブラウザに表示する.

W3C CSS 検証サービス

URL:http://jigsaw.w3.org/css-validator/

CSSをURLで指定して検証が出来ます。そのチェック結果と解説をブラウザに表示する.

配色チェック

カラー・コントラスト・アナライザー2013J

URL:https://weba11y.jp/tools/cca/index.html

「カラー・コントラスト・アナライザー 2013J」は、色のチェックツールです。前景色と背景色のコントラストをチェックしたり、色覚の違いによる見え方をシミュレーションしたりすることができます。(「エーイレブンワイ」ウェブより引用)

ColorAccess

URL:http://www.vector.co.jp/soft/win95/net/se292407.html

色覚アクセシビリティチェックツール.フリーウェア.Windows用.

カラーコントラストチェッカー

URL:http://www.i-create.jp/accessibility/color-checker.shtml

有限会社アイ・クリエイツが無料で提供しているカラーコントラストのチェックツール. webセーフカラー216色の中から背景色と文字色を選択すると,色覚正常の人,第一色覚障がいの人,第二色覚障がいの人,第三色覚障がいの人のみえ方が表示され,配色についてのチェックを行える.

ColorTester

URL:https://alfasado.net/apps/colortester-ja.html

JIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づき背景色と前景色のコントラストのチェックを行うソフトウェア. macOS (OS X 10.7以降)及びWindows 8.1以降で動作します.

Vischeck

URL:http://www.vischeck.com/vischeck/

色覚障がいの人にはどのように画像が見えるかをシミュレートするための,フォトショップ用プラグイン.

ColorQuest

URL:https://alfasado.net/news/201401091130.html

Mac用の色の名前表示,色の組み合わせチェック,色覚シミュレーションができるソフトウェア.フリーソフト.

ColorDoctor(公開終了)

URL:http://design.fujitsu.com/jp/universal/assistance/index.html

株式会社富士通が無償で提供していたツール.WindowsPCにダウンロードして使用する.色のアクセシビリティをチェックできる.HTMLの表示内容をグレースケールや色覚障がい者がみえるような色,第一色覚障がい(赤),第二色覚障がい(緑), 第三色覚障がい(青)に変換して表示してくれる.Flash等の動画も変換される.

ColorSelector(公開終了)

URL:http://design.fujitsu.com/jp/universal/assistance/index.html

株式会社富士通が無償で提供していたツール.WindowsとMac OSXに対応.ダウンロードして使用する.Webなどで使用する色の組み合わせチェックが可能.

ブラウザ対応チェック

LYNX(テキストブラウザ)

URL:http://lynx-win32-pata.sourceforge.jp/

チェックツールではなくブラウザであるが,ユーザビリティ評価に有効である.このブラウザの特徴は,画像・動画・音声は表示しない,キーボード操作のみ(マウスは使えない),フレーム・テーブル・スタイルシート・各種スクリプトは無効であることである.そのため音声ブラウザを使用しているユーザ,テキスト以外の画像,プラグインなどの技術を用いた表現が無効な環境のユーザ,そういった表現を知覚できないユーザにも内容が十分に伝わるか確認することができる.

NVDA(スクリーンリーダ)

http://sourceforge.jp/projects/nvdajp/(スクリーンリーダNVDA日本語化プロジェクト )

オープンソースのWindows用スクリーンリーダを日本語化したもの。

アクセシビリティチェック

様々なユーザがどのように閲覧しているかを確認するツール.

miChecker

URL:http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

総務省提供のアクセシビリティ評価ツール。V2.0でHTML5 (W3C Recommendation 28 October 2014) への対応,JIS X 8341-3:2016への対応,各種付属文書の更新が行われた。

Lighthouse

URL:chromeウェブストア(Lighthouse)

GoogleChromeの拡張機能

Googleが提供している拡張機能でいろんな分析ができますがアクセシビリティのチェックも可能です.

aViewer 2013日本語版

URL:https://weba11y.jp/tools/aviewer/

「aViewer 2013」は、アクセシビリティAPIの検証ツールです。主に、Webアプリケーションを開発するエンジニア/プログラマを対象にしたツールで、オブジェクト/コンポーネントのアクセシビリティ情報をチェックできます。(「エーイレブンワイ」ウェブより引用)

Web Accessibility Toolbar 2012J

URL:https://weba11y.jp/tools/wat/

HTMLがアクセシブルか判断するためのInternet Explorer専用のツールバー CSSの無効化,ALT属性値の表示,グレースケースへの変換,見出し箇所の表示,アクセスキー・タブインデックスの表示に対応している. また,シミュレーション機能としてプラグインの無効化,マウスの無効化,各種ユーザに応じた見え方の表示,ダウンロード時間の計算が行える. そのほかにも様々な機能がサポートされている.

Web Developer

URL:https://addons.mozilla.org/ja/firefox/addon/web-developer/

Web制作全般のためのFirefox、Mozilla用のツールバー。OSを問わず利用可能。 CSS,Javascriptなどの無効化,サイズ変更、各種チェックツールなどに対応している. そのほかにも様々な機能がサポートされている.

WebInspector(公開終了)

URL:http://design.fujitsu.com/jp/universal/assistance/index.html

株式会社富士通が無償で提供していたチェックツール.WindowsとMac OSXに対応.ダウンロードして使用する.富士通ウェブ・アクセシビリティ指針2.0版とJIS X 8341-3を選択して診断が可能.チェックに使用したガイドラインも表示できる.