ページの本文へ

Hitachi

企業情報研究開発

RIA(リッチインターネットアプリケーション)の開発現場では、アクセシビリティの確保に工数がかかってしまうという課題があります。そこで日立は、アクセシブルなRIAを効率よく開発できるようにするため、ユーザビリティにも配慮したアクセシブルな汎用UI部品を開発し、社内で共有しています。それらのうち、ドイツ・ユニバーサルデザイン賞2011を受賞したカラーアジャスターについて詳しく紹介します。

English Version

概要

文字や背景、枠線などWeb画面の各要素の色を、色の識別が難しい人が識別可能な配色にカスタマイズ可能にするツールです。色選択部で選択された25色が、色の識別が難しい特性を持つ人が見やすいかどうかという情報と一緒に示されるため、希望する範囲で適切な色を見つけることができます。WebアプリケーションやWebサイトの開発者は、このツールを活用することで適切な配色を簡単に選ぶことが可能です。また、エンドユーザーが画面の配色を自分の好みにカスタマイズ可能にすることもでき、管理者がエンドユーザー各々の画面を一括してカスタマイズする場合でも、適切な配色にすることが可能です。
赤と緑の区別など、色の識別が難しい色覚障がいのあるユーザーは、日本の男性では5%、欧米の男性では7%いると言われており、誰もが見やすい色を用いることは正しく情報を伝える上で大変重要といえます。

本ツールを活用したアプリケーションの例

カラーアジャスタブルアプリケーションのプロトタイプ

ツールを適用した例として、業務アプリケーションのプロトタイプをお試しいただくことが可能です。以下に、色をカスタマイズするための操作手順例を示します。

Silverlightのダウンロード
お試しいただく場合は、Microsoft(マイクロソフト社)のSilverlight®が必要です。Silverlightは、米国Microsoft Corporationの米国およびその他の国における登録商標です。

操作手順例

フロー1の画像

1.画面右上の「色カスタマイズ」ボタンを押下。「色をカスタマイズしたい部分を選んでください」という説明文が表示されるので、「OK」ボタンを押す。

フロー2の画像

2.色をカスタマイズしたい部分を選択する。どこをカスタマイズ可能にするかは、開発者が簡単に指定可能。

フロー3の画像

3.ボタンを選択した場合は、ボタンの文字、ボタンの背景、ボタンの枠線、ボタンが置かれている背景、それぞれ色の識別が難しい特性を持つ人が見やすい色にカスタマイズ可能。

フロー4の画像

4.「同じ背景部分に載っている同じ種類の部品は全て同じ色にしますか?」と聞かれる。ボタンを全て同じ配色にしたければ「はい」と答える。

フロー5の画像

5.前の画面で「いいえ」を選択したときのカスタマイズ結果。