ページの本文へ

Hitachi

企業情報研究開発

起動ボタン

クリックするとご利用いただけます(別ウィンドウで開きます)。ただし、色覚シミュレーターにSVGフィルターの技術を活用しているため、2012年7月時点で想定通り動作することが確認できたFirefox12以降でなければ動作しないようにしています。Firefox以外で本ページをご覧の方は、下記URLをFirefoxで開いてください。

/rd/design/universaldesign/products/business/
assistance_for_color_generation/product.html

概要

無償でお試しいただくことが可能な、CSS3で開発するWeb画面の色と形の作成を支援するツール(CSS3ジェネレーター)です。主な特徴は以下の通りです。利用前に、利用上の注意をお読みください。

  • 作成した色と形を登録すると、次にブラウザを立ち上げたときも利用可能です(注意事項)。
  • 作成した色と形のHTMLとCSSのコードを表示可能で、それらを各ブラウザがどう表示するかを確認するためのページもあります。
  • 作成した色を色覚特性別に変換して示すことができます。
  • 作成した色が色覚の特性に依存せず判別できるかを、輝度比を近似したグレースケールに変換された画像で確認することができます。

背景と目的

CSS3によって、画像を使わなくてもグラデーション、影、光彩、文字の縁取り、角丸などの表現が可能になります。一方で、デザイナーが画像で作成した表現を、CSS3で再現するための労力は増すでしょう。また、W3C(World Wide Web Consortium)が勧告するWCAG 2.0やJIS X8341-3の中では、文字と背景の相対輝度の比を4.5以上にするように規定されています(*1)。グラデーションや影を付けた場合に、この規定を守れているかどうかを確認する作業に要する労力は多大なるものとなります。そのため本ツール(CSS3ジェネレーター)は、以下を目的に公開しています。皆様のご意見をお待ちしています。

  • CSS3普及(=Webコンテンツの質の向上)の促進
  • 色覚特性に依存せず識別できるかの確認方法として「輝度比近似グレースケール」の提案
*1
色覚特性に依存せず識別できるようにするための規定です。

使い方

ボタンの色を作成する場合を例に、使い方を説明します。

デザインするUI要素を選択

まず、画面左側のメニューからデザインしたいUI要素を選択します。そうすると画面右側に、選択されたUI要素で作成されたパターンがリスト表示されます(*2,*3)。リストの表示形式は、付けた名前、文字と背景の輝度比、更新日が確認できる「一覧表示」と、作成した色が一覧できる「サムネイル」とを切り替えられます。

*2
作成したパターンはHTML5のlocalStorageの機能を用いてクライアントに保存しています。localStorageを削除すると消えてしまいますのでご注意ください。Firefoxの場合、cookieを削除すると同時に消えてしまいます(2012年7月時点)。
*3
デフォルトで登録されているパターンは編集や削除が可能ですが、localStorageを削除すれば元に戻ります。

新規に作成するか、既存のパターンをもとに作成するかを選択

新規に作成する場合は画面右下の「新規作成」ボタンを、既存のパターンをもとに編集する場合は、もとにするパターンをリストから選択した後、「詳細情報/編集」ボタンを押します。

選択したUI要素の「状態」を選択

状態タブでどの状態をデザインするのかを切り替えられます。例えば押せないボタンの色を作成する場合は「非活性時」のタブを選択してください。

選択したUI要素のうち、どの要素の色をつけるかを選択

例えばボタンの場合、「ボタンの枠線」「ボタンの装飾」「文字の装飾」の有無を選択することが可能です。「背景」はボタンが置かれる背景を指し、チェックを外すことはできません。

各要素の色を選択

チェックをつけた要素ごとにカラーパレットが表示されますので、それぞれ色を選択します。「グラデーション」タブを選択すると、グラデーションを作成することができます。各パレットでは、色覚特性に依存せず文字が読みやすいか(あるいは色が識別できるか)が「○」「×」「/」「?」によって示されます。

プレビューエリアでの色の確認

プレビューエリアには、(画像ではなく)HTMLとCSSによるブラウザの描画結果が示されます。各状態ごとの色は、状態タブを切り替えて確認/作成してください。

色覚シミュレーターでの色の確認

色覚シミュレーターでは、色覚特性別に「どう見えるか」をシミュレーションすることができます。色覚特性に依存せず識別できるかどうかを確認するには、「輝度比近似グレースケール」を選択してください。すると、元の画像の各ピクセルの相対輝度を近似して変換したグレースケールが示されます。「輝度比近似グレースケール」で見やすければ、色覚特性に依存せず見やすいといえます。

色の保存

既存のパターンをもとに色を作成している場合は「上書き保存」することができますが、上書きせずに新規に作成したい場合は「名前を付けて保存」を押してください。リストに追加されます。

コードの表示

「コードを表示」ボタンを押すと、作成した各状態の色のコードが別ウインドウで表示されます。

Firefox以外のブラウザでの表示確認

ツール上でのプレビュー結果は、あくまでも、そのとき用いているブラウザ(2012年7月時点ではFirefoxのみ対応)での描画結果です。他のブラウザでどう表示されるかを確認する場合、まずは「コードを表示」ボタンを押すと表示されるコードをコピーしてください。次に下記URLを確認したいブラウザで開くと表示されるテキストエリアに、コピーしたコードを貼り付け、「表示確認」ボタンを押してください。

/rd/design/universaldesign/products/business/
assistance_for_color_generation/rendering.html

利用上の注意

CSS3で表示する画面の色作成支援ツール(CSS3ジェネレーター)はご意見を収集するためのものであり、研究段階のものです。従って不具合が生じる場合がありますがご容赦ください。なお、ご意見、ご要望は「お問い合わせフォーム」からお願いします。

動作環境について

2012年7月時点で、想定通りに動くことを確認した環境は以下の通りです。

動作環境
OS Windows 7, Mac OS X 10.7.4
ブラウザ Firefox12,13

商標について

記載されている会社名、製品名等は、該当する各社の商標または登録商標です。