クリックするとご利用いただけます（別ウィンドウで開きます）。ただし、色覚シミュレーターにSVGフィルターの技術を活用しているため、2012年7月時点で想定通り動作することが確認できたFirefox12以降でなければ動作しないようにしています。Firefox以外で本ページをご覧の方は、下記URLをFirefoxで開いてください。
無償でお試しいただくことが可能な、CSS3で開発するWeb画面の色と形の作成を支援するツール（CSS3ジェネレーター）です。主な特徴は以下の通りです。利用前に、利用上の注意をお読みください。
CSS3によって、画像を使わなくてもグラデーション、影、光彩、文字の縁取り、角丸などの表現が可能になります。一方で、デザイナーが画像で作成した表現を、CSS3で再現するための労力は増すでしょう。また、W3C(World Wide Web Consortium)が勧告するWCAG 2.0やJIS X8341-3の中では、文字と背景の相対輝度の比を4.5以上にするように規定されています(*1)。グラデーションや影を付けた場合に、この規定を守れているかどうかを確認する作業に要する労力は多大なるものとなります。そのため本ツール(CSS3ジェネレーター)は、以下を目的に公開しています。皆様のご意見をお待ちしています。
ボタンの色を作成する場合を例に、使い方を説明します。
まず、画面左側のメニューからデザインしたいUI要素を選択します。そうすると画面右側に、選択されたUI要素で作成されたパターンがリスト表示されます(*2,*3)。リストの表示形式は、付けた名前、文字と背景の輝度比、更新日が確認できる「一覧表示」と、作成した色が一覧できる「サムネイル」とを切り替えられます。
新規に作成する場合は画面右下の「新規作成」ボタンを、既存のパターンをもとに編集する場合は、もとにするパターンをリストから選択した後、「詳細情報／編集」ボタンを押します。
例えばボタンの場合、「ボタンの枠線」「ボタンの装飾」「文字の装飾」の有無を選択することが可能です。「背景」はボタンが置かれる背景を指し、チェックを外すことはできません。
チェックをつけた要素ごとにカラーパレットが表示されますので、それぞれ色を選択します。「グラデーション」タブを選択すると、グラデーションを作成することができます。各パレットでは、色覚特性に依存せず文字が読みやすいか（あるいは色が識別できるか）が「○」「×」「／」「？」によって示されます。
プレビューエリアには、（画像ではなく）HTMLとCSSによるブラウザの描画結果が示されます。各状態ごとの色は、状態タブを切り替えて確認／作成してください。
色覚シミュレーターでは、色覚特性別に「どう見えるか」をシミュレーションすることができます。色覚特性に依存せず識別できるかどうかを確認するには、「輝度比近似グレースケール」を選択してください。すると、元の画像の各ピクセルの相対輝度を近似して変換したグレースケールが示されます。「輝度比近似グレースケール」で見やすければ、色覚特性に依存せず見やすいといえます。
既存のパターンをもとに色を作成している場合は「上書き保存」することができますが、上書きせずに新規に作成したい場合は「名前を付けて保存」を押してください。リストに追加されます。
「コードを表示」ボタンを押すと、作成した各状態の色のコードが別ウインドウで表示されます。
ツール上でのプレビュー結果は、あくまでも、そのとき用いているブラウザ（2012年7月時点ではFirefoxのみ対応）での描画結果です。他のブラウザでどう表示されるかを確認する場合、まずは「コードを表示」ボタンを押すと表示されるコードをコピーしてください。次に下記URLを確認したいブラウザで開くと表示されるテキストエリアに、コピーしたコードを貼り付け、「表示確認」ボタンを押してください。
CSS3で表示する画面の色作成支援ツール（CSS3ジェネレーター）はご意見を収集するためのものであり、研究段階のものです。従って不具合が生じる場合がありますがご容赦ください。なお、ご意見、ご要望は「お問い合わせフォーム」からお願いします。
2012年7月時点で、想定通りに動くことを確認した環境は以下の通りです。
| OS | Windows 7, Mac OS X 10.7.4 |
|---|---|
| ブラウザ | Firefox12,13 |
記載されている会社名、製品名等は、該当する各社の商標または登録商標です。
制作者は下記の事業所ならびにグループ会社です。
2012年7月20日掲載
